ui: change style of ListField

and make it more like the 'traffic control' time grid in pbs

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>

diff --git a/www/manager6/dc/RegisteredTagsEdit.js b/www/manager6/dc/RegisteredTagsEdit.js
index 92e076e0ad35034ba18d19e8c4e79d63cbe9c8c0..75b4f9ba394e5e071dfee400ead223924df3a35d 100644 (file)
--- a/www/manager6/dc/RegisteredTagsEdit.js
+++ b/www/manager6/dc/RegisteredTagsEdit.js
@@ -52,8 +52,10 @@ Ext.define('PVE.dc.RegisteredTagsEdit', {
                    emptyText: gettext('No Tags defined'),
                    fieldTitle: gettext('Tag'),
                    maskRe: PVE.Utils.tagCharRegex,
-                   height: 200,
-                   scrollable: true,
+                   gridConfig: {
+                       height: 200,
+                       scrollable: true,
+                   },
                    listeners: {
                        change: 'tagChange',
                    },

diff --git a/www/manager6/dc/UserTagAccessEdit.js b/www/manager6/dc/UserTagAccessEdit.js
index 701d1de4f6813b6517e30bd5c7275a2ec5bd9ae0..f22ac9b3d5a9ade782c2831eda19a31a709097f7 100644 (file)
--- a/www/manager6/dc/UserTagAccessEdit.js
+++ b/www/manager6/dc/UserTagAccessEdit.js
@@ -72,8 +72,10 @@ Ext.define('PVE.dc.UserTagAccessEdit', {
                    emptyText: gettext('No Tags defined'),
                    fieldTitle: gettext('Tag'),
                    maskRe: PVE.Utils.tagCharRegex,
-                   height: 200,
-                   scrollable: true,
+                   gridConfig: {
+                       height: 200,
+                       scrollable: true,
+                   },
                    listeners: {
                        change: 'tagChange',
                    },

diff --git a/www/manager6/form/ListField.js b/www/manager6/form/ListField.js
index faa8e168bcafa695d0f14d66c7a3bf807c21eeb4..77e9ebfcafd3dd0c0fd292a69d99af6585db14d5 100644 (file)
--- a/www/manager6/form/ListField.js
+++ b/www/manager6/form/ListField.js
@@ -1,5 +1,5 @@
 Ext.define('PVE.form.ListField', {
-    extend: 'Ext.grid.Panel',
+    extend: 'Ext.container.Container',
     alias: 'widget.pveListField',
 
     mixins: [
@@ -16,23 +16,18 @@ Ext.define('PVE.form.ListField', {
     selectAll: false,
     isFormField: true,
     deleteEmpty: false,
-    selModel: 'checkboxmodel',
-
     config: {
        deleteEmpty: false,
     },
 
-    viewConfig: {
-       deferEmptyText: false,
-    },
-
     setValue: function(list) {
        let me = this;
        list = Ext.isArray(list) ? list : (list ?? '').split(';');
+       let store = me.lookup('grid').getStore();
        if (list.length > 0) {
-           me.getStore().setData(list.map(item => ({ item })));
+           store.setData(list.map(item => ({ item })));
        } else {
-           me.getStore().removeAll();
+           store.removeAll();
        }
        me.checkChange();
        return me;
@@ -41,7 +36,7 @@ Ext.define('PVE.form.ListField', {
     getValue: function() {
        let me = this;
        let values = [];
-       me.getStore().each((rec) => {
+       me.lookup('grid').getStore().each((rec) => {
            if (rec.data.item) {
                values.push(rec.data.item);
            }
@@ -52,7 +47,7 @@ Ext.define('PVE.form.ListField', {
     getErrors: function(value) {
        let me = this;
        let empty = false;
-       me.getStore().each((rec) => {
+       me.lookup('grid').getStore().each((rec) => {
            if (!rec.data.item) {
                empty = true;
            }
@@ -86,22 +81,23 @@ Ext.define('PVE.form.ListField', {
 
        addLine: function() {
            let me = this;
-           me.getView().getStore().add({
+           me.lookup('grid').getStore().add({
                item: '',
            });
        },
 
-       removeSelection: function() {
+       removeSelection: function(field) {
            let me = this;
            let view = me.getView();
-           let selection = view.getSelection();
-           if (selection === undefined) {
+           let grid = me.lookup('grid');
+
+           let record = field.getWidgetRecord();
+           if (record === undefined) {
+               // this is sometimes called before a record/column is initialized
                return;
            }
 
-           selection.forEach((sel) => {
-               view.getStore().remove(sel);
-           });
+           grid.getStore().remove(record);
            view.checkChange();
        },
 
@@ -114,33 +110,47 @@ Ext.define('PVE.form.ListField', {
            rec.set(column.dataIndex, newValue);
            field.up('pveListField').checkChange();
        },
+
+       control: {
+           'grid button': {
+               click: 'removeSelection',
+           },
+       },
     },
 
-    tbar: [
+    items: [
        {
-           text: gettext('Add'),
-           handler: 'addLine',
+           xtype: 'grid',
+           reference: 'grid',
+
+           viewConfig: {
+               deferEmptyText: false,
+           },
+
+           store: {
+               listeners: {
+                   update: function() {
+                       this.commitChanges();
+                   },
+               },
+           },
        },
        {
-           xtype: 'proxmoxButton',
-           text: gettext('Remove'),
-           handler: 'removeSelection',
-           disabled: true,
+           xtype: 'button',
+           text: gettext('Add'),
+           iconCls: 'fa fa-plus-circle',
+           handler: 'addLine',
        },
     ],
 
-    store: {
-       listeners: {
-           update: function() {
-               this.commitChanges();
-           },
-       },
-    },
-
     initComponent: function() {
        let me = this;
 
-       me.columns = [
+       for (const [key, value] of Object.entries(me.gridConfig ?? {})) {
+           me.items[0][key] = value;
+       }
+
+       me.items[0].columns = [
            {
                header: me.fieldTtitle,
                dataIndex: 'item',
@@ -157,6 +167,14 @@ Ext.define('PVE.form.ListField', {
                },
                flex: 1,
            },
+           {
+               xtype: 'widgetcolumn',
+               width: 40,
+               widget: {
+                   xtype: 'button',
+                   iconCls: 'fa fa-trash-o',
+               },
+           },
        ];
 
        me.callParent();