Merge branch 'nextcloud-filepicker-ui' into 'master'

Nextcloud filepicker ui

See merge request VPU/WebComponents/FileHandling!2

packages/file-handling/rollup.config.js

@@ -12,6 +12,9 @@ import del from 'rollup-plugin-delete';
 const build = (typeof process.env.BUILD !== 'undefined') ? process.env.BUILD : 'local';
 console.log("build: " + build);
 
+let nextcloudBaseURL = 'https://cloud.tugraz.at';
+let nextcloudFileURL = nextcloudBaseURL + '/apps/files/?dir=';
+
 export default {
     input: (build !== 'test') ? ['src/demo.js', 'src/vpu-file-source.js'] : glob.sync('test/**/*.js'),
     output: {
@@ -27,6 +30,8 @@ export default {
         }),
         consts({
             environment: build,
+            nextcloudBaseURL: nextcloudBaseURL,
+            nextcloudFileURL: nextcloudFileURL,
         }),
         resolve({
             customResolveOptions: {

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

@@ -21,6 +21,14 @@
     "folder-last": "In das zuletzt ausgewählte Verzeichnis springen",
     "folder-up": "In das übergeordnete Verzeichnis springen",
     "folder-home": "In das Home Verzeichnis springen",
-    "select-files": "Dateien auswählen"
+    "select-files": "Dateien auswählen",
+    "refresh-nextcloud-file-picker": "Erneut verbinden",
+    "loadpath-nextcloud-file-picker": "Das Nextcloud Verzeichnis wird geladen",
+    "load-path-link": "Gehe zu {{path}}",
+    "auth-progress": "Anmeldung läuft",
+    "last-modified": "Geändert",
+    "mime-type": "Art",
+    "filename": "Name",
+    "size": "Größe"
   }
 }

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

@@ -21,6 +21,14 @@
     "folder-last": "Jump to the last directory",
     "folder-up": "Jump to the parent directory",
     "folder-up": "Jump to the home directory",
-    "select-files": "Select files"
+    "select-files": "Select files",
+    "refresh-nextcloud-file-picker": "Connect again",
+    "loadpath-nextcloud-file-picker": "Loading directory from Nextcloud",
+    "load-path-link": "Go to {{path}}",
+    "auth-progress": "Authentification in progress",
+    "last-modified": "Last modified",
+    "mime-type": "Type",
+    "filename": "Filename",
+    "size": "Size"
   }
 }

packages/file-handling/src/vpu-nextcloud-file-picker.js

@@ -9,6 +9,8 @@ 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';
+//import nextcloudFileURL from 'consts:nextcloudFileURL'; TODO
+import nextcloudBaseURL from 'consts:nextcloudBaseURL';
 
 /**
  * NextcloudFilePicker web component
@@ -88,22 +90,22 @@ export class NextcloudFilePicker extends ScopedElementsMixin(VPULitElement) {
                 selectable: this.selectNum,
                 selectableRangeMode: "drag",
                 columns: [
-                    {title: "Type", field: "type", align:"center", formatter: (cell, formatterParams, onRendered) => {
+                    {title: "", field: "type", align:"center", formatter: (cell, formatterParams, onRendered) => {
                             const icon_tag =  that.constructor.getScopedTagName("vpu-icon");
                             let icon = `<${icon_tag} name="empty-file"></${icon_tag}>`;
                             return (cell.getValue() === "directory") ? `<${icon_tag} name="folder"></${icon_tag}>` : icon;
                         }},
-                    {title: "Filename", field: "basename"},
-                    {title: "Size", field: "size", formatter: (cell, formatterParams, onRendered) => {
+                    {title: i18n.t('nextcloud-file-picker.filename'), field: "basename"},
+                    {title: i18n.t('nextcloud-file-picker.size'), field: "size", formatter: (cell, formatterParams, onRendered) => {
                             return cell.getRow().getData().type === "directory" ? "" : humanFileSize(cell.getValue());}},
-                    {title: "Mime", field: "mime", formatter: (cell, formatterParams, onRendered) => {
+                    {title: i18n.t('nextcloud-file-picker.mime-type'), field: "mime", formatter: (cell, formatterParams, onRendered) => {
                             if(typeof cell.getValue() === 'undefined') {
                                 return "";
                             }
                             const [fileMainType, fileSubType] = cell.getValue().split('/');
                             return fileSubType;
                         }},
-                    {title: "Last modified", field: "lastmod",sorter: (a, b, aRow, bRow, column, dir, sorterParams) => {
+                    {title: i18n.t('nextcloud-file-picker.last-modified'), field: "lastmod",sorter: (a, b, aRow, bRow, column, dir, sorterParams) => {
                             const a_timestamp = Date.parse(a);
                             const b_timestamp = Date.parse(b);
                             return a_timestamp - b_timestamp; //you must return the difference between the two values
@@ -186,11 +188,19 @@ export class NextcloudFilePicker extends ScopedElementsMixin(VPULitElement) {
     }
 
     openFilePicker() {
-        // TODO: translation
-        this.statusText = "Auth in progress";
-        const authUrl = this.authUrl + "?target-origin=" + encodeURIComponent(window.location.href);
-        this.loginWindow = window.open(authUrl, "Nextcloud Login",
-            "width=400,height=400,menubar=no,scrollbars=no,status=no,titlebar=no,toolbar=no");
+        if(this.webDavClient === null)
+        {
+            this.statusText = i18n.t('nextcloud-file-picker.auth-progress');
+            const authUrl = this.authUrl + "?target-origin=" + encodeURIComponent(window.location.href);
+            this.loginWindow = window.open(authUrl, "Nextcloud Login",
+                "width=400,height=400,menubar=no,scrollbars=no,status=no,titlebar=no,toolbar=no");
+        }
+        else {
+
+            this.loadDirectory(this.directoryPath, this.webDavClient);
+
+        }
+
     }
 
     onReceiveWindowMessage(event) {
@@ -202,8 +212,9 @@ export class NextcloudFilePicker extends ScopedElementsMixin(VPULitElement) {
             // alert("Login name: " + data.loginName + "\nApp password: " + data.token);
 
             const apiUrl = this.webDavUrl + "/" + data.loginName;
-
+            console.log("url: ", this.webDavUrl);
             // https://github.com/perry-mitchell/webdav-client/blob/master/API.md#module_WebDAV.createClient
+
             this.webDavClient = createClient(
                 apiUrl,
                 {
@@ -212,7 +223,8 @@ export class NextcloudFilePicker extends ScopedElementsMixin(VPULitElement) {
                 }
             );
 
-            this.loadDirectory("/");
+            this.loadDirectory(this.directoryPath);
+
         }
     }
 
@@ -222,12 +234,12 @@ export class NextcloudFilePicker extends ScopedElementsMixin(VPULitElement) {
      * @param path
      */
     loadDirectory(path) {
-        // TODO: translation
-        this.statusText = "Loading directory from Nextcloud: " + path;
+        this.statusText = i18n.t('nextcloud-file-picker.loadpath-nextcloud-file-picker');//"Loading directory from Nextcloud: " + path;
         this.lastDirectoryPath = this.directoryPath;
         this.directoryPath = path;
 
         // https://github.com/perry-mitchell/webdav-client#getdirectorycontents
+
         this.webDavClient
             .getDirectoryContents(path, {details: true})
             .then(contents => {
@@ -236,10 +248,25 @@ export class NextcloudFilePicker extends ScopedElementsMixin(VPULitElement) {
                 this.tabulatorTable.setData(contents.data);
                 this.isPickerActive = true;
             }).catch(error => {
-            console.error(error.message);
-            this.statusText = error.message;
-            this.isPickerActive = false;
+                console.error(error.message);
+
+                //try to reload with home directory
+                if(path != "/"){
+                    this.loadDirectory("/");
+                }
+                else {
+                    this.statusText = error.message;
+                    this.isPickerActive = false;
+                }
+
+                //client is broken reload try to reset & reconnect
+                this.webDavClient = null;
+                let reloadButton = html`<button class="button"
+                            title="${i18n.t('nextcloud-file-picker.refresh-nextcloud-file-picker')}"
+                            @click="${async () => { this.openFilePicker(); } }"><vpu-icon name="reload"></button>`;
+                this.statusText = reloadButton;
         });
+
     }
 
     directoryClicked(event, file) {
@@ -270,8 +297,8 @@ export class NextcloudFilePicker extends ScopedElementsMixin(VPULitElement) {
 
                 this.statusText = "";
             }).catch(error => {
-            console.error(error.message);
-            this.statusText = error.message;
+                console.error(error.message);
+                this.statusText = error.message;
         });
     }
 
@@ -287,6 +314,43 @@ export class NextcloudFilePicker extends ScopedElementsMixin(VPULitElement) {
         return (path === "") ? "/" : path;
     }
 
+    /**
+     * Returns the directory path as clickable breadcrumbs
+     *
+     * @returns {string} clickable breadcrumb path
+     */
+    getBreadcrumb() {
+        let htmlpath = [];
+        htmlpath[0] =  html`<a @click="${() => { this.loadDirectory("/"); }}" title="${i18n.t('nextcloud-file-picker.folder-home')}"><vpu-icon name="home"></vpu-icon></a>`;
+        const directories = this.directoryPath.split('/');
+
+        for(let i = 1; i < directories.length; i ++)
+        {
+            let path = "";
+            for(let j = 1; j <= i; j++)
+            {
+                path += "/";
+                path += directories[j];
+            }
+
+            htmlpath[i] = html` / <a @click="${() => { this.loadDirectory(path); }}" title="${i18n.t('nextcloud-file-picker.load-path-link', {path: directories[i]})}">${directories[i]}</a>`;
+        }
+
+        return htmlpath;
+    }
+
+    /**
+     * Returns the directory path as clickable breadcrumbs
+     *
+     * @returns {string} clickable breadcrumb path
+     */
+    getNextCloudLink() {
+        //später ersetzen durch:
+        //let link = nextcloudFileURL + this.directoryPath;
+        let link = nextcloudBaseURL + '/apps/files/?dir=' + this.directoryPath;
+        return link;
+    }
+
     static get styles() {
         // language=css
         return css`
@@ -322,7 +386,10 @@ export class NextcloudFilePicker extends ScopedElementsMixin(VPULitElement) {
                 ${this.statusText}
             </div>
             <div class="block ${classMap({hidden: !this.isPickerActive})}">
-                <h2>${this.directoryPath}</h2>
+                <h2>${this.getBreadcrumb()}</h2>
+                 <a class="button is-small"
+                        title="${i18n.t('nextcloud-file-picker.open-in-nextcloud')}"
+                        href="${this.getNextCloudLink()}" target="_blank">open in nc</a>
                 <button class="button is-small"
                         title="${i18n.t('nextcloud-file-picker.folder-home')}"
                         @click="${() => { this.loadDirectory("/"); }}"><vpu-icon name="home"></vpu-icon></button>