mirror/netbox-community-netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2024-05-10 07:54:54 +00:00
Code Activity

improve handling of loading data

Browse Source
This commit is contained in:
checktheroads
2021-03-14 17:31:06 -07:00
parent 91561e9ca5
commit a237725d0d
1 changed files with 24 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
netbox/project-static/src/select/api.ts
View File

@ -125,11 +125,11 @@ export function initApiSelect() {
let { url } = select.dataset; let { url } = select.dataset;
const displayField = select.getAttribute('display-field') ?? 'name'; const displayField = select.getAttribute('display-field') ?? 'name';
// Set the placeholder text to the label value, if it exists. let placeholder: string = select.name;
let placeholder;
if (select.id) { if (select.id) {
const label = document.querySelector(`label[for=${select.id}]`) as HTMLLabelElement; const label = document.querySelector(`label[for=${select.id}]`) as HTMLLabelElement;
// Set the placeholder text to the label value, if it exists.
if (label !== null) { if (label !== null) {
placeholder = `Select ${label.innerText.trim()}`; placeholder = `Select ${label.innerText.trim()}`;
} }
@ -154,18 +154,25 @@ export function initApiSelect() {
placeholder, placeholder,
}); });
// Disable the element while data has not been loaded.
instance.disable();
// Don't copy classes from select element to SlimSelect instance. // Don't copy classes from select element to SlimSelect instance.
for (const className of select.classList) { for (const className of select.classList) {
instance.slim.container.classList.remove(className); instance.slim.container.classList.remove(className);
} }
// Load data.
getChoices(url, displayField, selectOptions, disabledOptions) getChoices(url, displayField, selectOptions, disabledOptions)
.then(options => instance.setData(options)) .then(options => instance.setData(options))
.finally(() => { .finally(() => {
// Set option styles, if the field calls for it (color selectors).
setOptionStyles(instance);
// Inform any event listeners that data has updated. // Inform any event listeners that data has updated.
select.dispatchEvent(event); select.dispatchEvent(event);
// Enable the element after data has loaded.
instance.enable();
// Set option styles, if the field calls for it (color selectors). Note: this must be
// done after instance.enable() since instance.enable() changes the element style.
setOptionStyles(instance);
}); });
// Reset validity classes if the field was invalid. // Reset validity classes if the field was invalid.
@ -245,9 +252,19 @@ export function initApiSelect() {
} }
} }
getChoices(filterUrl, displayField, selectOptions, disabledOptions).then(data => // Disable the element while data is loading.
instance.setData(data), instance.disable();
); // Load new data.
getChoices(filterUrl, displayField, selectOptions, disabledOptions)
.then(data => instance.setData(data))
.finally(() => {
// Re-enable the element after data has loaded.
instance.enable();
// Set option styles, if the field calls for it (color selectors). Note: this must
// be done after instance.enable() since instance.enable() changes the element
// style.
setOptionStyles(instance);
});
} }
// Re-fetch data when the group changes. // Re-fetch data when the group changes.
groupElem.addEventListener('change', handleEvent); groupElem.addEventListener('change', handleEvent);