ui: tape/TapeInventory.js - use grid grouping feature - group by pool

diff --git a/www/tape/TapeInventory.js b/www/tape/TapeInventory.js
index c369a393f9c73538ad2437844df491773a510a3a..7f9a2aa59fbc80757e4431bb28bbb26039b21d88 100644 (file)
--- a/www/tape/TapeInventory.js
+++ b/www/tape/TapeInventory.js
@@ -112,6 +112,7 @@ Ext.define('PBS.TapeManagement.TapeInventory', {
        storeid: 'proxmox-tape-tapes',
        model: 'pbs-model-tapes',
        sorters: 'label-text',
+       groupField: 'pool',
     },
 
     tbar: [
@@ -139,18 +140,30 @@ Ext.define('PBS.TapeManagement.TapeInventory', {
        },
     ],
 
+    features: [
+       {
+           ftype: 'grouping',
+           groupHeaderTpl: [
+               '{name:this.formatName} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})',
+               {
+                   formatName: function(pool) {
+                       if (pool === "") {
+                           return "Free (no pool assignment)";
+                       } else {
+                           return pool;
+                       }
+                   }
+               }
+           ]
+       }
+    ],
+
     columns: [
        {
            text: gettext('Label'),
            dataIndex: 'label-text',
            flex: 1,
        },
-       {
-           text: gettext('Pool'),
-           dataIndex: 'pool',
-           sorter: (a, b) => (a.data.pool || "").localeCompare(b.data.pool || ""),
-           flex: 1,
-       },
        {
            text: gettext('Media Set'),
            dataIndex: 'media-set-name',
@@ -158,6 +171,13 @@ Ext.define('PBS.TapeManagement.TapeInventory', {
            sorter: function(a, b) {
                return (a.data['media-set-ctime'] || 0) - (b.data['media-set-ctime'] || 0);
            },
+           renderer: function(value) {
+               if (value === undefined) {
+                   return "-- empty --";
+               } else {
+                   return value;
+               }
+           }
        },
        {
            text: gettext('Location'),