From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits)) (No client certificate requested) by lists.proxmox.com (Postfix) with ESMTPS id 6D82294D1 for ; Thu, 17 Nov 2022 15:56:57 +0100 (CET) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 4FC302F6E4 for ; Thu, 17 Nov 2022 15:56:27 +0100 (CET) Received: from proxmox-new.maurer-it.com (proxmox-new.maurer-it.com [94.136.29.106]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits)) (No client certificate requested) by firstgate.proxmox.com (Proxmox) with ESMTPS for ; Thu, 17 Nov 2022 15:56:25 +0100 (CET) Received: from proxmox-new.maurer-it.com (localhost.localdomain [127.0.0.1]) by proxmox-new.maurer-it.com (Proxmox) with ESMTP id A9DCA44BFF for ; Thu, 17 Nov 2022 15:56:24 +0100 (CET) From: Dominik Csapak To: pve-devel@lists.proxmox.com Date: Thu, 17 Nov 2022 15:56:22 +0100 Message-Id: <20221117145623.661109-5-d.csapak@proxmox.com> X-Mailer: git-send-email 2.30.2 In-Reply-To: <20221117145623.661109-1-d.csapak@proxmox.com> References: <20221117145623.661109-1-d.csapak@proxmox.com> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-SPAM-LEVEL: Spam detection results: =?UTF-8?Q?0=0A=09?=AWL 0.065 Adjusted score from AWL reputation of From: =?UTF-8?Q?address=0A=09?=BAYES_00 -1.9 Bayes spam probability is 0 to 1% KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict =?UTF-8?Q?Alignment=0A=09?=SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF =?UTF-8?Q?Record=0A=09?=SPF_PASS -0.001 SPF: sender matches SPF record Subject: [pve-devel] [PATCH manager 4/5] ui: change style of ListField X-BeenThere: pve-devel@lists.proxmox.com X-Mailman-Version: 2.1.29 Precedence: list List-Id: Proxmox VE development discussion List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , X-List-Received-Date: Thu, 17 Nov 2022 14:56:57 -0000 and make it more like the 'traffic control' time grid in pbs Signed-off-by: Dominik Csapak --- www/manager6/dc/RegisteredTagsEdit.js | 6 +- www/manager6/dc/UserTagAccessEdit.js | 6 +- www/manager6/form/ListField.js | 86 ++++++++++++++++----------- 3 files changed, 60 insertions(+), 38 deletions(-) diff --git a/www/manager6/dc/RegisteredTagsEdit.js b/www/manager6/dc/RegisteredTagsEdit.js index 92e076e0a..75b4f9ba3 100644 --- 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 701d1de4f..f22ac9b3d 100644 --- 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 faa8e168b..77e9ebfca 100644 --- 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(); -- 2.30.2