[pve-devel] [PATCH manager 3/4] add vmselector form field

[Dominik Csapak]

this is a form field which is a grid for selecting vms

if nodename is given, it will filter the vms only to the given node

you can filter the grid with the column header, and only the selected
and visible items are in the value of the field

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
 www/manager6/form/VMSelector.js | 181 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 181 insertions(+)
 create mode 100644 www/manager6/form/VMSelector.js

diff --git a/www/manager6/form/VMSelector.js b/www/manager6/form/VMSelector.js
new file mode 100644
index 0000000..2ee892d
--- /dev/null
+++ b/www/manager6/form/VMSelector.js
@@ -0,0 +1,181 @@
+/*jslint confusion: true*/
+/* filter is a javascript builtin, but extjs calls it also filter */
+Ext.define('PVE.form.VMSelector', {
+    extend: 'Ext.grid.Panel',
+    alias: 'widget.vmselector',
+
+    mixins: {
+	field: 'Ext.form.field.Field'
+    },
+
+    allowBlank: true,
+    selectAll: false,
+    isFormField: true,
+
+    plugins: 'gridfilters',
+
+    store: {
+	model: 'PVEResources',
+	autoLoad: true,
+	sorters: 'vmid',
+	filters: [{
+	    property: 'type',
+	    value: /lxc|qemu/
+	}]
+    },
+    columns: [
+	{
+	    header: 'ID',
+	    dataIndex: 'vmid',
+	    width: 80,
+	    filter: {
+		type: 'number'
+	    }
+	},
+	{
+	    header: gettext('Node'),
+	    dataIndex: 'node'
+	},
+	{
+	    header: gettext('Status'),
+	    dataIndex: 'status',
+	    filter: {
+		type: 'list'
+	    }
+	},
+	{
+	    header: gettext('Name'),
+	    dataIndex: 'name',
+	    flex: 1,
+	    filter: {
+		type: 'string'
+	    }
+	},
+	{
+	    header: gettext('Pool'),
+	    dataIndex: 'pool',
+	    filter: {
+		type: 'list'
+	    }
+	},
+	{
+	    header: gettext('Type'),
+	    dataIndex: 'type',
+	    width: 120,
+	    renderer: function(value) {
+		if (value === 'qemu') {
+		    return gettext('Virtual Machine');
+		} else if (value === 'lxc') {
+		    return gettext('LXC Container');
+		}
+
+		return '';
+	    },
+	    filter: {
+		type: 'list',
+		store: {
+		    data: [
+			{id: 'qemu', text: gettext('Virtual Machine')},
+			{id: 'lxc', text: gettext('LXC Container')}
+		    ],
+		    // due to EXTJS-18711
+		    // we have to do a static list via a store
+		    // but to avoid creating an object,
+		    // we have to have a pseudo un function
+		    un: function(){}
+		}
+	    }
+	}
+    ],
+
+    selModel: {
+	selType: 'checkboxmodel',
+	checkOnly: true
+    },
+
+    checkChangeEvents: [
+	'selectionchange',
+	'change'
+    ],
+
+    listeners: {
+	selectionchange: function() {
+	    // to trigger validity and error checks
+	    this.checkChange();
+	}
+    },
+
+    getValue: function() {
+	var me = this;
+	var sm = me.getSelectionModel();
+	var selection = sm.getSelection();
+	var values = [];
+	var store = me.getStore();
+	selection.forEach(function(item) {
+	    // only add if not filtered
+	    if (store.findExact('vmid', item.data.vmid) !== -1) {
+		values.push(item.data.vmid);
+	    }
+	});
+	return values;
+    },
+
+    setValue: function(value) {
+	console.log(value);
+	var me = this;
+	var sm = me.getSelectionModel();
+	if (!Ext.isArray(value)) {
+	    value = value.split(',');
+	}
+	var selection = [];
+	var store = me.getStore();
+
+	value.forEach(function(item) {
+	    var rec = store.findRecord('vmid',item, 0, false, true, true);
+	    console.log(store);
+
+	    if (rec) {
+		console.log(rec);
+		selection.push(rec);
+	    }
+	});
+
+	sm.select(selection);
+
+	return me.mixins.field.setValue.call(me, value);
+    },
+
+    getErrors: function(value) {
+	var me = this;
+	if (me.allowBlank ===  false &&
+	    me.getSelectionModel().getCount() === 0) {
+	    me.addBodyCls(['x-form-trigger-wrap-default','x-form-trigger-wrap-invalid']);
+	    return [gettext('No VM selected')];
+	}
+
+	me.removeBodyCls(['x-form-trigger-wrap-default','x-form-trigger-wrap-invalid']);
+	return [];
+    },
+
+    initComponent: function() {
+	var me = this;
+
+	me.callParent();
+
+	if (me.nodename) {
+	    me.store.filters.add({
+		property: 'node',
+		value: me.nodename
+	    });
+	}
+
+	var store = me.getStore();
+	var sm = me.getSelectionModel();
+
+	if (me.selectAll) {
+	    me.mon(store,'load', function(){
+		me.getSelectionModel().selectAll(false);
+	    });
+	}
+    }
+});
-- 
2.1.4