Skip to content
Snippets Groups Projects
Unverified Commit 0a26b179 authored by Bekerle, Patrizio's avatar Bekerle, Patrizio :fire:
Browse files

Allow failed upload removal, decrease iframe max-width and do layout changes (#4)

parent 2eafde43
No related branches found
No related tags found
No related merge requests found
Pipeline #10576 passed with warnings
Stage: test
Stage: deploy
Hide whitespace changes
Inline Side-by-side
src/i18n/de/translation.json
+ 1
− 0
View file @ 0a26b179
......@@ -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",
......
src/i18n/en/translation.json
+ 1
− 0
View file @ 0a26b179
......@@ -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",
......
src/vpu-qualified-signature-pdf-upload.js
+ 55
− 29
View file @ 0a26b179
......@@ -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})}">
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment