proxmox-backup/www/form/NamespaceSelector.js
Thomas Lamprecht 4f897c8cf9 ui: namespace selector: set queryMode to local
to avoid that the comobox triggers automatic API request with the
queryParam default `query` GET param on manual typing (e.g., for
filtering) from the user, we have all data already loaded and locally
available.

https://docs.sencha.com/extjs/7.0.0/classic/Ext.form.field.ComboBox.html#cfg-queryMode

Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
2022-05-14 14:48:36 +02:00

95 lines
1.9 KiB
JavaScript

Ext.define('pbs-namespaces', {
extend: 'Ext.data.Model',
fields: [
{
name: 'ns',
},
{
name: 'id', // fake as else the model messes with our value and/or display...
type: 'string',
calculate: data => data.ns === '' ? '/' : data.ns,
},
],
idProperty: 'id',
});
Ext.define('PBS.form.NamespaceSelector', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.pbsNamespaceSelector',
allowBlank: true,
autoSelect: true,
valueField: 'ns',
displayField: 'ns',
emptyText: gettext('Root'),
editable: true,
anyMatch: true,
forceSelection: true,
queryMode: 'local',
matchFieldWidth: false,
listConfig: {
minWidth: 170,
maxWidth: 500,
// below doesn't work :/
//minHeight: 30,
//emptyText: gettext('No namespaces accesible.'),
},
triggers: {
clear: {
cls: 'pmx-clear-trigger',
weight: -1,
hidden: true,
handler: function() {
this.triggers.clear.setVisible(false);
this.setValue('');
},
},
},
listeners: {
change: function(field, value) {
let canClear = value !== '';
field.triggers.clear.setVisible(canClear);
},
},
setDatastore: function(datastore) {
let me = this;
if (datastore ?? false) {
me.datastore = datastore;
me.store.getProxy().setUrl(`/api2/json/admin/datastore/${me.datastore}/namespace`);
if (me.isDisabled()) {
me.setDisabled(false);
}
me.store.load();
me.validate();
} else {
me.datastore = undefined;
me.setDisabled(true);
}
},
initComponent: function() {
let me = this;
if (!me.datastore) {
me.disabled = true;
}
me.store = Ext.create('Ext.data.Store', {
model: 'pbs-namespaces',
autoLoad: !!me.datastore,
proxy: {
type: 'proxmox',
timeout: 30 * 1000,
url: `/api2/json/admin/datastore/${me.datastore}/namespace`,
},
});
me.callParent();
},
});