[PATCH manager v2 03/17] ui: form: add filtered KVComboBox

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

this makes it easier to have the same KVComboBox, but for different
configurations, depending on a single 'category' value. This is useful
for having the same KVComboBox in different categories, such as the cpu
architecture, for e.g. the scsi hw or bios selector, which need different
values for different architectures.

Instead of implementing the logic for each KVComboBox, abstract it away,
so we can reuse the code and have consistent behavior here.

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

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index 944dd873..8857045c 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -17,6 +17,7 @@ JSSRC= 							\
 	data/ResourceStore.js				\
 	data/model/RRDModels.js				\
 	container/TwoColumnContainer.js			\
+	form/FilteredKVComboBox.js			\
 	form/ACMEAPISelector.js 			\
 	form/ACMEAccountSelector.js			\
 	form/ACMEPluginSelector.js			\
diff --git a/www/manager6/form/FilteredKVComboBox.js b/www/manager6/form/FilteredKVComboBox.js
new file mode 100644
index 00000000..0e24a79f
--- /dev/null
+++ b/www/manager6/form/FilteredKVComboBox.js
@@ -0,0 +1,67 @@
+Ext.define('PVE.form.FilteredKVComboBox', {
+    extend: 'Proxmox.form.KVComboBox',
+    alias: ['widget.pveFilteredKVComboBox'],
+
+    // sam as in the KVComboBox
+    comboItems: undefined,
+
+    // contains the allowed keys per category, e.g.
+    // {
+    //     category1: ['foo', 'bar'],
+    //     cateogry2: ['foo'],'
+    // }
+    //
+    // to have an effect, the listed values must exist in the comboItems list
+    allowedValuesPerCategory: {},
+
+    // the current category. If not set, the store is not filtered.
+    category: undefined,
+
+    // If set, will be used to update the display value of the '__default__' value
+    // that is usually set in a KVComboBox.
+    //
+    // gets the current category (if any) as parameter)
+    setDefaultDisplay: undefined,
+
+    setCategory: function (category) {
+        let me = this;
+        me.category = category;
+        me.filterByCategory(category);
+    },
+
+    filterByCategory: function (category) {
+        let me = this;
+        let wasValid = me.isValid();
+        me.store.clearFilter();
+
+        let allowedKeys = me.allowedValuesPerCategory[category];
+        if (allowedKeys) {
+            me.store.addFilter((rec) => allowedKeys.indexOf(rec.data.key) !== -1);
+        }
+
+        let isValid = me.isValid();
+        // update default value with new arch
+        if (Ext.isFunction(me.setDefaultDisplay)) {
+            let record = me.store.findRecord('key', '__default__');
+            if (record) {
+                record.set('value', me.setDefaultDisplay(category));
+                record.commit();
+            }
+        }
+
+        // for some reason, adding/changing filters does not trigger this, even though
+        // it show the field as invalid, so simply track and fire the event manually.
+        if (wasValid !== isValid) {
+            me.fireEvent('validitychange', isValid);
+        }
+    },
+
+    initComponent: function () {
+        var me = this;
+
+        me.callParent();
+
+        // initial filtering
+        me.setCategory(me.category);
+    },
+});
-- 
2.47.3