From 42434d10ca6e738013c3774e5911ac0f35e86d40 Mon Sep 17 00:00:00 2001
From: Sli <antoine@bartuccio.fr>
Date: Sun, 15 Jun 2025 16:33:22 +0200
Subject: [PATCH] Remove jquery-ui tabs from counter

---
 .../bundled/counter/counter-click-index.ts    |  5 --
 counter/templates/counter/counter_click.jinja | 55 +++++++++----------
 2 files changed, 27 insertions(+), 33 deletions(-)

diff --git a/counter/static/bundled/counter/counter-click-index.ts b/counter/static/bundled/counter/counter-click-index.ts
index 296c6003..99f6bdb7 100644
--- a/counter/static/bundled/counter/counter-click-index.ts
+++ b/counter/static/bundled/counter/counter-click-index.ts
@@ -137,8 +137,3 @@ document.addEventListener("alpine:init", () => {
     },
   }));
 });
-
-$(() => {
-  // biome-ignore lint/suspicious/noExplicitAny: dealing with legacy jquery
-  ($("#products") as any).tabs();
-});
diff --git a/counter/templates/counter/counter_click.jinja b/counter/templates/counter/counter_click.jinja
index 24e1c6ae..c1ecbe16 100644
--- a/counter/templates/counter/counter_click.jinja
+++ b/counter/templates/counter/counter_click.jinja
@@ -9,12 +9,14 @@
   <link rel="stylesheet" type="text/css" href="{{ static('counter/css/counter-click.scss') }}" defer></link>
   <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>
+  <link rel="stylesheet" type="text/css" href="{{ static('core/components/tabs.scss') }}" defer></link>
   <link rel="stylesheet" href="{{ static("core/components/card.scss") }}">
 {% 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>
+  <script type="module" src="{{ static('bundled/core/components/tabs-index.ts') }}"></script>
 {% endblock %}
 
 {% block info_boxes %}
@@ -205,35 +207,32 @@
             {% trans %}No products available on this counter for this user{% endtrans %}
           </div>
         {% else %}
-          <ul>
+          <ui-tab-group>
             {% for category in categories.keys() -%}
-              <li><a href="#cat_{{ category|slugify }}">{{ category }}</a></li>
-            {%- endfor %}
-          </ul>
-          {% for category in categories.keys() -%}
-            <div id="cat_{{ category|slugify }}">
-              <h5 class="margin-bottom">{{ category }}</h5>
-              <div class="row gap-2x">
-                {% for product in categories[category] -%}
-                  <button class="card shadow" @click="addToBasketWithMessage('{{ product.id }}', 1)">
-                    <img
-                      class="card-image"
-                      alt="image de {{ product.name }}"
-                      {% if product.icon %}
-                        src="{{ product.icon.url }}"
-                      {% else %}
-                        src="{{ static('core/img/na.gif') }}"
-                      {% endif %}
-                    />
-                    <span class="card-content">
-                      <strong class="card-title">{{ product.name }}</strong>
-                      <p>{{ product.price }} €<br>{{ product.code }}</p>
-                    </span>
-                  </button>
-                {%- endfor %}
-              </div>
-            </div>
-          {%- endfor %}
+              <ui-tab title="{{ category }}" {% if loop.index == 1 -%}active{%- endif -%}>
+                <h5 class="margin-bottom">{{ category }}</h5>
+                <div class="row gap-2x">
+                  {% for product in categories[category] -%}
+                    <button class="card shadow" @click="addToBasketWithMessage('{{ product.id }}', 1)">
+                      <img
+                        class="card-image"
+                        alt="image de {{ product.name }}"
+                        {% if product.icon %}
+                          src="{{ product.icon.url }}"
+                        {% else %}
+                          src="{{ static('core/img/na.gif') }}"
+                        {% endif %}
+                      />
+                      <span class="card-content">
+                        <strong class="card-title">{{ product.name }}</strong>
+                        <p>{{ product.price }} €<br>{{ product.code }}</p>
+                      </span>
+                    </button>
+                  {%- endfor %}
+                </div>
+              </ui-tab>
+            {% endfor %}
+          </ui-tab-group>
         {% endif %}
       </div>
     </div>