[pve-devel] [PATCH widget-toolkit v3 1/4] window: refactor construction of SafeDestroy items

[Michael Köppl]

This is done to make extending SafeDestroy with additional functionality
easier.

Signed-off-by: Michael Köppl <m.koeppl at proxmox.com>
---
No functional change intended here. I mostly split the widget-toolkit
patches up into multiple parts to make review of the individual
extensions of the dialog easier. This is the first step that makes later
changes easier to implement and understand.

 src/window/SafeDestroy.js | 175 +++++++++++++++++++++-----------------
 1 file changed, 96 insertions(+), 79 deletions(-)

diff --git a/src/window/SafeDestroy.js b/src/window/SafeDestroy.js
index d38f085..76096cb 100644
--- a/src/window/SafeDestroy.js
+++ b/src/window/SafeDestroy.js
@@ -107,101 +107,118 @@ Ext.define('Proxmox.window.SafeDestroy', {
         },
     },
 
-    buttons: [
-        {
-            reference: 'removeButton',
-            text: gettext('Remove'),
-            disabled: true,
-        },
-    ],
-
     initComponent: function () {
         let me = this;
 
-        me.items = [
-            {
-                xtype: 'component',
-                cls: [
-                    Ext.baseCSSPrefix + 'message-box-icon',
-                    Ext.baseCSSPrefix + 'message-box-warning',
-                    Ext.baseCSSPrefix + 'dlg-icon',
-                ],
-            },
-            {
+        let body = {
+            xtype: 'container',
+            layout: 'hbox',
+            items: [
+                {
+                    xtype: 'component',
+                    cls: [
+                        Ext.baseCSSPrefix + 'message-box-icon',
+                        Ext.baseCSSPrefix + 'dlg-icon',
+                        Ext.baseCSSPrefix + 'message-box-warning',
+                    ],
+                },
+            ],
+        };
+
+        const itemId = me.getItem().id;
+        if (!Ext.isDefined(itemId)) {
+            throw 'no ID specified';
+        }
+
+        const taskName = me.getTaskName();
+        let label = `${gettext('Please enter the ID to confirm')} (${itemId})`;
+
+        let content = {
+            xtype: 'container',
+            layout: 'vbox',
+            items: [
+                {
+                    xtype: 'component',
+                    reference: 'messageCmp',
+                    html: Ext.htmlEncode(
+                        Proxmox.Utils.format_task_description(
+                            taskName,
+                            me.getItem().formattedIdentifier ?? itemId,
+                        ),
+                    ),
+                },
+                {
+                    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',
-                    align: 'stretch',
                 },
                 items: [
                     {
                         xtype: 'component',
-                        reference: 'messageCmp',
-                    },
-                    {
-                        itemId: 'confirmField',
-                        reference: 'confirmField',
-                        xtype: 'textfield',
-                        name: 'confirm',
-                        labelWidth: 300,
-                        hideTrigger: true,
-                        allowBlank: false,
+                        reference: 'noteCmp',
+                        userCls: 'pmx-hint',
+                        html: `<span title="${me.getNote()}">${me.getNote()}</span>`,
                     },
-                ]
-                    .concat(me.additionalItems)
-                    .concat([
-                        {
-                            xtype: 'container',
-                            reference: 'noteContainer',
-                            flex: 1,
-                            hidden: true,
-                            layout: {
-                                type: 'vbox',
-                            },
-                            items: [
-                                {
-                                    xtype: 'component',
-                                    reference: 'noteCmp',
-                                    userCls: 'pmx-hint',
-                                },
-                            ],
-                        },
-                    ]),
-            },
-        ];
+                ],
+            });
+        }
 
-        me.callParent();
+        body.items.push(content);
 
-        const itemId = me.getItem().id;
-        if (!Ext.isDefined(itemId)) {
-            throw 'no ID specified';
-        }
+        me.items = [body];
 
-        if (Ext.isDefined(me.getNote())) {
-            me.lookupReference('noteCmp').setHtml(
-                `<span title="${me.getNote()}">${me.getNote()}</span>`,
-            );
-            const noteContainer = me.lookupReference('noteContainer');
-            noteContainer.setHidden(false);
-            noteContainer.setDisabled(false);
-        }
+        let buttons = [
+            {
+                xtype: 'button',
+                reference: 'removeButton',
+                text: gettext('Remove'),
+                disabled: true,
+                width: 75,
+                margin: '0 5 0 0',
+            },
+        ];
 
-        let taskName = me.getTaskName();
-        if (Ext.isDefined(taskName)) {
-            me.lookupReference('messageCmp').setHtml(
-                Ext.htmlEncode(
-                    Proxmox.Utils.format_task_description(
-                        taskName,
-                        me.getItem().formattedIdentifier ?? itemId,
-                    ),
-                ),
-            );
-        } else {
-            throw 'no task name specified';
-        }
+        me.dockedItems = [
+            {
+                xtype: 'container',
+                dock: 'bottom',
+                cls: ['x-toolbar', 'x-toolbar-footer'],
+                layout: {
+                    type: 'hbox',
+                    pack: 'center',
+                },
+                items: buttons,
+            },
+        ];
 
-        let label = `${gettext('Please enter the ID to confirm')} (${itemId})`;
-        me.lookupReference('confirmField').setFieldLabel(Ext.htmlEncode(label));
+        me.callParent();
     },
 });
-- 
2.47.3