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 <[email protected]> --- 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 [email protected] https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
