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

Re-implement preview and signing flow and add more styling (#5)

parent 8215d207
No related branches found
No related tags found
No related merge requests found
Pipeline #11066 passed
......@@ -23,6 +23,11 @@
"remove-failed-file-button-title": "Fehlgeschlagene Datei entfernen",
"remove-queued-file-button-title": "Datei aus der Warteschlange entfernen",
"start-signing-process-button": "Signiervorgang starten",
"stop-signing-process-button": "Signiervorgang unterbrechen",
"show-preview": "Vorschau anzeigen",
"positioning-automatic": "Automatisch",
"positioning-manual": "Manuell",
"close-preview": "Vorschau schließen",
"start-signing-process-button-running-title": "Signiervorgang läuft gerade",
"remove-current-file-button-title": "Aktuellen Signierprozess abbrechen",
"signed-files-label": "Signierte Dateien",
......@@ -35,7 +40,7 @@
"upload-status-file-text": "({{fileSize}}) wird hochgeladen und verarbeitet...",
"re-upload-all-button": "Alle erneut in die Warteschlange stellen",
"re-upload-all-button-title": "Alle fehlgeschlagen Signiervorgänge erneut in die Warteschlange stellen",
"signature-placement-label": "Signatur platzieren"
"signature-placement-label": "Vorschau"
},
"pdf-preview": {
"first": "Erste",
......@@ -47,7 +52,7 @@
"next-page": "Nächste Seite",
"last-page": "Letzte Seite",
"page-count": "Seite {{currentPage}} von {{totalPages}}",
"continue": "Weiter im Signaturprozess"
"continue": "Platzierung bestätigen"
},
"error-summary": "Ein Fehler ist aufgetreten",
"error-permission-message": "Sie müssen das Recht auf Amtssignaturen besitzen um diese Funktion nutzen zu können!",
......
......@@ -23,6 +23,11 @@
"remove-failed-file-button-title": "Remove failed file",
"remove-queued-file-button-title": "Remove file from queue",
"start-signing-process-button": "Start signing process",
"stop-signing-process-button": "Stop signing process",
"show-preview": "Show preview",
"positioning-automatic": "Automatic",
"positioning-manual": "Manual",
"close-preview": "Close preview",
"start-signing-process-button-running-title": "Signing process running",
"remove-current-file-button-title": "Cancel current signing process",
"signed-files-label": "Signed files",
......@@ -35,7 +40,7 @@
"upload-status-file-text": "({{fileSize}}) is currently uploading and being processed...",
"re-upload-all-button": "Queue all",
"re-upload-all-button-title": "Queue all failed signing processes again",
"signature-placement-label": "Place signature"
"signature-placement-label": "Preview"
},
"pdf-preview": {
"first": "First",
......@@ -47,7 +52,7 @@
"next-page": "Next page",
"last-page": "Last page",
"page-count": "Page {{currentPage}} of {{totalPages}}",
"continue": "Continue signing process"
"continue": "Accept signature placing"
},
"error-summary": "An error occurred",
"error-permission-message": "You need have permissions to use the official signature to use this function!",
......
......@@ -24,6 +24,7 @@ export class PdfPreview extends ScopedElementsMixin(VPULitElement) {
this.isShowPage = false;
this.isPageLoaded = false;
this.isPageRenderingInProgress = false;
this.isShowPlacement = true;
this.canvas = null;
this.fabricCanvas = null;
}
......@@ -45,6 +46,7 @@ export class PdfPreview extends ScopedElementsMixin(VPULitElement) {
isShowPage: { type: Boolean, attribute: false },
isPageRenderingInProgress: { type: Boolean, attribute: false },
isPageLoaded: { type: Boolean, attribute: false },
isShowPlacement: { type: Boolean, attribute: false },
};
}
......@@ -101,8 +103,10 @@ export class PdfPreview extends ScopedElementsMixin(VPULitElement) {
* Initialize and load the PDF
*
* @param file
* @param isShowPlacement
*/
async showPDF(file) {
async showPDF(file, isShowPlacement = false) {
this.isShowPlacement = isShowPlacement;
this.isShowPage = true;
let reader = new FileReader();
......@@ -190,7 +194,7 @@ export class PdfPreview extends ScopedElementsMixin(VPULitElement) {
}
}
sendContinueEvent() {
sendAcceptEvent() {
// TODO: add coordinates from this.fabricCanvas.item(0);
const item = this.fabricCanvas.item(0);
console.log(this.fabricCanvas.item(0));
......@@ -200,7 +204,7 @@ export class PdfPreview extends ScopedElementsMixin(VPULitElement) {
"posY": item.get('translateY'),
"rotation": item.get('angle')
};
const event = new CustomEvent("vpu-pdf-preview-continue",
const event = new CustomEvent("vpu-pdf-preview-accept",
{ "detail": data, bubbles: true, composed: true });
this.dispatchEvent(event);
}
......@@ -238,6 +242,14 @@ export class PdfPreview extends ScopedElementsMixin(VPULitElement) {
left: 0;
border: solid 1px black;
}
.buttons {
display: flex;
}
.buttons > * {
margin-right: 3px;
}
`;
}
......@@ -252,33 +264,32 @@ export class PdfPreview extends ScopedElementsMixin(VPULitElement) {
<vpu-mini-spinner class="${classMap({hidden: this.isPageLoaded})}"></vpu-mini-spinner>
<div class="${classMap({hidden: !this.isPageLoaded})}">
<div id="pdf-meta">
<div>
<button class="button is-small"
<div class="buttons">
<button class="button"
title="${i18n.t('pdf-preview.first-page')}"
@click="${async () => { await this.showPage(1); } }"
?disabled="${this.isPageRenderingInProgress}">${i18n.t('pdf-preview.first')}</button>
<button class="button is-small"
<button class="button"
title="${i18n.t('pdf-preview.previous-page')}"
@click="${async () => { if (this.currentPage > 1) await this.showPage(--this.currentPage); } }"
?disabled="${this.isPageRenderingInProgress}">${i18n.t('pdf-preview.previous')}</button>
<input type="number" id="pdf-page-no" min="1" value="${this.currentPage}">
<button class="button is-small"
<button class="button"
title="${i18n.t('pdf-preview.next-page')}"
@click="${async () => { if (this.currentPage < this.totalPages) await this.showPage(++this.currentPage); } }"
?disabled="${this.isPageRenderingInProgress}">${i18n.t('pdf-preview.next')}</button>
<button class="button is-small"
<button class="button"
title="${i18n.t('pdf-preview.last-page')}"
@click="${async () => { await this.showPage(this.totalPages); } }"
?disabled="${this.isPageRenderingInProgress}">${i18n.t('pdf-preview.last')}</button>
<button class="button is-primary"
style="float: right"
@click="${() => { this.sendContinueEvent(); } }">${i18n.t('pdf-preview.continue')}</button>
<button class="button is-primary ${classMap({hidden: !this.isShowPlacement})}"
@click="${() => { this.sendAcceptEvent(); } }">${i18n.t('pdf-preview.continue')}</button>
</div>
${i18n.t('pdf-preview.page-count', {currentPage: this.currentPage, totalPages: this.totalPages, })}
</div>
<div id="canvas-wrapper" class="${classMap({hidden: this.isPageRenderingInProgress})}">
<canvas id="pdf-canvas"></canvas>
<canvas id="fabric-canvas"></canvas>
<canvas id="fabric-canvas" class="${classMap({hidden: !this.isShowPlacement})}"></canvas>
</div>
<div class="${classMap({hidden: !this.isPageRenderingInProgress})}"><vpu-mini-spinner id="page-loader"></vpu-mini-spinner></div>
</div>
......
......@@ -37,6 +37,9 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitEle
this.queuedFilesCount = 0;
this.signingProcessEnabled = false;
this.signaturePlacementInProgress = false;
this.queuedFilesSignaturePlacements = [];
this.queuedFilesPlacementModes = [];
this.currentPreviewQueueKey = '';
// will be set in function update
this.signingRequestUrl = "";
......@@ -71,6 +74,7 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitEle
queueBlockEnabled: { type: Boolean, attribute: false },
currentFile: { type: Object, attribute: false },
currentFileName: { type: String, attribute: false },
signaturePlacementInProgress: { type: Boolean, attribute: false },
isSignaturePlacement: { type: Boolean, attribute: false },
};
}
......@@ -105,11 +109,12 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitEle
return;
}
if (!this.signingProcessEnabled || this.externalAuthInProgress ||
this.uploadInProgress || this.signaturePlacementInProgress) {
if (!this.signingProcessEnabled || this.externalAuthInProgress || this.uploadInProgress) {
return;
}
this.signaturePlacementInProgress = false;
// seems like keys are sorted, not in the order they were added
const keys = Object.keys(this.queuedFiles);
......@@ -118,20 +123,17 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitEle
// take the file off the queue
const file = this.takeFileFromQueue(key);
this.currentFile = file;
// start signature placement process
this.signaturePlacementInProgress = true;
await this._("vpu-pdf-preview").showPDF(file);
// this.uploadInProgress = true;
// await this._("#file-upload").uploadFile(file);
// this.uploadInProgress = false;
const data = this.queuedFilesPlacementModes[key] === "manual" ?
this.queuedFilesSignaturePlacements[key] : {};
this.uploadInProgress = true;
await this._("#file-upload").uploadFile(file, data);
this.uploadInProgress = false;
}
async startUpload(event) {
this.signaturePlacementInProgress = false;
// this.signaturePlacementInProgress = false;
const data = event.detail;
console.log(data);
......@@ -141,6 +143,25 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitEle
this.uploadInProgress = false;
}
storePDFData(event) {
const data = event.detail;
console.log(data);
this.queuedFilesSignaturePlacements[this.currentPreviewQueueKey] = data;
this.signaturePlacementInProgress = false;
}
queuePlacementSwitch(key, name) {
this.queuedFilesPlacementModes[key] = name;
console.log(name);
if (name === "manual") {
this.showPreview(key);
} else if (this.currentPreviewQueueKey === key) {
this.signaturePlacementInProgress = false;
}
}
onReceiveIframeMessage(event) {
const data = event.data;
......@@ -361,6 +382,25 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitEle
return this._("#file-upload").queueFile(file);
}
/**
* Shows the preview
*
* @param key
*/
async showPreview(key) {
if (this.signingProcessEnabled) {
return;
}
const file = this._("#file-upload").getQueuedFile(key);
this.currentFile = file;
this.currentPreviewQueueKey = key;
console.log(file);
// start signature placement process
this.signaturePlacementInProgress = true;
await this._("vpu-pdf-preview").showPDF(file, this.queuedFilesPlacementModes[key] === "manual");
}
/**
* Takes a file off of the queue
*
......@@ -405,6 +445,10 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitEle
min-width: 320px;
}
#pdf-preview .file {
margin-bottom: 10px;
}
h2 {
margin-bottom: inherit;
}
......@@ -416,7 +460,7 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitEle
#iframe {
width: 100%;
height: 240px;
border: none;
border: solid 1px black;
/* keeps the A-Trust webpage aligned left */
max-width: 335px;
}
......@@ -463,10 +507,20 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitEle
getQueuedFilesHtml() {
return this.queuedFiles.map((file, id) => html`
<div class="file">
<a class="is-remove"
<a title="${i18n.t('qualified-pdf-upload.show-preview')}"
@click="${() => { this.showPreview(id); }}">
${file.name} (${humanFileSize(file.size)})</a>
<button class="button"
?disabled="${this.signingProcessEnabled}"
title="${i18n.t('qualified-pdf-upload.remove-queued-file-button-title')}"
@click="${() => { this.takeFileFromQueue(id); }}">
${file.name} (${humanFileSize(file.size)}) <vpu-icon name="close" style="font-size: 0.7em"></vpu-icon></a>
<vpu-icon name="close" style="font-size: 0.7em"></vpu-icon></button>
<vpu-textswitch name1="auto"
name2="manual"
value1="${i18n.t('qualified-pdf-upload.positioning-automatic')}"
value2="${i18n.t('qualified-pdf-upload.positioning-manual')}"
?disabled="${this.signingProcessEnabled}"
@change=${ (e) => this.queuePlacementSwitch(id, e.target.name) }></vpu-textswitch>
</div>
`);
}
......@@ -509,7 +563,6 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitEle
render() {
return html`
<div class="${classMap({hidden: !this.isLoggedIn() || !this.hasSignaturePermissions() || this.isLoading()})}">
<vpu-textswitch name1="auto" name2="manual" value1="Automatic" value2="Manual" @change=${ (e) => console.log(e.target.name) }></vpu-textswitch>
<div class="field">
<h2>${i18n.t('qualified-pdf-upload.upload-field-label')}</h2>
<div class="control">
......@@ -536,16 +589,27 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitEle
</div>
<div class="control">
<button @click="${() => { this.signingProcessEnabled = true; }}"
?disabled="${this.signingProcessEnabled || this.queuedFilesCount === 0}"
title="${this.signingProcessEnabled ? i18n.t('qualified-pdf-upload.start-signing-process-button-running-title') : ""}"
class="button is-primary">
?disabled="${this.queuedFilesCount === 0}"
class="button is-primary ${classMap({hidden: this.signingProcessEnabled})}">
${i18n.t('qualified-pdf-upload.start-signing-process-button')}
</button>
<button @click="${() => { this.signingProcessEnabled = false; this.externalAuthInProgress = false; }}"
?disabled="${this.queuedFilesCount === 0}"
class="button ${classMap({hidden: !this.signingProcessEnabled})}">
${i18n.t('qualified-pdf-upload.stop-signing-process-button')}
</button>
</div>
</div>
<div id="pdf-preview" class="field ${classMap({hidden: !this.signaturePlacementInProgress})}">
<h2>${i18n.t('qualified-pdf-upload.signature-placement-label')}</h2>
<vpu-pdf-preview lang="${this.lang}" @vpu-pdf-preview-continue="${this.startUpload}"></vpu-pdf-preview>
<div class="file">
<a class="is-remove" title="${i18n.t('qualified-pdf-upload.close-preview')}"
@click="${() => { this.signaturePlacementInProgress = false; }}">
${this.currentFile.name} (${humanFileSize(this.currentFile !== undefined ? this.currentFile.size : 0)})
<vpu-icon name="close" style="font-size: 0.7em"></vpu-icon>
</a>
</div>
<vpu-pdf-preview lang="${this.lang}" @vpu-pdf-preview-accept="${this.storePDFData}"></vpu-pdf-preview>
</div>
<div class="field notification is-info ${classMap({hidden: !this.uploadInProgress})}">
<vpu-mini-spinner></vpu-mini-spinner>
......
Subproject commit bec521efb3be0441efb1d69252fa559fa5699d0b
Subproject commit 08c606bcc34d462cb3ce1dc4876240c220ca6a50
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment