klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2025-07-11 12:29:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make products filterable by product type

Browse Source
This commit is contained in:
imperosol
2024-12-21 02:13:37 +01:00
parent 6953eaa9d0
commit accf1befce
7 changed files with 151 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,45 +6,60 @@
{% endblock %}
{% block additional_js %}
<script type="module" src="{{ static("bundled/counter/components/ajax-select-index.ts") }}"></script>
<script type="module" src="{{ static("bundled/counter/product-list-index.ts") }}"></script>
{% endblock %}
{% block additional_css %}
<link rel="stylesheet" href="{{ static("core/components/card.scss") }}">
<link rel="stylesheet" href="{{ static("counter/css/admin.scss") }}">
<link rel="stylesheet" href="{{ static("bundled/core/components/ajax-select-index.css") }}">
<link rel="stylesheet" href="{{ static("core/components/ajax-select.scss") }}">
{% endblock %}
{% block content %}
<main x-data="productList">
<h4 class="margin-bottom">{% trans %}Filter products{% endtrans %}</h4>
<form id="search-form" class="margin-bottom">
<h4 class="margin-bottom">{% trans %}Filter products{% endtrans %}</h4>
<div class="row gap-4x">
<fieldset>
<label for="search-input">{% trans %}Product name{% endtrans %}</label>
<input
id="search-input"
type="text"
name="search"
x-model.debounce.500ms="search"
/>
</fieldset>
<fieldset>
<legend>{% trans %}Product state{% endtrans %}</legend>
<div class="row">
<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="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="productStatus" value="both">
<label for="filter-all-products">{% trans %}All products{% endtrans %}</label>
</div>
</fieldset>
</div>
<fieldset>
<label for="search-input">{% trans %}Product name{% endtrans %}</label>
<input
id="search-input"
type="text"
name="search"
x-model.debounce.500ms="search"
/>
</fieldset>
<fieldset>
<div class="row">
<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="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="productStatus" value="both">
<label for="filter-all-products">{% trans %}All products{% endtrans %}</label>
</div>
<label for="type-search-input">{% trans %}Product type{% endtrans %}</label>
<product-type-ajax-select
id="type-search-input"
name="product-type"
x-ref="productTypesInput"
multiple
>
</product-type-ajax-select>
</fieldset>
</form>
<h3 @click="console.log(totalCount, nbPages())" class="margin-bottom">
{% trans %}Product list{% endtrans %}
</h3>
<h3 class="margin-bottom">{% trans %}Product list{% endtrans %}</h3>
<div class="row margin-bottom">
<a href="{{ url('counter:new_product') }}" class="btn btn-blue">