[pve-devel] [PATCH manager v7 14/14] ui: form/Tag(Edit): add drag & drop when editing tags

[Dominik Csapak]

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
 www/manager6/form/Tag.js     | 22 +++++++--
 www/manager6/form/TagEdit.js | 96 +++++++++++++++++++++++++++++++++++-
 2 files changed, 114 insertions(+), 4 deletions(-)

diff --git a/www/manager6/form/Tag.js b/www/manager6/form/Tag.js
index 91190051..dcbd9597 100644
--- a/www/manager6/form/Tag.js
+++ b/www/manager6/form/Tag.js
@@ -31,6 +31,9 @@ Ext.define('Proxmox.Tag', {
 	if (event.target.tagName !== 'I') {
 	    return;
 	}
+	if (event.target.classList.contains('handle')) {
+	    return;
+	}
 	switch (me.mode) {
 	    case 'editable':
 		if (me.addTag) {
@@ -156,12 +159,14 @@ Ext.define('Proxmox.Tag', {
 	let text = me.tag;
 	let cursor = 'pointer';
 	let padding = '0px';
+	let dragHandleStyle = 'none';
 	switch (mode) {
 	    case 'normal':
 		iconStyle += 'display: none;';
 		padding = undefined;
 		break;
 	    case 'editable':
+		dragHandleStyle = '';
 		break;
 	    case 'edit':
 		me.tagEl().contentEditable = true;
@@ -174,12 +179,14 @@ Ext.define('Proxmox.Tag', {
 	if (me.addTag) {
 	    me.setText(text);
 	    me.setStyle('cursor', cursor);
+	    dragHandleStyle = 'none';
 	}
 
 	me.setStyle('padding-right', padding);
 
 	me.iconEl().classList = `fa fa-${icon}${me.faIconStyle}`;
 	me.iconEl().style = iconStyle;
+	me.dragEl().style.display = dragHandleStyle;
 	me.mode = mode;
     },
 
@@ -233,14 +240,18 @@ Ext.define('Proxmox.Tag', {
 	}
     },
 
-    tagEl: function() {
+    dragEl: function() {
 	return this.el?.dom?.children?.[0];
     },
 
-    iconEl: function() {
+    tagEl: function() {
 	return this.el?.dom?.children?.[1];
     },
 
+    iconEl: function() {
+	return this.el?.dom?.children?.[2];
+    },
+
     initComponent: function() {
 	let me = this;
 	if (me.tag === undefined && !me.addTag) {
@@ -256,10 +267,15 @@ Ext.define('Proxmox.Tag', {
 
 	let iconStyle = me.mode !== 'editable' ? 'display: none' : 'padding-right: 6px;';
 	let iconCls = me.icons[me.addTag ? 'addTag' : me.mode];
+	let dragHandleStyle = 'cursor: grab; font-size: 14px;';
+	if (me.addTag || me.mode !== 'editable') {
+	    dragHandleStyle += 'display: none';
+	}
 
 	let adminCls = me.tag[0] === '+' ? 'admin-tag' : '';
+	let dragHandle = `<i class="handle fa fa-bars" style="${dragHandleStyle}"></i> `;
 	let icon = ` <i style="cursor: pointer; ${iconStyle}" class="fa fa-${iconCls}${me.faIconStyle}"></i>`;
-	me.html = `<span style="padding-right: 1px" class="${adminCls}">${me.tag}</span>${icon}`;
+	me.html = `${dragHandle}<span style="padding-right: 1px" class="${adminCls}">${me.tag}</span>${icon}`;
 
 	me.callParent();
 	if (me.addTag) {
diff --git a/www/manager6/form/TagEdit.js b/www/manager6/form/TagEdit.js
index 5a267169..85f9f63e 100644
--- a/www/manager6/form/TagEdit.js
+++ b/www/manager6/form/TagEdit.js
@@ -18,7 +18,7 @@ Ext.define('PVE.panel.TagEditContainer', {
 
 	let tags = tagstring.split(/[;, ]/).filter((t) => !!t) || [];
 	me.suspendLayout = true;
-	me.tags = {};
+	me.tagList = [];
 	me.removeAllTags();
 	tags.forEach((tag) => {
 	    me.addTag(tag, inEdit);
@@ -87,6 +87,7 @@ Ext.define('PVE.panel.TagEditContainer', {
 	    me.remove(tag);
 	});
 	me.tagFields = [];
+	me.tagList = [];
 	me.noTagsField.setVisible(true);
     },
 
@@ -94,11 +95,13 @@ Ext.define('PVE.panel.TagEditContainer', {
 	let me = this;
 	let tagField = me.insert(me.tagFields.length + 1, {
 	    xtype: 'pmxTag',
+	    tagIndex: me.tagList.length,
 	    tag,
 	    mode: inEdit ? 'editable' : 'normal',
 	    layoutCallback: () => me.updateLayout(),
 	});
 	me.tagFields.push(tagField);
+	me.tagList.push(tag);
 	me.noTagsField.setVisible(false);
     },
 
@@ -147,5 +150,96 @@ Ext.define('PVE.panel.TagEditContainer', {
 	if (me.tags) {
 	    me.loadTags(me.tags);
 	}
+
+	me.on('render', function(v) {
+	    me.dragzone = Ext.create('Ext.dd.DragZone', v.getEl(), {
+		getDragData: function(e) {
+		    let source = e.getTarget('.handle');
+		    if (source) {
+			let sourceId = source.parentNode.id;
+			let cmp = Ext.getCmp(sourceId);
+			let tag = cmp.getTag();
+			let ddel = document.createElement('div');
+			ddel.classList.add('proxmox-tags-full');
+			ddel.innerHTML = Proxmox.Utils.getTagElement(tag, PVE.Utils.tagOverrides);
+			let repairXY = Ext.fly(source).getXY();
+			cmp.setDisabled(true);
+			ddel.id = Ext.id();
+			return {
+			    ddel,
+			    repairXY,
+			    tagIndex: cmp.tagIndex,
+			    tag: cmp.getTag(),
+			    sourceId,
+			};
+		    }
+		    return undefined;
+		},
+		onMouseUp: function(target, e, id) {
+		    let cmp = Ext.getCmp(this.dragData.sourceId);
+		    if (cmp && !cmp.isDestroyed) {
+			cmp.setDisabled(false);
+		    }
+		},
+		getRepairXY: function() {
+		    return this.dragData.repairXY;
+		},
+		beforeInvalidDrop: function(target, e, id) {
+		    let cmp = Ext.getCmp(this.dragData.sourceId);
+		    if (cmp && !cmp.isDestroyed) {
+			cmp.setDisabled(false);
+		    }
+		},
+	    });
+	    me.dropzone = Ext.create('Ext.dd.DropZone', v.getEl(), {
+		getTargetFromEvent: function(e) {
+		    return e.getTarget('.proxmox-tag-dark,.proxmox-tag-light');
+		},
+		getIndicator: function() {
+		    if (!me.indicator) {
+			me.indicator = Ext.create('Ext.Component', {
+			    floating: true,
+			    html: '<i class="fa fa-long-arrow-up"></i>',
+			    hidden: true,
+			    shadow: false,
+			});
+		    }
+		    return me.indicator;
+		},
+		onContainerOver: function() {
+		    this.getIndicator().setVisible(false);
+		},
+		notifyOut: function() {
+		    this.getIndicator().setVisible(false);
+		},
+		onNodeOver: function(target, dd, e, data) {
+		    let indicator = this.getIndicator();
+		    indicator.setVisible(true);
+		    indicator.alignTo(Ext.getCmp(target.id), 't50-bl', [-1, -2]);
+		    return this.dropAllowed;
+		},
+		onNodeDrop: function(target, dd, e, data) {
+		    this.getIndicator().setVisible(false);
+		    let tagIdx = data.tagIndex;
+		    let tag = data.tag;
+		    me.tagList.splice(tagIdx, 1);
+		    let targetCmp = Ext.getCmp(target.id);
+		    let targetIdx = targetCmp.tagIndex ?? Infinity;
+		    if (targetIdx > tagIdx) {
+			targetIdx--;
+		    }
+		    me.tagList.splice(targetIdx, 0, tag);
+		    me.loadTags(me.tagList.join(','), true, true);
+		},
+	    });
+	});
+    },
+
+    destroy: function() {
+	let me = this;
+	Ext.destroy(me.dragzone);
+	Ext.destroy(me.dropzone);
+	Ext.destroy(me.indicator);
+	me.callParent();
     },
 });
-- 
2.30.2