Make product types dynamically orderable.

This commit is contained in:
imperosol
2024-12-17 00:53:47 +01:00
parent c79c251ba7
commit 47876e3971
10 changed files with 269 additions and 113 deletions

View File

@ -4,21 +4,49 @@
{% trans %}Product type list{% endtrans %}
{% endblock %}
{% block additional_css %}
<link rel="stylesheet" href="{{ static("counter/css/product_type.scss") }}">
{% endblock %}
{% block additional_js %}
<script type="module" src="{{ static("bundled/counter/product-type-index.ts") }}"></script>
{% endblock %}
{% block content %}
<p><a href="{{ url('counter:new_producttype') }}">{% trans %}New product type{% endtrans %}</a></p>
{% if producttype_list %}
<h3>{% trans %}Product type list{% endtrans %}</h3>
<ul>
{% for t in producttype_list %}
<li><a href="{{ url('counter:producttype_edit', type_id=t.id) }}">{{ t }}</a></li>
{% endfor %}
</ul>
<div x-data="productTypesList">
<p
class="alert snackbar"
:class="alertMessage.success ? 'alert-green' : 'alert-red'"
x-show="alertMessage.open"
x-transition.duration.500ms
x-text="alertMessage.content"
></p>
<h3>{% trans %}Product type list{% endtrans %}</h3>
<ul
x-sort="($item, $position) => reorder($item, $position)"
x-ref="productTypes"
class="product-type-list"
:aria-busy="loading"
>
{%- for t in producttype_list -%}
<li x-sort:item="{{ t.id }}">
<i class="fa fa-grip-vertical"></i>
<a href="{{ url('counter:producttype_edit', type_id=t.id) }}">{{ t }}</a>
</li>
{%- endfor -%}
</ul>
</div>
{% else %}
{% trans %}There is no product types in this website.{% endtrans %}
{% endif %}
{% endblock %}
{% block script %}
{% endblock %}