From f19dd0b4764a57f702813b09d0e5bf46b7b8ad26 Mon Sep 17 00:00:00 2001
From: Julio Oliveira at Encora
 <149191228+Julio-Oliveira-Encora@users.noreply.github.com>
Date: Thu, 2 May 2024 10:39:10 -0300
Subject: [PATCH] Feature 15832 -  Multiselect has no "delete" option on the
 values (#15883)

* 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>
---
 netbox/project-static/dist/netbox.js        | Bin 375155 -> 375262 bytes
 netbox/project-static/dist/netbox.js.map    | Bin 340141 -> 340225 bytes
 netbox/project-static/src/select/config.ts  |  33 ++++++++++++++------
 netbox/project-static/src/select/dynamic.ts |   4 +--
 netbox/project-static/src/select/static.ts  |   6 ++--
 5 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/netbox/project-static/dist/netbox.js b/netbox/project-static/dist/netbox.js
index 7e8feeb186d7497703a30b3fc8aae7f396fa64bf..c880e23e98931cfeaf4d7e83a7e0409d84c38f56 100644
GIT binary patch
delta 224
zcmezTN$lQdv4$4L7N!>FEi4o2rmt>d;nXin)X2=#tj<X-Q7Fl@t**5$N-ZfZ$^&xr
zl5<iMi{g_?OG@(dY^yU$a&xRwr*ExeQPoKWNhTH-`z7Y4)+zzjmgJ<`DydWh#lh@a
zB|97aOuK|yoy^SX?|B#{jn&jNfF>5D=H{2B!i@y0wNeTKiz?M>>Qooxl%{9q6<d{L
w*49pEt7n<Q0&?B-jSVa!+t<~zFf+0MjnUi=<e!%SOSL!5WZB*@ll8Ma046|Ep8x;=

delta 115
zcmV-(0F3|M^A_{+7J!5SgaU*Ev;>fTC3azQAa-FrdvI)ZXK8M8I(uVmWnpq(Vs&(M
zZ*Dq!Xmo9CI%${4egq`}X_xMP1Q!%(X)bhWbZljPB0fAXX+B_meSJHZWq$;exBY(v
V7Xh~zfdtPOhwGUHx9gb&^B;~vE@1!w

diff --git a/netbox/project-static/dist/netbox.js.map b/netbox/project-static/dist/netbox.js.map
index 63f586436bc194b8fb49e458c391e2d8b247b376..adc770528c4403e9dd07b992d229080d241297f7 100644
GIT binary patch
delta 192
zcmZ4cP^9sZNJ9%_3sVd87M8O*rtWDvk&ce}PCD*D(pksZ(b?Pu#P-$kbaX5S3A<Z5
z>4Z8u2I?d_I;MgY6gf@*tiz&VpX%tD<qA>@mP!Q5JC`|uv<2!UJ36L2fz*~b>G(Q2
z`s;){dU}EQK01Mpj=?&fE-8M~6?IuGIDy*3b-W#2e5c3hvh*Ri+dt~El!(CjiQBWB
ISe)Mh0Fb{pApigX

delta 113
zcmZpCB(nCQNJ9%_3sVd87M8O*YA$Iy?v9SWI-ZV>!8*>4&IL|7fe@x^fKH;LV=_oE
zYC4lHiw0Y!lZ$JP>-71`ETYrvbXk;HJsn*#ou;qSW$A-3w>#>wl!$=X<xbo8Ik7mu
F0|2s*A`$=q

diff --git a/netbox/project-static/src/select/config.ts b/netbox/project-static/src/select/config.ts
index 74c2fb63d..c655b5271 100644
--- a/netbox/project-static/src/select/config.ts
+++ b/netbox/project-static/src/select/config.ts
@@ -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,
+  };
+}
diff --git a/netbox/project-static/src/select/dynamic.ts b/netbox/project-static/src/select/dynamic.ts
index 10ce955c2..c1ac468e9 100644
--- a/netbox/project-static/src/select/dynamic.ts
+++ b/netbox/project-static/src/select/dynamic.ts
@@ -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,
diff --git a/netbox/project-static/src/select/static.ts b/netbox/project-static/src/select/static.ts
index f97a281cc..ab80e4fc5 100644
--- a/netbox/project-static/src/select/static.ts
+++ b/netbox/project-static/src/select/static.ts
@@ -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,