[pmg-devel] [PATCH pmg-gui v2 1/1] fix #3450: ui: queue: multi-select for item deletion/delivery

[Hannes Laimer]

ExtJS does not allow having a "select all" checkbox in the header for
buffered stores, that is why we have to use `Ext.data.Store` instead.

Signed-off-by: Hannes Laimer <h.laimer at proxmox.com>
---
filtering did not feel as instant as it did with the buffered store, but
not really noticable

 js/PostfixMailQueue.js | 104 +++++++++++++++++++++++++++--------------
 1 file changed, 68 insertions(+), 36 deletions(-)

diff --git a/js/PostfixMailQueue.js b/js/PostfixMailQueue.js
index 17c7d05..7fd690d 100644
--- a/js/PostfixMailQueue.js
+++ b/js/PostfixMailQueue.js
@@ -22,8 +22,14 @@ Ext.define('PMG.Postfix.MailQueue', {
 
     queuename: 'deferred',
 
+    selModel: {
+        selType: 'checkboxmodel',
+        mode: 'MULTI',
+        showHeaderCheckbox: true,
+    },
+
     store: {
-        xclass: 'Ext.data.BufferedStore',
+        xclass: 'Ext.data.Store',
         model: 'pmg-mailq',
         remoteFilter: true,
         remoteSort: true,
@@ -54,44 +60,62 @@ Ext.define('PMG.Postfix.MailQueue', {
 
         onFlush: function (button, event, rec) {
             var view = this.getView();
-
-            Proxmox.Utils.API2Request({
-                url:
-                    '/api2/extjs/nodes/' +
-                    view.nodename +
-                    '/postfix/queue/' +
-                    view.queuename +
-                    '/' +
-                    rec.data.queue_id,
-                method: 'POST',
-                waitMsgTarget: view,
-                failure: function (response, opts) {
-                    Ext.Msg.alert(gettext('Error'), response.htmlStatus);
-                },
-            });
+            let sel = view.getSelectionModel().getSelection();
+            if (sel && sel.length > 0) {
+                let ids = sel.map((r) => r.get('queue_id'));
+                Ext.Msg.show({
+                    title: gettext('Confirm'),
+                    message: Ext.String.format(gettext("Deliver {0} selected mails now?"), ids.length),
+                    buttons: Ext.Msg.YESNO,
+                    icon: Ext.Msg.WARNING,
+                    fn: function (btn) {
+                        if (btn !== 'yes') { return; }
+                        Proxmox.Utils.API2Request({
+                            url:
+                                '/api2/extjs/nodes/' +
+                                view.nodename +
+                                '/postfix/queue/' +
+                                view.queuename,
+                            method: 'POST',
+                            params: { action: 'deliver', id: ids.join(';') },
+                            waitMsgTarget: view,
+                            success: function () { view.selModel.deselectAll(); view.store.load(); },
+                            failure: function (response) { Ext.Msg.alert(gettext('Error'), response.htmlStatus); },
+                        });
+                    },
+                });
+                return;
+            }
         },
 
         onRemove: function (button, event, rec) {
             var view = this.getView();
-
-            Proxmox.Utils.API2Request({
-                url:
-                    '/api2/extjs/nodes/' +
-                    view.nodename +
-                    '/postfix/queue/' +
-                    view.queuename +
-                    '/' +
-                    rec.data.queue_id,
-                method: 'DELETE',
-                waitMsgTarget: view,
-                success: function (response, opts) {
-                    view.selModel.deselectAll();
-                    view.store.load();
-                },
-                failure: function (response, opts) {
-                    Ext.Msg.alert(gettext('Error'), response.htmlStatus);
-                },
-            });
+            let sel = view.getSelectionModel().getSelection();
+            if (sel && sel.length > 0) {
+                let ids = sel.map((r) => r.get('queue_id'));
+                Ext.Msg.show({
+                    title: gettext('Confirm'),
+                    message: Ext.String.format(gettext("Delete {0} selected mails?"), ids.length),
+                    buttons: Ext.Msg.YESNO,
+                    icon: Ext.Msg.WARNING,
+                    fn: function (btn) {
+                        if (btn !== 'yes') { return; }
+                        Proxmox.Utils.API2Request({
+                            url:
+                                '/api2/extjs/nodes/' +
+                                view.nodename +
+                                '/postfix/queue/' +
+                                view.queuename,
+                            method: 'POST',
+                            params: { action: 'delete', id: ids.join(';') },
+                            waitMsgTarget: view,
+                            success: function () { view.selModel.deselectAll(); view.store.load(); },
+                            failure: function (response) { Ext.Msg.alert(gettext('Error'), response.htmlStatus); },
+                        });
+                    },
+                });
+                return;
+            }
         },
 
         onHeaders: function (button, event, rec) {
@@ -130,6 +154,12 @@ Ext.define('PMG.Postfix.MailQueue', {
     tbar: [
         {
             xtype: 'proxmoxButton',
+            reference: 'headerBtn',
+            enableFn: function (rec) {
+                let grid = this.up('grid');
+                if (!grid) { return false; }
+                return grid.getSelectionModel().getCount() === 1;
+            },
             disabled: true,
             text: gettext('Headers'),
             handler: 'onHeaders',
@@ -141,7 +171,9 @@ Ext.define('PMG.Postfix.MailQueue', {
             handler: 'onFlush',
         },
         {
-            xtype: 'proxmoxStdRemoveButton',
+            xtype: 'proxmoxButton',
+            disabled: true,
+            text: gettext('Remove'),
             handler: 'onRemove',
         },
         {
-- 
2.47.3