ui: add namespace selector combobox

Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>

diff --git a/www/Makefile b/www/Makefile
index 697df9c05057f52eaed5d1a770e0a746111f1140..f217d46d59a708f91402e02d847e718031fddd72 100644 (file)
--- a/www/Makefile
+++ b/www/Makefile
@@ -40,6 +40,7 @@ JSSRC=                                                        \
        form/AuthidSelector.js                          \
        form/RemoteSelector.js                          \
        form/DataStoreSelector.js                       \
+       form/NamespaceSelector.js                       \
        form/CalendarEvent.js                           \
        form/PermissionPathSelector.js                  \
        form/GroupSelector.js                           \

diff --git a/www/form/NamespaceSelector.js b/www/form/NamespaceSelector.js
new file mode 100644 (file)
index 0000000..e1e99ec
--- /dev/null
+++ b/www/form/NamespaceSelector.js
@@ -0,0 +1,79 @@
+Ext.define('pbs-namespaces', {
+    extend: 'Ext.data.Model',
+    fields: [
+       {
+           name: 'ns',
+       },
+       {
+           name: 'id', // fake as else the model messes with our value and/or display...
+           type: 'string',
+           calculate: data => data.ns === '' ? '/' : data.ns,
+       },
+    ],
+    idProperty: 'id',
+});
+
+Ext.define('PBS.form.NamespaceSelector', {
+    extend: 'Ext.form.field.ComboBox',
+    alias: 'widget.pbsNamespaceSelector',
+
+    allowBlank: true,
+    autoSelect: true,
+    valueField: 'ns',
+
+    displayField: 'ns',
+    emptyText: gettext('Root'),
+
+    editable: true,
+    anyMatch: true,
+    forceSelection: true,
+
+    matchFieldWidth: false,
+    listConfig: {
+       minWidth: 170,
+       maxWidth: 500,
+       // below doesn't work :/
+       //minHeight: 30,
+       //emptyText: gettext('No namespaces accesible.'),
+    },
+
+    triggers: {
+       clear: {
+           cls: 'pmx-clear-trigger',
+           weight: -1,
+           hidden: true,
+           handler: function() {
+               this.triggers.clear.setVisible(false);
+               this.setValue('');
+           },
+       },
+    },
+
+    listeners: {
+       change: function(field, value) {
+           let canClear = value !== '';
+           field.triggers.clear.setVisible(canClear);
+       },
+    },
+
+    initComponent: function() {
+       let me = this;
+       if (!me.datastore) {
+           console.error("no datastore passed");
+           return;
+       }
+
+       me.store = Ext.create('Ext.data.Store', {
+           model: 'pbs-namespaces',
+           autoLoad: true,
+           proxy: {
+               type: 'proxmox',
+               timeout: 30 * 1000,
+               url: `/api2/json/admin/datastore/${me.datastore}/namespace`,
+           },
+       });
+
+       me.callParent();
+    },
+});
+