[pve-devel] [PATCH manager v7 07/14] ui: add form/Tag

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

displays a single tag, with the ability to edit inline on click (when
the mode is set to editable). This brings up a list of globally available tags
for simple selection.

Also has a mode for adding a new Tag.

This has a 'layoutCallback' which will be called on input, so that the parent
component can update the layout when the content changes.
This is necessary since we circumvent the extjs logic for updating.

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

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index 60ae421e..9d610f71 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -74,6 +74,7 @@ JSSRC= 							\
 	form/ViewSelector.js				\
 	form/iScsiProviderSelector.js			\
 	form/TagColorGrid.js				\
+	form/Tag.js					\
 	grid/BackupView.js				\
 	grid/FirewallAliases.js				\
 	grid/FirewallOptions.js				\
diff --git a/www/manager6/form/Tag.js b/www/manager6/form/Tag.js
new file mode 100644
index 00000000..0a754edb
--- /dev/null
+++ b/www/manager6/form/Tag.js
@@ -0,0 +1,276 @@
+Ext.define('Proxmox.Tag', {
+    extend: 'Ext.Component',
+    alias: 'widget.pmxTag',
+
+    // if set to true, displays 'Add Tag' and a plus symbol
+    addTag: false,
+
+    // callback to update the layout in the containing element
+    // this is necessary since we circumvent extjs layout with 'contentEditable'
+    layoutCallback: Ext.emptyFn,
+
+    style: {
+	'white-space': 'nowrap',
+    },
+
+    icons: {
+	addTag: 'plus',
+	editable: 'minus',
+	normal: '',
+	edit: 'check',
+    },
+
+    faIconStyle: '-square',
+
+    mode: 'normal',
+
+    // we need to do this in mousedown, because that triggers before
+    // focusleave (which triggers before click)
+    onMouseDown: function(event) {
+	let me = this;
+	if (event.target.tagName !== 'I') {
+	    return;
+	}
+	switch (me.mode) {
+	    case 'editable':
+		if (me.addTag) {
+		    break;
+		}
+		me.setText('');
+		me.finishEdit();
+		break;
+	    case 'edit':
+		if (me.addTag && me.tagEl().innerHTML === '') {
+		    event.browserEvent.preventDefault();
+		    event.browserEvent.stopPropagation();
+		    break;
+		}
+		me.finishEdit();
+		break;
+	    default: break;
+	}
+    },
+
+    onClick: function(event) {
+	let me = this;
+	if (event.target.tagName !== 'SPAN' && !me.addTag) {
+	    return;
+	}
+	if (me.mode === 'editable') {
+	    me.startEdit();
+	}
+    },
+
+    startEdit: function() {
+	let me = this;
+	me.setMode('edit');
+
+	// select text in the element
+	let range = document.createRange();
+	range.selectNodeContents(me.tagEl());
+	let sel = window.getSelection();
+	sel.removeAllRanges();
+	sel.addRange(range);
+
+	me.showPicker();
+    },
+
+    showPicker: function() {
+	let me = this;
+	if (!me.picker) {
+	    me.picker = Ext.widget({
+		xtype: 'boundlist',
+		minWidth: 70,
+		scrollable: true,
+		floating: true,
+		hidden: true,
+		userCls: 'proxmox-tags-full',
+		displayField: 'tag',
+		itemTpl: [
+		    '{[Proxmox.Utils.getTagElement(values.tag, PVE.Utils.tagOverrides)]}',
+		],
+		store: [],
+		listeners: {
+		    select: function(picker, rec) {
+			me.setText(rec.data.tag);
+			me.finishEdit();
+		    },
+		},
+	    });
+	}
+	me.picker.getStore().clearFilter();
+	let taglist = PVE.Utils.tagList.map(v => ({ tag: v }));
+	if (taglist.length < 1) {
+	    return;
+	}
+	me.picker.getStore().setData(taglist);
+	me.picker.showBy(me, 'tl-bl');
+	me.picker.setMaxHeight(200);
+    },
+
+    finishEdit: function(update = true) {
+	let me = this;
+	me.picker?.hide();
+
+	let tag = me.tagEl().innerHTML;
+	if (!me.addTag) {
+	    if (tag === '') {
+		// "delete" ourselves
+		me.setVisible(false);
+	    }
+	    me.tag = tag;
+	    me.updateColor(me.tag);
+	}
+
+	if (update) {
+	    me.fireEvent('change', tag);
+	}
+
+	me.tagEl().contentEditable = false;
+	me.setMode('editable');
+    },
+
+    cancelEdit: function(list, event) {
+	let me = this;
+	if (me.mode === 'edit') {
+	    me.setText(me.tag);
+	    me.finishEdit(false);
+	}
+    },
+
+    setText: function(text) {
+	let me = this;
+	me.tagEl().innerHTML = text;
+	me.layoutCallback();
+    },
+
+    getTag: function() {
+	return this.tagEl().innerHTML;
+    },
+
+    setMode: function(mode) {
+	let me = this;
+	let icon = me.icons[me.addTag ? 'addTag' : mode];
+	let iconStyle = 'cursor: pointer; padding-right: 6px;';
+	let text = me.tag;
+	let cursor = 'pointer';
+	let padding = '0px';
+	switch (mode) {
+	    case 'normal':
+		iconStyle += 'display: none;';
+		padding = undefined;
+		break;
+	    case 'editable':
+		break;
+	    case 'edit':
+		me.tagEl().contentEditable = true;
+		text = '';
+		cursor = undefined;
+		break;
+	    default: return;
+	}
+
+	if (me.addTag) {
+	    me.setText(text);
+	    me.setStyle('cursor', cursor);
+	}
+
+	me.setStyle('padding-right', padding);
+
+	me.iconEl().classList = `fa fa-${icon}${me.faIconStyle}`;
+	me.iconEl().style = iconStyle;
+	me.mode = mode;
+    },
+
+    onKeyPress: function(event) {
+	let me = this;
+	let key = event.browserEvent.key;
+	if (key === "Enter") {
+	    if (!me.addTag || me.tagEl().innerHTML !== '') {
+		me.finishEdit();
+		return;
+	    }
+	} else if (key.match(PVE.Utils.tagCharRegex)) {
+	    return;
+	}
+	event.browserEvent.preventDefault();
+	event.browserEvent.stopPropagation();
+    },
+
+    onInput: function() {
+	let me = this;
+	let tag = me.tagEl().innerHTML;
+	me.layoutCallback();
+	me.picker.getStore().filter({
+	    property: 'tag',
+	    value: tag,
+	});
+    },
+
+    listeners: {
+	mousedown: 'onMouseDown',
+	click: 'onClick',
+	focusleave: 'cancelEdit',
+	keypress: 'onKeyPress',
+	input: 'onInput',
+	element: 'el',
+    },
+
+    updateColor: function(tag) {
+	let me = this;
+	let rgb = PVE.Utils.tagOverrides[tag] ?? Proxmox.Utils.stringToRGB(tag);
+
+	let cls = Proxmox.Utils.getTextContrastClass(rgb);
+	let color = Proxmox.Utils.rgbToCss(rgb);
+	me.setUserCls(`proxmox-tag-${cls}`);
+	me.setStyle('background-color', color);
+	if (rgb.length > 3) {
+	    let fgcolor = Proxmox.Utils.rgbToCss([rgb[3], rgb[4], rgb[5]]);
+	    me.setStyle('color', fgcolor);
+	} else {
+	    me.setStyle('color');
+	}
+    },
+
+    tagEl: function() {
+	return this.el?.dom?.children?.[0];
+    },
+
+    iconEl: function() {
+	return this.el?.dom?.children?.[1];
+    },
+
+    initComponent: function() {
+	let me = this;
+	if (me.tag === undefined && !me.addTag) {
+	    throw "no tag given";
+	}
+	me.mode = me.mode ?? 'normal';
+
+	if (me.addTag) {
+	    me.tag = gettext('Add Tag');
+	    me.mode = 'editable';
+	    me.setUserCls(`proxmox-tag-dark`);
+	}
+
+	let iconStyle = me.mode !== 'editable' ? 'display: none' : 'padding-right: 6px;';
+	let iconCls = me.icons[me.addTag ? 'addTag' : me.mode];
+
+	let icon = ` <i style="cursor: pointer; ${iconStyle}" class="fa fa-${iconCls}${me.faIconStyle}"></i>`;
+	me.html = `<span style="padding-right: 1px">${me.tag}</span>${icon}`;
+
+	me.callParent();
+	if (me.addTag) {
+	    me.setStyle('cursor', 'pointer');
+	} else {
+	    me.updateColor(me.tag);
+	}
+	me.setStyle('padding-right', me.mode === 'editable' ? '0px' : undefined);
+
+	if (!me.addTag) {
+	    me.mon(Ext.GlobalEvents, 'tag-color-override', function() {
+		me.updateColor(me.tag);
+	    });
+	}
+    },
+});
-- 
2.30.2