From: Dominik Csapak <d.csapak@proxmox.com>
To: pve-devel@lists.proxmox.com
Subject: [pve-devel] [PATCH manager v4 05/10] ui: add form/TagColorGrid
Date: Wed, 23 Mar 2022 11:34:40 +0100 [thread overview]
Message-ID: <20220323103445.2075649-8-d.csapak@proxmox.com> (raw)
In-Reply-To: <20220323103445.2075649-1-d.csapak@proxmox.com>
this provides a basic grid to edit a list of tag color overrides.
We'll use this for editing the datacenter.cfg overrides and the
browser storage overrides.
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
www/manager6/Makefile | 1 +
www/manager6/form/TagColorGrid.js | 218 ++++++++++++++++++++++++++++++
2 files changed, 219 insertions(+)
create mode 100644 www/manager6/form/TagColorGrid.js
diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index e6e01bd1..225dffba 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -73,6 +73,7 @@ JSSRC= \
form/VNCKeyboardSelector.js \
form/ViewSelector.js \
form/iScsiProviderSelector.js \
+ form/TagColorGrid.js \
grid/BackupView.js \
grid/FirewallAliases.js \
grid/FirewallOptions.js \
diff --git a/www/manager6/form/TagColorGrid.js b/www/manager6/form/TagColorGrid.js
new file mode 100644
index 00000000..bd8e539e
--- /dev/null
+++ b/www/manager6/form/TagColorGrid.js
@@ -0,0 +1,218 @@
+Ext.define('PVE.form.ColorPicker', {
+ extend: 'Ext.Component',
+ alias: 'widget.pveColorPicker',
+
+ defaultBindProperty: 'value',
+
+ config: {
+ value: null,
+ },
+
+ height: 15,
+ maxHeight: 15,
+
+ getValue: function() {
+ return this.realvalue.slice(1);
+ },
+
+ setValue: function(value = "000000") {
+ let me = this;
+ me.picker.value = value[0] !== '#' ? `#${value}` : value;
+ me.setColor(value);
+ },
+
+ setColor: function(value = "000000") {
+ let me = this;
+ let oldValue = me.realvalue;
+ me.realvalue = value;
+ me.setStyle('background-color', `#${value}`);
+ me.fireEvent('change', me, me.realvalue, oldValue);
+ },
+
+ initComponent: function() {
+ let me = this;
+ me.picker = document.createElement('input');
+ me.picker.type = 'color';
+ me.picker.style = `opacity: 0; border: 0px; width: 100%; height: ${me.height}px`;
+ me.picker.value = `${me.value}`;
+ me.contentEl = me.picker;
+
+ me.callParent();
+ me.picker.oninput = function() {
+ me.setColor(me.picker.value);
+ };
+ },
+});
+
+Ext.define('PVE.form.TagColorGrid', {
+ extend: 'Ext.grid.Panel',
+ alias: 'widget.pveTagColorGrid',
+
+ mixins: [
+ 'Ext.form.field.Field',
+ ],
+
+ allowBlank: true,
+ selectAll: false,
+ isFormField: true,
+ deleteEmpty: false,
+ selModel: 'checkboxmodel',
+
+ config: {
+ deleteEmpty: false,
+ },
+
+ emptyText: gettext('No Overrides'),
+ viewConfig: {
+ deferEmptyText: false,
+ },
+
+ setValue: function(value) {
+ let me = this;
+ if (!value) {
+ me.getStore().removeAll();
+ me.checkChange();
+ return me;
+ }
+ let entries = (value.split(/[;, ]/) || []).map((entry) => {
+ let [tag, color] = entry.split(/[=]/);
+ return {
+ tag,
+ color,
+ };
+ });
+ me.getStore().setData(entries);
+ me.checkChange();
+ return me;
+ },
+
+ getValue: function() {
+ let me = this;
+ let values = [];
+ me.getStore().each((rec) => {
+ if (rec.data.tag) {
+ values.push(`${rec.data.tag}=${rec.data.color}`);
+ }
+ });
+ return values.join(',');
+ },
+
+ getErrors: function(value) {
+ return [];
+ },
+
+ // override framework function to implement deleteEmpty behaviour
+ getSubmitData: function() {
+ let me = this,
+ data = null,
+ val;
+ if (!me.disabled && me.submitValue) {
+ val = me.getValue();
+ if (val !== null && val !== '') {
+ data = {};
+ data[me.getName()] = val;
+ } else if (me.getDeleteEmpty()) {
+ data = {};
+ data.delete = me.getName();
+ }
+ }
+ return data;
+ },
+
+
+ controller: {
+ xclass: 'Ext.app.ViewController',
+
+ addLine: function() {
+ let me = this;
+ me.getView().getStore().add({});
+ },
+
+ removeSelection: function() {
+ let me = this;
+ let view = me.getView();
+ let selection = view.getSelection();
+ if (selection === undefined) {
+ return;
+ }
+
+ selection.forEach((sel) => {
+ view.getStore().remove(sel);
+ });
+ view.checkChange();
+ },
+
+ fieldChange: function(field, newValue, oldValue) {
+ let me = this;
+ let view = me.getView();
+ let rec = field.getWidgetRecord();
+ let column = field.getWidgetColumn();
+ rec.set(column.dataIndex, newValue);
+ view.checkChange();
+ },
+ },
+
+ tbar: [
+ {
+ text: gettext('Add'),
+ handler: 'addLine',
+ },
+ {
+ xtype: 'proxmoxButton',
+ text: gettext('Remove'),
+ handler: 'removeSelection',
+ disabled: true,
+ },
+ ],
+
+ columns: [
+ {
+ header: 'Tag',
+ dataIndex: 'tag',
+ xtype: 'widgetcolumn',
+ onWidgetAttach: function(col, widget, rec) {
+ widget.getStore().setData(PVE.Utils.getTagList().map(v => ({ tag: v })));
+ },
+ widget: {
+ xtype: 'combobox',
+ isFormField: false,
+ maskRe: /[a-zA-Z0-9_.-]/,
+ queryMode: 'local',
+ displayField: 'tag',
+ valueField: 'tag',
+ store: {},
+ listeners: {
+ change: 'fieldChange',
+ },
+ },
+ flex: 1,
+ },
+ {
+ header: "Color",
+ xtype: 'widgetcolumn',
+ flex: 1,
+ dataIndex: 'color',
+ widget: {
+ xtype: 'pveColorPicker',
+ isFormField: false,
+ listeners: {
+ change: 'fieldChange',
+ },
+ },
+ },
+ ],
+
+ store: {
+ listeners: {
+ update: function() {
+ this.commitChanges();
+ },
+ },
+ },
+
+ initComponent: function() {
+ let me = this;
+ me.callParent();
+ me.initField();
+ },
+});
--
2.30.2
next prev parent reply other threads:[~2022-03-23 10:35 UTC|newest]
Thread overview: 13+ messages / expand[flat|nested] mbox.gz Atom feed top
2022-03-23 10:34 [pve-devel] [PATCH cluster/widget-toolkit/manager v4] add tags to ui Dominik Csapak
2022-03-23 10:34 ` [pve-devel] [PATCH cluster v4 1/1] datacenter.cfg: add option for tag-tree-style and tag-colors Dominik Csapak
2022-03-23 10:34 ` [pve-devel] [PATCH widget-toolkit v4 1/1] add tag related helpers Dominik Csapak
2022-03-23 10:34 ` [pve-devel] [PATCH manager v4 01/10] api: /cluster/resources: add tags to returned properties Dominik Csapak
2022-03-23 10:34 ` [pve-devel] [PATCH manager v4 02/10] api: /version: add 'tag-colors' and 'tag-tree-style' Dominik Csapak
2022-03-23 10:34 ` [pve-devel] [PATCH manager v4 03/10] ui: parse and save tag color overrides from /version Dominik Csapak
2022-03-23 10:34 ` [pve-devel] [PATCH manager v4 04/10] ui: tree/ResourceTree: collect tags on update Dominik Csapak
2022-03-23 10:34 ` Dominik Csapak [this message]
2022-03-23 10:34 ` [pve-devel] [PATCH manager v4 06/10] ui: dc/OptionView: add editors for tag settings Dominik Csapak
2022-03-23 10:34 ` [pve-devel] [PATCH manager v4 07/10] ui: add form/Tag Dominik Csapak
2022-03-23 10:34 ` [pve-devel] [PATCH manager v4 08/10] ui: {lxc, qemu}/Config: show Tags and make them editable Dominik Csapak
2022-03-23 10:34 ` [pve-devel] [PATCH manager v4 09/10] ui: tree/ResourceTree: show Tags in tree Dominik Csapak
2022-03-23 10:34 ` [pve-devel] [PATCH manager v4 10/10] 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=20220323103445.2075649-8-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