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

Add min-characters-for-search attribute for user-ajax-select

Browse Source
This commit is contained in:
Antoine Bartuccio 2024-10-18 23:34:37 +02:00
parent 56cc4776a6
commit 729f848c14
1 changed files with 24 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,7 +19,11 @@ abstract class AjaxSelectBase extends inheritHtmlElement("select") {
private placeholder = ""; private placeholder = "";
private max: number | null = null; private max: number | null = null;
attributeChangedCallback(name: string, _oldValue?: string, newValue?: string) { protected attributeChangedCallback(
name: string,
_oldValue?: string,
newValue?: string,
) {
switch (name) { switch (name) {
case "delay": { case "delay": {
this.delay = Number.parseInt(newValue) ?? null; this.delay = Number.parseInt(newValue) ?? null;
@ -73,9 +77,25 @@ abstract class AjaxSelectBase extends inheritHtmlElement("select") {
@registerComponent("user-ajax-select") @registerComponent("user-ajax-select")
export class UserAjaxSelect extends AjaxSelectBase { export class UserAjaxSelect extends AjaxSelectBase {
public filter?: <T>(items: T[]) => T[]; public filter?: <T>(items: T[]) => T[];
static observedAttributes = [
"min-characters-for-search",
...AjaxSelectBase.observedAttributes,
];
private minCharNumberForSearch = 2;
protected attributeChangedCallback(
name: string,
_oldValue?: string,
newValue?: string,
) {
super.attributeChangedCallback(name, _oldValue, newValue);
if (name === "min-characters-for-search") {
this.minCharNumberForSearch = Number.parseInt(newValue) ?? 0;
}
}
configureTomSelect(defaultSettings: RecursivePartial<TomSettings>) { configureTomSelect(defaultSettings: RecursivePartial<TomSettings>) {
const minCharNumberForSearch = 2;
this.widget = new TomSelect(this.node, { this.widget = new TomSelect(this.node, {
...defaultSettings, ...defaultSettings,
hideSelected: true, hideSelected: true,
@ -85,7 +105,7 @@ export class UserAjaxSelect extends AjaxSelectBase {
labelField: "display_name", labelField: "display_name",
searchField: [], // Disable local search filter and rely on tested backend searchField: [], // Disable local search filter and rely on tested backend
shouldLoad: (query: string) => { shouldLoad: (query: string) => {
return query.length >= minCharNumberForSearch; // Avoid launching search with less than 2 characters return query.length >= this.minCharNumberForSearch; // Avoid launching search with less than 2 characters
}, },
load: (query: string, callback: TomLoadCallback) => { load: (query: string, callback: TomLoadCallback) => {
userSearchUsers({ userSearchUsers({
@ -120,7 +140,7 @@ export class UserAjaxSelect extends AjaxSelectBase {
}, },
// biome-ignore lint/style/useNamingConvention: that's how it's defined // biome-ignore lint/style/useNamingConvention: that's how it's defined
not_loading: (data: TomOption, _sanitize: typeof escape_html) => { not_loading: (data: TomOption, _sanitize: typeof escape_html) => {
return `<div class="no-results">${interpolate(gettext("You need to type %(number)s more characters"), { number: minCharNumberForSearch - data.input.length }, true)}</div>`; return `<div class="no-results">${interpolate(gettext("You need to type %(number)s more characters"), { number: this.minCharNumberForSearch - data.input.length }, true)}</div>`;
}, },
// biome-ignore lint/style/useNamingConvention: that's how it's defined // biome-ignore lint/style/useNamingConvention: that's how it's defined
no_results: (_data: TomOption, _sanitize: typeof escape_html) => { no_results: (_data: TomOption, _sanitize: typeof escape_html) => {