Skip to content

Commit

Permalink
Use tomselect instead of jquery autoselect for counter clicks
Browse files Browse the repository at this point in the history
  • Loading branch information
klmp200 committed Dec 19, 2024
1 parent ddeb12f commit b5e34e2
Show file tree
Hide file tree
Showing 4 changed files with 186 additions and 62 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
import { AutoCompleteSelectBase } from "#core:core/components/ajax-select-base";
import { registerComponent } from "#core:utils/web-components";
import type { RecursivePartial, TomSettings } from "tom-select/dist/types/types";

const productParsingRegex = /^(\d+x)?(.*)/i;

function parseProduct(query: string): [number, string] {
const parsed = productParsingRegex.exec(query);
return [Number.parseInt(parsed[1] || "1"), parsed[2]];
}

@registerComponent("counter-product-select")
export class CounterProductSelect extends AutoCompleteSelectBase {
public getOperationCodes(): string[] {
return ["FIN", "ANN"];
}

protected attachBehaviors(): void {
this.allowMultipleProducts();
}

private allowMultipleProducts(): void {
const search = this.widget.search;
const onOptionSelect = this.widget.onOptionSelect;
this.widget.hook("instead", "search", (query: string) => {
return search.call(this.widget, parseProduct(query)[1]);
});
this.widget.hook(
"instead",
"onOptionSelect",
(evt: MouseEvent | KeyboardEvent, option: HTMLElement) => {
const [quantity, _] = parseProduct(this.widget.inputValue());
const originalValue = option.getAttribute("data-value") ?? option.innerText;

if (quantity === 1 || this.getOperationCodes().includes(originalValue)) {
return onOptionSelect.call(this.widget, evt, option);
}

const value = `${quantity}x${originalValue}`;
const label = `${quantity}x${option.innerText}`;
this.widget.addOption({ value: value, text: label }, true);
return onOptionSelect.call(
this.widget,
evt,
this.widget.getOption(value, true),
);
},
);

this.widget.hook("after", "onOptionSelect", () => {
/* Focus the next element if it's an input */
if (this.nextElementSibling.nodeName === "INPUT") {
(this.nextElementSibling as HTMLInputElement).focus();
}
});
}
protected tomSelectSettings(): RecursivePartial<TomSettings> {
/* We disable the dropdown on focus because we're going to always autofocus the widget */
return { ...super.tomSelectSettings(), openOnFocus: false };
}
}
52 changes: 13 additions & 39 deletions counter/static/bundled/counter/counter-click-index.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { exportToHtml } from "#core:utils/globals";
import type TomSelect from "tom-select";

interface CounterConfig {
csrfToken: string;
Expand All @@ -20,6 +21,12 @@ exportToHtml("loadCounter", (config: CounterConfig) => {
basket: config.sessionBasket,
errors: [],
customerBalance: config.customerBalance,
codeField: undefined,

init() {
this.codeField = this.$refs.codeField;
this.codeField.widget.focus();
},

sumBasket() {
if (!this.basket || Object.keys(this.basket).length === 0) {
Expand All @@ -40,17 +47,19 @@ exportToHtml("loadCounter", (config: CounterConfig) => {
(event.detail.target.querySelector("#id_amount") as HTMLInputElement).value,
);
document.getElementById("selling-accordion").click();
this.codeField.widget.focus();
},

async handleCode(event: SubmitEvent) {
const code = (
$(event.target).find("#code_field").val() as string
).toUpperCase();
if (["FIN", "ANN"].includes(code)) {
const widget: TomSelect = this.codeField.widget;
const code = (widget.getValue() as string).toUpperCase();
if (this.codeField.getOperationCodes().includes(code)) {
$(event.target).submit();
} else {
await this.handleAction(event);
}
widget.clear();
widget.focus();
},

async handleAction(event: SubmitEvent) {
Expand All @@ -68,7 +77,6 @@ exportToHtml("loadCounter", (config: CounterConfig) => {
const json = await response.json();
this.basket = json.basket;
this.errors = json.errors;
$("form.code_form #code_field").val("").focus();
},
}));
});
Expand All @@ -84,38 +92,6 @@ declare global {
}

$(() => {
/* Autocompletion in the code field */
// biome-ignore lint/suspicious/noExplicitAny: dealing with legacy jquery
const codeField: any = $("#code_field");

let quantity = "";
codeField.autocomplete({
// biome-ignore lint/suspicious/noExplicitAny: dealing with legacy jquery
select: (event: any, ui: any) => {
event.preventDefault();
codeField.val(quantity + ui.item.value);
},
// biome-ignore lint/suspicious/noExplicitAny: dealing with legacy jquery
focus: (event: any, ui: any) => {
event.preventDefault();
codeField.val(quantity + ui.item.value);
},
// biome-ignore lint/suspicious/noExplicitAny: dealing with legacy jquery
source: (request: any, response: any) => {
// biome-ignore lint/performance/useTopLevelRegex: performance impact is minimal
const res = /^(\d+x)?(.*)/i.exec(request.term);
quantity = res[1] || "";
const search = res[2];
// biome-ignore lint/suspicious/noExplicitAny: dealing with legacy jquery
const matcher = new RegExp(($ as any).ui.autocomplete.escapeRegex(search), "i");
response(
$.grep(productsAutocomplete, (value: Product) => {
return matcher.test(value.tags);
}),
);
},
});

/* Accordion UI between basket and refills */
// biome-ignore lint/suspicious/noExplicitAny: dealing with legacy jquery
($("#click_form") as any).accordion({
Expand All @@ -124,6 +100,4 @@ $(() => {
});
// biome-ignore lint/suspicious/noExplicitAny: dealing with legacy jquery
($("#products") as any).tabs();

codeField.focus();
});
25 changes: 23 additions & 2 deletions counter/templates/counter/counter_click.jinja
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,14 @@
{{ counter }}
{% endblock %}

{% block additional_css %}
<link rel="stylesheet" type="text/css" href="{{ static('bundled/core/components/ajax-select-index.css') }}" defer></link>
<link rel="stylesheet" type="text/css" href="{{ static('core/components/ajax-select.scss') }}" defer></link>
{% endblock %}

{% block additional_js %}
<script type="module" src="{{ static('bundled/counter/counter-click-index.ts') }}"></script>
<script type="module" src="{{ static('bundled/counter/components/counter-product-select-index.ts') }}"></script>
{% endblock %}

{% block info_boxes %}
Expand Down Expand Up @@ -40,9 +46,24 @@
<form method="post" action=""
class="code_form" @submit.prevent="handleCode">
{% csrf_token %}

<input type="hidden" name="action" value="code">
<label for="code_field"></label>
<input type="text" name="code" value="" class="focus" id="code_field"/>

<counter-product-select name="code" x-ref="codeField" autofocus required placeholder="{% trans %}Select a product...{% endtrans %}">
<option value=""></option>
<optgroup label="{% trans %}Operations{% endtrans %}">
<option value="FIN">{% trans %}Confirm (FIN){% endtrans %}</option>
<option value="ANN">{% trans %}Cancel (ANN){% endtrans %}</option>
</optgroup>
{% for category in categories.keys() %}
<optgroup label="{{ category }}">
{% for product in categories[category] %}
<option value="{{ product.code }}">{{ product }}</option>
{% endfor %}
</optgroup>
{% endfor %}
</counter-product-select>

<input type="submit" value="{% trans %}Go{% endtrans %}"/>
</form>

Expand Down
Loading

0 comments on commit b5e34e2

Please sign in to comment.