NeoAnd/netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2025-07-22 20:12:00 -06:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

Feature 15832 - Multiselect has no "delete" option on the values (#15883)

Browse Source 
* Added remove_button in config.ts

* Fixed linter issues

* Fixed linter issues

* Fixed linter issues

* Enable remove_button plugin only for multi-select fields

* Enable remove_button plugin only for multi-select fields

---------

Co-authored-by: Jeremy Stretch <jstretch@netboxlabs.com>
This commit is contained in:
Julio Oliveira at Encora 2024-05-02 10:39:10 -03:00 committed by GitHub
parent 6530051958
commit 4c93a2d084
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 29 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
netbox/project-static/dist/netbox.js vendored
View File

Binary file not shown.

BIN
netbox/project-static/dist/netbox.js.map vendored
View File

Binary file not shown.

33
netbox/project-static/src/select/config.ts
View File

@ -1,9 +1,24 @@
export const config = {
plugins: {
// Provides the "clear" button on the widget
clear_button: {
html: (data: Dict) =>
`<i class="mdi mdi-close-circle ${data.className}" title="${data.title}"></i>`,
},
},
};
interface PluginConfig {
[plugin: string]: object;
}
export function getPlugins(element: HTMLSelectElement): object {
const plugins: PluginConfig = {};
// Enable "clear all" button
plugins.clear_button = {
html: (data: Dict) =>
`<i class="mdi mdi-close-circle ${data.className}" title="${data.title}"></i>`,
};
// Enable individual "remove" buttons for items on multi-select fields
if (element.hasAttribute('multiple')) {
plugins.remove_button = {
title: 'Remove',
};
}
return {
plugins: plugins,
};
}

4
netbox/project-static/src/select/dynamic.ts
View File

@ -1,7 +1,7 @@
import { TomOption } from 'tom-select/src/types';
import { escape_html } from 'tom-select/src/utils';
import { DynamicTomSelect } from './classes/dynamicTomSelect';
import { config } from './config';
import { getPlugins } from './config';
import { getElements } from '../util';
const VALUE_FIELD = 'id';
@ -44,7 +44,7 @@ function renderItem(data: TomOption, escape: typeof escape_html) {
export function initDynamicSelects(): void {
for (const select of getElements<HTMLSelectElement>('select.api-select:not(.tomselected)')) {
new DynamicTomSelect(select, {
...config,
...getPlugins(select),
valueField: VALUE_FIELD,
labelField: LABEL_FIELD,
maxOptions: MAX_OPTIONS,

6
netbox/project-static/src/select/static.ts
View File

@ -1,7 +1,7 @@
import { TomOption } from 'tom-select/src/types';
import TomSelect from 'tom-select';
import { escape_html } from 'tom-select/src/utils';
import { config } from './config';
import { getPlugins } from './config';
import { getElements } from '../util';
// Initialize <select> elements with statically-defined options
@ -10,7 +10,7 @@ export function initStaticSelects(): void {
'select:not(.tomselected):not(.no-ts):not([size]):not(.api-select):not(.color-select)',
)) {
new TomSelect(select, {
...config,
...getPlugins(select),
maxOptions: undefined,
});
}
@ -26,7 +26,7 @@ export function initColorSelects(): void {
for (const select of getElements<HTMLSelectElement>('select.color-select:not(.tomselected)')) {
new TomSelect(select, {
...config,
...getPlugins(select),
maxOptions: undefined,
render: {
option: renderColor,