file browser: unify file type schema and avoid switch-case bloat

[proxmox-widget-toolkit.git] / src / window / FileBrowser.js

diff --git a/src/window/FileBrowser.js b/src/window/FileBrowser.js
index f4a22b6468815cef78026cb7a21a6e5d35c4d054..570ad8f5a2201f3c7e26b0049660bab264ae1878 100644 (file)
--- a/src/window/FileBrowser.js
+++ b/src/window/FileBrowser.js
@@ -1,7 +1,21 @@
 Ext.define('proxmox-file-tree', {
     extend: 'Ext.data.Model',
 
-    fields: ['filepath', 'text', 'type', 'size',
+    fields: [
+       'filepath', 'text', 'type', 'size',
+       {
+           name: 'sizedisplay',
+           calculate: data => {
+               if (data.size === undefined) {
+                   return '';
+               } else if (data.type === 'd') {
+                   let fs = data.size === 1 ? gettext('{0} item') : gettext('{0} items');
+                   return Ext.String.format(fs, data.size);
+               }
+
+               return Proxmox.Utils.format_size(data.size);
+           },
+       },
        {
            name: 'mtime',
            type: 'date',
@@ -10,40 +24,10 @@ Ext.define('proxmox-file-tree', {
        {
            name: 'iconCls',
            calculate: function(data) {
-               let icon = 'file-o';
-               switch (data.type) {
-                   case 'b': // block device
-                       icon = 'cube';
-                       break;
-                   case 'c': // char device
-                       icon = 'tty';
-                       break;
-                   case 'd':
-                       icon = data.expanded ? 'folder-open-o' : 'folder-o';
-                       break;
-                   case 'f': //regular file
-                       icon = 'file-text-o';
-                       break;
-                   case 'h': // hardlink
-                       icon = 'file-o';
-                       break;
-                   case 'l': // softlink
-                       icon = 'link';
-                       break;
-                   case 'p': // pipe/fifo
-                       icon = 'exchange';
-                       break;
-                   case 's': // socket
-                       icon = 'plug';
-                       break;
-                   case 'v': // virtual
-                       icon = 'cube';
-                       break;
-                   default:
-                       icon = 'file-o';
-                       break;
+               let icon = Proxmox.Schema.pxarFileTypes[data.type]?.icon ?? 'file-o';
+               if (data.expanded && data.type === 'd') {
+                   icon = 'folder-open-o';
                }
-
                return `fa fa-${icon}`;
            },
        },
@@ -76,8 +60,13 @@ Ext.define("Proxmox.window.FileBrowser", {
            'd': true, // directories
        },
 
-       // set to true to show the tar download button
+       // enable tar download, this will add a menu to the
+       // "Download" button when the selection can be downloaded as
+       // .tar files
        enableTar: false,
+
+       // prefix to prepend to downloaded file names
+       downloadPrefix: '',
     },
 
     controller: {
@@ -109,12 +98,11 @@ Ext.define("Proxmox.window.FileBrowser", {
 
            let data = selection[0].data;
 
-           let atag = document.createElement('a');
-
-           atag.download = data.text;
            let params = { ...view.extraParams };
            params.filepath = data.filepath;
-           atag.download = data.text;
+
+           let atag = document.createElement('a');
+           atag.download = view.downloadPrefix + data.text;
            if (data.type === 'd') {
                if (tar) {
                    params.tar = 1;
@@ -135,13 +123,19 @@ Ext.define("Proxmox.window.FileBrowser", {
            if (!selection || selection.length < 1) return;
 
            let data = selection[0].data;
+           let st = Ext.String.format(gettext('Selected "{0}"'), atob(data.filepath));
+           view.lookup('selectText').setText(st);
+
            let canDownload = view.downloadURL && view.downloadableFileTypes[data.type];
-           let zipBtn = me.lookup('downloadBtn');
-           let tarBtn = me.lookup('downloadTar');
-           zipBtn.setDisabled(!canDownload);
-           tarBtn.setDisabled(!canDownload);
-           zipBtn.setText(data.type === 'd' ? gettext('Download .zip') : gettext('Download'));
-           tarBtn.setVisible(data.type === 'd' && view.enableTar);
+           let enableMenu = view.enableTar && data.type === 'd';
+
+           let downloadBtn = view.lookup('downloadBtn');
+           downloadBtn.setDisabled(!canDownload || enableMenu);
+           downloadBtn.setHidden(!canDownload || enableMenu);
+
+           let menuBtn = view.lookup('menuBtn');
+           menuBtn.setDisabled(!canDownload || !enableMenu);
+           menuBtn.setHidden(!canDownload || !enableMenu);
        },
 
        errorHandler: function(error, msg) {
@@ -150,7 +144,7 @@ Ext.define("Proxmox.window.FileBrowser", {
                return false;
            }
            me.lookup('downloadBtn').setDisabled(true);
-           me.lookup('downloadTar').setDisabled(true);
+           me.lookup('menuBtn').setDisabled(true);
            if (me.initialLoadDone) {
                Ext.Msg.alert(gettext('Error'), msg);
                return true;
@@ -262,10 +256,15 @@ Ext.define("Proxmox.window.FileBrowser", {
                },
                {
                    text: gettext('Size'),
-                   dataIndex: 'size',
-                   renderer: value => value === undefined ? '' : Proxmox.Utils.format_size(value),
+                   dataIndex: 'sizedisplay',
                    sorter: {
                        sorterFn: function(a, b) {
+                           if (a.data.type === 'd' && b.data.type !== 'd') {
+                               return -1;
+                           } else if (a.data.type !== 'd' && b.data.type === 'd') {
+                               return 1;
+                           }
+
                            let asize = a.data.size || 0;
                            let bsize = b.data.size || 0;
 
@@ -281,38 +280,46 @@ Ext.define("Proxmox.window.FileBrowser", {
                {
                    text: gettext('Type'),
                    dataIndex: 'type',
-                   renderer: function(value) {
-                       switch (value) {
-                           case 'b': return gettext('Block Device');
-                           case 'c': return gettext('Character Device');
-                           case 'd': return gettext('Directory');
-                           case 'f': return gettext('File');
-                           case 'h': return gettext('Hardlink');
-                           case 'l': return gettext('Softlink');
-                           case 'p': return gettext('Pipe/Fifo');
-                           case 's': return gettext('Socket');
-                           case 'v': return gettext('Virtual');
-                           default: return Proxmox.Utils.unknownText;
-                       }
-                   },
+                   renderer: (v) => Proxmox.Schema.pxarFileTypes[v]?.label ?? Proxmox.Utils.unknownText,
                },
            ],
        },
     ],
 
-    buttons: [
+    fbar: [
        {
-           text: gettext('Download .tar.zst'),
-           handler: 'downloadTar',
-           reference: 'downloadTar',
-           hidden: true,
-           disabled: true,
+           text: '',
+           xtype: 'label',
+           reference: 'selectText',
        },
        {
-           text: gettext('Download .zip'),
+           text: gettext('Download'),
+           xtype: 'button',
            handler: 'downloadZip',
            reference: 'downloadBtn',
            disabled: true,
+           hidden: true,
+       },
+       {
+           text: gettext('Download as'),
+           xtype: 'button',
+           reference: 'menuBtn',
+           menu: {
+               items: [
+                   {
+                       iconCls: 'fa fa-fw fa-file-zip-o',
+                       text: gettext('.zip'),
+                       handler: 'downloadZip',
+                       reference: 'downloadZip',
+                   },
+                   {
+                       iconCls: 'fa fa-fw fa-archive',
+                       text: gettext('.tar.zst'),
+                       handler: 'downloadTar',
+                       reference: 'downloadTar',
+                   },
+               ],
+           },
        },
     ],
 });