From c50f0a2ac505c1f1d0739ef9feaa60b0c0c8c2f5 Mon Sep 17 00:00:00 2001
From: Sli <antoine@bartuccio.fr>
Date: Sat, 19 Oct 2024 16:02:54 +0200
Subject: [PATCH] Simplify ajax-select inheritance and make simple auto
 complete

---
 .../core/components/ajax-select-index.ts      | 25 +++++++++----------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/core/static/webpack/core/components/ajax-select-index.ts b/core/static/webpack/core/components/ajax-select-index.ts
index 6816d2f5..37915f7a 100644
--- a/core/static/webpack/core/components/ajax-select-index.ts
+++ b/core/static/webpack/core/components/ajax-select-index.ts
@@ -11,7 +11,8 @@ import type {
 import type { escape_html } from "tom-select/dist/types/utils";
 import { type UserProfileSchema, userSearchUsers } from "#openapi";
 
-abstract class AjaxSelectBase extends inheritHtmlElement("select") {
+@registerComponent("autocomplete-select")
+class AutocompleteSelect extends inheritHtmlElement("select") {
   static observedAttributes = ["delay", "placeholder", "max"];
   public widget: TomSelect;
 
@@ -47,12 +48,12 @@ abstract class AjaxSelectBase extends inheritHtmlElement("select") {
     super();
 
     window.addEventListener("DOMContentLoaded", () => {
-      this.configureTomSelect(this.defaultTomSelectSettings());
-      this.setDefaultTomSelectBehaviors();
+      this.widget = new TomSelect(this.node, this.tomSelectSettings());
+      this.attachBehaviors();
     });
   }
 
-  private defaultTomSelectSettings(): RecursivePartial<TomSettings> {
+  protected tomSelectSettings(): RecursivePartial<TomSettings> {
     return {
       maxItems: this.max,
       loadThrottle: this.delay,
@@ -60,7 +61,7 @@ abstract class AjaxSelectBase extends inheritHtmlElement("select") {
     };
   }
 
-  private setDefaultTomSelectBehaviors() {
+  protected attachBehaviors() {
     // Allow removing selected items by clicking on them
     this.widget.on("item_select", (item: TomItem) => {
       this.widget.removeItem(item);
@@ -70,16 +71,14 @@ abstract class AjaxSelectBase extends inheritHtmlElement("select") {
       this.widget.setTextboxValue("");
     });
   }
-
-  abstract configureTomSelect(defaultSettings: RecursivePartial<TomSettings>): void;
 }
 
 @registerComponent("user-ajax-select")
-export class UserAjaxSelect extends AjaxSelectBase {
+export class UserAjaxSelect extends AutocompleteSelect {
   public filter?: <T>(items: T[]) => T[];
   static observedAttributes = [
     "min-characters-for-search",
-    ...AjaxSelectBase.observedAttributes,
+    ...AutocompleteSelect.observedAttributes,
   ];
 
   private minCharNumberForSearch = 2;
@@ -95,9 +94,9 @@ export class UserAjaxSelect extends AjaxSelectBase {
     }
   }
 
-  configureTomSelect(defaultSettings: RecursivePartial<TomSettings>) {
-    this.widget = new TomSelect(this.node, {
-      ...defaultSettings,
+  protected tomSelectSettings(): RecursivePartial<TomSettings> {
+    return {
+      ...super.tomSelectSettings(),
       hideSelected: true,
       diacritics: true,
       duplicates: false,
@@ -147,6 +146,6 @@ export class UserAjaxSelect extends AjaxSelectBase {
           return `<div class="no-results">${gettext("No results found")}</div>`;
         },
       },
-    });
+    };
   }
 }