[pve-devel] [PATCH proxmox-widget-toolkit 1/5] ui refactoring: refactored SafeDestroy from pve-manager into proxmox-widget-toolkit

[Hannes Laimer <h.laimer@proxmox.com>]

Signed-off-by: Hannes Laimer <h.laimer@proxmox.com>
---
 src/Makefile             |   1 +
 src/window/SafeRemove.js | 193 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 194 insertions(+)
 create mode 100644 src/window/SafeRemove.js

diff --git a/src/Makefile b/src/Makefile
index 12dda30..e7da4eb 100644
--- a/src/Makefile
+++ b/src/Makefile
@@ -43,6 +43,7 @@ JSSRC=					\
 	panel/GaugeWidget.js		\
 	window/Edit.js			\
 	window/PasswordEdit.js		\
+	window/SafeRemove.js		\
 	window/TaskViewer.js		\
 	window/LanguageEdit.js		\
 	window/DiskSmart.js		\
diff --git a/src/window/SafeRemove.js b/src/window/SafeRemove.js
new file mode 100644
index 0000000..c541272
--- /dev/null
+++ b/src/window/SafeRemove.js
@@ -0,0 +1,193 @@
+/* Popup a message window
+ * where the user has to manually enter the resource ID
+ * to enable the destroy button
+ */
+Ext.define('Proxmox.window.SafeRemove', {
+    extend: 'Ext.window.Window',
+    alias: 'proxmoxSafeRemove',
+
+    title: gettext('Confirm'),
+    modal: true,
+    buttonAlign: 'center',
+    bodyPadding: 10,
+    width: 450,
+    layout: {type: 'hbox'},
+    defaultFocus: 'confirmField',
+    showProgress: false,
+
+    config: {
+        item: {
+            id: undefined,
+            type: undefined
+        },
+        url: undefined,
+        params: {}
+    },
+
+    getParams: function () {
+        const me = this;
+        const purgeCheckbox = me.lookupReference('purgeCheckbox');
+        if (purgeCheckbox.checked) {
+            me.params.purge = 1;
+        }
+        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) {
+                    var view = this.getView();
+                    var removeButton = this.lookupReference('removeButton');
+                    if (value === view.getItem().id.toString()) {
+                        removeButton.enable();
+                    } else {
+                        removeButton.disable();
+                    }
+                },
+                specialkey: function (field, event) {
+                    var removeButton = this.lookupReference('removeButton');
+                    if (!removeButton.isDisabled()
+                        && event.getKey() === event.ENTER) {
+                        removeButton.fireEvent('click', removeButton, event);
+                    }
+                }
+            },
+            'button[reference=removeButton]': {
+                click: function () {
+                    const view = this.getView();
+                    Proxmox.Utils.API2Request({
+                        url: view.getUrl() + view.getParams(),
+                        method: 'DELETE',
+                        waitMsgTarget: view,
+                        failure: function (response, opts) {
+                            view.close();
+                            Ext.Msg.alert('Error', response.htmlStatus);
+                        },
+                        success: function (response, options) {
+                            const hasProgressBar = !!(view.showProgress &&
+                                response.result.data);
+
+                            if (hasProgressBar) {
+                                // stay around so we can trigger our close
+                                // events when background action is completed
+                                view.hide();
+
+                                var upid = response.result.data;
+                                var win =
+                                    Ext.create('Proxmox.window.TaskProgress', {
+                                        upid: upid,
+                                        listeners: {
+                                            destroy: function () {
+                                                view.close();
+                                            }
+                                        }
+                                    });
+                                win.show();
+                            } else {
+                                view.close();
+                            }
+                        }
+                    });
+                }
+            }
+        }
+    },
+
+    items: [
+        {
+            xtype: 'component',
+            cls: [Ext.baseCSSPrefix + 'message-box-icon',
+                Ext.baseCSSPrefix + 'message-box-warning',
+                Ext.baseCSSPrefix + 'dlg-icon']
+        },
+        {
+            xtype: 'container',
+            flex: 1,
+            layout: {
+                type: 'vbox',
+                align: 'stretch'
+            },
+            items: [
+                {
+                    xtype: 'component',
+                    reference: 'messageCmp'
+                },
+                {
+                    itemId: 'confirmField',
+                    reference: 'confirmField',
+                    xtype: 'textfield',
+                    name: 'confirm',
+                    labelWidth: 300,
+                    hideTrigger: true,
+                    allowBlank: false
+                },
+                {
+                    xtype: 'proxmoxcheckbox',
+                    name: 'purge',
+                    reference: 'purgeCheckbox',
+                    boxLabel: gettext('Wipe'),
+                    checked: false,
+                    autoEl: {
+                        tag: 'div',
+                        'data-qtip': gettext('Wipe disk after the removal of mountpoint')
+                    }
+                },
+            ]
+        }
+    ],
+    buttons: [
+        {
+            reference: 'removeButton',
+            text: gettext('Remove'),
+            disabled: true
+        }
+    ],
+
+    initComponent: function () {
+        const me = this;
+        me.callParent();
+
+        const item = me.getItem();
+
+        if (!Ext.isDefined(item.id)) {
+            throw "no ID specified";
+        }
+
+        if (!Ext.isDefined(item.type)) {
+            throw "no Disk type specified";
+        }
+
+        const messageCmp = me.lookupReference('messageCmp');
+        let msg;
+
+        if (item.type === 'VM') {
+            msg = Proxmox.Utils.format_task_description('qmdestroy', item.id);
+        } else if (item.type === 'CT') {
+            msg = Proxmox.Utils.format_task_description('vzdestroy', item.id);
+        } else if (item.type === 'CephPool') {
+            msg = Proxmox.Utils.format_task_description('cephdestroypool', item.id);
+        } else if (item.type === 'Image') {
+            msg = Proxmox.Utils.format_task_description('unknownimgdel', item.id);
+        } else {
+            throw "unknown item type specified";
+        }
+
+        if (!(item.type === 'VM' || item.type === 'CT')) {
+            let purgeCheckbox = me.lookupReference('purgeCheckbox');
+            purgeCheckbox.setDisabled(true);
+            purgeCheckbox.setHidden(true);
+        }
+
+        messageCmp.setHtml(msg);
+
+        const confirmField = me.lookupReference('confirmField');
+        msg = gettext('Please enter the ID to confirm') +
+            ' (' + item.id + ')';
+        confirmField.setFieldLabel(msg);
+    }
+});
-- 
2.20.1