ui: add tags to ResourceGrid and GlobalSearchField

also allows to search for tags in the GlobalSearchField where each tag is
treated like a seperate field, so it weighs more if the user searches for
the exact string of a single tag

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>

ui: ResourceGrid: render tags

with the 'full' styling

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
This commit is contained in:
Dominik Csapak 2022-11-16 16:48:14 +01:00 committed by Thomas Lamprecht
parent 366558a79d
commit ad4a19f652
3 changed files with 17 additions and 5 deletions

View File

@ -295,6 +295,7 @@ Ext.define('PVE.data.ResourceStore', {
}, },
tags: { tags: {
header: gettext('Tags'), header: gettext('Tags'),
renderer: (value) => PVE.Utils.renderTags(value, PVE.Utils.tagOverrides),
type: 'string', type: 'string',
hidden: true, hidden: true,
sortable: true, sortable: true,

View File

@ -15,6 +15,7 @@ Ext.define('PVE.form.GlobalSearchField', {
grid: { grid: {
xtype: 'gridpanel', xtype: 'gridpanel',
userCls: 'proxmox-tags-full',
focusOnToFront: false, focusOnToFront: false,
floating: true, floating: true,
emptyText: Proxmox.Utils.noneText, emptyText: Proxmox.Utils.noneText,
@ -23,7 +24,7 @@ Ext.define('PVE.form.GlobalSearchField', {
scrollable: { scrollable: {
xtype: 'scroller', xtype: 'scroller',
y: true, y: true,
x: false, x: true,
}, },
store: { store: {
model: 'PVEResources', model: 'PVEResources',
@ -78,6 +79,11 @@ Ext.define('PVE.form.GlobalSearchField', {
text: gettext('Description'), text: gettext('Description'),
flex: 1, flex: 1,
dataIndex: 'text', dataIndex: 'text',
renderer: function(value, mD, rec) {
let overrides = PVE.Utils.tagOverrides;
let tags = PVE.Utils.renderTags(rec.data.tags, overrides);
return `${value}${tags}`;
},
}, },
{ {
text: gettext('Node'), text: gettext('Node'),
@ -104,16 +110,20 @@ Ext.define('PVE.form.GlobalSearchField', {
'storage': ['type', 'pool', 'node', 'storage'], 'storage': ['type', 'pool', 'node', 'storage'],
'default': ['name', 'type', 'node', 'pool', 'vmid'], 'default': ['name', 'type', 'node', 'pool', 'vmid'],
}; };
let fieldArr = fieldMap[item.data.type] || fieldMap.default; let fields = fieldMap[item.data.type] || fieldMap.default;
let fieldArr = fields.map(field => item.data[field]?.toString().toLowerCase());
if (item.data.tags) {
let tags = item.data.tags.split(/[;, ]/);
fieldArr.push(...tags);
}
let filterWords = me.filterVal.split(/\s+/); let filterWords = me.filterVal.split(/\s+/);
// all text is case insensitive and each split-out word is searched for separately. // all text is case insensitive and each split-out word is searched for separately.
// a row gets 1 point for every partial match, and and additional point for every exact match // a row gets 1 point for every partial match, and and additional point for every exact match
let match = 0; let match = 0;
for (let field of fieldArr) { for (let fieldValue of fieldArr) {
let fieldValue = item.data[field]?.toString().toLowerCase(); if (fieldValue === undefined || fieldValue === "") {
if (fieldValue === undefined) {
continue; continue;
} }
for (let filterWord of filterWords) { for (let filterWord of filterWords) {

View File

@ -7,6 +7,7 @@ Ext.define('PVE.grid.ResourceGrid', {
property: 'type', property: 'type',
direction: 'ASC', direction: 'ASC',
}, },
userCls: 'proxmox-tags-full',
initComponent: function() { initComponent: function() {
let me = this; let me = this;