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

Integration of vpu-file-source and implementation of queuing and uploading for... 

Integration of vpu-file-source and implementation of queuing and uploading for official signing and verification (#28)
parent 3b82d8d0
Branches
No related tags found
No related merge requests found
Pipeline #11955 passed with warnings
Stage: test
Stage: deploy
Show whitespace changes
Inline Side-by-side
src/vpu-official-signature-pdf-upload.js
+ 28
− 77
View file @ 1b4d1efe
......@@ -6,11 +6,11 @@ import VPUSignatureLitElement from "./vpu-signature-lit-element";
import {PdfPreview} from "./vpu-pdf-preview";
import * as commonUtils from 'vpu-common/utils';
import * as utils from './utils';
import {Icon, MiniSpinner, Button} from 'vpu-common';
import {Button, Icon, MiniSpinner} from 'vpu-common';
import FileSaver from 'file-saver';
import * as commonStyles from 'vpu-common/styles';
import {classMap} from 'lit-html/directives/class-map.js';
import {FileUpload} from 'vpu-file-handling';
import {FileSource} from 'vpu-file-handling';
import JSONLD from "vpu-common/jsonld";
import {TextSwitch} from './textswitch.js';
......@@ -25,17 +25,12 @@ class OfficialSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitElem
this.signedFilesCount = 0;
this.errorFiles = [];
this.errorFilesCount = 0;
this.uploadInProgress = false;
this.queueingInProgress = false;
this.uploadStatusFileName = "";
this.uploadStatusText = "";
this.currentFile = {};
this.currentFileName = "";
this.currentFilePlacementMode = "";
this.currentFileSignaturePlacement = {};
this.queueBlockEnabled = false;
this.queuedFiles = [];
this.queuedFilesCount = 0;
this.signingProcessEnabled = false;
this.signingProcessActive = false;
this.signaturePlacementInProgress = false;
......@@ -43,15 +38,12 @@ class OfficialSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitElem
this.queuedFilesSignaturePlacements = [];
this.queuedFilesPlacementModes = [];
this.currentPreviewQueueKey = '';
// will be set in function update
this.signingUrl = "";
}
static get scopedElements() {
return {
'vpu-icon': Icon,
'vpu-fileupload': FileUpload,
'vpu-file-source': FileSource,
'vpu-pdf-preview': PdfPreview,
'vpu-mini-spinner': MiniSpinner,
'vpu-button': Button,
......@@ -69,7 +61,6 @@ class OfficialSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitElem
errorFiles: { type: Array, attribute: false },
errorFilesCount: { type: Number, attribute: false },
uploadInProgress: { type: Boolean, attribute: false },
queueingInProgress: { type: Boolean, attribute: false },
uploadStatusFileName: { type: String, attribute: false },
uploadStatusText: { type: String, attribute: false },
signingProcessEnabled: { type: Boolean, attribute: false },
......@@ -89,14 +80,6 @@ class OfficialSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitElem
setInterval(() => { this.handleQueuedFiles(); }, 1000);
}
onQueuedFilesChanged(ev) {
const detail = ev.detail;
if (!this.queueBlockEnabled && detail.queuedFilesCount)
this.queueBlockEnabled = true;
this.queuedFiles = detail.queuedFiles;
this.queuedFilesCount = detail.queuedFilesCount;
}
/**
* Processes queued files
*/
......@@ -134,14 +117,17 @@ class OfficialSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitElem
}
}
await this._("#file-upload").uploadFile(file, params);
this.uploadStatusText = i18n.t('official-pdf-upload.upload-status-file-text', {
fileName: file.name,
fileSize: humanFileSize(file.size, false),
});
await this.uploadFile(file, params);
this.uploadInProgress = false;
}
storePDFData(event) {
const data = event.detail;
this.queuedFilesSignaturePlacements[this.currentPreviewQueueKey] = data;
this.queuedFilesSignaturePlacements[this.currentPreviewQueueKey] = event.detail;
this.signaturePlacementInProgress = false;
}
......@@ -208,28 +194,9 @@ class OfficialSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitElem
/**
* @param ev
*/
onAllUploadStarted(ev) {
console.log("Start queuing process!");
this.queueingInProgress = true;
}
/**
* @param ev
*/
onAllUploadFinished(ev) {
console.log("Finished queuing process!");
this.queueingInProgress = false;
}
/**
* @param ev
*/
onFileUploadStarted(ev) {
this.uploadStatusFileName = ev.detail.fileName;
this.uploadStatusText = i18n.t('official-pdf-upload.upload-status-file-text', {
fileName: ev.detail.fileName,
fileSize: humanFileSize(ev.detail.fileSize, false),
});
onFileSelected(ev) {
console.log("File was selected: ev", ev);
this.queueFile(ev.detail.file);
}
addToErrorFiles(file) {
......@@ -246,17 +213,17 @@ class OfficialSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitElem
}
/**
* @param ev
* @param data
*/
onFileUploadFinished(ev) {
if (ev.detail.status !== 201) {
this.addToErrorFiles(ev.detail);
} else if (ev.detail.json["@type"] === "http://schema.org/MediaObject" ) {
onFileUploadFinished(data) {
if (data.status !== 201) {
this.addToErrorFiles(data);
} else if (data.json["@type"] === "http://schema.org/MediaObject" ) {
// this doesn't seem to trigger an update() execution
this.signedFiles.push(ev.detail.json);
this.signedFiles.push(data.json);
// this triggers the correct update() execution
this.signedFilesCount++;
const entryPoint = ev.detail.json;
const entryPoint = data.json;
this.currentFileName = entryPoint.name;
this.endSigningProcessIfQueueEmpty();
}
......@@ -271,7 +238,7 @@ class OfficialSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitElem
case "entryPointUrl":
JSONLD.initialize(this.entryPointUrl, (jsonld) => {
const apiUrlBase = jsonld.getApiUrlForEntityName("OfficiallySignedDocument");
this.signingUrl = apiUrlBase + "/sign";
this.fileSourceUrl = apiUrlBase + "/sign";
});
break;
}
......@@ -352,7 +319,7 @@ class OfficialSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitElem
*/
async fileQueueingClickHandler(file, id) {
this.takeFailedFileFromQueue(id);
return this._("#file-upload").queueFile(file);
return this.queueFile(file);
}
/**
......@@ -366,7 +333,7 @@ class OfficialSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitElem
return;
}
const file = this._("#file-upload").getQueuedFile(key);
const file = this.getQueuedFile(key);
this.currentFile = file;
this.currentPreviewQueueKey = key;
console.log(file);
......@@ -380,15 +347,6 @@ class OfficialSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitElem
this.queuedFilesSignaturePlacements[key]);
}
/**
* Takes a file off of the queue
*
* @param key
*/
takeFileFromQueue(key) {
return this._("#file-upload").takeFileFromQueue(key);
}
/**
* Takes a failed file off of the queue
*
......@@ -403,7 +361,7 @@ class OfficialSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitElem
clearQueuedFiles() {
this.queuedFilesSignaturePlacements = [];
this.queuedFilesPlacementModes = [];
this._("#file-upload").clearQueuedFiles();
super.clearQueuedFiles();
}
clearSignedFiles() {
......@@ -768,22 +726,18 @@ class OfficialSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitElem
<div class="field">
<h2>${i18n.t('official-pdf-upload.upload-field-label')}</h2>
<div class="control">
<vpu-fileupload id="file-upload"
<vpu-file-source
allowed-mime-types="application/pdf"
decompress-zip
always-send-file
deferred
lang="${this.lang}"
url="${this.signingUrl}"
url="${this.fileSourceUrl}"
?disabled="${this.signingProcessActive}"
text="${i18n.t('official-pdf-upload.upload-area-text')}"
button-label="${i18n.t('official-pdf-upload.upload-button-label')}"
@vpu-fileupload-all-start="${this.onAllUploadStarted}"
@vpu-fileupload-file-start="${this.onFileUploadStarted}"
@vpu-fileupload-file-finished="${this.onFileUploadFinished}"
@vpu-fileupload-all-finished="${this.onAllUploadFinished}"
@vpu-fileupload-queued-files-changed="${this.onQueuedFilesChanged}"
></vpu-fileupload>
@vpu-file-source-file-selected="${this.onFileSelected}"
></vpu-file-source>
</div>
</div>
<div id="grid-container">
......@@ -792,9 +746,6 @@ class OfficialSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitElem
<!-- Queued files headline and queueing spinner -->
<h2 class="${classMap({"is-disabled": this.isUserInterfaceDisabled()})}">
${i18n.t('official-pdf-upload.queued-files-label')}
<vpu-mini-spinner id="queueing-in-progress-spinner"
style="font-size: 0.7em"
class="${classMap({hidden: !this.queueingInProgress})}"></vpu-mini-spinner>
</h2>
<!-- Buttons to start/stop signing process and clear queue -->
<div class="control field">
......
src/vpu-signature-verification.js
+ 25
− 73
View file @ 1b4d1efe
......@@ -8,7 +8,7 @@ import * as commonUtils from 'vpu-common/utils';
import {Icon, MiniSpinner, Button} from 'vpu-common';
import * as commonStyles from 'vpu-common/styles';
import {classMap} from 'lit-html/directives/class-map.js';
import {FileUpload} from 'vpu-file-handling';
import {FileSource} from 'vpu-file-handling';
import JSONLD from "vpu-common/jsonld";
const i18n = createI18nInstance();
......@@ -22,17 +22,12 @@ class SignatureVerification extends ScopedElementsMixin(VPUSignatureLitElement)
this.verifiedFilesCount = 0;
this.errorFiles = [];
this.errorFilesCount = 0;
this.uploadInProgress = false;
this.queueingInProgress = false;
this.uploadStatusFileName = "";
this.uploadStatusText = "";
this.currentFile = {};
this.currentFileName = "";
this.currentFilePlacementMode = "";
this.currentFileSignaturePlacement = {};
this.queueBlockEnabled = false;
this.queuedFiles = [];
this.queuedFilesCount = 0;
this.verificationProcessEnabled = false;
this.verificationProcessActive = false;
this.previewInProgress = false;
......@@ -45,7 +40,7 @@ class SignatureVerification extends ScopedElementsMixin(VPUSignatureLitElement)
static get scopedElements() {
return {
'vpu-icon': Icon,
'vpu-fileupload': FileUpload,
'vpu-file-source': FileSource,
'vpu-pdf-preview': PdfPreview,
'vpu-mini-spinner': MiniSpinner,
'vpu-button': Button,
......@@ -62,7 +57,6 @@ class SignatureVerification extends ScopedElementsMixin(VPUSignatureLitElement)
errorFiles: { type: Array, attribute: false },
errorFilesCount: { type: Number, attribute: false },
uploadInProgress: { type: Boolean, attribute: false },
queueingInProgress: { type: Boolean, attribute: false },
uploadStatusFileName: { type: String, attribute: false },
uploadStatusText: { type: String, attribute: false },
verificationProcessEnabled: { type: Boolean, attribute: false },
......@@ -81,14 +75,6 @@ class SignatureVerification extends ScopedElementsMixin(VPUSignatureLitElement)
setInterval(() => { this.handleQueuedFiles(); }, 1000);
}
onQueuedFilesChanged(ev) {
const detail = ev.detail;
if (!this.queueBlockEnabled && detail.queuedFilesCount)
this.queueBlockEnabled = true;
this.queuedFiles = detail.queuedFiles;
this.queuedFilesCount = detail.queuedFilesCount;
}
/**
* Processes queued files
*/
......@@ -115,7 +101,12 @@ class SignatureVerification extends ScopedElementsMixin(VPUSignatureLitElement)
this.uploadInProgress = true;
let params = {};
await this._("#file-upload").uploadFile(file, params);
this.uploadStatusText = i18n.t('signature-verification.upload-status-file-text', {
fileName: file.name,
fileSize: humanFileSize(file.size, false),
});
await this.uploadFile(file, params);
this.uploadInProgress = false;
}
......@@ -167,28 +158,9 @@ class SignatureVerification extends ScopedElementsMixin(VPUSignatureLitElement)
/**
* @param ev
*/
onAllUploadStarted(ev) {
console.log("Start queuing process!");
this.queueingInProgress = true;
}
/**
* @param ev
*/
onAllUploadFinished(ev) {
console.log("Finished queuing process!");
this.queueingInProgress = false;
}
/**
* @param ev
*/
onFileUploadStarted(ev) {
this.uploadStatusFileName = ev.detail.fileName;
this.uploadStatusText = i18n.t('signature-verification.upload-status-file-text', {
fileName: ev.detail.fileName,
fileSize: humanFileSize(ev.detail.fileSize, false),
});
onFileSelected(ev) {
console.log("File was selected: ev", ev);
this.queueFile(ev.detail.file);
}
addToErrorFiles(file) {
......@@ -205,17 +177,17 @@ class SignatureVerification extends ScopedElementsMixin(VPUSignatureLitElement)
}
/**
* @param ev
* @param data
*/
onFileUploadFinished(ev) {
if (ev.detail.status !== 201) {
this.addToErrorFiles(ev.detail);
} else if (ev.detail.json["@type"] === "https://schema.tugraz.at/ElectronicSignatureVerificationReport" ) {
onFileUploadFinished(data) {
if (data.status !== 201) {
this.addToErrorFiles(data);
} else if (data.json["@type"] === "https://schema.tugraz.at/ElectronicSignatureVerificationReport" ) {
// this doesn't seem to trigger an update() execution
this.verifiedFiles.push(ev.detail.json);
this.verifiedFiles.push(data.json);
// this triggers the correct update() execution
this.verifiedFilesCount++;
const entryPoint = ev.detail.json;
const entryPoint = data.json;
this.currentFileName = entryPoint.name;
this.endVerificationProcessIfQueueEmpty();
}
......@@ -230,7 +202,7 @@ class SignatureVerification extends ScopedElementsMixin(VPUSignatureLitElement)
case "entryPointUrl":
JSONLD.initialize(this.entryPointUrl, (jsonld) => {
const apiUrlBase = jsonld.getApiUrlForEntityName("ElectronicSignatureVerificationReport");
this.verificationUrl = apiUrlBase + "/create";
this.fileSourceUrl = apiUrlBase + "/create";
});
break;
}
......@@ -271,7 +243,7 @@ class SignatureVerification extends ScopedElementsMixin(VPUSignatureLitElement)
*/
async fileQueueingClickHandler(file, id) {
this.takeFailedFileFromQueue(id);
return this._("#file-upload").queueFile(file);
return this.queueFile(file);
}
/**
......@@ -284,7 +256,7 @@ class SignatureVerification extends ScopedElementsMixin(VPUSignatureLitElement)
return;
}
const file = this._("#file-upload").getQueuedFile(key);
const file = this.getQueuedFile(key);
this.currentFile = file;
this.currentPreviewQueueKey = key;
console.log(file);
......@@ -294,15 +266,6 @@ class SignatureVerification extends ScopedElementsMixin(VPUSignatureLitElement)
await this._(previewTag).showPDF(file);
}
/**
* Takes a file off of the queue
*
* @param key
*/
takeFileFromQueue(key) {
return this._("#file-upload").takeFileFromQueue(key);
}
/**
* Takes a failed file off of the queue
*
......@@ -314,10 +277,6 @@ class SignatureVerification extends ScopedElementsMixin(VPUSignatureLitElement)
return file;
}
clearQueuedFiles() {
this._("#file-upload").clearQueuedFiles();
}
clearVerifiedFiles() {
this.verifiedFiles = [];
this.verifiedFilesCount = 0;
......@@ -710,22 +669,18 @@ class SignatureVerification extends ScopedElementsMixin(VPUSignatureLitElement)
<div class="field">
<h2>${i18n.t('signature-verification.upload-field-label')}</h2>
<div class="control">
<vpu-fileupload id="file-upload"
<vpu-file-source
allowed-mime-types="application/pdf"
decompress-zip
always-send-file
deferred
lang="${this.lang}"
url="${this.verificationUrl}"
url="${this.fileSourceUrl}"
?disabled="${this.verificationProcessActive}"
text="${i18n.t('signature-verification.upload-area-text')}"
button-label="${i18n.t('signature-verification.upload-button-label')}"
@vpu-fileupload-all-start="${this.onAllUploadStarted}"
@vpu-fileupload-file-start="${this.onFileUploadStarted}"
@vpu-fileupload-file-finished="${this.onFileUploadFinished}"
@vpu-fileupload-all-finished="${this.onAllUploadFinished}"
@vpu-fileupload-queued-files-changed="${this.onQueuedFilesChanged}"
></vpu-fileupload>
@vpu-file-source-file-selected="${this.onFileSelected}"
></vpu-file-source>
</div>
</div>
<div id="grid-container">
......@@ -734,9 +689,6 @@ class SignatureVerification extends ScopedElementsMixin(VPUSignatureLitElement)
<!-- Queued files headline and queueing spinner -->
<h2 class="${classMap({"is-disabled": this.isUserInterfaceDisabled()})}">
${i18n.t('signature-verification.queued-files-label')}
<vpu-mini-spinner id="queueing-in-progress-spinner"
style="font-size: 0.7em"
class="${classMap({hidden: !this.queueingInProgress})}"></vpu-mini-spinner>
</h2>
<!-- Buttons to start/stop verification process and clear queue -->
<div class="control field">
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment