js/AttachmentGrid.js

   1 Ext.define('PMG.grid.AttachmentGrid', {
   2     extend: 'Ext.grid.GridPanel',
   3     xtype: 'pmgAttachmentGrid',
   4     mixins: ['Proxmox.Mixin.CBind'],
   5
   6     showDownloads: true,
   7
   8     title: gettext('Attachments'),
   9     iconCls: 'fa fa-paperclip',
  10
  11     minHeight: 50,
  12     maxHeight: 250,
  13     scrollable: true,
  14
  15     collapsible: true,
  16     titleCollapse: true,
  17
  18     tbar: [
  19         '->',
  20         {
  21             xtype: 'checkbox',
  22             boxLabel: gettext('show all parts'),
  23             boxLabelAlgign: 'before',
  24             listeners: {
  25                 change: function(checkBox, value) {
  26                     let store = this.up('pmgAttachmentGrid').getStore();
  27                     store.clearFilter();
  28                     if (!value) {
  29                         store.filter({
  30                             property: 'content-disposition',
  31                             value: 'attachment',
  32                         });
  33                     }
  34                 },
  35             },
  36         },
  37     ],
  38
  39     store: {
  40         autoDestroy: true,
  41         fields: ['name', 'content-type', 'size', 'content-disposition'],
  42         proxy: {
  43             type: 'proxmox',
  44         },
  45         filters: {
  46             property: 'content-disposition',
  47             value: 'attachment',
  48         },
  49     },
  50
  51     controller: {
  52         xclass: 'Ext.app.ViewController',
  53         init: function(view) {
  54             view.store.on('load', this.onLoad, this);
  55         },
  56         onLoad: function(store, records, success) {
  57             let me = this;
  58             let view = me.getView();
  59             if (!success) {
  60                 view.updateTitleStats(-1);
  61                 return;
  62             }
  63             let attachments = records.filter(({ data }) => data['content-disposition'] === 'attachment');
  64             let totalSize = attachments.reduce((sum, { data }) => sum + data.size, 0);
  65             view.updateTitleStats(attachments.length, totalSize);
  66         },
  67     },
  68
  69     updateTitleStats: function(count, totalSize) {
  70         let me = this;
  71         let title;
  72         if (count > 0) {
  73             title = Ext.String.format(gettext('{0} Attachments'), count);
  74             title += ` (${Proxmox.Utils.format_size(totalSize)})`;
  75             if (me.collapsible) {
  76                 me.expand();
  77             }
  78         } else {
  79             title = gettext('No Attachments');
  80             if (me.collapsible) {
  81                 me.collapse();
  82             }
  83         }
  84         me.setTitle(title);
  85     },
  86
  87     setID: function(rec) {
  88         var me = this;
  89         if (!rec || !rec.data || !rec.data.id) {
  90             me.getStore().removeAll();
  91             return;
  92         }
  93         var url = '/api2/json/quarantine/listattachments?id=' + rec.data.id;
  94         me.mailid = rec.data.id;
  95         me.store.proxy.setUrl(url);
  96         me.store.load();
  97     },
  98
  99     emptyText: gettext('No Attachments'),
 100
 101     download: function() {
 102         Ext.Msg.alert(arguments);
 103     },
 104
 105     columns: [
 106         {
 107             text: gettext('Filename'),
 108             dataIndex: 'name',
 109             flex: 1,
 110         },
 111         {
 112             text: gettext('Filetype'),
 113             dataIndex: 'content-type',
 114             renderer: PMG.Utils.render_filetype,
 115             flex: 1,
 116         },
 117         {
 118             text: gettext('Size'),
 119             renderer: Proxmox.Utils.render_size,
 120             dataIndex: 'size',
 121             flex: 1,
 122         },
 123         {
 124             header: gettext('Download'),
 125             cbind: {
 126                 hidden: '{!showDownloads}',
 127             },
 128             renderer: function(value, mD, rec) {
 129                 var me = this;
 130                 let url = `/api2/json/quarantine/download?mailid=${me.mailid}&attachmentid=${rec.data.id}`;
 131                 return `<a target='_blank' class='download' download='${rec.data.name}' href='${url}'>
 132                     <i class='fa fa-fw fa-download'</i>
 133                 </a>`;
 134             },
 135         },
 136     ],
 137 });