wip

Author: lazka

package-lock.json

@@ -18,7 +18,7 @@ import metadata from './dbp-official-signature-pdf-upload.metadata.json';
 import {Activity} from './activity.js';
 import {PdfAnnotationView} from './dbp-pdf-annotation-view';
 import * as SignatureStyles from './styles';
-import {TabulatorTable} from '@dbp-toolkit/tabulator-table';
+import { CustomTabulatorTable } from './table-components.js';
 
 class OfficialSignaturePdfUpload extends ScopedElementsMixin(DBPSignatureLitElement) {
     constructor() {
@@ -54,7 +54,7 @@ class OfficialSignaturePdfUpload extends ScopedElementsMixin(DBPSignatureLitElem
             'dbp-icon-button': IconButton,
             'dbp-loading-button': LoadingButton,
             'dbp-pdf-annotation-view': PdfAnnotationView,
-            'dbp-tabulator-table': TabulatorTable,
+            'dbp-tabulator-table': CustomTabulatorTable,
             'dbp-tooltip': TooltipElement,
             'dbp-modal': Modal,
         };
@@ -106,9 +106,9 @@ class OfficialSignaturePdfUpload extends ScopedElementsMixin(DBPSignatureLitElem
 
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
-        this.tableQueuedFilesTable =  /** @type {TabulatorTable} */ (this._('#table-queued-files'));
-        this.tableSignedFilesTable =  /** @type {TabulatorTable} */ (this._('#table-signed-files'));
-        this.tableFailedFilesTable =  /** @type {TabulatorTable} */ (this._('#table-failed-files'));
+        this.tableQueuedFilesTable =  /** @type {CustomTabulatorTable} */ (this._('#table-queued-files'));
+        this.tableSignedFilesTable =  /** @type {CustomTabulatorTable} */ (this._('#table-signed-files'));
+        this.tableFailedFilesTable =  /** @type {CustomTabulatorTable} */ (this._('#table-failed-files'));
     }
 
     async queueFile(file) {

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

@@ -8,7 +8,6 @@ import {getPDFSignatureCount} from './utils';
 import { send } from '@dbp-toolkit/common/notification';
 import { humanFileSize } from '@dbp-toolkit/common/i18next';
 
-
 export default class DBPSignatureLitElement extends BaseLitElement {
     constructor() {
         super();
@@ -1571,11 +1570,20 @@ export default class DBPSignatureLitElement extends BaseLitElement {
         if(this.tableSignedFilesTable) {
             ids.forEach((id) => {
                 const file = this.signedFiles[id];
+
+                let downloadButton = this.tableSignedFilesTable.shadowRoot.createElement('dbp-esign-download-button');
+                downloadButton.setAttribute('subscribe', 'lang');
+                downloadButton.file = file;
+
+                let filenameLabel = this.tableSignedFilesTable.shadowRoot.createElement('dbp-esign-filename-label');
+                filenameLabel.setAttribute('subscribe', 'lang');
+                filenameLabel.file = file;
+
                 let fileData = {
                     index: id,
-                    fileName: `<span id="file-download-${id}">${file.name}</span>`,
+                    fileName: filenameLabel,
                     fileSize: humanFileSize(file.contentSize),
-                    downloadButton: this.getDownloadButtonHtml(id, file),
+                    downloadButton: downloadButton,
                 };
                 tableFiles.push(fileData);
             });

src/dbp-signature-lit-element.js

@@ -0,0 +1,104 @@
+import { LitElement, html, css } from 'lit';
+import { createInstance } from './i18n.js';
+import { ScopedElementsMixin, IconButton } from '@dbp-toolkit/common';
+import { TabulatorTable } from '@dbp-toolkit/tabulator-table';
+import DBPLitElement from '@dbp-toolkit/common/dbp-lit-element';
+
+
+export class CustomTabulatorTable extends TabulatorTable {
+    static get scopedElements() {
+        return {
+            'dbp-esign-download-button': DownloadButton,
+            'dbp-esign-filename-label': FilenameLabel,
+        };
+    }
+}
+
+export class FilenameLabel extends ScopedElementsMixin(DBPLitElement) {
+    constructor() {
+        super();
+        this._i18n = createInstance();
+        this.lang = this._i18n.language;
+        this.file = null;
+    }
+
+    static get properties() {
+        return {
+            ...super.properties,
+            lang: { type: String },
+            file: { type: Object, attribute: false },
+        };
+    }
+
+    static get scopedElements() {
+        return {
+        };
+    }
+
+    update(changedProperties) {
+        changedProperties.forEach((oldValue, propName) => {
+            switch (propName) {
+                case 'lang':
+                    this._i18n.changeLanguage(this.lang);
+                    break;
+            }
+        });
+
+        super.update(changedProperties);
+    }
+
+    render() {
+        return html`
+            ${this.file ? this.file.name : ``}
+    `;
+    }
+}
+
+export class DownloadButton extends ScopedElementsMixin(DBPLitElement) {
+    constructor() {
+        super();
+        this._i18n = createInstance();
+        this.lang = this._i18n.language;
+        this.file = null;
+    }
+
+    static get properties() {
+        return {
+            ...super.properties,
+            lang: { type: String },
+        };
+    }
+
+    static get scopedElements() {
+        return {
+            'dbp-icon-button': IconButton,
+        };
+    }
+
+    update(changedProperties) {
+        changedProperties.forEach((oldValue, propName) => {
+            switch (propName) {
+                case 'lang':
+                    this._i18n.changeLanguage(this.lang);
+                    break;
+            }
+        });
+
+        super.update(changedProperties);
+    }
+
+    _handleDownloadClick(event) {
+        console.log(this.file);
+    }
+
+    render() {
+        return html`
+        <dbp-icon-button
+            icon-name="download"
+            class="download-button"
+            aria-label="${this._i18n.t('download-file-button-title')}"
+            title="${this._i18n.t('download-file-button-title')}"
+            @click="${this._handleDownloadClick}"></dbp-icon-button>
+    `;
+    }
+}