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