klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2024-12-23 00:01:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix frontend archived products filter

Browse Source
This commit is contained in:
imperosol 2024-12-14 03:13:14 +01:00
parent 8f8eef4107
commit 9cafc163e8
2 changed files with 13 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
counter/static/bundled/counter/product-list-index.ts
View File

@ -56,7 +56,7 @@ document.addEventListener("alpine:init", () => {
/** Total number of elements corresponding to the current query. */ /** Total number of elements corresponding to the current query. */
nbPages: 0, nbPages: 0,
isArchived: null as boolean, productStatus: "" as "active" | "archived" | "both",
search: "", search: "",
pageSize: defaultPageSize, pageSize: defaultPageSize,
page: defaultPage, page: defaultPage,
@ -64,14 +64,14 @@ document.addEventListener("alpine:init", () => {
async init() { async init() {
const url = getCurrentUrlParams(); const url = getCurrentUrlParams();
this.search = url.get("search") || ""; this.search = url.get("search") || "";
this.isArchived = url.get("isArchived") ?? false; this.productStatus = url.get("productStatus") ?? "active";
await this.load(); await this.load();
for (const param of ["search", "isArchived"]) { for (const param of ["search", "productStatus"]) {
this.$watch(param, () => { this.$watch(param, () => {
this.page = defaultPage; this.page = defaultPage;
}); });
} }
for (const param of ["search", "isArchived", "page"]) { for (const param of ["search", "productStatus", "page"]) {
this.$watch(param, async (value: string) => { this.$watch(param, async (value: string) => {
updateQueryString(param, value, History.Replace); updateQueryString(param, value, History.Replace);
this.nbPages = 0; this.nbPages = 0;
@ -87,8 +87,10 @@ document.addEventListener("alpine:init", () => {
*/ */
getQueryParams(): ProductSearchProductsDetailedData { getQueryParams(): ProductSearchProductsDetailedData {
const search = this.search.length > 0 ? this.search : null; const search = this.search.length > 0 ? this.search : null;
const archived = ["true", "false"].includes(this.isArchived) // If active or archived products must be filtered, put the filter in the request
? this.isArchived // Else, don't include the filter
const isArchived = ["active", "archived"].includes(this.productStatus)
? this.productStatus === "archived"
: undefined; : undefined;
return { return {
query: { query: {
@ -97,7 +99,7 @@ document.addEventListener("alpine:init", () => {
page_size: this.pageSize, page_size: this.pageSize,
search: search, search: search,
// biome-ignore lint/style/useNamingConvention: api is in snake_case // biome-ignore lint/style/useNamingConvention: api is in snake_case
is_archived: archived, is_archived: isArchived,
}, },
}; };
}, },

9
counter/templates/counter/product_list.jinja
View File

@ -29,15 +29,15 @@
</fieldset> </fieldset>
<fieldset> <fieldset>
<div class="row"> <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> <label for="filter-active-products">{% trans %}Active products{% endtrans %}</label>
</div> </div>
<div class="row"> <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> <label for="filter-inactive-products">{% trans %}Archived products{% endtrans %}</label>
</div> </div>
<div class="row"> <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> <label for="filter-all-products">{% trans %}All products{% endtrans %}</label>
</div> </div>
</fieldset> </fieldset>
@ -64,8 +64,7 @@
<template x-for="[category, cat_products] of Object.entries(products)" :key="category"> <template x-for="[category, cat_products] of Object.entries(products)" :key="category">
<section> <section>
<h4 x-text="category" class="margin-bottom"></h4> <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"> <template x-for="p in cat_products" :key="p.id">
<a class="card card-row shadow clickable" :href="p.url"> <a class="card card-row shadow clickable" :href="p.url">
<template x-if="p.icon"> <template x-if="p.icon">