[pve-devel] [PATCH manager v7 08/14] ui: add form/TagEdit.js

[Dominik Csapak <d.csapak@proxmox.com>]

this is a wrapper container for holding a list of (editable) tags
intended to be used in the lxc/qemu status toolbar

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 www/manager6/Makefile        |   1 +
 www/manager6/form/TagEdit.js | 151 +++++++++++++++++++++++++++++++++++
 2 files changed, 152 insertions(+)
 create mode 100644 www/manager6/form/TagEdit.js

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index 9d610f71..eb4be4c5 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -75,6 +75,7 @@ JSSRC= 							\
 	form/iScsiProviderSelector.js			\
 	form/TagColorGrid.js				\
 	form/Tag.js					\
+	form/TagEdit.js					\
 	grid/BackupView.js				\
 	grid/FirewallAliases.js				\
 	grid/FirewallOptions.js				\
diff --git a/www/manager6/form/TagEdit.js b/www/manager6/form/TagEdit.js
new file mode 100644
index 00000000..5a267169
--- /dev/null
+++ b/www/manager6/form/TagEdit.js
@@ -0,0 +1,151 @@
+Ext.define('PVE.panel.TagEditContainer', {
+    extend: 'Ext.container.Container',
+    alias: 'widget.pveTagEditContainer',
+
+    tagCount: 0,
+
+    layout: {
+	type: 'hbox',
+	align: 'stretch',
+    },
+
+    loadTags: function(tagstring = '', inEdit, force = false) {
+	let me = this;
+
+	if (me.oldTags === tagstring && !force) {
+	    return;
+	}
+
+	let tags = tagstring.split(/[;, ]/).filter((t) => !!t) || [];
+	me.suspendLayout = true;
+	me.tags = {};
+	me.removeAllTags();
+	tags.forEach((tag) => {
+	    me.addTag(tag, inEdit);
+	});
+	me.suspendLayout = false;
+	me.updateLayout();
+	if (!force) {
+	    me.oldTags = tagstring;
+	}
+    },
+
+    getEditBtnHtml: function() {
+	let me = this;
+	let cls = '';
+	let qtip = '';
+	if (me.editMode) {
+	    qtip = gettext('Apply Changes');
+	    cls = 'check';
+	} else {
+	    qtip = gettext('Edit Tags');
+	    cls = 'pencil';
+	}
+	return `&nbsp;<i data-qtip="${qtip}" class="fa fa-${cls}"></i>`;
+    },
+
+    toggleEdit: function(cancel) {
+	let me = this;
+	me.editMode = !me.editMode;
+	let tagCount = 0;
+	me.tagFields.forEach((tag) => {
+	    tag.setMode(me.editMode ? 'editable' : 'normal');
+	    if (tag.isVisible() && !tag.addTag) {
+		tagCount++;
+	    }
+	});
+
+	me.addTagBtn.setVisible(me.editMode);
+	me.editBtn.setHtml(me.getEditBtnHtml());
+	me.noTagsField.setVisible(!me.editMode && tagCount === 0);
+	me.cancelBtn.setVisible(me.editMode);
+
+	if (!me.editMode) {
+	    let tags = [];
+	    if (cancel) {
+		me.loadTags(me.oldTags, false, true);
+	    } else {
+		me.tagFields.forEach((tag) => {
+		    let tagValue = tag.getTag();
+		    if (tag.isVisible() && tagValue) {
+			tags.push(tagValue);
+		    }
+		});
+		tags = tags.join(',');
+		if (me.oldTags !== tags) {
+		    me.oldTags = tags;
+		    me.fireEvent('change', tags);
+		}
+	    }
+	}
+	me.updateLayout();
+    },
+
+    removeAllTags: function() {
+	let me = this;
+	me.tagFields.forEach((tag) => {
+	    me.remove(tag);
+	});
+	me.tagFields = [];
+	me.noTagsField.setVisible(true);
+    },
+
+    addTag: function(tag, inEdit) {
+	let me = this;
+	let tagField = me.insert(me.tagFields.length + 1, {
+	    xtype: 'pmxTag',
+	    tag,
+	    mode: inEdit ? 'editable' : 'normal',
+	    layoutCallback: () => me.updateLayout(),
+	});
+	me.tagFields.push(tagField);
+	me.noTagsField.setVisible(false);
+    },
+
+    initComponent: function() {
+	let me = this;
+	me.tagFields = [];
+	me.callParent();
+	me.noTagsField = me.add({
+	    xtype: 'box',
+	    html: gettext('No Tags'),
+	});
+	me.addTagBtn = me.add({
+	    xtype: 'pmxTag',
+	    addTag: true,
+	    hidden: true,
+	    layoutCallback: () => me.updateLayout(),
+	    listeners: {
+		change: function(tag) {
+		    me.addTag(tag, true);
+		},
+	    },
+	});
+	me.cancelBtn = me.add({
+	    xtype: 'box',
+	    html: `&nbsp;<i qtip-data="${gettext('Cancel')}" class="fa fa-times"></i>`,
+	    style: {
+		cursor: 'pointer',
+	    },
+	    hidden: true,
+	    listeners: {
+		click: () => me.toggleEdit(true),
+		element: 'el',
+	    },
+	});
+	me.editBtn = me.add({
+	    xtype: 'box',
+	    html: me.getEditBtnHtml(),
+	    style: {
+		cursor: 'pointer',
+	    },
+	    listeners: {
+		click: () => me.toggleEdit(false),
+		element: 'el',
+	    },
+	});
+	if (me.tags) {
+	    me.loadTags(me.tags);
+	}
+    },
+});
-- 
2.30.2