Merge branch 'nc-filepicker-sink' into 'master'

Preparing Nc-filepicker for file upload and small features added

See merge request VPU/WebComponents/FileHandling!1

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

@@ -348,6 +348,7 @@ export class FileSource extends ScopedElementsMixin(VPULitElement) {
                                                lang="${this.lang}"
                                                auth-url="${this.nextcloudAuthUrl}"
                                                web-dav-url="${this.nextcloudWebDavUrl}"
+                                               allowed-mime-types="${this.allowedMimeTypes}"                                        
                                                @vpu-nextcloud-file-picker-file-downloaded="${(event) => {
                                                    this.sendFileEvent(event.detail.file);
                                                }}"></vpu-nextcloud-file-picker>

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

@@ -15,6 +15,7 @@
     "open-nextcloud-file-picker": "Dateien von Ihrer Nextcloud auswählen",
     "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"
   }
 }

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

@@ -15,6 +15,7 @@
     "open-nextcloud-file-picker": "Select files from your Nextcloud",
     "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"
   }
 }

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

@@ -21,11 +21,13 @@ export class NextcloudFilePicker extends ScopedElementsMixin(VPULitElement) {
         this.webDavUrl = '';
         this.loginWindow = null;
         this.isPickerActive = false;
-        this.statusText = "";
-        this.lastDirectoryPath = "/";
-        this.directoryPath = "/";
+        this.statusText = '';
+        this.lastDirectoryPath = '/';
+        this.directoryPath = '/';
         this.webDavClient = null;
         this.tabulatorTable = null;
+        this.allowedMimeTypes = '*/*';
+        this.directoriesOnly = null;
 
         this._onReceiveWindowMessage = this.onReceiveWindowMessage.bind(this);
     }
@@ -43,12 +45,13 @@ export class NextcloudFilePicker extends ScopedElementsMixin(VPULitElement) {
     static get properties() {
         return {
             lang: { type: String },
-            authUrl: { type: String, attribute: "auth-url" },
-            webDavUrl: { type: String, attribute: "web-dav-url" },
+            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 },
             allowedMimeTypes: { type: String, attribute: 'allowed-mime-types' },
+            directoriesOnly: { type: Boolean, attribute: 'directories-only' },
         };
     }
 
@@ -112,18 +115,34 @@ export class NextcloudFilePicker extends ScopedElementsMixin(VPULitElement) {
                             return date + "." + month + "." + year + " " + hours + ":" + minutes;
                         }},
                 ],
+                initialSort:[
+                    {column:"basename", dir:"asc"},
+                    {column:"type", dir:"asc"},
+                ],
                 rowClick: (e, row) => {
                     const data = row.getData();
 
-                    switch(data.type) {
-                        case "directory":
-                            this.directoryClicked(e, data);
-                            break;
-                        case "file":
-                            console.log("file selected", data);
-                            break;
+                    if(this.directoriesOnly) {
+                        console.log("directory selected", data);
+                    }
+                    else
+                    {
+                        switch(data.type) {
+                            case "directory":
+                                this.directoryClicked(e, data);
+                                break;
+                            case "file":
+                                console.log("file selected", data);
+                                break;
+                        }
                     }
                 },
+                rowDblClick: (e, row) => {
+                    const data = row.getData();
+                    if(this.directoriesOnly) {
+                        this.directoryClicked(e, data);
+                    }
+                }
             });
 
             function checkFileType(data, filterParams) {
@@ -141,7 +160,6 @@ export class NextcloudFilePicker extends ScopedElementsMixin(VPULitElement) {
                 });
 
                 if (deny) {
-                    console.log(`mime type ${data.type} of file '${data.filename}' is not compatible with ${filterParams}`);
                     return false;
                 }
                 return true;
@@ -149,6 +167,13 @@ export class NextcloudFilePicker extends ScopedElementsMixin(VPULitElement) {
             if(typeof this.allowedMimeTypes !== 'undefined') {
                 this.tabulatorTable.setFilter(checkFileType, this.allowedMimeTypes);
             }
+            if(typeof this.directoriesOnly !== 'undefined' && this.directoriesOnly)
+            {
+                console.log("filter " + this.directoriesOnly);
+                this.tabulatorTable.setFilter([
+                    {field:"type", type:"=", value:"directory"},
+                ]);
+            }
         });
     }
 
@@ -284,6 +309,9 @@ export class NextcloudFilePicker extends ScopedElementsMixin(VPULitElement) {
             </div>
             <div class="block ${classMap({hidden: !this.isPickerActive})}">
                 <h2>${this.directoryPath}</h2>
+                <button class="button is-small"
+                        title="${i18n.t('nextcloud-file-picker.folder-home')}"
+                        @click="${() => { this.loadDirectory("/"); }}"><vpu-icon name="home"></vpu-icon></button>
                 <button class="button is-small"
                         title="${i18n.t('nextcloud-file-picker.folder-last')}"
                         @click="${() => { this.loadDirectory(this.lastDirectoryPath); }}">&#8678;</button>