klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2024-11-15 02:33:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Simplify ajax-select inheritance and make simple auto complete

Browse Source
This commit is contained in:
Antoine Bartuccio 2024-10-19 16:02:54 +02:00
parent 6b3012d21c
commit c50f0a2ac5
1 changed files with 12 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
core/static/webpack/core/components/ajax-select-index.ts
View File

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