]> git.proxmox.com Git - proxmox-widget-toolkit.git/blobdiff - grid/ObjectGrid.js
use eslint and execute as check target
[proxmox-widget-toolkit.git] / grid / ObjectGrid.js
index 73a0469e0feeec7f7c51129f5d5984a08e1cdfd7..541cf1dddd14090e6ba4fae73fd8d2fd12787e6a 100644 (file)
@@ -2,7 +2,7 @@
 
 mandatory config parameters:
 rows: an object container where each propery is a key-value object we want to render
-       var rows = {
+       let rows = {
            keyboard: {
                header: gettext('Keyboard Layout'),
                editor: 'Your.KeyboardEdit',
@@ -22,12 +22,46 @@ Ext.define('Proxmox.grid.ObjectGrid', {
     disabled: false,
     hideHeaders: true,
 
-    rows: {},
+    monStoreErrors: false,
+
+    add_combobox_row: function(name, text, opts) {
+       let me = this;
+
+       opts = opts || {};
+       me.rows = me.rows || {};
+
+       me.rows[name] = {
+           required: true,
+           defaultValue: opts.defaultValue,
+           header: text,
+           renderer: opts.renderer,
+           editor: {
+               xtype: 'proxmoxWindowEdit',
+               subject: text,
+               onlineHelp: opts.onlineHelp,
+               fieldDefaults: {
+                   labelWidth: opts.labelWidth || 100,
+               },
+               items: {
+                   xtype: 'proxmoxKVComboBox',
+                   name: name,
+                   comboItems: opts.comboItems,
+                   value: opts.defaultValue,
+                   deleteEmpty: !!opts.deleteEmpty,
+                   emptyText: opts.defaultValue,
+                   labelWidth: Proxmox.Utils.compute_min_label_width(
+                       text, opts.labelWidth),
+                   fieldLabel: text,
+               },
+           },
+       };
+    },
 
     add_text_row: function(name, text, opts) {
-       var me = this;
+       let me = this;
 
        opts = opts || {};
+       me.rows = me.rows || {};
 
        me.rows[name] = {
            required: true,
@@ -37,23 +71,29 @@ Ext.define('Proxmox.grid.ObjectGrid', {
            editor: {
                xtype: 'proxmoxWindowEdit',
                subject: text,
+               onlineHelp: opts.onlineHelp,
+               fieldDefaults: {
+                   labelWidth: opts.labelWidth || 100,
+               },
                items: {
                    xtype: 'proxmoxtextfield',
                    name: name,
-                   deleteEmpty: true,
+                   deleteEmpty: !!opts.deleteEmpty,
                    emptyText: opts.defaultValue,
                    labelWidth: Proxmox.Utils.compute_min_label_width(
                        text, opts.labelWidth),
-                   fieldLabel: text
-               }
-           }
+                   vtype: opts.vtype,
+                   fieldLabel: text,
+               },
+           },
        };
     },
 
     add_boolean_row: function(name, text, opts) {
-       var me = this;
+       let me = this;
 
        opts = opts || {};
+       me.rows = me.rows || {};
 
        me.rows[name] = {
            required: true,
@@ -63,77 +103,87 @@ Ext.define('Proxmox.grid.ObjectGrid', {
            editor: {
                xtype: 'proxmoxWindowEdit',
                subject: text,
+               onlineHelp: opts.onlineHelp,
+               fieldDefaults: {
+                   labelWidth: opts.labelWidth || 100,
+               },
                items: {
                    xtype: 'proxmoxcheckbox',
                    name: name,
                    uncheckedValue: 0,
-                   defaultValue: opts.defaultValue  || 0,
-                   checked: opts.defaultValue ? true : false,
-                   deleteDefaultValue: opts.deleteDefaultValue ? true : false,
+                   defaultValue: opts.defaultValue || 0,
+                   checked: !!opts.defaultValue,
+                   deleteDefaultValue: !!opts.deleteDefaultValue,
                    labelWidth: Proxmox.Utils.compute_min_label_width(
                        text, opts.labelWidth),
-                   fieldLabel: text
-               }
-           }
+                   fieldLabel: text,
+               },
+           },
        };
     },
 
     add_integer_row: function(name, text, opts) {
-       var me = this;
+       let me = this;
 
-       opts = opts || {}
+       opts = opts || {};
+       me.rows = me.rows || {};
 
        me.rows[name] = {
            required: true,
            defaultValue: opts.defaultValue,
            header: text,
+           renderer: opts.renderer,
            editor: {
                xtype: 'proxmoxWindowEdit',
                subject: text,
+               onlineHelp: opts.onlineHelp,
+               fieldDefaults: {
+                   labelWidth: opts.labelWidth || 100,
+               },
                items: {
                    xtype: 'proxmoxintegerfield',
                    name: name,
                    minValue: opts.minValue,
                    maxValue: opts.maxValue,
                    emptyText: gettext('Default'),
-                   deleteEmpty: true,
+                   deleteEmpty: !!opts.deleteEmpty,
                    value: opts.defaultValue,
                    labelWidth: Proxmox.Utils.compute_min_label_width(
                        text, opts.labelWidth),
-                   fieldLabel: text
-               }
-           }
+                   fieldLabel: text,
+               },
+           },
        };
     },
 
     editorConfig: {}, // default config passed to editor
 
     run_editor: function() {
-       var me = this;
+       let me = this;
 
-       var sm = me.getSelectionModel();
-       var rec = sm.getSelection()[0];
+       let sm = me.getSelectionModel();
+       let rec = sm.getSelection()[0];
        if (!rec) {
            return;
        }
 
-       var rows = me.rows;
-       var rowdef = rows[rec.data.key];
+       let rows = me.rows;
+       let rowdef = rows[rec.data.key];
        if (!rowdef.editor) {
            return;
        }
 
-       var win;
-       var config;
+       let win;
+       let config;
        if (Ext.isString(rowdef.editor)) {
            config = Ext.apply({
                confid: rec.data.key,
-           },  me.editorConfig);
+           }, me.editorConfig);
            win = Ext.create(rowdef.editor, config);
        } else {
            config = Ext.apply({
                confid: rec.data.key,
-           },  me.editorConfig);
+           }, me.editorConfig);
            Ext.apply(config, rowdef.editor);
            win = Ext.createWidget(rowdef.editor.xtype, config);
            win.load();
@@ -144,13 +194,13 @@ Ext.define('Proxmox.grid.ObjectGrid', {
     },
 
     reload: function() {
-       var me = this;
+       let me = this;
        me.rstore.load();
     },
 
     getObjectValue: function(key, defaultValue) {
-       var me = this;
-       var rec = me.store.getById(key);
+       let me = this;
+       let rec = me.store.getById(key);
        if (rec) {
            return rec.data.value;
        }
@@ -158,19 +208,19 @@ Ext.define('Proxmox.grid.ObjectGrid', {
     },
 
     renderKey: function(key, metaData, record, rowIndex, colIndex, store) {
-       var me = this;
-       var rows = me.rows;
-       var rowdef = (rows && rows[key]) ?  rows[key] : {};
+       let me = this;
+       let rows = me.rows;
+       let rowdef = rows && rows[key] ? rows[key] : {};
        return rowdef.header || key;
     },
 
     renderValue: function(value, metaData, record, rowIndex, colIndex, store) {
-       var me = this;
-       var rows = me.rows;
-       var key = record.data.key;
-       var rowdef = (rows && rows[key]) ?  rows[key] : {};
+       let me = this;
+       let rows = me.rows;
+       let key = record.data.key;
+       let rowdef = rows && rows[key] ? rows[key] : {};
 
-       var renderer = rowdef.renderer;
+       let renderer = rowdef.renderer;
        if (renderer) {
            return renderer(value, metaData, record, rowIndex, colIndex, store);
        }
@@ -178,10 +228,25 @@ Ext.define('Proxmox.grid.ObjectGrid', {
        return value;
     },
 
-    initComponent : function() {
-       var me = this;
+    listeners: {
+       itemkeydown: function(view, record, item, index, e) {
+           if (e.getKey() === e.ENTER) {
+               this.pressedIndex = index;
+           }
+       },
+       itemkeyup: function(view, record, item, index, e) {
+           if (e.getKey() === e.ENTER && index === this.pressedIndex) {
+               this.run_editor();
+           }
+
+           this.pressedIndex = undefined;
+       },
+    },
+
+    initComponent: function() {
+       let me = this;
 
-       var rows = me.rows;
+       let rows = me.rows;
 
        if (!me.rstore) {
            if (!me.url) {
@@ -192,15 +257,15 @@ Ext.define('Proxmox.grid.ObjectGrid', {
                url: me.url,
                interval: me.interval,
                extraParams: me.extraParams,
-               rows: me.rows
+               rows: me.rows,
            });
        }
 
-       var rstore = me.rstore;
-
-       var store = Ext.create('Proxmox.data.DiffStore', { rstore: rstore,
+       let rstore = me.rstore;
+       let store = Ext.create('Proxmox.data.DiffStore', {
+           rstore: rstore,
            sorters: [],
-           filters: []
+           filters: [],
        });
 
        if (rows) {
@@ -215,20 +280,20 @@ Ext.define('Proxmox.grid.ObjectGrid', {
 
        if (me.sorterFn) {
            store.sorters.add(Ext.create('Ext.util.Sorter', {
-               sorterFn: me.sorterFn
+               sorterFn: me.sorterFn,
            }));
        }
 
        store.filters.add(Ext.create('Ext.util.Filter', {
            filterFn: function(item) {
                if (rows) {
-                   var rowdef = rows[item.data.key];
-                   if (!rowdef || (rowdef.visible === false)) {
+                   let rowdef = rows[item.data.key];
+                   if (!rowdef || rowdef.visible === false) {
                        return false;
                    }
                }
                return true;
-           }
+           },
        }));
 
        Proxmox.Utils.monStoreErrors(me, rstore);
@@ -241,17 +306,21 @@ Ext.define('Proxmox.grid.ObjectGrid', {
                    header: gettext('Name'),
                    width: me.cwidth1 || 200,
                    dataIndex: 'key',
-                   renderer: me.renderKey
+                   renderer: me.renderKey,
                },
                {
                    flex: 1,
                    header: gettext('Value'),
                    dataIndex: 'value',
-                   renderer: me.renderValue
-               }
-           ]
+                   renderer: me.renderValue,
+               },
+           ],
        });
 
        me.callParent();
-   }
+
+       if (me.monStoreErrors) {
+           Proxmox.Utils.monStoreErrors(me, me.store);
+       }
+   },
 });