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.csa...@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 ` <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: ` <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
_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
