src/form/MultiDiskSelector.js

   1 Ext.define('Proxmox.form.MultiDiskSelector', {
   2     extend: 'Ext.grid.Panel',
   3     alias: 'widget.pmxMultiDiskSelector',
   4
   5     mixins: {
   6         field: 'Ext.form.field.Field',
   7     },
   8
   9     selModel: 'checkboxmodel',
  10
  11     store: {
  12         data: [],
  13         proxy: {
  14             type: 'proxmox',
  15         },
  16     },
  17
  18     // which field of the disklist is used for getValue
  19     valueField: 'devpath',
  20
  21     // which parameter is used for the type
  22     typeParameter: 'type',
  23
  24     // the type of disks to show
  25     diskType: 'unused',
  26
  27     disks: [],
  28
  29     allowBlank: false,
  30
  31     getValue: function() {
  32         let me = this;
  33         return me.disks;
  34     },
  35
  36     setValue: function(value) {
  37         let me = this;
  38
  39         if (!Ext.isArray(value)) {
  40             value = value.split(/;, /);
  41         }
  42
  43         let store = me.getStore();
  44         let selection = [];
  45
  46         let keyField = me.valueField;
  47
  48         value.forEach(item => {
  49             let rec = store.findRecord(keyField, item, 0, false, true, true);
  50             if (rec) {
  51                 selection.push(rec);
  52             }
  53         });
  54
  55         me.setSelection(selection);
  56
  57         return me.mixins.field.setValue.call(me, value);
  58     },
  59
  60     getErrors: function(value) {
  61         let me = this;
  62         if (me.allowBlank === false &&
  63             me.getSelectionModel().getCount() === 0) {
  64             me.addBodyCls(['x-form-trigger-wrap-default', 'x-form-trigger-wrap-invalid']);
  65             return [gettext('No Disk selected')];
  66         }
  67
  68         me.removeBodyCls(['x-form-trigger-wrap-default', 'x-form-trigger-wrap-invalid']);
  69         return [];
  70     },
  71
  72     update_disklist: function() {
  73         var me = this;
  74         var disks = me.getSelection();
  75
  76         var val = [];
  77         disks.sort(function(a, b) {
  78             var aorder = a.get('order') || 0;
  79             var border = b.get('order') || 0;
  80             return aorder - border;
  81         });
  82
  83         disks.forEach(function(disk) {
  84             val.push(disk.get(me.valueField));
  85         });
  86
  87         me.validate();
  88         me.disks = val;
  89     },
  90
  91     columns: [
  92         {
  93             text: gettext('Device'),
  94             dataIndex: 'devpath',
  95             flex: 2,
  96         },
  97         {
  98             text: gettext('Model'),
  99             dataIndex: 'model',
 100             flex: 2,
 101         },
 102         {
 103             text: gettext('Serial'),
 104             dataIndex: 'serial',
 105             flex: 2,
 106         },
 107         {
 108             text: gettext('Size'),
 109             dataIndex: 'size',
 110             renderer: Proxmox.Utils.format_size,
 111             flex: 1,
 112         },
 113         {
 114             header: gettext('Order'),
 115             xtype: 'widgetcolumn',
 116             dataIndex: 'order',
 117             sortable: true,
 118             flex: 1,
 119             widget: {
 120                 xtype: 'proxmoxintegerfield',
 121                 minValue: 1,
 122                 isFormField: false,
 123                 listeners: {
 124                     change: function(numberfield, value, old_value) {
 125                         let grid = this.up('pmxMultiDiskSelector');
 126                         var record = numberfield.getWidgetRecord();
 127                         record.set('order', value);
 128                         grid.update_disklist(record);
 129                     },
 130                 },
 131             },
 132         },
 133     ],
 134
 135     listeners: {
 136         selectionchange: function() {
 137             this.update_disklist();
 138         },
 139     },
 140
 141     initComponent: function() {
 142         let me = this;
 143
 144         if (!me.url) {
 145             if (!me.nodename) {
 146                 throw "no url or nodename given";
 147             }
 148
 149             let node = me.nodename;
 150             let param = me.typeParameter;
 151             let type = me.diskType;
 152             me.url = `/api2/json/nodes/${node}/disks/list?${param}=${type}`;
 153         }
 154
 155         me.disks = [];
 156
 157         me.callParent();
 158         let store = me.getStore();
 159         store.getProxy().setUrl(me.url);
 160         store.load();
 161         store.sort({ property: me.valueField });
 162     },
 163
 164 });