From 968270ae3dba5ed182cf7ac799f452102080f97f Mon Sep 17 00:00:00 2001
From: Thomas Lamprecht <t.lamprecht@proxmox.com>
Date: Fri, 6 May 2022 09:26:47 +0200
Subject: [PATCH] ui: add namespace selector combobox

Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
---
 www/Makefile                  |  1 +
 www/form/NamespaceSelector.js | 79 +++++++++++++++++++++++++++++++++++
 2 files changed, 80 insertions(+)
 create mode 100644 www/form/NamespaceSelector.js

diff --git a/www/Makefile b/www/Makefile
index 697df9c0..f217d46d 100644
--- 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
index 00000000..e1e99ecf
--- /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();
+    },
+});
+