mainview/quarantine: add theme switcher

[pmg-gui.git] / js / AttachmentGrid.js

diff --git a/js/AttachmentGrid.js b/js/AttachmentGrid.js
index e31bd123975066b3fd111ed766e0687ee0510f09..746812d6e02b43c09951a18bd98d21e222d1fbb0 100644 (file)
--- a/js/AttachmentGrid.js
+++ b/js/AttachmentGrid.js
@@ -1,13 +1,87 @@
-Ext.define('PMG.grid.AttachmentGrid',{
+Ext.define('PMG.grid.AttachmentGrid', {
     extend: 'Ext.grid.GridPanel',
     xtype: 'pmgAttachmentGrid',
+    mixins: ['Proxmox.Mixin.CBind'],
+
+    showDownloads: true,
+
+    title: gettext('Attachments'),
+    iconCls: 'fa fa-paperclip',
+
+    minHeight: 50,
+    maxHeight: 250,
+    scrollable: true,
+
+    collapsible: true,
+    titleCollapse: true,
+
+    tbar: [
+       '->',
+       {
+           xtype: 'checkbox',
+           boxLabel: gettext('Show All Parts'),
+           boxLabelAlgign: 'before',
+           listeners: {
+               change: function(checkBox, value) {
+                   let store = this.up('pmgAttachmentGrid').getStore();
+                   store.clearFilter();
+                   if (!value) {
+                       store.filter({
+                           property: 'content-disposition',
+                           value: 'attachment',
+                       });
+                   }
+               },
+           },
+       },
+    ],
 
     store: {
        autoDestroy: true,
-       fields: [ 'name', 'content-type', 'size' ],
+       fields: ['name', 'content-type', 'size', 'content-disposition'],
        proxy: {
            type: 'proxmox',
+       },
+       filters: {
+           property: 'content-disposition',
+           value: 'attachment',
+       },
+    },
+
+    controller: {
+       xclass: 'Ext.app.ViewController',
+       init: function(view) {
+           view.store.on('load', this.onLoad, this);
+       },
+       onLoad: function(store, records, success) {
+           let me = this;
+           let view = me.getView();
+           if (!success) {
+               view.updateTitleStats(-1);
+               return;
+           }
+           let attachments = records.filter(({ data }) => data['content-disposition'] === 'attachment');
+           let totalSize = attachments.reduce((sum, { data }) => sum + data.size, 0);
+           view.updateTitleStats(attachments.length, totalSize);
+       },
+    },
+
+    updateTitleStats: function(count, totalSize) {
+       let me = this;
+       let title;
+       if (count > 0) {
+           title = Ext.String.format(gettext('{0} Attachments'), count);
+           title += ` (${Proxmox.Utils.format_size(totalSize)})`;
+           if (me.collapsible) {
+               me.expand();
+           }
+       } else {
+           title = gettext('No Attachments');
+           if (me.collapsible) {
+               me.collapse();
+           }
        }
+       me.setTitle(title);
     },
 
     setID: function(rec) {
@@ -25,7 +99,7 @@ Ext.define('PMG.grid.AttachmentGrid',{
     emptyText: gettext('No Attachments'),
 
     download: function() {
-       alert(arguments);
+       Ext.Msg.alert(arguments);
     },
 
     columns: [
@@ -42,20 +116,22 @@ Ext.define('PMG.grid.AttachmentGrid',{
        },
        {
            text: gettext('Size'),
-           renderer: Proxmox.Utils.format_size,
+           renderer: Proxmox.Utils.render_size,
            dataIndex: 'size',
            flex: 1,
        },
        {
            header: gettext('Download'),
+           cbind: {
+               hidden: '{!showDownloads}',
+           },
            renderer: function(value, mD, rec) {
                var me = this;
-               let url = '/api2/json/quarantine/download';
-               url += '?mailid=' + me.mailid;
-               url += '&attachmentid=' + rec.data.id;
-               return "<a target='_blank' class='download' download='"+ rec.data.name +"' href='" +
-               url + "'><i class='fa fa-fw fa-download'</i></a>";
+               let url = `/api2/json/quarantine/download?mailid=${me.mailid}&attachmentid=${rec.data.id}`;
+               return `<a target='_blank' class='download' download='${rec.data.name}' href='${url}'>
+                   <i class='fa fa-fw fa-download'</i>
+               </a>`;
            },
-       }
-    ]
+       },
+    ],
 });