[pve-devel] [PATCH manager 1/4] ui: hide 'no tags' field and edit icon without VM.Config.Options

[pve-devel] [PATCH manager 1/4] ui: hide 'no tags' field and edit icon without VM.Config.Options

[Dominik Csapak]

they cannot edit them anyway, so no point in showing them that
there is no tag

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 www/manager6/form/TagEdit.js | 12 ++++++++++--
 www/manager6/lxc/Config.js   |  1 +
 www/manager6/qemu/Config.js  |  1 +
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/www/manager6/form/TagEdit.js b/www/manager6/form/TagEdit.js
index d4428e029..23b75acc7 100644
--- a/www/manager6/form/TagEdit.js
+++ b/www/manager6/form/TagEdit.js
@@ -7,6 +7,9 @@ Ext.define('PVE.panel.TagEditContainer', {
 	align: 'middle',
     },
 
+    // set to false to hide the 'no tags' field and the edit button
+    canEdit: true,
+
     controller: {
 	xclass: 'Ext.app.ViewController',
 
@@ -241,6 +244,7 @@ Ext.define('PVE.panel.TagEditContainer', {
 	    if (view.tags) {
 		me.loadTags(view.tags);
 	    }
+	    me.getViewModel().set('canEdit', view.canEdit);
 
 	    me.mon(Ext.GlobalEvents, 'loadedUiOptions', () => {
 		view.toggleCls('hide-handles', PVE.Utils.shouldSortTags());
@@ -253,11 +257,15 @@ Ext.define('PVE.panel.TagEditContainer', {
 	data: {
 	    tagCount: 0,
 	    editMode: false,
+	    canEdit: true,
 	},
 
 	formulas: {
 	    hideNoTags: function(get) {
-		return get('tagCount') !== 0;
+		return get('tagCount') !== 0 || !get('canEdit');
+	    },
+	    hideEditBtn: function(get) {
+		return get('editMode') || !get('canEdit');
 	    },
 	},
     },
@@ -326,7 +334,7 @@ Ext.define('PVE.panel.TagEditContainer', {
 	    cls: 'pve-tag-inline-button',
 	    html: `<i data-qtip="${gettext('Edit Tags')}" class="fa fa-pencil"></i>`,
 	    bind: {
-		hidden: '{editMode}',
+		hidden: '{hideEditBtn}',
 	    },
 	    listeners: {
 		click: 'editClick',
diff --git a/www/manager6/lxc/Config.js b/www/manager6/lxc/Config.js
index f33390513..23c17d2ea 100644
--- a/www/manager6/lxc/Config.js
+++ b/www/manager6/lxc/Config.js
@@ -186,6 +186,7 @@ Ext.define('PVE.lxc.Config', {
 
 	let tagsContainer = Ext.create('PVE.panel.TagEditContainer', {
 	    tags: vm.tags,
+	    canEdit: !!caps.vms['VM.Config.Options'],
 	    listeners: {
 		change: function(tags) {
 		    Proxmox.Utils.API2Request({
diff --git a/www/manager6/qemu/Config.js b/www/manager6/qemu/Config.js
index 5c8fa620d..94c540c59 100644
--- a/www/manager6/qemu/Config.js
+++ b/www/manager6/qemu/Config.js
@@ -222,6 +222,7 @@ Ext.define('PVE.qemu.Config', {
 
 	let tagsContainer = Ext.create('PVE.panel.TagEditContainer', {
 	    tags: vm.tags,
+	    canEdit: !!caps.vms['VM.Config.Options'],
 	    listeners: {
 		change: function(tags) {
 		    Proxmox.Utils.API2Request({
-- 
2.30.2

[pve-devel] [PATCH manager 2/4] ui: tags: shortcut accept&cancel with keypresses

[Dominik Csapak]

pressing 'Enter' accepts the current tags and
'Escape' cancels editing

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 www/manager6/form/Tag.js     | 3 ++-
 www/manager6/form/TagEdit.js | 7 +++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/www/manager6/form/Tag.js b/www/manager6/form/Tag.js
index 8d003ca97..6fda2e848 100644
--- a/www/manager6/form/Tag.js
+++ b/www/manager6/form/Tag.js
@@ -104,10 +104,11 @@ Ext.define('Proxmox.form.Tag', {
 	let key = event.browserEvent.key;
 	switch (key) {
 	    case 'Enter':
+	    case 'Escape':
+		me.fireEvent('keypress', key);
 		break;
 	    case 'ArrowLeft':
 	    case 'ArrowRight':
-	    case 'Escape':
 	    case 'Backspace':
 	    case 'Delete':
 		return;
diff --git a/www/manager6/form/TagEdit.js b/www/manager6/form/TagEdit.js
index 23b75acc7..18d8927d7 100644
--- a/www/manager6/form/TagEdit.js
+++ b/www/manager6/form/TagEdit.js
@@ -214,6 +214,13 @@ Ext.define('PVE.panel.TagEditContainer', {
 		    destroy: function() {
 			vm.set('tagCount', vm.get('tagCount') - 1);
 		    },
+		    keypress: function(key) {
+			if (key === 'Enter') {
+			    me.editClick();
+			} else if (key === 'Escape') {
+			    me.cancelClick();
+			}
+		    },
 		},
 	    });
 
-- 
2.30.2

[pve-devel] [PATCH manager 3/4] ui: tags: implement dirty tracking for inline editing

[Dominik Csapak]

similar to how regular forms are tracked

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 www/manager6/form/TagEdit.js | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/www/manager6/form/TagEdit.js b/www/manager6/form/TagEdit.js
index 18d8927d7..fc2eba99b 100644
--- a/www/manager6/form/TagEdit.js
+++ b/www/manager6/form/TagEdit.js
@@ -30,12 +30,12 @@ Ext.define('PVE.panel.TagEditContainer', {
 	    newtags.forEach((tag) => {
 		me.addTag(tag);
 	    });
-	    me.updateFilter();
 	    view.suspendLayout = false;
 	    view.updateLayout();
 	    if (!force) {
 		me.oldTags = tagstring;
 	    }
+	    me.tagsChanged();
 	},
 
 	onRender: function(v) {
@@ -116,6 +116,7 @@ Ext.define('PVE.panel.TagEditContainer', {
 		    let targetCmp = Ext.getCmp(target.id);
 		    view.remove(sourceCmp, { destroy: false });
 		    view.insert(view.items.indexOf(targetCmp), sourceCmp);
+		    me.tagsChanged();
 		},
 	    });
 	},
@@ -172,7 +173,7 @@ Ext.define('PVE.panel.TagEditContainer', {
 	    me.getView().updateLayout();
 	},
 
-	updateFilter: function() {
+	tagsChanged: function() {
 	    let me = this;
 	    let tags = [];
 	    me.forEachTag(cmp => {
@@ -180,6 +181,7 @@ Ext.define('PVE.panel.TagEditContainer', {
 		    tags.push(cmp.tag);
 		}
 	    });
+	    me.getViewModel().set('isDirty', me.oldTags !== tags.join(','));
 	    me.forEachTag(cmp => {
 		cmp.updateFilter(tags);
 	    });
@@ -208,11 +210,10 @@ Ext.define('PVE.panel.TagEditContainer', {
 		tag,
 		mode: vm.get('editMode') ? 'editable' : 'normal',
 		listeners: {
-		    change: (field, newTag) => {
-			me.updateFilter();
-		    },
+		    change: 'tagsChanged',
 		    destroy: function() {
 			vm.set('tagCount', vm.get('tagCount') - 1);
+			me.tagsChanged();
 		    },
 		    keypress: function(key) {
 			if (key === 'Enter') {
@@ -225,7 +226,7 @@ Ext.define('PVE.panel.TagEditContainer', {
 	    });
 
 	    if (isNew) {
-		me.updateFilter();
+		me.tagsChanged();
 		tagField.selectText();
 	    }
 
@@ -265,6 +266,7 @@ Ext.define('PVE.panel.TagEditContainer', {
 	    tagCount: 0,
 	    editMode: false,
 	    canEdit: true,
+	    isDirty: false,
 	},
 
 	formulas: {
@@ -331,6 +333,7 @@ Ext.define('PVE.panel.TagEditContainer', {
 	    tooltip: gettext('Finish Edit'),
 	    bind: {
 		hidden: '{!editMode}',
+		disabled: '{!isDirty}',
 	    },
 	    hidden: true,
 	    ui: 'default-toolbar',
-- 
2.30.2

[pve-devel] [PATCH manager 4/4] ui: tags: highlight finish inline editing button

[Dominik Csapak]

by making it a 'regular' blue button instead of a toolbar button

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 www/manager6/form/TagEdit.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/www/manager6/form/TagEdit.js b/www/manager6/form/TagEdit.js
index fc2eba99b..e1cd4af67 100644
--- a/www/manager6/form/TagEdit.js
+++ b/www/manager6/form/TagEdit.js
@@ -336,7 +336,6 @@ Ext.define('PVE.panel.TagEditContainer', {
 		disabled: '{!isDirty}',
 	    },
 	    hidden: true,
-	    ui: 'default-toolbar',
 	    handler: 'editClick',
 	},
 	{
-- 
2.30.2

[pve-devel] applied-series: [PATCH manager 1/4] ui: hide 'no tags' field and edit icon without VM.Config.Options

[Thomas Lamprecht]

Am 18/11/2022 um 12:59 schrieb Dominik Csapak:
> they cannot edit them anyway, so no point in showing them that
> there is no tag
> 
> Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
> ---
>  www/manager6/form/TagEdit.js | 12 ++++++++++--
>  www/manager6/lxc/Config.js   |  1 +
>  www/manager6/qemu/Config.js  |  1 +
>  3 files changed, 12 insertions(+), 2 deletions(-)
> 
>

applied series, thanks!