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