ui: dc/AuthView: refactor panel

use more static declarations
move functions to class
use modern js features

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>

www/manager6/dc/AuthView.js

@@ -8,54 +8,74 @@ Ext.define('PVE.dc.AuthView', {
     stateful: true,
     stateId: 'grid-authrealms',
 
-    initComponent : function() {
+    viewConfig: {
-	var me = this;
+	trackOver: false,
+    },
 
-	var store = new Ext.data.Store({
+    columns: [
-	    model: 'pve-domains',
+	{
-	    sorters: { 
+	    header: gettext('Realm'),
-		property: 'realm', 
+	    width: 100,
-		order: 'DESC' 
+	    sortable: true,
-	    }
+	    dataIndex: 'realm',
-	});
+	},
+	{
+	    header: gettext('Type'),
+	    width: 100,
+	    sortable: true,
+	    dataIndex: 'type',
+	},
+	{
+	    header: gettext('TFA'),
+	    width: 100,
+	    sortable: true,
+	    dataIndex: 'tfa',
+	},
+	{
+	    header: gettext('Comment'),
+	    sortable: false,
+	    dataIndex: 'comment',
+	    renderer: Ext.String.htmlEncode,
+	    flex: 1,
+	},
+    ],
 
-	var reload = function() {
+    store: {
-	    store.load();
+	model: 'pve-domains',
-	};
+	sorters: {
+	    property: 'realm',
+	    order: 'DESC',
+	},
+    },
 
-	var sm = Ext.create('Ext.selection.RowModel', {});
+    openEditWindow: function(authType, realm) {
-
+	let me = this;
-	var run_editor = function() {
+	Ext.create('PVE.dc.AuthEditBase', {
-	    var rec = sm.getSelection()[0];
+	    authType,
-	    if (!rec) {
+	    realm,
-		return;
+	    listeners: {
-	    }
+		destroy: () => me.reload(),
-	    Ext.create('PVE.dc.AuthEditBase', {
-		realm: rec.data.realm,
-		authType: rec.data.type,
-		listeners: {
-		    destroy: reload,
-		},
-	    }).show();
-	};
-
-	var edit_btn = new Proxmox.button.Button({
-	    text: gettext('Edit'),
-	    disabled: true,
-	    selModel: sm,
-	    handler: run_editor
-	});
-
-	var remove_btn = Ext.create('Proxmox.button.StdRemoveButton', {
-	    baseurl: '/access/domains/',
-	    selModel: sm,
-	    enableFn: function(rec) {
-		return !(rec.data.type === 'pve' || rec.data.type === 'pam');
 	    },
-	    callback: function() {
+	}).show();
-		reload();
+    },
-	    }
+
-        });
+    reload: function() {
+	let me = this;
+	me.getStore().load();
+    },
+
+    run_editor: function() {
+	let me = this;
+	let rec = me.getSelection()[0];
+	if (!rec) {
+	    return;
+	}
+	me.openEditWindow(rec.data.type, rec.data.realm);
+    },
+
+
+    initComponent: function() {
+	var me = this;
 
 	let items = [];
 	for (const [authType, config] of Object.entries(PVE.Utils.authSchema)) {
@@ -63,67 +83,37 @@ Ext.define('PVE.dc.AuthView', {
 
 	    items.push({
 		text: config.name,
-		handler: function() {
+		handler: () => me.openEditWindow(authType),
-		    Ext.create('PVE.dc.AuthEditBase', {
-			authType,
-			listeners: {
-			    destroy: reload,
-			},
-		    }).show();
-		},
 	    });
 	}
 
-        var tbar = [
-	    {
-		text: gettext('Add'),
-		menu: new Ext.menu.Menu({
-		    items: items,
-		}),
-	    },
-	    edit_btn, remove_btn
-        ];
-
 	Ext.apply(me, {
-	    store: store,
+	    tbar: [
-	    selModel: sm,
-            tbar: tbar,
-	    viewConfig: {
-		trackOver: false
-	    },
-	    columns: [
 		{
-		    header: gettext('Realm'),
+		    text: gettext('Add'),
-		    width: 100,
+		    menu: {
-		    sortable: true,
+			items: items,
-		    dataIndex: 'realm'
+		    },
 		},
 		{
-		    header: gettext('Type'),
+		    xtype: 'proxmoxButton',
-		    width: 100,
+		    text: gettext('Edit'),
-		    sortable: true,
+		    disabled: true,
-		    dataIndex: 'type'
+		    handler: () => me.run_editor(),
 		},
 		{
-		    header: gettext('TFA'),
+		    xtype: 'proxmoxStdRemoveButton',
-		    width: 100,
+		    baseurl: '/access/domains/',
-		    sortable: true,
+		    enableFn: (rec) => PVE.Utils.authSchema[rec.data.type].add,
-		    dataIndex: 'tfa'
+		    callback: () => me.reload(),
 		},
-		{
-		    header: gettext('Comment'),
-		    sortable: false,
-		    dataIndex: 'comment',
-		    renderer: Ext.String.htmlEncode,
-		    flex: 1
-		}
 	    ],
 	    listeners: {
-		activate: reload,
+		activate: () => me.reload(),
-		itemdblclick: run_editor
+		itemdblclick: () => me.run_editor(),
-	    }
+	    },
 	});
 
 	me.callParent();
-    }
+    },
 });