From 7be3922636fc16deff6664e77cde08fb5b774432 Mon Sep 17 00:00:00 2001
From: Patrizio Bekerle <patrizio@bekerle.com>
Date: Wed, 31 Mar 2021 09:39:09 +0200
Subject: [PATCH] Add more annotation integration of new ui (#37)

---
 src/dbp-annotation-view.js                | 42 ++++++++++-------------
 src/dbp-official-signature-pdf-upload.js  |  4 +--
 src/dbp-qualified-signature-pdf-upload.js |  4 +--
 src/dbp-signature-lit-element.js          | 10 +++---
 src/utils.js                              | 16 ++++++---
 5 files changed, 39 insertions(+), 37 deletions(-)

diff --git a/src/dbp-annotation-view.js b/src/dbp-annotation-view.js
index 2e165d3..83c41dc 100644
--- a/src/dbp-annotation-view.js
+++ b/src/dbp-annotation-view.js
@@ -6,6 +6,7 @@ import DBPLitElement from '@dbp-toolkit/common/dbp-lit-element';
 import {MiniSpinner, Icon} from '@dbp-toolkit/common';
 import {OrganizationSelect} from "@dbp-toolkit/organization-select";
 import * as commonStyles from '@dbp-toolkit/common/styles';
+import * as utils from './utils';
 
 const i18n = createI18nInstance();
 
@@ -67,7 +68,7 @@ export class AnnotationView extends ScopedElementsMixin(DBPLitElement) {
     }
 
     sendCancelEvent() {
-        const event = new CustomEvent("dbp-annotation-cancel",
+        const event = new CustomEvent("dbp-pdf-annotations-cancel",
             { "detail": {}, bubbles: true, composed: true });
         this.dispatchEvent(event);
     }
@@ -80,7 +81,7 @@ export class AnnotationView extends ScopedElementsMixin(DBPLitElement) {
             "key": this.key,
             "annotationRows": this.annotationRows,
         };
-        const event = new CustomEvent("dbp-annotation-save",
+        const event = new CustomEvent("dbp-pdf-annotations-save",
             { "detail": data, bubbles: true, composed: true });
         this.dispatchEvent(event);
     }
@@ -97,9 +98,7 @@ export class AnnotationView extends ScopedElementsMixin(DBPLitElement) {
 
         let e = this._('#additional-select');
         let type = e?.options[e?.selectedIndex]?.value;
-        let text = e?.options[e?.selectedIndex]?.text;
-
-        this.annotationRows.push({'annotationType': type, 'label': text, 'value': ''});
+        this.annotationRows.push({'annotationType': type, 'value': ''});
 
         // we just need this so the UI will update
         this.queuedFilesAnnotationsCount++;
@@ -118,12 +117,7 @@ export class AnnotationView extends ScopedElementsMixin(DBPLitElement) {
      */
     updateAnnotation(id, annotationKey, value) {
         if (this.annotationRows && this.annotationRows[id]) {
-            if (value != '') {
-                this.annotationRows[id][annotationKey] = value;
-                this.annotationRows[id].value = value;
-            } else { 
-                this.annotationRows[id].value = '';
-            }
+            this.annotationRows[id][annotationKey] = value;
         }
     }
 
@@ -156,11 +150,11 @@ export class AnnotationView extends ScopedElementsMixin(DBPLitElement) {
                 text-overflow: ellipsis;
             }
 
-            div[class*='annotation-gz-block'] select:not(.select) {
+            div.annotation-block.with-organization select:not(.select) {
                 background-size: 4%;
             }
 
-            div[class*='annotation-gz-block']{
+            div.annotation-block.with-organization {
                 display: grid;
                 grid-template-columns: 140px auto auto 42px; 
                 column-gap: .5em;
@@ -171,7 +165,7 @@ export class AnnotationView extends ScopedElementsMixin(DBPLitElement) {
                 margin-right: 2px;
             }
 
-            div[class*='annotation-block'] {
+            div.annotation-block {
                 display: grid;
                 grid-template-columns: 140px auto 42px; 
                 column-gap: .5em;
@@ -218,7 +212,6 @@ export class AnnotationView extends ScopedElementsMixin(DBPLitElement) {
                 border-style: solid;
                 padding: 0.5em;
                 padding-bottom: 1.5em;
-                border-bottom-width: 1px;
                 border-top-width: 0;
             }
 
@@ -270,11 +263,13 @@ export class AnnotationView extends ScopedElementsMixin(DBPLitElement) {
 
        ids.forEach((id) => {
             const data = this.annotationRows[id] || [];
-   
-            if (data.annotationType === 'gz') {
+            const annotationTypeData = utils.getAnnotationTypes(data.annotationType);
+            const name = annotationTypeData.name[this.lang];
+
+            if (annotationTypeData.hasOrganization) {
                 results.push(html`
-                    <div class="annotation-gz-block-${this.key}-${id}">
-                        <label>${data.label}</label>
+                    <div class="annotation-block annotation-block-${this.key}-${id} with-organization">
+                        <label>${name}</label>
                         <dbp-organization-select subscribe="lang:lang,entry-point-url:entry-point-url,auth:auth"
                                 value="${data.organizationNumber}"
                                 @change=${e => { this.updateAnnotation(id, 'organizationNumber', JSON.parse(e.target.getAttribute("data-object")).alternateName); }}></dbp-organization-select>
@@ -287,8 +282,8 @@ export class AnnotationView extends ScopedElementsMixin(DBPLitElement) {
                 `);
             } else {
                 results.push(html`
-                    <div class="annotation-block-${this.key}-${id}">
-                        <label>${data.label}</label>
+                    <div class="annotation-block annotation-block-${this.key}-${id}">
+                        <label>${name}</label>
                         <input type="text" class="input" placeholder="${i18n.t('annotation-view.intended-use-placeholder')}" @change=${e => { this.updateAnnotation(id, 'value', e.target.value); }}>
                         <button class="button close" 
                             title="${i18n.t('annotation-view.remove-field')}" 
@@ -333,9 +328,8 @@ export class AnnotationView extends ScopedElementsMixin(DBPLitElement) {
                     </div>
                     
                     <div class="add-elements">
-                        <select id="additional-select" @change="${() => { this.isSelected = true; } }"> 
-                            <option value="gz" >${i18n.t('annotation-view.type-value-1')}</option>
-                            <option value="vz" >${i18n.t('annotation-view.type-value-2')}</option>
+                        <select id="additional-select" @change="${() => { this.isSelected = true; } }">
+                            ${utils.getAnnotationTypeSelectOptionsHtml('', this.lang)}
                             <option value="" disabled selected>${i18n.t('annotation-view.insert-field')}</option>
                         </select>
                         <button class="button"
diff --git a/src/dbp-official-signature-pdf-upload.js b/src/dbp-official-signature-pdf-upload.js
index 7efb676..4ecb5c3 100644
--- a/src/dbp-official-signature-pdf-upload.js
+++ b/src/dbp-official-signature-pdf-upload.js
@@ -1013,8 +1013,8 @@ class OfficialSignaturePdfUpload extends ScopedElementsMixin(DBPSignatureLitElem
                                     @click="${this.hideAnnotationView}"><dbp-icon name="close" id="close-icon"></dbp-icon></button>
                             </div>
                             <dbp-annotation-view lang="${this.lang}"
-                                             @dbp-annotation-save="${this.processAnnotationEvent}"
-                                             @dbp-annotation-cancel="${this.hideAnnotationView}"></dbp-annotation-view>
+                                             @dbp-pdf-annotations-save="${this.processAnnotationEvent}"
+                                             @dbp-pdf-annotations-cancel="${this.hideAnnotationView}"></dbp-annotation-view>
                         </div>
                         <!-- File upload progress -->
                         <div id="upload-progress" class="field notification is-info ${classMap({hidden: !this.uploadInProgress})}">
diff --git a/src/dbp-qualified-signature-pdf-upload.js b/src/dbp-qualified-signature-pdf-upload.js
index 3f785e7..b3998bc 100644
--- a/src/dbp-qualified-signature-pdf-upload.js
+++ b/src/dbp-qualified-signature-pdf-upload.js
@@ -1131,8 +1131,8 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(DBPSignatureLitEle
                                     @click="${this.hideAnnotationView}"><dbp-icon name="close" id="close-icon"></dbp-icon></button>
                             </div>
                             <dbp-annotation-view lang="${this.lang}"
-                                             @dbp-annotation-save="${this.processAnnotationEvent}"
-                                             @dbp-annotation-cancel="${this.hideAnnotationView}"></dbp-annotation-view>
+                                             @dbp-pdf-annotations-save="${this.processAnnotationEvent}"
+                                             @dbp-pdf-annotations-cancel="${this.hideAnnotationView}"></dbp-annotation-view>
                         </div>
                         <!-- File upload progress -->
                         <div id="upload-progress" class="field notification is-info ${classMap({hidden: !this.uploadInProgress})}">
diff --git a/src/dbp-signature-lit-element.js b/src/dbp-signature-lit-element.js
index 4e6c885..a7113db 100644
--- a/src/dbp-signature-lit-element.js
+++ b/src/dbp-signature-lit-element.js
@@ -194,6 +194,8 @@ export default class DBPSignatureLitElement extends DBPSignatureBaseLitElement {
         const activityNameEN = this.activity.getName('en');
 
         await commonUtils.asyncObjectForEach(annotations, async (annotation) => {
+            console.log("annotation", annotation);
+
             const annotationType = (annotation.annotationType || '').trim();
             const organizationNumber = (annotation.organizationNumber || '').trim();
             const value = (annotation.value || '').trim();
@@ -202,11 +204,11 @@ export default class DBPSignatureLitElement extends DBPSignatureBaseLitElement {
                 return;
             }
 
-            const annotationTypeNames = utils.getAnnotationTypes(annotationType);
+            const annotationTypeData = utils.getAnnotationTypes(annotationType);
 
             pdfFactory = await utils.addKeyValuePdfAnnotationsToAnnotationFactory(
                 pdfFactory, activityNameDE, activityNameEN, this.auth['user-full-name'], annotationType,
-                annotationTypeNames.de, annotationTypeNames.en, organizationNumber, value);
+                annotationTypeData.name.de, annotationTypeData.name.en, organizationNumber, value);
         });
 
         // output the AnnotationFactory as File again
@@ -335,10 +337,10 @@ export default class DBPSignatureLitElement extends DBPSignatureBaseLitElement {
             // Also send annotations to the server so they get included in the signature block
             let userText = [];
             for (let annotation of annotations) {
-                const annotationTypeNames = utils.getAnnotationTypes(annotation['annotationType']);
+                const annotationTypeData = utils.getAnnotationTypes(annotation['annotationType']);
 
                 userText.push({
-                    'description': `${annotationTypeNames.de || ''} / ${annotationTypeNames.en || ''}`,
+                    'description': `${annotationTypeData.name.de || ''} / ${annotationTypeData.name.en || ''}`,
                     'value': `${annotation['value']} (${annotation['organizationNumber']})`
                 });
             }
diff --git a/src/utils.js b/src/utils.js
index 612766a..252ad1e 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -272,12 +272,18 @@ export const addPdfAnnotationToAnnotationFactory = (annotationFactory, author, c
 export const getAnnotationTypes = (key = null) => {
     const types = {
         'bbe3a371': {
-            'de': 'Geschäftszahl',
-            'en': 'Businessnumber',
+            'name': {
+                'de': 'Geschäftszahl',
+                'en': 'Businessnumber',
+            },
+            'hasOrganization': true,
         },
         '85a4eb4c': {
-            'de': 'Verwendungszweck',
-            'en': 'Intended use',
+            'name': {
+                'de': 'Verwendungszweck',
+                'en': 'Intended use',
+            },
+            'hasOrganization': false,
         }
     };
 
@@ -297,7 +303,7 @@ export const getAnnotationTypeSelectOptionsHtml = (selectedKey, lang) => {
     let results = [];
 
     keys.forEach((key) => {
-        const name = annotationTypes[key][lang];
+        const name = annotationTypes[key].name[lang];
         results.push(html`
             <option value="${key}" .selected=${selectedKey === key}>${name}</option>
         `);
-- 
GitLab