Passage de vue à Alpine pour les comptoirs (#561)

Vue, c'est cool, mais avec Django c'est un peu chiant à utiliser. Alpine a l'avantage d'être plus léger et d'avoir une syntaxe qui ne ressemble pas à celle de Jinja (ce qui évite d'avoir à mettre des {% raw %} partout).

counter/static/counter/js/counter_click.js

@@ -0,0 +1,78 @@
+document.addEventListener('alpine:init', () => {
+    Alpine.data('counter', () => ({
+        basket: basket,
+        errors: [],
+
+        sum_basket() {
+            if (!this.basket || Object.keys(this.basket).length === 0) {
+                return 0;
+            }
+            const total = Object.values(this.basket)
+                .reduce((acc, cur) => acc + cur["qty"] * cur["price"], 0);
+            return total / 100;
+        },
+
+        async handle_code(event) {
+            const code = $(event.target).find("#code_field").val().toUpperCase();
+            if(["FIN", "ANN"].includes(code)) {
+                $(event.target).submit();
+            } else {
+                await this.handle_action(event);
+            }
+        },
+
+        async handle_action(event) {
+            const payload = $(event.target).serialize();
+            let request = new Request(click_api_url, {
+                method: "POST",
+                body: payload,
+                headers: {
+                    'Accept': 'application/json',
+                    'X-CSRFToken': csrf_token,
+                }
+            })
+            const response = await fetch(request);
+            const json = await response.json();
+            this.basket = json["basket"]
+            this.errors = json["errors"]
+            $('form.code_form #code_field').val("").focus();
+        }
+    }))
+})
+
+$(function () {
+    /* Autocompletion in the code field */
+    const code_field = $("#code_field");
+
+    let quantity = "";
+    let search = "";
+    code_field.autocomplete({
+        select: function (event, ui) {
+            event.preventDefault();
+            code_field.val(quantity + ui.item.value);
+        },
+        focus: function (event, ui) {
+            event.preventDefault();
+            code_field.val(quantity + ui.item.value);
+        },
+        source: function (request, response) {
+            // by the dark magic of JS, parseInt("123abc") === 123
+            quantity = parseInt(request.term);
+            search = request.term.slice(quantity.toString().length)
+            let matcher = new RegExp($.ui.autocomplete.escapeRegex(search), "i");
+            response($.grep(products_autocomplete, function (value) {
+                value = value.tags;
+                return matcher.test(value);
+            }));
+        },
+    });
+
+    /* Accordion UI between basket and refills */
+    $("#click_form").accordion({
+        heightStyle: "content",
+        activate: () => $(".focus").focus(),
+    });
+    $("#products").tabs();
+
+    code_field.focus();
+});