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

[Thomas Lamprecht]

Am 23.09.25 um 11:34 schrieb 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,

Is this really something we want to use a warning for?

Also, will it now prompt for a single mail too? Would like to avoid doing
that for the single mail edge case.

> +                    fn: function (btn) {
> +                        if (btn !== 'yes') { return; }
> +                        Proxmox.Utils.API2Request({
> +                            url:
> +                                '/api2/extjs/nodes/' +
> +                                view.nodename +
> +                                '/postfix/queue/' +
> +                                view.queuename,

could use a template string `/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(); },

would rather have above function split over multiple lines.

> +                            failure: function (response) { Ext.Msg.alert(gettext('Error'), response.htmlStatus); },

can be written as:

failure: (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);
> -                },
> -            });

Most comments from above also apply to the code below.

> +            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',
>          },
>          {