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: 'widget.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     // gets called if we have a progress bar or taskview and it detected that
  21     // the task finished. function(success)
  22     taskDone: Ext.emptyFn,
  23
  24     // gets called when the api call is finished, right at the beginning
  25     // function(success, response, options)
  26     apiCallDone: Ext.emptyFn,
  27
  28     config: {
  29         item: {
  30             id: undefined,
  31         },
  32         url: undefined,
  33         note: undefined,
  34         taskName: undefined,
  35         params: {},
  36     },
  37
  38     getParams: function() {
  39         let me = this;
  40
  41         if (Ext.Object.isEmpty(me.params)) {
  42             return '';
  43         }
  44         return '?' + Ext.Object.toQueryString(me.params);
  45     },
  46
  47     controller: {
  48
  49         xclass: 'Ext.app.ViewController',
  50
  51         control: {
  52             'field[name=confirm]': {
  53                 change: function(f, value) {
  54                     const view = this.getView();
  55                     const removeButton = this.lookupReference('removeButton');
  56                     if (value === view.getItem().id.toString()) {
  57                         removeButton.enable();
  58                     } else {
  59                         removeButton.disable();
  60                     }
  61                 },
  62                 specialkey: function(field, event) {
  63                     const removeButton = this.lookupReference('removeButton');
  64                     if (!removeButton.isDisabled() && event.getKey() === event.ENTER) {
  65                         removeButton.fireEvent('click', removeButton, event);
  66                     }
  67                 },
  68             },
  69            'button[reference=removeButton]': {
  70                 click: function() {
  71                     const view = this.getView();
  72                     Proxmox.Utils.API2Request({
  73                         url: view.getUrl() + view.getParams(),
  74                         method: 'DELETE',
  75                         waitMsgTarget: view,
  76                         failure: function(response, opts) {
  77                             view.apiCallDone(false, response, opts);
  78                             view.close();
  79                             Ext.Msg.alert('Error', response.htmlStatus);
  80                         },
  81                         success: function(response, options) {
  82                             const hasProgressBar = !!(view.showProgress &&
  83                                 response.result.data);
  84
  85                             view.apiCallDone(true, response, options);
  86
  87                             if (hasProgressBar) {
  88                                 // stay around so we can trigger our close events
  89                                 // when background action is completed
  90                                 view.hide();
  91
  92                                 const upid = response.result.data;
  93                                 const win = Ext.create('Proxmox.window.TaskProgress', {
  94                                     upid: upid,
  95                                     taskDone: view.taskDone,
  96                                     listeners: {
  97                                         destroy: function() {
  98                                             view.close();
  99                                         },
 100                                     },
 101                                 });
 102                                 win.show();
 103                             } else {
 104                                 view.close();
 105                             }
 106                         },
 107                     });
 108                 },
 109             },
 110         },
 111     },
 112
 113     buttons: [
 114         {
 115             reference: 'removeButton',
 116             text: gettext('Remove'),
 117             disabled: true,
 118         },
 119     ],
 120
 121     initComponent: function() {
 122         let me = this;
 123
 124         me.items = [
 125             {
 126                 xtype: 'component',
 127                 cls: [
 128                     Ext.baseCSSPrefix + 'message-box-icon',
 129                     Ext.baseCSSPrefix + 'message-box-warning',
 130                     Ext.baseCSSPrefix + 'dlg-icon',
 131                 ],
 132             },
 133             {
 134                 xtype: 'container',
 135                 flex: 1,
 136                 layout: {
 137                     type: 'vbox',
 138                     align: 'stretch',
 139                 },
 140                 items: [
 141                     {
 142                         xtype: 'component',
 143                         reference: 'messageCmp',
 144                     },
 145                     {
 146                         itemId: 'confirmField',
 147                         reference: 'confirmField',
 148                         xtype: 'textfield',
 149                         name: 'confirm',
 150                         labelWidth: 300,
 151                         hideTrigger: true,
 152                         allowBlank: false,
 153                     },
 154                 ]
 155                 .concat(me.additionalItems)
 156                 .concat([
 157                     {
 158                         xtype: 'container',
 159                         reference: 'noteContainer',
 160                         flex: 1,
 161                         hidden: true,
 162                         layout: {
 163                             type: 'vbox',
 164                         },
 165                         items: [
 166                             {
 167                                 xtype: 'component',
 168                                 reference: 'noteCmp',
 169                                 userCls: 'pmx-hint',
 170                             },
 171                         ],
 172                     },
 173                 ]),
 174             },
 175         ];
 176
 177         me.callParent();
 178
 179         const itemId = me.getItem().id;
 180         if (!Ext.isDefined(itemId)) {
 181             throw "no ID specified";
 182         }
 183
 184         if (Ext.isDefined(me.getNote())) {
 185             me.lookupReference('noteCmp').setHtml(`<span title="${me.getNote()}">${me.getNote()}</span>`);
 186             const noteContainer = me.lookupReference('noteContainer');
 187             noteContainer.setHidden(false);
 188             noteContainer.setDisabled(false);
 189         }
 190
 191         let taskName = me.getTaskName();
 192         if (Ext.isDefined(taskName)) {
 193             me.lookupReference('messageCmp').setHtml(
 194                 Proxmox.Utils.format_task_description(taskName, itemId),
 195             );
 196         } else {
 197             throw "no task name specified";
 198         }
 199
 200         me.lookupReference('confirmField')
 201             .setFieldLabel(`${gettext('Please enter the ID to confirm')} (${itemId})`);
 202     },
 203 });