From 646f7272fd7c7e0cfa7a46e00e967f2dd059b5b7 Mon Sep 17 00:00:00 2001
From: Patrizio Bekerle <patrizio@bekerle.com>
Date: Thu, 19 Mar 2020 15:17:13 +0100
Subject: [PATCH] Add zip file download with signed documents proof of concept
(VPU/Middleware/API#40)
---
package-lock.json | 59 +++++++++++++++++++++++++--------
package.json | 6 ++--
src/vpu-signature-pdf-upload.js | 49 +++++++++++++++++++++++----
3 files changed, 91 insertions(+), 23 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index de2a03f..3addabe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1255,8 +1255,7 @@
"core-util-is": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
- "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
- "dev": true
+ "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
},
"cross-spawn": {
"version": "6.0.5",
@@ -1944,6 +1943,11 @@
"flat-cache": "^2.0.1"
}
},
+ "file-saver": {
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.2.tgz",
+ "integrity": "sha512-Wz3c3XQ5xroCxd1G8b7yL0Ehkf0TC9oYC6buPFkNnU9EnaPlifeAFCyCh+iewXTyFRcg0a6j3J7FmJsIhlhBdw=="
+ },
"fill-range": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -2413,6 +2417,11 @@
"integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
"dev": true
},
+ "immediate": {
+ "version": "3.0.6",
+ "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+ "integrity": "sha1-nbHb0Pr43m++D13V5Wu2BigN5ps="
+ },
"import-fresh": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz",
@@ -2448,8 +2457,7 @@
"inherits": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
- "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
- "dev": true
+ "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
},
"inquirer": {
"version": "7.1.0",
@@ -2728,8 +2736,7 @@
"isarray": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
- "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
- "dev": true
+ "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE="
},
"isbinaryfile": {
"version": "3.0.3",
@@ -2847,6 +2854,17 @@
"graceful-fs": "^4.1.6"
}
},
+ "jszip": {
+ "version": "3.2.2",
+ "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.2.2.tgz",
+ "integrity": "sha512-NmKajvAFQpbg3taXQXr/ccS2wcucR1AZ+NtyWp2Nq7HHVsXhcJFR8p0Baf32C2yVvBylFWVeKf+WI2AnvlPhpA==",
+ "requires": {
+ "lie": "~3.3.0",
+ "pako": "~1.0.2",
+ "readable-stream": "~2.3.6",
+ "set-immediate-shim": "~1.0.1"
+ }
+ },
"karma": {
"version": "4.4.1",
"resolved": "https://registry.npmjs.org/karma/-/karma-4.4.1.tgz",
@@ -3002,6 +3020,14 @@
}
}
},
+ "lie": {
+ "version": "3.3.0",
+ "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+ "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+ "requires": {
+ "immediate": "~3.0.5"
+ }
+ },
"lit-element": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/lit-element/-/lit-element-2.2.1.tgz",
@@ -3551,6 +3577,11 @@
"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
"dev": true
},
+ "pako": {
+ "version": "1.0.11",
+ "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+ "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
+ },
"parent-module": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -3685,8 +3716,7 @@
"process-nextick-args": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
- "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
- "dev": true
+ "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
},
"progress": {
"version": "2.0.3",
@@ -3824,7 +3854,6 @@
"version": "2.3.7",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
"integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
- "dev": true,
"requires": {
"core-util-is": "~1.0.0",
"inherits": "~2.0.3",
@@ -4254,8 +4283,7 @@
"safe-buffer": {
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
- "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
- "dev": true
+ "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
},
"safer-buffer": {
"version": "2.1.2",
@@ -4295,6 +4323,11 @@
"integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
"dev": true
},
+ "set-immediate-shim": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz",
+ "integrity": "sha1-SysbJ+uAip+NzEgaWOXlb1mfP2E="
+ },
"setprototypeof": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
@@ -4664,7 +4697,6 @@
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
- "dev": true,
"requires": {
"safe-buffer": "~5.1.0"
}
@@ -5022,8 +5054,7 @@
"util-deprecate": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
- "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
- "dev": true
+ "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
},
"util-extend": {
"version": "1.0.3",
diff --git a/package.json b/package.json
index e8316a4..6c4aba5 100644
--- a/package.json
+++ b/package.json
@@ -41,8 +41,10 @@
"selfsigned": "^1.10.7"
},
"dependencies": {
+ "file-saver": "^2.0.2",
"i18next": "^19.1.0",
"jquery": "^3.4.1",
+ "jszip": "^3.2.2",
"lit-element": "^2.2.1",
"lit-html": "^1.1.2",
"select2": "^4.0.13",
@@ -51,10 +53,10 @@
"universal-router": "^8.3.0",
"vpu-auth": "file:./vendor/auth",
"vpu-common": "file:./vendor/common",
+ "vpu-file-upload": "file:./vendor/file-upload",
"vpu-language-select": "file:./vendor/language-select",
"vpu-notification": "file:./vendor/notification",
- "vpu-person-profile": "file:./vendor/person-profile",
- "vpu-file-upload": "file:./vendor/file-upload"
+ "vpu-person-profile": "file:./vendor/person-profile"
},
"scripts": {
"clean": "rm dist/* -R",
diff --git a/src/vpu-signature-pdf-upload.js b/src/vpu-signature-pdf-upload.js
index 588e985..5755df0 100644
--- a/src/vpu-signature-pdf-upload.js
+++ b/src/vpu-signature-pdf-upload.js
@@ -1,8 +1,9 @@
-import $ from 'jquery';
import {createI18nInstance} from './i18n.js';
import {css, html} from 'lit-element';
import VPUSignatureLitElement from "./vpu-signature-lit-element";
import * as commonUtils from 'vpu-common/utils';
+import JSZip from 'jszip/dist/jszip.js';
+import 'file-saver';
import * as commonStyles from 'vpu-common/styles';
import suggestionsCSSPath from 'suggestions/dist/suggestions.css';
import {classMap} from 'lit-html/directives/class-map.js';
@@ -15,7 +16,7 @@ class SignaturePdfUpload extends VPUSignatureLitElement {
super();
this.lang = i18n.language;
this.entryPointUrl = commonUtils.getAPiUrl();
- this.organizationId = '';
+ this.files = [];
}
static get properties() {
@@ -25,10 +26,6 @@ class SignaturePdfUpload extends VPUSignatureLitElement {
};
}
- $(selector) {
- return $(this._(selector));
- }
-
connectedCallback() {
super.connectedCallback();
@@ -40,10 +37,20 @@ class SignaturePdfUpload extends VPUSignatureLitElement {
});
}
+ /**
+ * TODO: Implement real box
+ *
+ * @param ev
+ */
addLogEntry(ev) {
const ul = this.shadowRoot.querySelector('#log');
const li = document.createElement('li');
li.innerHTML = `<b>${ev.detail.status}</b> <tt>${ev.detail.filename}</tt>`;
+ console.log(ev.detail);
+
+ if (ev.detail.json) {
+ this.files.push(ev.detail.json);
+ }
ul.appendChild(li);
}
@@ -82,6 +89,30 @@ class SignaturePdfUpload extends VPUSignatureLitElement {
`;
}
+ /**
+ * Download signed pdf files
+ */
+ zipDownloadClickHandler() {
+ let zip = new JSZip();
+ const that = this;
+
+ // add all signed pdf files
+ this.files.forEach((file) => {
+ console.log(file);
+ zip.file(file.fileName, file.file.replace("data:application/pdf;base64,", ""), {base64: true});
+ });
+
+ zip.generateAsync({type:"blob"})
+ .then(function(content) {
+ console.log(zip);
+
+ // save with FileSaver.js
+ saveAs(content, "signed-documents.zip");
+
+ that._("#zip-download-button").stop();
+ });
+ }
+
render() {
const suggestionsCSS = commonUtils.getAssetURL(suggestionsCSSPath);
@@ -96,9 +127,13 @@ class SignaturePdfUpload extends VPUSignatureLitElement {
text="${i18n.t('pdf-upload.upload-area-text')}" button-label="${i18n.t('pdf-upload.upload-button-label')}"></vpu-fileupload>
</div>
</div>
-
</form>
<div id="log"></div>
+ <div class="field">
+ <div class="control">
+ <vpu-button id="zip-download-button" value="Download ZIP" @click="${this.zipDownloadClickHandler}" type="is-primary"></vpu-button>
+ </div>
+ </div>
<div class="notification is-warning ${classMap({hidden: this.isLoggedIn()})}">
${i18n.t('error-login-message')}
</div>
--
GitLab