Folder loading and Tabulator Tables integration (#26)

package-lock.json

@@ -8628,6 +8628,11 @@
         }
       }
     },
+    "tabulator-tables": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/tabulator-tables/-/tabulator-tables-4.7.0.tgz",
+      "integrity": "sha512-FOFn13Vxuv0qJXZkwfEVBvT8fjm+VOdpcryclftCvf8i+8P1hJhKftyBfVtOqlPLWM0B0o8pNHZaV+JKY/IJSA=="
+    },
     "tar": {
       "version": "4.4.13",
       "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.13.tgz",

package.json

@@ -50,6 +50,7 @@
     "lit-html": "^1.2.1",
     "pdfjs-dist": "^2.4.456",
     "source-sans-pro": "^2.45.0",
+    "tabulator-tables": "^4.7.0",
     "universal-router": "^9.0.1",
     "vpu-app-shell": "file:./vendor/app-shell",
     "vpu-auth": "file:./vendor/auth",

rollup.config.js

@@ -272,6 +272,7 @@ Dependencies:
                 {src: 'assets/manifest.json', dest: 'dist', rename: pkg.name + '.manifest.json'},
                 {src: 'assets/*.metadata.json', dest: 'dist'},
                 {src: 'node_modules/vpu-common/assets/icons/*.svg', dest: 'dist/local/vpu-common/icons'},
+                {src: 'node_modules/tabulator-tables/dist/css', dest: 'dist/local/' + pkg.name + '/tabulator-tables'},
             ],
         }),
         useBabel && babel({

src/vpu-file-picker.js

@@ -3,8 +3,12 @@ import {css, html} from 'lit-element';
 import {ScopedElementsMixin} from '@open-wc/scoped-elements';
 import VPULitElement from 'vpu-common/vpu-lit-element';
 import {MiniSpinner} from 'vpu-common';
+import * as commonUtils from 'vpu-common/utils';
 import * as commonStyles from 'vpu-common/styles';
 import { createClient } from "webdav/web";
+import {classMap} from 'lit-html/directives/class-map.js';
+import {humanFileSize} from "vpu-common/i18next";
+import Tabulator from 'tabulator-tables';
 
 const i18n = createI18nInstance();
 
@@ -18,6 +22,12 @@ export class FilePicker extends ScopedElementsMixin(VPULitElement) {
         this.authUrl = '';
         this.webDavUrl = '';
         this.loginWindow = null;
+        this.isPickerActive = false;
+        this.statusText = "";
+        this.directoryPath = "/";
+        this.directoryContents = [];
+        this.webDavClient = null;
+        this.tabulatorTable = null;
 
         this._onReceiveWindowMessage = this.onReceiveWindowMessage.bind(this);
     }
@@ -36,6 +46,10 @@ export class FilePicker extends ScopedElementsMixin(VPULitElement) {
             lang: { type: String },
             authUrl: { type: String, attribute: "auth-url" },
             webDavUrl: { type: String, attribute: "web-dav-url" },
+            isPickerActive: { type: Boolean, attribute: false },
+            statusText: { type: String, attribute: false },
+            directoryPath: { type: String, attribute: false },
+            directoryContents: { type: Array, attribute: false },
         };
     }
 
@@ -62,15 +76,18 @@ export class FilePicker extends ScopedElementsMixin(VPULitElement) {
         this.updateComplete.then(()=>{
             // see: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
             window.addEventListener('message', this._onReceiveWindowMessage);
+
+            this.tabulatorTable = new Tabulator(this._("#directory-content-table"), {});
         });
     }
 
     openFilePicker() {
+        this.statusText = "Auth in progress";
         this.loginWindow = window.open(this.authUrl, "Nextcloud Login",
             "width=400,height=400,menubar=no,scrollbars=no,status=no,titlebar=no,toolbar=no");
     }
 
-    async onReceiveWindowMessage(event) {
+    onReceiveWindowMessage(event) {
         const data = event.data;
         console.log("data", data);
 
@@ -80,7 +97,8 @@ export class FilePicker extends ScopedElementsMixin(VPULitElement) {
 
             const apiUrl = this.webDavUrl + "/" + data.loginName;
 
-            const client = createClient(
+            // https://github.com/perry-mitchell/webdav-client/blob/master/API.md#module_WebDAV.createClient
+            this.webDavClient = createClient(
                 apiUrl,
                 {
                     username: data.loginName,
@@ -88,54 +106,101 @@ export class FilePicker extends ScopedElementsMixin(VPULitElement) {
                 }
             );
 
-            const directoryItems = await client.getDirectoryContents("/");
-
-            console.log("directoryItems", directoryItems);
-
-            return;
-
-            fetch(apiUrl, {
-                method: 'PROPFIND',
-                headers: {
-                    'Content-Type': 'text/xml',
-                    'Authorization': 'Basic ' + btoa(data.loginName + ":" + data.token),
-                },
-                data: "<?xml version=\"1.0\"?>" +
-                "<a:propfind xmlns:a=\"DAV:\">" +
-                "<a:prop><a:resourcetype />" +
-                "</a:prop>" +
-                "</a:propfind>"
-            })
-                .then(result => {
-                    console.log("result", result);
-
-                    if (!result.ok) throw result;
-
-                    return result.text();
-                })
-                .then((xml) => {
-                    console.log("xml", xml);
-                }).catch(error => {
-                    console.error("error", error);
-                });
+            this.loadDirectory("");
         }
     }
 
+    /**
+     * Loads the directory from WebDAV
+     *
+     * @param path
+     */
+    loadDirectory(path) {
+        this.statusText = "Loading directory from Nextcloud: " + path;
+        this.directoryPath = path;
+        this.directoryContents = [];
+
+        // https://github.com/perry-mitchell/webdav-client#getdirectorycontents
+        this.webDavClient
+            .getDirectoryContents(path)
+            .then(contents => {
+                console.log("contents", contents);
+                this.statusText = "";
+                this.directoryContents = contents;
+
+                this.tabulatorTable.setData(contents);
+
+                this.isPickerActive = true;
+            }).catch(error => {
+            console.error(error.message);
+            this.statusText = error.message;
+            this.isPickerActive = false;
+        });
+    }
+
     static get styles() {
         // language=css
         return css`
             ${commonStyles.getGeneralCSS()}
             ${commonStyles.getButtonCSS()}
+
+            .block {
+                margin-bottom: 10px;
+            }
         `;
     }
 
+    /**
+     * Returns the list of files in a directory
+     *
+     * @returns {*[]}
+     */
+    getDirectoryContentsHtml() {
+        let results = [];
+
+        // this.directoryContents.forEach((content) => {
+        //     results.push(html`
+        //         <tr>
+        //             <td><a href="#" @click="${(e) => { this.fileClicked(content, e); }}">${content.filename}</a></td>
+        //             <td>${content.size}</td>
+        //         </tr>
+        //     `);
+        // });
+
+        return results;
+    }
+
+    fileClicked(file, event) {
+        this.loadDirectory(this.directoryPath + file.filename);
+        event.preventDefault();
+    }
+
     render() {
+        commonUtils.initAssetBaseURL('vpu-tabulator-table');
+        const tabulatorCss = commonUtils.getAssetURL('local/vpu-signature/tabulator-tables/css/tabulator.min.css');
+        console.log("tabulatorCss", tabulatorCss);
+
         return html`
-            <div>
+            <link rel="stylesheet" href="${tabulatorCss}">
+            <div class="block">
                 <button class="button"
                         title="${i18n.t('file-picker.open-file-picker')}"
                         @click="${async () => { this.openFilePicker(); } }">${i18n.t('file-picker.open')}</button>
             </div>
+            <div class="block ${classMap({hidden: this.statusText === ""})}">
+                <vpu-mini-spinner style="font-size: 0.7em"></vpu-mini-spinner>
+                ${this.statusText}
+            </div>
+            <div class="block ${classMap({hidden: !this.isPickerActive})}">
+                <h2>${this.directoryPath}</h2>
+                <table id="directory-content-table">
+                    <thead>
+                        <th>Filename</th>
+                        <th>Size</th>
+                    </thead>
+                    <tbody>${this.getDirectoryContentsHtml()}</tbody>
+                </table>
+            </div>
         `;
     }
 }