From mboxrd@z Thu Jan 1 00:00:00 1970
Return-Path: <d.csapak@proxmox.com>
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 06EB29B9D1
for <pve-devel@lists.proxmox.com>; Thu, 19 Oct 2023 15:36:11 +0200 (CEST)
Received: from firstgate.proxmox.com (localhost [127.0.0.1])
by firstgate.proxmox.com (Proxmox) with ESMTP id C729C1A748
for <pve-devel@lists.proxmox.com>; Thu, 19 Oct 2023 15:36:10 +0200 (CEST)
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 <pve-devel@lists.proxmox.com>; Thu, 19 Oct 2023 15:36:08 +0200 (CEST)
Received: from proxmox-new.maurer-it.com (localhost.localdomain [127.0.0.1])
by proxmox-new.maurer-it.com (Proxmox) with ESMTP id 633EA430AC
for <pve-devel@lists.proxmox.com>; Thu, 19 Oct 2023 15:36:08 +0200 (CEST)
From: Dominik Csapak <d.csapak@proxmox.com>
To: pve-devel@lists.proxmox.com
Date: Thu, 19 Oct 2023 15:36:07 +0200
Message-Id: <20231019133607.1416999-3-d.csapak@proxmox.com>
X-Mailer: git-send-email 2.30.2
In-Reply-To: <20231019133607.1416999-1-d.csapak@proxmox.com>
References: <20231019133607.1416999-1-d.csapak@proxmox.com>
MIME-Version: 1.0
Content-Transfer-Encoding: 8bit
X-SPAM-LEVEL: Spam detection results: 0
AWL 0.012 Adjusted score from AWL reputation of From: address
BAYES_00 -1.9 Bayes spam probability is 0 to 1%
DMARC_MISSING 0.1 Missing DMARC policy
KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment
SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record
SPF_PASS -0.001 SPF: sender matches SPF record
Subject: [pve-devel] [PATCH manager 3/3] ui: wizards: allow adding tags in
the qemu/lxc create wizard
X-BeenThere: pve-devel@lists.proxmox.com
X-Mailman-Version: 2.1.29
Precedence: list
List-Id: Proxmox VE development discussion <pve-devel.lists.proxmox.com>
List-Unsubscribe: <https://lists.proxmox.com/cgi-bin/mailman/options/pve-devel>,
<mailto:pve-devel-request@lists.proxmox.com?subject=unsubscribe>
List-Archive: <http://lists.proxmox.com/pipermail/pve-devel/>
List-Post: <mailto:pve-devel@lists.proxmox.com>
List-Help: <mailto:pve-devel-request@lists.proxmox.com?subject=help>
List-Subscribe: <https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel>,
<mailto:pve-devel-request@lists.proxmox.com?subject=subscribe>
X-List-Received-Date: Thu, 19 Oct 2023 13:36:11 -0000
in the general tab in the advanced section.
For that to work, we introduce a new option for the TagEditContainer
named 'editOnly', which controls now the cancel/finish buttons,
automatically enter edit mode and disable enter/escape keypresses.
We also prevent now the loading of tags while in edit mode, so the tags
don't change while editing (this can be jarring and unexpected).
In the wizard, we override the layout such that the tags wrap when there
are too many, and make the field scrollable and set a height, so that
the user can enter as many tags as he wants without having the field
overflow or cut off.
To properly align the input with the '+' button, we have to add a custom
css class there. (In the hbox we could set the alignment, but this is
not possible in the 'column' layout)
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
www/css/ext6-pve.css | 5 +++++
www/manager6/form/TagEdit.js | 35 +++++++++++++++++++++++++++----
www/manager6/lxc/CreateWizard.js | 22 +++++++++++++++++++
www/manager6/qemu/CreateWizard.js | 22 +++++++++++++++++++
4 files changed, 80 insertions(+), 4 deletions(-)
diff --git a/www/css/ext6-pve.css b/www/css/ext6-pve.css
index 85cf4039..25bc7ea7 100644
--- a/www/css/ext6-pve.css
+++ b/www/css/ext6-pve.css
@@ -721,3 +721,8 @@ table.osds td:first-of-type {
.pmx-opacity-75 {
opacity: 0.75;
}
+
+/* tag edit fields must be aligned manually in the wizard */
+.proxmox-wizard.proxmox-tags-full .x-component.x-column {
+ margin: 3px 2px;
+}
diff --git a/www/manager6/form/TagEdit.js b/www/manager6/form/TagEdit.js
index 094f4462..7d5b19ec 100644
--- a/www/manager6/form/TagEdit.js
+++ b/www/manager6/form/TagEdit.js
@@ -9,6 +9,7 @@ Ext.define('PVE.panel.TagEditContainer', {
// set to false to hide the 'no tags' field and the edit button
canEdit: true,
+ editOnly: false,
controller: {
xclass: 'Ext.app.ViewController',
@@ -216,6 +217,9 @@ Ext.define('PVE.panel.TagEditContainer', {
me.tagsChanged();
},
keypress: function(key) {
+ if (vm.get('hideFinishButtons')) {
+ return;
+ }
if (key === 'Enter') {
me.editClick();
} else if (key === 'Escape') {
@@ -253,20 +257,40 @@ Ext.define('PVE.panel.TagEditContainer', {
me.loadTags(view.tags);
}
me.getViewModel().set('canEdit', view.canEdit);
+ me.getViewModel().set('editOnly', view.editOnly);
me.mon(Ext.GlobalEvents, 'loadedUiOptions', () => {
+ let vm = me.getViewModel();
view.toggleCls('hide-handles', PVE.UIOptions.shouldSortTags());
- me.loadTags(me.oldTags, true); // refresh tag colors and order
+ me.loadTags(me.oldTags, !vm.get('editMode')); // refresh tag colors and order
});
+
+ if (view.editOnly) {
+ me.toggleEdit();
+ }
},
},
+ getTags: function() {
+ let me =this;
+ let controller = me.getController();
+ let tags = [];
+ controller.forEachTag((cmp) => {
+ if (cmp.tag.length) {
+ tags.push(cmp.tag);
+ }
+ });
+
+ return tags;
+ },
+
viewModel: {
data: {
tagCount: 0,
editMode: false,
canEdit: true,
isDirty: false,
+ editOnly: true,
},
formulas: {
@@ -276,6 +300,9 @@ Ext.define('PVE.panel.TagEditContainer', {
hideEditBtn: function(get) {
return get('editMode') || !get('canEdit');
},
+ hideFinishButtons: function(get) {
+ return !get('editMode') || get('editOnly');
+ },
},
},
@@ -311,7 +338,7 @@ Ext.define('PVE.panel.TagEditContainer', {
xtype: 'tbseparator',
ui: 'horizontal',
bind: {
- hidden: '{!editMode}',
+ hidden: '{hideFinishButtons}',
},
hidden: true,
},
@@ -320,7 +347,7 @@ Ext.define('PVE.panel.TagEditContainer', {
iconCls: 'fa fa-times',
tooltip: gettext('Cancel Edit'),
bind: {
- hidden: '{!editMode}',
+ hidden: '{hideFinishButtons}',
},
hidden: true,
margin: '0 5 0 0',
@@ -332,7 +359,7 @@ Ext.define('PVE.panel.TagEditContainer', {
iconCls: 'fa fa-check',
tooltip: gettext('Finish Edit'),
bind: {
- hidden: '{!editMode}',
+ hidden: '{hideFinishButtons}',
disabled: '{!isDirty}',
},
hidden: true,
diff --git a/www/manager6/lxc/CreateWizard.js b/www/manager6/lxc/CreateWizard.js
index e3635297..e725f8c1 100644
--- a/www/manager6/lxc/CreateWizard.js
+++ b/www/manager6/lxc/CreateWizard.js
@@ -29,6 +29,14 @@ Ext.define('PVE.lxc.CreateWizard', {
xtype: 'inputpanel',
title: gettext('General'),
onlineHelp: 'pct_general',
+ onGetValues: function(values) {
+ let me = this;
+ let tags = me.down('pveTagEditContainer').getTags();
+ if (tags.length) {
+ values.tags = tags.join(',');
+ }
+ return values;
+ },
column1: [
{
xtype: 'pveNodeSelector',
@@ -178,6 +186,20 @@ Ext.define('PVE.lxc.CreateWizard', {
},
},
],
+ advancedColumnB: [
+ {
+ xtype: 'displayfield',
+ fieldLabel: gettext("Tags"),
+ },
+ {
+ xtype: 'pveTagEditContainer',
+ userCls: 'proxmox-tags-full proxmox-wizard',
+ editOnly: true,
+ scrollable: true,
+ layout: 'column',
+ height: 120,
+ },
+ ],
},
{
xtype: 'inputpanel',
diff --git a/www/manager6/qemu/CreateWizard.js b/www/manager6/qemu/CreateWizard.js
index a65067ea..2ccad83b 100644
--- a/www/manager6/qemu/CreateWizard.js
+++ b/www/manager6/qemu/CreateWizard.js
@@ -108,6 +108,22 @@ Ext.define('PVE.qemu.CreateWizard', {
fieldLabel: gettext('Shutdown timeout'),
},
],
+
+ advancedColumnB: [
+ {
+ xtype: 'displayfield',
+ fieldLabel: gettext("Tags"),
+ },
+ {
+ xtype: 'pveTagEditContainer',
+ userCls: 'proxmox-tags-full proxmox-wizard',
+ editOnly: true,
+ scrollable: true,
+ layout: 'column',
+ height: 120,
+ },
+ ],
+
onGetValues: function(values) {
['name', 'pool', 'onboot', 'agent'].forEach(function(field) {
if (!values[field]) {
@@ -115,6 +131,12 @@ Ext.define('PVE.qemu.CreateWizard', {
}
});
+ let tags = this.down('pveTagEditContainer').getTags();
+
+ if (tags.length) {
+ values.tags = tags.join(',');
+ }
+
var res = PVE.Parser.printStartup({
order: values.order,
up: values.up,
--
2.30.2