From 4dedd333d1ae618455f570d216e91c92c45f1a9f Mon Sep 17 00:00:00 2001
From: Thomas Lamprecht <t.lamprecht@proxmox.com>
Date: Mon, 30 Mar 2020 10:44:50 +0200
Subject: [PATCH] ui: token selector: refactor to more schematic approach

Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
---
 www/manager6/form/TokenSelector.js | 105 +++++++++++------------------
 1 file changed, 41 insertions(+), 64 deletions(-)

diff --git a/www/manager6/form/TokenSelector.js b/www/manager6/form/TokenSelector.js
index 932ecd7c..8ece6e69 100644
--- a/www/manager6/form/TokenSelector.js
+++ b/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() {
-	var me = this;
+    store: {
+	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({
-	    model: 'pve-tokens',
-	    sorters: [{
-		property: 'userid'
+		    for (token of user.tokens) {
+			tokens.push({
+			    id: `${user.userid}!${token.tokenid}`,
+			    comment: token.comment,
+			});
+		    }
+		}
+		store.loadData(tokens);
+	    },
+	},
+    },
+
+    listConfig: {
+	columns: [
+	    {
+		header: gettext('API Token'),
+		sortable: true,
+		dataIndex: 'id',
+		flex: 1
 	    },
 	    {
-		property: 'tokenid'
-	    }]
-	});
-
-	Ext.apply(me, {
-	    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
-		    }
-		]
+		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'
     });
-
 });
-
-
-