ui: usbselector: show product name and enable anyMatch search

Show "Product (usbid)" instead of only "usbid" for slightly better
UX.

Still allows to only enter a USBID and hit enter, even if the ID is
not in the store (i.e., currently unplugged).

Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>

diff --git a/www/manager6/form/USBSelector.js b/www/manager6/form/USBSelector.js
index 7d7caa006dec3edc6db5712d052917c040ee928e..41653cfc6c83495edb1e36a60535903f9fd19afc 100644 (file)
--- a/www/manager6/form/USBSelector.js
+++ b/www/manager6/form/USBSelector.js
@@ -1,14 +1,20 @@
 Ext.define('PVE.form.USBSelector', {
     extend: 'Proxmox.form.ComboGrid',
     alias: ['widget.pveUSBSelector'],
+
     allowBlank: false,
     autoSelect: false,
-    displayField: 'usbid',
+    anyMatch: true,
+    displayField: 'product_and_id',
     valueField: 'usbid',
     editable: true,
 
     validator: function(value) {
        var me = this;
+       if (!value) {
+           return true; // handled later by allowEmpty in the getErrors call chain
+       }
+       value = me.getValue(); // as the valueField is not the displayfield
        if (me.type === 'device') {
            return (/^[a-f0-9]{4}\:[a-f0-9]{4}$/i).test(value);
        } else if (me.type === 'port') {
@@ -117,7 +123,16 @@ Ext.define('PVE.form.USBSelector', {
            { name: 'level' , type: 'number' },
            { name: 'class' , type: 'number' },
            { name: 'devnum' , type: 'number' },
-           { name: 'busnum' , type: 'number' }
+           { name: 'busnum' , type: 'number' },
+           {
+               name: 'product_and_id',
+               type: 'string',
+               convert: (v, rec) => {
+                   let res = rec.data.product || gettext('Unkown');
+                   res += " (" + rec.data.usbid + ")";
+                   return res;
+               },
+           },
        ]
     });
 
@@ -138,7 +153,16 @@ Ext.define('PVE.form.USBSelector', {
            { name: 'level' , type: 'number' },
            { name: 'class' , type: 'number' },
            { name: 'devnum' , type: 'number' },
-           { name: 'busnum' , type: 'number' }
+           { name: 'busnum' , type: 'number' },
+           {
+               name: 'product_and_id',
+               type: 'string',
+               convert: (v, rec) => {
+                   let res = rec.data.product || gettext('Unplugged');
+                   res += " (" + rec.data.usbid + ")";
+                   return res;
+               },
+           },
        ]
     });
 });