[pve-devel] [PATCH 15/18] change ruleconfiguration to mvvm model

[Dominik Csapak]

this now uses declarative syntax, and the model view viewmodel system of
extjs

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
 js/RuleConfiguration.js | 252 ++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 212 insertions(+), 40 deletions(-)

diff --git a/js/RuleConfiguration.js b/js/RuleConfiguration.js
index dd08e62..435c08c 100644
--- a/js/RuleConfiguration.js
+++ b/js/RuleConfiguration.js
@@ -1,52 +1,224 @@
-Ext.define('PMG.RuleConfiguration', {
-    extend: 'Ext.panel.Panel',
-    alias: 'widget.pmgRuleConfiguration',
+Ext.define('pmg-rule-list', {
+    extend: 'Ext.data.Model',
+    fields: [
+	'id', 'name',
+	{ name: 'active', type: 'boolean' },
+	{ name: 'direction', type: 'integer' },
+	{ name: 'priority', type: 'integer' }
+    ],
+    idProperty: 'id'
+});
 
-    title: gettext('Rules'),
+Ext.define('PMG.RulesConfiguration', {
+    extend: 'Ext.container.Container',
+    xtype: 'pmgRuleConfiguration',
 
-    layout: { type: 'hbox', align: 'stretch' },
+    layout: 'border',
     border: false,
+    defaults: {
+	border: false,
+    },
 
-    initComponent : function() {
-	var me = this;
-
-	var left = Ext.create('PMG.RuleList', {
-	    width: 300,
-	    subject: me.title,
-	    border: false
-	});
-
-	var right = Ext.create('PMG.RuleInfo', {
-	    border: false,
-	    flex: 1,
-	    listeners: {
-		dblclickRuleInfo: function(w, e, t, ruledata) {
-		    // test if the correct groups is selected (just to be sure)
-		    var rec = left.selModel.getSelection()[0];
-		    if (rec && rec.data && rec.data.id === ruledata.id) {
-			left.run_editor();
-			return;
+    controller: {
+	xclass: 'Ext.app.ViewController',
+
+	selectedRuleChange: function(grid, selected, eOpts) {
+	    var me = this;
+	    var infoPanel = me.lookupReference('infopanel');
+	    var baseurl = undefined;
+
+	    if (selected.length > 0) {
+		baseurl = '/config/ruledb/rules/' + selected[0].data.id;
+	    }
+
+	    infoPanel.getController().setBaseUrl(baseurl);
+	},
+
+	editIconClick: function(gridView, rowindex, colindex, column, e, record) {
+	    var me = this;
+	    me.showEditWindow(gridView, record);
+	},
+
+	showEditWindow: function(gridView, record) {
+	    var me = this;
+	    var win = Ext.create('PMG.RuleEditor', {
+		url: '/api2/extjs/config/ruledb/rules/' + record.data.id + '/config',
+		listeners: {
+		    destroy: function() {
+			gridView.getStore().load();
 		    }
 		}
-	    }
-	});
+	    });
+	    win.load();
+	    win.show();
+	},
+
+	toggleIconClick: function(gridView, rowindex, colindex, column, e, record) {
+	    var me = this;
+	    Proxmox.Utils.API2Request({
+		url: '/config/ruledb/rules/' + record.data.id + '/config',
+		params: {
+		    active: record.data.active ? 0 : 1
+		},
+		method: 'PUT',
+		callback: function() {
+		    gridView.getStore().load();
+		},
+		failure: function(response, opts) {
+		    Ext.Msg.alert(gettext('Error'), response.htmlStatus);
+		}
+	    });
+	},
 
-	me.mon(left.store, "refresh", function() {
-	    right.reload();
-	});
+	reload: function(){
+	    var me = this;
+	    me.lookupReference('rulegrid').getStore().load();
+	},
 
-	me.mon(left.selModel, "selectionchange", function() {
-	    var rec = left.selModel.getSelection()[0];
-	    if (!(rec && rec.data && rec.data.id)) {
-		right.setBaseUrl(undefined);
-		return;
+	addRule: function() {
+	    var me = this;
+	    var win = Ext.create('PMG.RuleEditor', {
+		url: '/api2/extjs/config/ruledb/rules/',
+		method: 'POST',
+		create: true,
+		listeners: {
+		    destroy: function() {
+			me.lookupReference('rulegrid').getStore().load();
+		    }
+		}
+	    });
+	    win.load();
+	    win.show();
+	},
+
+	control: {
+	    'grid[reference=rulegrid]': {
+		itemdblclick: 'showEditWindow',
+		selectionchange: 'selectedRuleChange'
+	    },
+	    'button[reference=addButton]': {
+		click: 'addRule'
 	    }
-	    var baseurl = '/config/ruledb/rules/' + rec.data.id;
-	    right.setBaseUrl(baseurl);
-	});
+	}
+    },
+
+    viewModel: {
+	data: {
+	    selectedRule: undefined,
+	    baseUrl: '/config/ruledb/rules'
+	},
+    },
+
+    items: [
+	{
+	    xtype: 'grid',
+	    layout: 'fit',
+	    title: 'Rules',
+	    reference: 'rulegrid',
+	    region: 'center',
+
+	    bind: {
+		selection: '{selectedRule}'
+	    },
+
+	    dockedItems:{
+		xtype: 'toolbar',
+		reference: 'mytb',
+		items: [
+		    {
+			xtype: 'button',
+			text: gettext('Add'),
+			iconCls: 'fa fa-plus-circle',
+			reference: 'addButton',
+		    },
+		    {
+			xtype: 'proxmoxStdRemoveButton',
+			text: gettext('Remove'),
+			iconCls: 'fa fa-minus-circle',
+			reference: 'removeButton',
+			callback: 'reload',
+			getRecordName: function(rec) { return rec.data.name },
+			bind: {
+			    baseurl: '{baseUrl}'
+			}
+		    }
+		]
+	    },
 
-	me.items = [ left, { xtype: 'splitter' }, right ];
+	    viewConfig: {
+		getRowClass: function(record, rowIndex) {
+		    return record.get('active') ? 'enabled' : 'disabled';
+		}
+	    },
 
-	me.callParent();
-    }
+	    store: {
+		autoLoad: true,
+		model: 'pmg-rule-list',
+		reference: 'rulesStore',
+		proxy: {
+		    type: 'proxmox',
+		    url: '/api2/json/config/ruledb/rules'
+		},
+		sorters: [
+		    {
+			property: 'priority',
+			direction: 'DESC'
+		    },
+		    {
+			property: 'name',
+		    }
+		]
+	    },
+
+	    sortableColumns: false,
+	    columns: [
+		{
+		    text: 'Active',
+		    dataIndex: 'active',
+		    hidden : true,
+		},
+		{
+		    text: 'Name',
+		    dataIndex: 'name',
+		    flex: 1,
+		},
+		{
+		    text: 'Priority',
+		    dataIndex: 'priority',
+		},
+		{
+		    text: 'Direction',
+		    dataIndex: 'direction',
+		    renderer: PMG.Utils.format_rule_direction
+		},
+		{
+		    text: 'Actions',
+		    xtype: 'actioncolumn',
+		    items: [
+			{
+			    iconCls: 'x-fa fa-fw fa-pencil',
+			    tooltip: 'Edit',
+			    handler: 'editIconClick'
+			},
+			{
+			    getClass: function(val, meta, rec) {
+				return 'x-fa fa-fw fa-' + (rec.get('active') ? 'toggle-on' : 'toggle-off');
+			    },
+			    getTip: function(val, meta, rec) {
+				return (rec.get('active') ? 'Deactivate' : 'Activate');
+			    },
+			    handler: 'toggleIconClick'
+			},
+		    ]
+		}
+	    ],
+	},
+	{
+	    region: 'east',
+	    reference: 'infopanel',
+	    xtype: 'pmgRuleInfo',
+	    split: true,
+	    width: 440,
+	}
+    ]
 });
-- 
2.11.0