src/window/SafeDestroy.js

   1 /* Popup a message window
   2  * where the user has to manually enter the resource ID
   3  * to enable the destroy button
   4  */
   5 Ext.define('Proxmox.window.SafeDestroy', {
   6     extend: 'Ext.window.Window',
   7     alias: 'proxmoxSafeDestroy',
   8
   9     title: gettext('Confirm'),
  10     modal: true,
  11     buttonAlign: 'center',
  12     bodyPadding: 10,
  13     width: 450,
  14     layout: { type: 'hbox' },
  15     defaultFocus: 'confirmField',
  16     showProgress: false,
  17
  18     additionalItems: [],
  19
  20     config: {
  21         item: {
  22             id: undefined,
  23         },
  24         url: undefined,
  25         note: undefined,
  26         taskName: undefined,
  27         params: {},
  28     },
  29
  30     getParams: function() {
  31         let me = this;
  32
  33         if (Ext.Object.isEmpty(me.params)) {
  34             return '';
  35         }
  36         return '?' + Ext.Object.toQueryString(me.params);
  37     },
  38
  39     controller: {
  40
  41         xclass: 'Ext.app.ViewController',
  42
  43         control: {
  44             'field[name=confirm]': {
  45                 change: function(f, value) {
  46                     const view = this.getView();
  47                     const removeButton = this.lookupReference('removeButton');
  48                     if (value === view.getItem().id.toString()) {
  49                         removeButton.enable();
  50                     } else {
  51                         removeButton.disable();
  52                     }
  53                 },
  54                 specialkey: function(field, event) {
  55                     const removeButton = this.lookupReference('removeButton');
  56                     if (!removeButton.isDisabled() && event.getKey() === event.ENTER) {
  57                         removeButton.fireEvent('click', removeButton, event);
  58                     }
  59                 },
  60             },
  61            'button[reference=removeButton]': {
  62                 click: function() {
  63                     const view = this.getView();
  64                     Proxmox.Utils.API2Request({
  65                         url: view.getUrl() + view.getParams(),
  66                         method: 'DELETE',
  67                         waitMsgTarget: view,
  68                         failure: function(response, opts) {
  69                             view.close();
  70                             Ext.Msg.alert('Error', response.htmlStatus);
  71                         },
  72                         success: function(response, options) {
  73                             const hasProgressBar = !!(view.showProgress &&
  74                                 response.result.data);
  75
  76                             if (hasProgressBar) {
  77                                 // stay around so we can trigger our close events
  78                                 // when background action is completed
  79                                 view.hide();
  80
  81                                 const upid = response.result.data;
  82                                 const win = Ext.create('Proxmox.window.TaskProgress', {
  83                                     upid: upid,
  84                                     listeners: {
  85                                         destroy: function() {
  86                                             view.close();
  87                                         },
  88                                     },
  89                                 });
  90                                 win.show();
  91                             } else {
  92                                 view.close();
  93                             }
  94                         },
  95                     });
  96                 },
  97             },
  98         },
  99     },
 100
 101     buttons: [
 102         {
 103             reference: 'removeButton',
 104             text: gettext('Remove'),
 105             disabled: true,
 106         },
 107     ],
 108
 109     initComponent: function() {
 110         let me = this;
 111
 112         me.items = [
 113             {
 114                 xtype: 'component',
 115                 cls: [Ext.baseCSSPrefix + 'message-box-icon',
 116                        Ext.baseCSSPrefix + 'message-box-warning',
 117                        Ext.baseCSSPrefix + 'dlg-icon'],
 118             },
 119             {
 120                 xtype: 'container',
 121                 flex: 1,
 122                 layout: {
 123                     type: 'vbox',
 124                     align: 'stretch',
 125                 },
 126                 items: [
 127                     {
 128                         xtype: 'component',
 129                         reference: 'messageCmp',
 130                     },
 131                     {
 132                         itemId: 'confirmField',
 133                         reference: 'confirmField',
 134                         xtype: 'textfield',
 135                         name: 'confirm',
 136                         labelWidth: 300,
 137                         hideTrigger: true,
 138                         allowBlank: false,
 139                     },
 140                 ]
 141                 .concat(me.additionalItems)
 142                 .concat([
 143                     {
 144                         xtype: 'container',
 145                         reference: 'noteContainer',
 146                         flex: 1,
 147                         hidden: true,
 148                         layout: {
 149                             type: 'vbox',
 150                             align: 'middle',
 151                         },
 152                         height: 25,
 153                         items: [
 154                             {
 155                                 xtype: 'component',
 156                                 reference: 'noteCmp',
 157                                 width: '300px',
 158                                 style: 'font-size: smaller; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;',
 159                             },
 160                         ],
 161                     },
 162                 ]),
 163             },
 164         ];
 165
 166         me.callParent();
 167
 168         const itemId = me.getItem().id;
 169         if (!Ext.isDefined(itemId)) {
 170             throw "no ID specified";
 171         }
 172
 173         if (Ext.isDefined(me.getNote())) {
 174             me.lookupReference('noteCmp').setHtml(`<span title="${me.getNote()}">${me.getNote()}</span>`);
 175             const noteContainer = me.lookupReference('noteContainer');
 176             noteContainer.setHidden(false);
 177             noteContainer.setDisabled(false);
 178         }
 179
 180         let taskName = me.getTaskName();
 181         if (Ext.isDefined(taskName)) {
 182             me.lookupReference('messageCmp').setHtml(
 183                 Proxmox.Utils.format_task_description(taskName, itemId),
 184             );
 185         } else {
 186             throw "no task name specified";
 187         }
 188
 189         me.lookupReference('confirmField')
 190             .setFieldLabel(`${gettext('Please enter the ID to confirm')} (${itemId})`);
 191     },
 192 });