From: Dominik Csapak <d.csapak@proxmox.com>
To: pve-devel@lists.proxmox.com
Subject: [pve-devel] [PATCH manager v6 08/11] ui: add form/TagEdit.js
Date: Tue, 12 Apr 2022 15:34:20 +0200 [thread overview]
Message-ID: <20220412133423.1021857-13-d.csapak@proxmox.com> (raw)
In-Reply-To: <20220412133423.1021857-1-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 | 132 +++++++++++++++++++++++++++++++++++
2 files changed, 133 insertions(+)
create mode 100644 www/manager6/form/TagEdit.js
diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index b0729f7a..c95e9988 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..d39225fb
--- /dev/null
+++ b/www/manager6/form/TagEdit.js
@@ -0,0 +1,132 @@
+Ext.define('PVE.panel.TagEditContainer', {
+ extend: 'Ext.container.Container',
+ alias: 'widget.pveTagEditContainer',
+
+ tagCount: 0,
+
+ layout: {
+ type: 'hbox',
+ align: 'stretch',
+ },
+
+ loadTags: function(tagstring = '') {
+ let me = this;
+
+ if (me.oldTags === tagstring) {
+ return;
+ }
+
+ let tags = tagstring.split(/[;, ]/).filter((t) => !!t) || [];
+ me.suspendLayout = true;
+ me.tags = {};
+ me.removeAllTags();
+ tags.forEach((tag) => {
+ me.addTag(tag);
+ });
+ me.suspendLayout = false;
+ me.updateLayout();
+ 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>`;
+ },
+
+ onEditClick: function() {
+ 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);
+
+ if (!me.editMode) {
+ let tags = [];
+ 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.editBtn = me.add({
+ xtype: 'box',
+ html: me.getEditBtnHtml(),
+ style: {
+ cursor: 'pointer',
+ },
+ listeners: {
+ click: () => me.onEditClick(),
+ element: 'el',
+ },
+ });
+ if (me.tags) {
+ me.loadTags(me.tags);
+ }
+ },
+});
--
2.30.2
next prev parent reply other threads:[~2022-04-12 13:35 UTC|newest]
Thread overview: 18+ messages / expand[flat|nested] mbox.gz Atom feed top
2022-04-12 13:34 [pve-devel] [PATCH cluster/widget-toolkit/manager v6] add tags to ui Dominik Csapak
2022-04-12 13:34 ` [pve-devel] [PATCH cluster v6 1/3] add CFS_IPC_GET_GUEST_CONFIG_PROPERTIES method Dominik Csapak
2022-04-27 7:17 ` Thomas Lamprecht
2022-04-12 13:34 ` [pve-devel] [PATCH cluster v6 2/3] Cluster: add get_guest_config_properties Dominik Csapak
2022-04-12 13:34 ` [pve-devel] [PATCH cluster v6 3/3] datacenter.cfg: add option for tag-tree-style and tag-colors Dominik Csapak
2022-04-27 5:55 ` Thomas Lamprecht
2022-04-12 13:34 ` [pve-devel] [PATCH widget-toolkit v6 1/1] add tag related helpers Dominik Csapak
2022-04-12 13:34 ` [pve-devel] [PATCH manager v6 01/11] api: /cluster/resources: add tags to returned properties Dominik Csapak
2022-04-12 13:34 ` [pve-devel] [PATCH manager v6 02/11] api: /version: add 'tag-colors' and 'tag-tree-style' Dominik Csapak
2022-04-12 13:34 ` [pve-devel] [PATCH manager v6 03/11] ui: parse and save tag color overrides from /version Dominik Csapak
2022-04-12 13:34 ` [pve-devel] [PATCH manager v6 04/11] ui: tree/ResourceTree: collect tags on update Dominik Csapak
2022-04-12 13:34 ` [pve-devel] [PATCH manager v6 05/11] ui: add form/TagColorGrid Dominik Csapak
2022-04-12 13:34 ` [pve-devel] [PATCH manager v6 06/11] ui: dc/OptionView: add editors for tag settings Dominik Csapak
2022-04-12 13:34 ` [pve-devel] [PATCH manager v6 07/11] ui: add form/Tag Dominik Csapak
2022-04-12 13:34 ` Dominik Csapak [this message]
2022-04-12 13:34 ` [pve-devel] [PATCH manager v6 09/11] ui: {lxc, qemu}/Config: show Tags and make them editable Dominik Csapak
2022-04-12 13:34 ` [pve-devel] [PATCH manager v6 10/11] ui: tree/ResourceTree: show Tags in tree Dominik Csapak
2022-04-12 13:34 ` [pve-devel] [PATCH manager v6 11/11] ui: form/GlobalSearchField: display tags and allow to search for them Dominik Csapak
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
Avoid top-posting and favor interleaved quoting:
https://en.wikipedia.org/wiki/Posting_style#Interleaved_style
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
--in-reply-to=20220412133423.1021857-13-d.csapak@proxmox.com \
--to=d.csapak@proxmox.com \
--cc=pve-devel@lists.proxmox.com \
/path/to/YOUR_REPLY
https://kernel.org/pub/software/scm/git/docs/git-send-email.html
* If your mail client supports setting the In-Reply-To header
via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line
before the message body.
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox