From 9cafc163e8a14323668e97dc9f993e3cfd50fdcf Mon Sep 17 00:00:00 2001
From: imperosol <thgirod@hotmail.com>
Date: Sat, 14 Dec 2024 03:13:14 +0100
Subject: [PATCH] fix frontend archived products filter

---
 .../static/bundled/counter/product-list-index.ts | 16 +++++++++-------
 counter/templates/counter/product_list.jinja     |  9 ++++-----
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/counter/static/bundled/counter/product-list-index.ts b/counter/static/bundled/counter/product-list-index.ts
index f0c7ae4d..acc4e8ef 100644
--- a/counter/static/bundled/counter/product-list-index.ts
+++ b/counter/static/bundled/counter/product-list-index.ts
@@ -56,7 +56,7 @@ document.addEventListener("alpine:init", () => {
     /** Total number of elements corresponding to the current query. */
     nbPages: 0,
 
-    isArchived: null as boolean,
+    productStatus: "" as "active" | "archived" | "both",
     search: "",
     pageSize: defaultPageSize,
     page: defaultPage,
@@ -64,14 +64,14 @@ document.addEventListener("alpine:init", () => {
     async init() {
       const url = getCurrentUrlParams();
       this.search = url.get("search") || "";
-      this.isArchived = url.get("isArchived") ?? false;
+      this.productStatus = url.get("productStatus") ?? "active";
       await this.load();
-      for (const param of ["search", "isArchived"]) {
+      for (const param of ["search", "productStatus"]) {
         this.$watch(param, () => {
           this.page = defaultPage;
         });
       }
-      for (const param of ["search", "isArchived", "page"]) {
+      for (const param of ["search", "productStatus", "page"]) {
         this.$watch(param, async (value: string) => {
           updateQueryString(param, value, History.Replace);
           this.nbPages = 0;
@@ -87,8 +87,10 @@ document.addEventListener("alpine:init", () => {
      */
     getQueryParams(): ProductSearchProductsDetailedData {
       const search = this.search.length > 0 ? this.search : null;
-      const archived = ["true", "false"].includes(this.isArchived)
-        ? this.isArchived
+      // If active or archived products must be filtered, put the filter in the request
+      // Else, don't include the filter
+      const isArchived = ["active", "archived"].includes(this.productStatus)
+        ? this.productStatus === "archived"
         : undefined;
       return {
         query: {
@@ -97,7 +99,7 @@ document.addEventListener("alpine:init", () => {
           page_size: this.pageSize,
           search: search,
           // biome-ignore lint/style/useNamingConvention: api is in snake_case
-          is_archived: archived,
+          is_archived: isArchived,
         },
       };
     },
diff --git a/counter/templates/counter/product_list.jinja b/counter/templates/counter/product_list.jinja
index 99ab4cf2..7280e119 100644
--- a/counter/templates/counter/product_list.jinja
+++ b/counter/templates/counter/product_list.jinja
@@ -29,15 +29,15 @@
       </fieldset>
       <fieldset>
         <div class="row">
-          <input type="radio" id="filter-active-products" x-model="isArchived" value="false">
+          <input type="radio" id="filter-active-products" x-model="productStatus" value="active">
           <label for="filter-active-products">{% trans %}Active products{% endtrans %}</label>
         </div>
         <div class="row">
-          <input type="radio" id="filter-inactive-products" x-model="isArchived" value="true">
+          <input type="radio" id="filter-inactive-products" x-model="productStatus" value="archived">
           <label for="filter-inactive-products">{% trans %}Archived products{% endtrans %}</label>
         </div>
         <div class="row">
-          <input type="radio" id="filter-all-products" x-model="isArchived" value="">
+          <input type="radio" id="filter-all-products" x-model="productStatus" value="both">
           <label for="filter-all-products">{% trans %}All products{% endtrans %}</label>
         </div>
       </fieldset>
@@ -64,8 +64,7 @@
       <template x-for="[category, cat_products] of Object.entries(products)" :key="category">
         <section>
           <h4 x-text="category" class="margin-bottom"></h4>
-          <div  class="product-group">
-
+          <div class="product-group">
             <template x-for="p in cat_products" :key="p.id">
               <a class="card card-row shadow clickable" :href="p.url">
                 <template x-if="p.icon">