ui: token selector: refactor to more schematic approach

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

www/manager6/form/TokenSelector.js

@@ -4,77 +4,58 @@ Ext.define('PVE.form.TokenSelector', {
 
     allowBlank: false,
     autoSelect: false,
-    valueField: 'id',
     displayField: 'id',
 
     editable: true,
     anyMatch: true,
     forceSelection: true,
 
-    initComponent: function() {
+    store: {
-	var me = this;
+	model: 'pve-tokens',
+	autoLoad: true,
+	proxy: {
+	    type: 'proxmox',
+	    url: 'api2/json/access/users',
+	    extraParams: { 'full': 1 },
+	},
+	sorters: 'id',
+	listeners: {
+	    load: function(store, records, success) {
+		let tokens = [];
+		for (const rec of records) {
+		    let user = rec.data;
+		    if (!user.tokens || user.tokens.length === 0) continue;
 
-	var store = new Ext.data.Store({
+		    for (token of user.tokens) {
-	    model: 'pve-tokens',
+			tokens.push({
-	    sorters: [{
+			    id: `${user.userid}!${token.tokenid}`,
-		property: 'userid'
+			    comment: token.comment,
+			});
+		    }
+		}
+		store.loadData(tokens);
+	    },
+	},
+    },
+
+    listConfig: {
+	columns: [
+	    {
+		header: gettext('API Token'),
+		sortable: true,
+		dataIndex: 'id',
+		flex: 1
 	    },
 	    {
-		property: 'tokenid'
+		header: gettext('Comment'),
-	    }]
+		sortable: false,
-	});
+		dataIndex: 'comment',
-
+		renderer: Ext.String.htmlEncode,
-	Ext.apply(me, {
+		flex: 1
-	    store: store,
-            listConfig: {
-		columns: [
-		    {
-			header: gettext('API Token'),
-			sortable: true,
-			dataIndex: 'id',
-			flex: 1
-		    },
-		    {
-			header: gettext('Comment'),
-			sortable: false,
-			dataIndex: 'comment',
-			renderer: Ext.String.htmlEncode,
-			flex: 1
-		    }
-		]
 	    }
-	});
+	]
-
+    },
-	me.callParent();
-
-	Proxmox.Utils.API2Request({
-	    url: '/access/users/?full=1',
-	    method: 'GET',
-	    failure: function(response, opts) {
-		Proxmox.Utils.setErrorMask(me, response.htmlStatus);
-		me.load_task.delay(me.load_delay);
-	    },
-	    success: function(response, opts) {
-		Proxmox.Utils.setErrorMask(me, false);
-		var result = Ext.decode(response.responseText);
-		var data = result.data || [];
-		var records = [];
-		Ext.Array.each(data, function(user) {
-		    tokens = user.tokens || [];
-		    Ext.Array.each(tokens, function(token) {
-			var r = {};
-			r.id = user.userid + '!' + token.tokenid;
-			r.comment = token.comment;
-			records.push(r);
-		    });
-		});
-		store.loadData(records);
-	    },
-	});
-    }
-
 }, function() {
-
     Ext.define('pve-tokens', {
 	extend: 'Ext.data.Model',
 	fields: [
@@ -84,8 +65,4 @@ Ext.define('PVE.form.TokenSelector', {
 	],
 	idProperty: 'id'
     });
-
 });
-
-
-