From 0a26b179140f3e4cf42874b6e7f2f5901ca7f3f7 Mon Sep 17 00:00:00 2001
From: Patrizio Bekerle <patrizio@bekerle.com>
Date: Thu, 30 Apr 2020 12:44:21 +0200
Subject: [PATCH] Allow failed upload removal, decrease iframe max-width and do
 layout changes (#4)

---
 src/i18n/de/translation.json              |  1 +
 src/i18n/en/translation.json              |  1 +
 src/vpu-qualified-signature-pdf-upload.js | 84 +++++++++++++++--------
 3 files changed, 57 insertions(+), 29 deletions(-)

diff --git a/src/i18n/de/translation.json b/src/i18n/de/translation.json
index 3612756..95d7937 100644
--- a/src/i18n/de/translation.json
+++ b/src/i18n/de/translation.json
@@ -18,6 +18,7 @@
     "upload-area-text": "Sie können in diesem Bereich PDF Dateien per Drag & Drop oder per Direktauswahl hochladen",
     "current-signing-process-label": "Aktueller Signierprozess",
     "queued-files-label": "Dateien in der Warteschlange",
+    "remove-failed-file-button-title": "Fehlgeschlagene Datei entfernen",
     "remove-queued-file-button-title": "Datei aus der Warteschlange entfernen",
     "start-signing-process-button": "Signiervorgang starten",
     "start-signing-process-button-running-title": "Signiervorgang läuft gerade",
diff --git a/src/i18n/en/translation.json b/src/i18n/en/translation.json
index ac75c7c..b07b427 100644
--- a/src/i18n/en/translation.json
+++ b/src/i18n/en/translation.json
@@ -18,6 +18,7 @@
     "upload-area-text": "In this area you can upload PDF files via Drag & Drop or by selecting them directly",
     "current-signing-process-label": "Current signing process",
     "queued-files-label": "Queued files",
+    "remove-failed-file-button-title": "Remove failed file",
     "remove-queued-file-button-title": "Remove file from queue",
     "start-signing-process-button": "Start signing process",
     "start-signing-process-button-running-title": "Signing process running",
diff --git a/src/vpu-qualified-signature-pdf-upload.js b/src/vpu-qualified-signature-pdf-upload.js
index ab9c274..c762897 100644
--- a/src/vpu-qualified-signature-pdf-upload.js
+++ b/src/vpu-qualified-signature-pdf-upload.js
@@ -366,8 +366,7 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitEle
      * @param id
      */
     async fileQueueingClickHandler(file, id) {
-        this.errorFiles.splice(id, 1);
-        this.errorFilesCount = Object.keys(this.errorFiles).length;
+        this.takeFailedFileFromQueue(id);
 
         return this._("#file-upload").queueFile(file);
     }
@@ -381,6 +380,18 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitEle
         return this._("#file-upload").takeFileFromQueue(key);
     }
 
+    /**
+     * Takes a failed file off of the queue
+     *
+     * @param key
+     */
+    takeFailedFileFromQueue(key) {
+        const file = this.errorFiles.splice(key, 1);
+        this.errorFilesCount = Object.keys(this.errorFiles).length;
+
+        return file;
+    }
+
     static get styles() {
         // language=css
         return css`
@@ -389,6 +400,15 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitEle
             ${commonStyles.getButtonCSS()}
             ${commonStyles.getNotificationCSS()}
 
+            .flex-container {
+                display: flex;
+                flex-flow: row wrap;
+            }
+
+            .flex-container > div {
+                margin-right: 20px;
+            }
+
             h2 {
                 margin-bottom: inherit;
             }
@@ -402,7 +422,7 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitEle
                 height: 240px;
                 border: none;
                 /* keeps the A-Trust webpage aligned left */
-                max-width: 570px;
+                max-width: 335px;
             }
 
             .files-block .file {
@@ -473,6 +493,10 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitEle
                 <div class="info">
                     ${data.file.name} (${humanFileSize(data.file.size)})
                     <strong class="error">${data.json["hydra:description"]}</strong>
+                    <a class="is-remove"
+                        title="${i18n.t('qualified-pdf-upload.remove-failed-file-button-title')}"
+                        @click="${() => {this.takeFailedFileFromQueue(id);}}">
+                        <vpu-icon name="close" style="font-size: 0.7em"></vpu-icon></a>
                 </div>
             </div>
         `);
@@ -492,34 +516,36 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitEle
                             text="${i18n.t('qualified-pdf-upload.upload-area-text')}" button-label="${i18n.t('qualified-pdf-upload.upload-button-label')}"></vpu-fileupload>
                     </div>
                 </div>
-                <div class="field notification is-info ${classMap({hidden: !this.uploadInProgress})}">
-                    <vpu-mini-spinner></vpu-mini-spinner>
-                    <strong>${this.uploadStatusFileName}</strong>
-                    ${this.uploadStatusText}
-                </div>
-                <div class="files-block field ${classMap({hidden: !this.externalAuthInProgress})}">
-                    <h2>${i18n.t('qualified-pdf-upload.current-signing-process-label')}</h2>
-                    <div class="file">
-                        <a class="is-remove" title="${i18n.t('qualified-pdf-upload.remove-current-file-button-title')}"
-                            @click="${() => { this.externalAuthInProgress = false; }}">
-                            ${this.currentFileName} (${humanFileSize(this.currentFile.file !== undefined ? this.currentFile.file.size : 0)})
-                            <vpu-icon name="close" style="font-size: 0.7em"></vpu-icon>
-                        </a>
+                <div class="flex-container">
+                    <div class="files-block field ${classMap({hidden: this.queuedFilesCount === 0})}">
+                        <h2>${i18n.t('qualified-pdf-upload.queued-files-label')}</h2>
+                        <div class="control">
+                            ${this.getQueuedFilesHtml()}
+                        </div>
+                        <div class="control">
+                            <button @click="${() => { this.signingProcessEnabled = true; }}"
+                                    ?disabled="${this.signingProcessEnabled}"
+                                    title="${this.signingProcessEnabled ? i18n.t('qualified-pdf-upload.start-signing-process-button-running-title') : ""}"
+                                    class="button is-primary">
+                                ${i18n.t('qualified-pdf-upload.start-signing-process-button')}
+                            </button>
+                        </div>
                     </div>
-                    <iframe name="external_iframe" id="iframe"></iframe>
-                </div>
-                <div class="files-block field ${classMap({hidden: this.queuedFilesCount === 0})}">
-                    <h2>${i18n.t('qualified-pdf-upload.queued-files-label')}</h2>
-                    <div class="control">
-                        ${this.getQueuedFilesHtml()}
+                    <div class="field notification is-info ${classMap({hidden: !this.uploadInProgress})}">
+                        <vpu-mini-spinner></vpu-mini-spinner>
+                        <strong>${this.uploadStatusFileName}</strong>
+                        ${this.uploadStatusText}
                     </div>
-                    <div class="control">
-                        <button @click="${() => { this.signingProcessEnabled = true; }}"
-                                ?disabled="${this.signingProcessEnabled}"
-                                title="${this.signingProcessEnabled ? i18n.t('qualified-pdf-upload.start-signing-process-button-running-title') : ""}"
-                                class="button is-primary">
-                            ${i18n.t('qualified-pdf-upload.start-signing-process-button')}
-                        </button>
+                    <div class="files-block field ${classMap({hidden: !this.externalAuthInProgress})}">
+                        <h2>${i18n.t('qualified-pdf-upload.current-signing-process-label')}</h2>
+                        <div class="file">
+                            <a class="is-remove" title="${i18n.t('qualified-pdf-upload.remove-current-file-button-title')}"
+                                @click="${() => { this.externalAuthInProgress = false; }}">
+                                ${this.currentFileName} (${humanFileSize(this.currentFile.file !== undefined ? this.currentFile.file.size : 0)})
+                                <vpu-icon name="close" style="font-size: 0.7em"></vpu-icon>
+                            </a>
+                        </div>
+                        <iframe name="external_iframe" id="iframe"></iframe>
                     </div>
                 </div>
                 <div class="files-block field ${classMap({hidden: this.signedFilesCount === 0})}">
-- 
GitLab