[pbs-devel] [PATCH proxmox-backup] ui: tape: convert slot selection on transfer to combogrid

[Dominik Csapak <d.csapak@proxmox.com>]

this is much handier than number field, and the user can instantly
see which one is an import/export slot

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 www/tape/ChangerStatus.js | 74 +++++++++++++++++++++++++++++++++++++--
 1 file changed, 72 insertions(+), 2 deletions(-)

diff --git a/www/tape/ChangerStatus.js b/www/tape/ChangerStatus.js
index 599e6320..13c42ada 100644
--- a/www/tape/ChangerStatus.js
+++ b/www/tape/ChangerStatus.js
@@ -40,9 +40,31 @@ Ext.define('PBS.TapeManagement.ChangerStatus', {
 			fieldLabel: gettext('From Slot'),
 		    },
 		    {
-			xtype: 'proxmoxintegerfield',
+			xtype: 'proxmoxComboGrid',
 			name: 'to',
 			fieldLabel: gettext('To Slot'),
+
+			store: {
+			    data: me.free_slots,
+			},
+
+			valueField: 'id',
+			displayField: 'id',
+
+			listConfig: {
+			    columns: [
+				{
+				    dataIndex: 'id',
+				    text: gettext('ID'),
+				    flex: 1,
+				},
+				{
+				    dataIndex: 'type',
+				    text: gettext('Type'),
+				    flex: 1,
+				},
+			    ],
+			},
 		    },
 		],
 		listeners: {
@@ -73,9 +95,31 @@ Ext.define('PBS.TapeManagement.ChangerStatus', {
 			fieldLabel: gettext('From Slot'),
 		    },
 		    {
-			xtype: 'proxmoxintegerfield',
+			xtype: 'proxmoxComboGrid',
 			name: 'to',
 			fieldLabel: gettext('To Slot'),
+
+			store: {
+			    data: me.free_slots.concat(me.free_ie_slots),
+			},
+
+			valueField: 'id',
+			displayField: 'id',
+
+			listConfig: {
+			    columns: [
+				{
+				    dataIndex: 'id',
+				    text: gettext('ID'),
+				    flex: 1,
+				},
+				{
+				    dataIndex: 'type',
+				    text: gettext('Type'),
+				    flex: 1,
+				},
+			    ],
+			},
 		    },
 		],
 		listeners: {
@@ -340,6 +384,14 @@ Ext.define('PBS.TapeManagement.ChangerStatus', {
 	    me.reload_full(false);
 	},
 
+	free_slots: [],
+
+	updateFreeSlots: function(free_slots, free_ie_slots) {
+	    let me = this;
+	    me.free_slots = free_slots;
+	    me.free_ie_slots = free_ie_slots;
+	},
+
 	reload_full: async function(use_cache) {
 	    let me = this;
 	    let view = me.getView();
@@ -399,6 +451,9 @@ Ext.define('PBS.TapeManagement.ChangerStatus', {
 		    drive_entries[entry['changer-drivenum'] || 0] = entry;
 		}
 
+		let free_slots = [];
+		let free_ie_slots = [];
+
 		for (let entry of status.result.data) {
 		    let type = entry['entry-kind'];
 
@@ -414,6 +469,19 @@ Ext.define('PBS.TapeManagement.ChangerStatus', {
 			entry['is-labeled'] = false;
 		    }
 
+		    if (!entry['label-text'] && type !== 'drive') {
+			if (type === 'slot') {
+			    free_slots.push({
+				id: entry['entry-id'],
+				type,
+			    });
+			} else {
+			    free_ie_slots.push({
+				id: entry['entry-id'],
+				type,
+			    });
+			}
+		    }
 		    data[type].push(entry);
 		}
 
@@ -433,6 +501,8 @@ Ext.define('PBS.TapeManagement.ChangerStatus', {
 		// manually fire selectionchange to update button status
 		me.lookup('drives').getSelectionModel().fireEvent('selectionchange', me);
 
+		me.updateFreeSlots(free_slots, free_ie_slots);
+
 		if (!use_cache) {
 		    Proxmox.Utils.setErrorMask(view);
 		}
-- 
2.20.1