Implement annotation type selector (#37)

src/dbp-official-signature-pdf-upload.js

@@ -14,7 +14,7 @@ import JSONLD from "@dbp-toolkit/common/jsonld";
 import {TextSwitch} from './textswitch.js';
 import {FileSink} from "@dbp-toolkit/file-handling";
 import {name as pkgName} from './../package.json';
-import {getPDFSignatureCount} from './utils.js';
+import {getPDFSignatureCount, getAnnotationTypeSelectOptionsHtml} from './utils.js';
 import {send as notify} from '@dbp-toolkit/common/notification';
 import {OrganizationSelect} from "@dbp-toolkit/organization-select";
 import metadata from './dbp-official-signature-pdf-upload.metadata.json';
@@ -794,7 +794,10 @@ class OfficialSignaturePdfUpload extends ScopedElementsMixin(DBPSignatureLitElem
 
             results.push(html`
                 <div class="annotation-block" class="annotation-block-${key}-${id}">
-                    <input type="text" .value="${data.key1}" @change=${e => { this.updateAnnotation(key, id, 'key1', e.target.value); }} placeholder="key1" />
+                    <select class="select" @change=${e => { this.updateAnnotation(key, id, 'key1', e.target.value); }}>
+                        <option value="">${i18n.t('official-pdf-upload.annotation-type-please-select')}</option>
+                        ${getAnnotationTypeSelectOptionsHtml(data.key1, this.lang)}
+                    </select>
                     <dbp-organization-select subscribe="lang:lang,entry-point-url:entry-point-url,auth:auth"
                                              value="${data.key2}"
                                              @change=${e => { this.updateAnnotation(key, id, 'key2', JSON.parse(e.target.getAttribute("data-object")).alternateName); }}></dbp-organization-select>

src/dbp-signature-lit-element.js

@@ -2,7 +2,6 @@ import * as utils from "./utils";
 import {AdapterLitElement} from "@dbp-toolkit/provider/src/adapter-lit-element";
 import JSONLD from "@dbp-toolkit/common/jsonld";
 import * as commonUtils from "@dbp-toolkit/common/utils";
-import {getAnnotationFactoryFromFile} from "./utils";
 
 export class DBPSignatureBaseLitElement extends AdapterLitElement {
     constructor() {
@@ -146,18 +145,19 @@ export default class DBPSignatureLitElement extends DBPSignatureBaseLitElement {
         let pdfFactory = await utils.getAnnotationFactoryFromFile(file);
 
         await commonUtils.asyncObjectForEach(annotations, async (annotation) => {
-            const key1 = annotation.key1.trim();
-            const key2 = annotation.key2.trim();
-            const value = annotation.value.trim();
+            const key1 = (annotation.key1 || '').trim();
+            const key2 = (annotation.key2 || '').trim();
+            const value = (annotation.value || '').trim();
 
             if (key1 === '' || key2 === '' || value === '') {
                 return;
             }
 
-            // TODO: use real key1 names
+            const annotationTypeNames = utils.getAnnotationTypes(key1);
+
             pdfFactory = await utils.addKeyValuePdfAnnotationsToAnnotationFactory(
                 pdfFactory, 'AppNameDE', 'AppNameEN', this.auth['user-full-name'], key1,
-                "Geschaeftszahl", "Businessnumber", key2, value);
+                annotationTypeNames.de, annotationTypeNames.en, key2, value);
         });
 
         // output the AnnotationFactory as File again

src/i18n/de/translation.json

@@ -28,7 +28,8 @@
     "positioning": "Positionierung",
     "confirm-page-leave": "Sind Sie sicher, dass Sie die Seite verlassen wollen? Es stehen signierte Dokumente zum Download bereit.",
     "file-picker-context": "PDF-Dokumente zum Signieren auswählen",
-    "add-annotation-title": "Dem PDF eine Kennzahl hinzufügen"
+    "add-annotation-title": "Dem PDF eine Kennzahl hinzufügen",
+    "annotation-type-please-select": "Bitte wählen Sie einen Typ aus"
   },
   "qualified-pdf-upload": {
     "save-field-label": "{{count}} Datei speichern",

src/i18n/en/translation.json

@@ -28,7 +28,8 @@
     "positioning": "Positioning",
     "confirm-page-leave": "Are you sure you want to leave this page? There are still signed documents ready to be downloaded.",
     "file-picker-context": "Upload PDF-documents to sign",
-    "add-annotation-title": "Add annotation to PDF"
+    "add-annotation-title": "Add annotation to PDF",
+    "annotation-type-please-select": "Please select a type"
   },
   "qualified-pdf-upload": {
     "save-field-label": "Save {{count}} file",

src/utils.js

 import {AnnotationFactory} from '@digital-blueprint/annotpdf/_bundles/pdfAnnotate.js';
+import {html} from "lit-element";
+import {humanFileSize} from "@dbp-toolkit/common/i18next";
 
 /**
  * Finds an object in a JSON result by identifier
@@ -260,3 +262,44 @@ export const addPdfAnnotationToAnnotationFactory = (annotationFactory, author, c
 
     return annotationFactory;
 };
+
+/**
+ * Returns an object with all annotations types or only the values for one type
+ *
+ * @param key
+ * @returns {}
+ */
+export const getAnnotationTypes = (key = null) => {
+    const types = {
+        'bbe3a371': {
+            'de': 'Geschäftszahl',
+            'en': 'Businessnumber',
+        },
+        '85a4eb4c': {
+            'de': 'Andere Zahl',
+            'en': 'Other number',
+        }
+    }
+
+    return key === null ? types : types[key] || {};
+};
+
+/**
+ * Returns the html for the annotation type select
+ *
+ * @returns {*[]} Array of html templates
+ */
+export const getAnnotationTypeSelectOptionsHtml = (selectedKey, lang) => {
+    const annotationTypes = getAnnotationTypes();
+    const keys = Object.keys(annotationTypes);
+    let results = [];
+
+    keys.forEach((key) => {
+        const name = annotationTypes[key][lang];
+        results.push(html`
+            <option value="${key}" .selected=${selectedKey === key}>${name}</option>
+        `);
+    });
+
+    return results;
+};