Integrate modal dialog to FileSink, introduce files property and add documentation (#14)

packages/file-handling/README.md

@@ -22,10 +22,9 @@ files from a [Nextcloud](https://nextcloud.com/) instance.
     - example `<vpu-file-source allowed-mime-types='image/*'></vpu-file-source>` ... images (of all sub types) only
     - example `<vpu-file-source allowed-mime-types='image/png,text/plain'></vpu-file-source>` ... PNGs or TXTs only
     - example `<vpu-file-source allowed-mime-types='*/*'></vpu-file-source>` ... all file types (default)
-- `enabled-sources` (optional): sets which sources are enabled
+- `enabled-sources` (optional, default: `local`): sets which sources are enabled
     - you can use `local` and `nextcloud`
-    - default is `local`
-    - example `<vpu-file-source enabled-sources='local,nextcloud'></vpu-file-source>`
+    - example `<vpu-file-source enabled-sources="local,nextcloud"></vpu-file-source>`
 - `disabled` (optional): disable input control
     - example `<vpu-file-source disabled></vpu-file-source>`
 - `decompress-zip` (optional): decompress zip file and send the contained files (including files in folders)
@@ -37,8 +36,12 @@ files from a [Nextcloud](https://nextcloud.com/) instance.
 - `nextcloud-web-dav-url` (optional): Nextcloud WebDav Url to use with the Nextcloud file picker
     - example `<vpu-file-source nextcloud-web-dav-url="http://localhost:8081/remote.php/dav/files"></vpu-file-source>`
     - `nextcloud-auth-url` also needs to be set for the Nextcloud file picker to be active
-- `dialog-open` (optional): If this attribute is set the dialog for selecting local or Nextcloud files will open
+- `dialog-open` (optional): if this attribute is set the dialog for selecting local or Nextcloud files will open
     - example `<vpu-file-source dialog-open></vpu-file-source>`
+- `text` (optional): the text that is shown above the button to select files
+    - example `<vpu-file-source text="Please select some files"></vpu-file-source>`
+- `button-label` (optional): the text that is shown on the button to select files
+    - example `<vpu-file-source button-label="Select files"></vpu-file-source>`
 
 ### Outgoing Events
 
@@ -61,37 +64,32 @@ This web component is able to receive files and present as them as ZIP file down
 ### Attributes
 
 - `lang` (optional, default: `de`): set to `de` or `en` for German or English
-    - example `<vpu-file-source lang="de"></vpu-file-source>`
+    - example `<vpu-file-sink lang="de"></vpu-file-sink>`
+- `enabled-destinations` (optional, default: `local`): sets which destination are enabled
+    - you can use `local` and `nextcloud`
+    - example `<vpu-file-sink enabled-destinations="local,nextcloud"></vpu-file-sink>`
+- `filename` (optional, default: `files.zip`): sets a file name to use for downloading the zip file
+    - example `<vpu-file-sink filename="signed-documents.zip"></vpu-file-sink>`
 - `nextcloud-auth-url` (optional): Nextcloud Auth Url to use with the Nextcloud file picker
-    - example `<vpu-file-source nextcloud-auth-url="http://localhost:8081/index.php/apps/webapppassword"></vpu-file-source>`
+    - example `<vpu-file-sink nextcloud-auth-url="http://localhost:8081/index.php/apps/webapppassword"></vpu-file-sink>`
     - `nextcloud-web-dav-url` also needs to be set for the Nextcloud file picker to be active
 - `nextcloud-web-dav-url` (optional): Nextcloud WebDav Url to use with the Nextcloud file picker
-    - example `<vpu-file-source nextcloud-web-dav-url="http://localhost:8081/remote.php/dav/files"></vpu-file-source>`
+    - example `<vpu-file-sink nextcloud-web-dav-url="http://localhost:8081/remote.php/dav/files"></vpu-file-sink>`
     - `nextcloud-auth-url` also needs to be set for the Nextcloud file picker to be active
+- `text` (optional): the text that is shown above the button to download the zip file
+    - example `<vpu-file-sink text="Download files as ZIP-file"></vpu-file-sink>`
+- `button-label` (optional): the text that is shown on the button to download the zip file
+    - example `<vpu-file-sink button-label="Download files"></vpu-file-sink>`
 
-### Incoming Events
-
-#### `vpu-file-sink-download-compressed-files`
+### Properties
 
-If this event is received a *save-as* dialog will pop up to store a zip file of the received files.
-
-##### Payload
-
-`{'files': [File], 'filename': 'my-file.zip'}` where `[File]` is an array of binary files which should be
-compressed and `filename` is the name of the zip file that should be suggested in the *save-as* dialog
-
-##### Example
-
-```javascript
-const detail = { "files": files, "filename": "signed-documents.zip" };
-const event = new CustomEvent("vpu-file-sink-download-compressed-files", { "detail": detail });
-this._("#file-sink").dispatchEvent(event);
-```
+- `files`: an array of File objects which should be downloaded in the dialog
+    - if the property is set the dialog opens
 
 ## Local development
 
 ```bash
-# get the source
+# get the source code
 git clone git@gitlab.tugraz.at:VPU/WebComponents/FileHandling.git
 cd FileHandling
 git submodule update --init

packages/file-handling/src/file-sink.js

@@ -8,6 +8,7 @@ import * as commonStyles from 'vpu-common/styles';
 import {NextcloudFilePicker} from "./vpu-nextcloud-file-picker";
 import {classMap} from 'lit-html/directives/class-map.js';
 import FileSaver from 'file-saver';
+import MicroModal from "./micromodal.es";
 
 
 /**
@@ -19,8 +20,13 @@ export class FileSink extends ScopedElementsMixin(VPULitElement) {
         this.lang = 'de';
         this.nextcloudAuthUrl = '';
         this.nextcloudWebDavUrl = '';
-
-        this._onDownloadCompressedFiles = this.onDownloadCompressedFiles.bind(this);
+        this.text = '';
+        this.buttonLabel = '';
+        this.filename = "files.zip";
+        this.files = [];
+        this.activeDestination = 'local';
+        this.isDialogOpen = false;
+        this.enabledDestinations = 'local';
     }
 
     static get scopedElements() {
@@ -37,24 +43,26 @@ export class FileSink extends ScopedElementsMixin(VPULitElement) {
     static get properties() {
         return {
             lang: { type: String },
+            filename: { type: String },
+            files: { type: Array, attribute: false },
+            enabledDestinations: { type: String, attribute: 'enabled-destinations' },
             nextcloudAuthUrl: { type: String, attribute: 'nextcloud-auth-url' },
             nextcloudWebDavUrl: { type: String, attribute: 'nextcloud-web-dav-url' },
+            text: { type: String },
+            buttonLabel: { type: String, attribute: 'button-label' },
+            isDialogOpen: { type: Boolean, attribute: false },
+            activeDestination: { type: Boolean, attribute: false },
         };
     }
 
-    async onDownloadCompressedFiles(event) {
-        const detail = event.detail;
-
-        console.log("event", event);
-        console.log("detail", detail);
-
+    async downloadCompressedFiles() {
         // see: https://stuk.github.io/jszip/
         let JSZip = (await import('jszip/dist/jszip.js')).default;
         let zip = new JSZip();
         let fileNames = [];
 
         // add all signed pdf-files
-        detail.files.forEach((file) => {
+        this.files.forEach((file) => {
             let fileName = file.name;
 
             // add pseudo-random string on duplicate file name
@@ -70,7 +78,7 @@ export class FileSink extends ScopedElementsMixin(VPULitElement) {
         let content = await zip.generateAsync({type:"blob"});
 
         // see: https://github.com/eligrey/FileSaver.js#readme
-        FileSaver.saveAs(content, detail.filename || "files.zip");
+        FileSaver.saveAs(content, this.filename || "files.zip");
     }
 
     update(changedProperties) {
@@ -79,25 +87,28 @@ export class FileSink extends ScopedElementsMixin(VPULitElement) {
                 case "lang":
                     i18n.changeLanguage(this.lang);
                     break;
+                case "enabledDestinations":
+                    if (!this.hasEnabledDestination(this.activeDestination)) {
+                        this.activeDestination = this.enabledDestinations.split(",")[0];
+                    }
+                    break;
+                case "files":
+                    if (this.files.length !== 0 && !this.isDialogOpen) {
+                        this.openDialog();
+                    }
+                    break;
             }
         });
 
         super.update(changedProperties);
     }
 
-    connectedCallback() {
-        super.connectedCallback();
-
-        this.updateComplete.then(() => {
-            this.addEventListener('vpu-file-sink-download-compressed-files', this._onDownloadCompressedFiles);
-        });
+    hasEnabledDestination(source) {
+        return this.enabledDestinations.split(',').includes(source);
     }
 
-    disconnectedCallback() {
-        // remove event listeners
-        window.removeEventListener('vpu-file-sink-download-compressed-files', this._onDownloadCompressedFiles);
-
-        super.disconnectedCallback();
+    uploadToNextcloud(directory) {
+        console.log(directory);
     }
 
     preventDefaults (e) {
@@ -105,29 +116,88 @@ export class FileSink extends ScopedElementsMixin(VPULitElement) {
         e.stopPropagation();
     }
 
+    openDialog() {
+        console.log("openDialog");
+        MicroModal.show(this._('#modal-picker'), {
+            onClose: modal => { this.isDialogOpen = false; }
+        });
+    }
+
+    closeDialog() {
+        console.log("closeDialog");
+        MicroModal.close();
+    }
+
     static get styles() {
         // language=css
         return css`
             ${commonStyles.getGeneralCSS()}
             ${commonStyles.getButtonCSS()}
+            ${commonStyles.getModalDialogCSS()}
+
+            #zip-download-block {
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+            }
+
+            .block {
+                margin-bottom: 10px;
+            }
         `;
     }
 
     render() {
         return html`
-<!--
-            <vpu-nextcloud-file-picker id="nextcloud-file-picker"
-                                       class="${classMap({hidden: this.nextcloudWebDavUrl === "" || this.nextcloudAuthUrl === ""})}"
-                                       directories-only
-                                       select-button-text="${i18n.t('file-sink.select-directory')}"
-                                       ?disabled="${this.disabled}"
-                                       lang="${this.lang}"
-                                       auth-url="${this.nextcloudAuthUrl}"
-                                       web-dav-url="${this.nextcloudWebDavUrl}"
-                                       @vpu-nextcloud-file-picker-file-downloaded="${(event) => {
-                                           this.sendFileEvent(event.detail.file);
-                                       }}"></vpu-nextcloud-file-picker>
--->
+            <div class="modal micromodal-slide" id="modal-picker" aria-hidden="true">
+                <div class="modal-overlay" tabindex="-1" data-micromodal-close>
+                    <div class="modal-container" role="dialog" aria-modal="true" aria-labelledby="modal-picker-title">
+                        <nav class="modal-nav">
+                            <div title="${i18n.t('file-sink.nav-local')}"
+                                 @click="${() => { this.activeDestination = "local"; }}"
+                                 class="${classMap({"active": this.activeDestination === "local", hidden: !this.hasEnabledDestination("local")})}">
+                                <vpu-icon class="nav-icon" name="laptop"></vpu-icon>
+                            </div>
+                            <div title="Nextcloud"
+                                 @click="${() => { this.activeDestination = "nextcloud"; }}"
+                                 class="${classMap({"active": this.activeDestination === "nextcloud", hidden: !this.hasEnabledDestination("nextcloud")})}">
+                                <vpu-icon class="nav-icon" name="cloud"></vpu-icon>
+                            </div>
+                        </nav>
+                        <main class="modal-content" id="modal-picker-content">
+                            <button title="${i18n.t('file-sink.modal-close')}" class="modal-close" aria-label="Close modal" data-micromodal-close></button>
+                            <div class="source-main ${classMap({"hidden": this.activeDestination !== "local"})}">
+                                <div id="zip-download-block">
+                                    <div class="block">
+                                        ${this.text || i18n.t('file-sink.local-intro', {'amount': this.files.length})}
+                                    </div>
+                                    <button class="button is-primary"
+                                            ?disabled="${this.disabled}"
+                                            @click="${() => { this.downloadCompressedFiles(); }}">
+                                        ${this.buttonLabel || i18n.t('file-sink.local-button')}
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="source-main ${classMap({"hidden": this.activeDestination !== "nextcloud"})}">
+                                <vpu-nextcloud-file-picker id="nextcloud-file-picker"
+                                                           class="${classMap({hidden: this.nextcloudWebDavUrl === "" || this.nextcloudAuthUrl === ""})}"
+                                                           directories-only
+                                                           max-selected-items="1"
+                                                           select-button-text="${i18n.t('file-sink.select-directory')}"
+                                                           ?disabled="${this.disabled}"
+                                                           lang="${this.lang}"
+                                                           auth-url="${this.nextcloudAuthUrl}"
+                                                           web-dav-url="${this.nextcloudWebDavUrl}"
+                                                           @vpu-nextcloud-file-picker-file-downloaded="${(event) => {
+                                                               this.uploadToNextcloud(event.detail.file);
+                                                           }}"></vpu-nextcloud-file-picker>
+                            </div>
+                        </main>
+                    </div>
+                </div>
+            </div>
         `;
     }
 }
\ No newline at end of file

packages/file-handling/src/i18n/de/translation.json

@@ -15,6 +15,12 @@
     "modal-close": "Dialog schließen",
     "nav-local": "Lokaler Computer"
   },
+  "file-sink": {
+    "local-intro": "{{amount}} Datei(en) als ZIP-Datei herunterladen",
+    "local-button": "ZIP-Datei herunterladen",
+    "modal-close": "Dialog schließen",
+    "nav-local": "Lokaler Computer"
+  },
   "nextcloud-file-picker": {
     "open": "Nextcloud",
     "open-nextcloud-file-picker": "Dateien von Ihrer Nextcloud auswählen",

packages/file-handling/src/i18n/en/translation.json

@@ -15,6 +15,12 @@
     "modal-close": "Close dialog",
     "nav-local": "My device"
   },
+  "file-sink": {
+    "local-intro": "Download {{amount}} file(s) as ZIP-file",
+    "local-button": "Download ZIP-file",
+    "modal-close": "Close dialog",
+    "nav-local": "My device"
+  },
   "nextcloud-file-picker": {
     "open": "Nextcloud",
     "open-nextcloud-file-picker": "Select files from your Nextcloud",