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: [Ext.baseCSSPrefix + 'message-box-icon',
 128                        Ext.baseCSSPrefix + 'message-box-warning',
 129                        Ext.baseCSSPrefix + 'dlg-icon'],
 130             },
 131             {
 132                 xtype: 'container',
 133                 flex: 1,
 134                 layout: {
 135                     type: 'vbox',
 136                     align: 'stretch',
 137                 },
 138                 items: [
 139                     {
 140                         xtype: 'component',
 141                         reference: 'messageCmp',
 142                     },
 143                     {
 144                         itemId: 'confirmField',
 145                         reference: 'confirmField',
 146                         xtype: 'textfield',
 147                         name: 'confirm',
 148                         labelWidth: 300,
 149                         hideTrigger: true,
 150                         allowBlank: false,
 151                     },
 152                 ]
 153                 .concat(me.additionalItems)
 154                 .concat([
 155                     {
 156                         xtype: 'container',
 157                         reference: 'noteContainer',
 158                         flex: 1,
 159                         hidden: true,
 160                         layout: {
 161                             type: 'vbox',
 162                             align: 'middle',
 163                         },
 164                         height: 25,
 165                         items: [
 166                             {
 167                                 xtype: 'component',
 168                                 reference: 'noteCmp',
 169                                 width: '300px',
 170                                 style: 'font-size: smaller; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;',
 171                             },
 172                         ],
 173                     },
 174                 ]),
 175             },
 176         ];
 177
 178         me.callParent();
 179
 180         const itemId = me.getItem().id;
 181         if (!Ext.isDefined(itemId)) {
 182             throw "no ID specified";
 183         }
 184
 185         if (Ext.isDefined(me.getNote())) {
 186             me.lookupReference('noteCmp').setHtml(`<span title="${me.getNote()}">${me.getNote()}</span>`);
 187             const noteContainer = me.lookupReference('noteContainer');
 188             noteContainer.setHidden(false);
 189             noteContainer.setDisabled(false);
 190         }
 191
 192         let taskName = me.getTaskName();
 193         if (Ext.isDefined(taskName)) {
 194             me.lookupReference('messageCmp').setHtml(
 195                 Proxmox.Utils.format_task_description(taskName, itemId),
 196             );
 197         } else {
 198             throw "no task name specified";
 199         }
 200
 201         me.lookupReference('confirmField')
 202             .setFieldLabel(`${gettext('Please enter the ID to confirm')} (${itemId})`);
 203     },
 204 });