[pve-devel] [PATCH widget-toolkit v2 1/1] window: add ConfirmRemoveDialog

["Michael Köppl" <m.koeppl@proxmox.com>]

This dialog window can be used to create confirmation dialogs with some
amount of customization. It allows adding additional items, optionally
supports confirming intent by entering the ID of the affected guest,
storage, or resource, customizing the buttons of the dialog.

It is heavily based on the SafeDestroy window, but makes it more
general-purpose, covering both Yes/No dialogs as well as the safe
destroy dialogs with confirmation.

Signed-off-by: Michael Köppl <m.koeppl@proxmox.com>
---
I settled on adding this window because Ext.Msg.MessageBox is not really
made to be extended, so I chose a similar approach to what was done for
SafeDestroy, extending Ext.window.Window instead. I borrowed heavily
from SafeDestroy, but made the component a bit more
general-purpose/flexible. This component can now be used for yes/no
dialog windows as well as the safe destroy dialogs for guests/storages,
etc.

I'll also send follow-up patches that use ConfirmRemoveDialog for the
SafeDestroyGuest and SafeDestroyStorage windows in pve-manager.

 src/Makefile                      |   1 +
 src/window/ConfirmRemoveDialog.js | 242 ++++++++++++++++++++++++++++++
 2 files changed, 243 insertions(+)
 create mode 100644 src/window/ConfirmRemoveDialog.js

diff --git a/src/Makefile b/src/Makefile
index 0e2b329..a7dfa17 100644
--- a/src/Makefile
+++ b/src/Makefile
@@ -84,6 +84,7 @@ JSSRC=					\
 	window/Edit.js			\
 	window/PasswordEdit.js		\
 	window/SafeDestroy.js		\
+	window/ConfirmRemoveDialog.js		\
 	window/PackageVersions.js	\
 	window/TaskViewer.js		\
 	window/LanguageEdit.js		\
diff --git a/src/window/ConfirmRemoveDialog.js b/src/window/ConfirmRemoveDialog.js
new file mode 100644
index 0000000..933ff6e
--- /dev/null
+++ b/src/window/ConfirmRemoveDialog.js
@@ -0,0 +1,242 @@
+Ext.define('Proxmox.window.ConfirmRemoveDialog', {
+    extend: 'Ext.window.Window',
+    alias: 'widget.pveConfirmRemoveDialog',
+
+    title: gettext('Confirm'),
+    modal: true,
+    resizable: false,
+    bodyPadding: 10,
+    width: 410,
+    layout: { type: 'vbox' },
+
+    confirmButtonText: gettext('Yes'),
+    declineButtonText: gettext('No'),
+
+    additionalItems: [],
+
+    // if set to true, a warning sign will be displayed and entering the ID will
+    // be required before removal is possible. If set to false, a question mark
+    // will be displayed.
+    dangerous: false,
+
+    // gets called if we have a progress bar or taskview and it detected that
+    // the task finished. function(success)
+    taskDone: Ext.emptyFn,
+
+    // gets called when the api call is finished, right at the beginning
+    // function(success, response, options)
+    apiCallDone: Ext.emptyFn,
+
+    config: {
+        item: {
+            id: undefined,
+        },
+        text: undefined,
+        url: undefined,
+        note: undefined,
+        params: {},
+    },
+
+    getParams: function () {
+        let me = this;
+
+        if (Ext.Object.isEmpty(me.params)) {
+            return '';
+        }
+        return '?' + Ext.Object.toQueryString(me.params);
+    },
+
+    controller: {
+        xclass: 'Ext.app.ViewController',
+
+        control: {
+            'field[name=confirm]': {
+                change: function (f, value) {
+                    const view = this.getView();
+                    const confirmButton = this.lookupReference('confirmButton');
+                    if (value === view.getItem().id.toString()) {
+                        confirmButton.enable();
+                    } else {
+                        confirmButton.disable();
+                    }
+                },
+                specialkey: function (field, event) {
+                    const confirmButton = this.lookupReference('confirmButton');
+                    if (!confirmButton.isDisabled() && event.getKey() === event.ENTER) {
+                        confirmButton.fireEvent('click', confirmButton, event);
+                    }
+                },
+            },
+            'button[reference=confirmButton]': {
+                click: function () {
+                    let me = this;
+                    const view = me.getView();
+
+                    Proxmox.Utils.API2Request({
+                        url: view.getUrl() + view.getParams(),
+                        method: 'DELETE',
+                        waitMsgTarget: view,
+                        failure: function (response, opts) {
+                            view.apiCallDone(false, response, opts);
+                            view.close();
+                            Ext.Msg.alert('Error', response.htmlStatus);
+                        },
+                        success: function (response, options) {
+                            const hasProgressBar = !!(view.showProgress && response.result.data);
+
+                            view.apiCallDone(true, response, options);
+
+                            if (hasProgressBar) {
+                                // stay around so we can trigger our close events
+                                // when background action is completed
+                                view.hide();
+
+                                const upid = response.result.data;
+                                const win = Ext.create('Proxmox.window.TaskProgress', {
+                                    upid: upid,
+                                    taskDone: view.taskDone,
+                                    listeners: {
+                                        destroy: function () {
+                                            view.close();
+                                        },
+                                    },
+                                });
+                                win.show();
+                            } else {
+                                view.close();
+                            }
+                        },
+                    });
+                },
+            },
+            'button[reference=declineButton]': {
+                click: function () {
+                    const view = this.getView();
+                    view.close();
+                },
+            },
+        },
+    },
+
+    initComponent: function () {
+        let me = this;
+
+        let cls = [Ext.baseCSSPrefix + 'message-box-icon', Ext.baseCSSPrefix + 'dlg-icon'];
+        if (me.dangerous) {
+            cls.push(Ext.baseCSSPrefix + 'message-box-warning');
+        } else {
+            cls.push(Ext.baseCSSPrefix + 'message-box-question');
+        }
+
+        let body = {
+            xtype: 'container',
+            layout: 'hbox',
+            items: [
+                {
+                    xtype: 'component',
+                    cls: cls,
+                },
+            ],
+        };
+
+        let content = {
+            xtype: 'container',
+            layout: 'vbox',
+            items: [
+                {
+                    xtype: 'component',
+                    reference: 'messageCmp',
+                    html: Ext.htmlEncode(me.getText()),
+                },
+            ],
+        };
+
+        if (me.dangerous) {
+            if (!Ext.isDefined(me.getItem().id)) {
+                throw 'no ID specified';
+            }
+
+            let label = `${gettext('Please enter the ID to confirm')} (${me.getItem().id})`;
+            content.items.push({
+                itemId: 'confirmField',
+                reference: 'confirmField',
+                xtype: 'textfield',
+                name: 'confirm',
+                padding: '5 0 0 0',
+                width: 340,
+                labelWidth: 240,
+                fieldLabel: label,
+                hideTrigger: true,
+                allowBlank: false,
+            });
+        }
+
+        if (me.additionalItems && me.additionalItems.length > 0) {
+            content.items.push({
+                xtype: 'container',
+                height: 5,
+            });
+            for (const item of me.additionalItems) {
+                content.items.push(item);
+            }
+        }
+
+        if (Ext.isDefined(me.getNote())) {
+            content.items.push({
+                xtype: 'container',
+                reference: 'noteContainer',
+                flex: 1,
+                layout: {
+                    type: 'vbox',
+                },
+                items: [
+                    {
+                        xtype: 'component',
+                        reference: 'noteCmp',
+                        userCls: 'pmx-hint',
+                        html: `<span title="${me.getNote()}">${me.getNote()}</span>`,
+                    },
+                ],
+            });
+        }
+
+        body.items.push(content);
+
+        me.items = [body];
+
+        let buttons = [
+            {
+                xtype: 'button',
+                reference: 'confirmButton',
+                text: me.confirmButtonText,
+                width: 75,
+                margin: '0 5 0 0',
+                disabled: me.dangerous,
+            },
+        ];
+
+        if (me.declineButtonText) {
+            buttons.push({
+                xtype: 'button',
+                reference: 'declineButton',
+                text: me.declineButtonText,
+                width: 75,
+            });
+        }
+
+        me.dockedItems = [
+            {
+                xtype: 'container',
+                dock: 'bottom',
+                cls: ['x-toolbar', 'x-toolbar-footer'],
+                layout: {
+                    type: 'hbox',
+                    pack: 'center',
+                },
+                items: buttons,
+            },
+        ];
+
+        me.callParent();
+    },
+});
-- 
2.47.3



_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel