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. */
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,
},
};
},

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

@ -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">