82 lines
3.2 KiB
Django/Jinja
82 lines
3.2 KiB
Django/Jinja
{% extends 'base.html.j2' %}
|
|
{% block title %}Products | Sigl{% endblock %}
|
|
{% block header %}
|
|
<div class="flex justify-between items-center py-2">
|
|
<div class="text-lg grow mr-2 border-b text-gray-800">
|
|
<input type="search" id="search" class="w-full outline-none focus:outline-none" placeholder="Search Products" oninput="filterList()" />
|
|
</div>
|
|
<a href="{{ url_for('products.create') }}" class="shrink-0 px-2 py-1 text-sm text-white bg-green-600 hover:bg-green-700 border rounded flex justify-between items-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
New Product
|
|
</a>
|
|
</div>
|
|
{% endblock %}
|
|
{% block main %}
|
|
{% if products|length == 0 %}
|
|
<div class="py-2 border-b border-gray-300">
|
|
<div class="ml-4">No Products</div>
|
|
</div>
|
|
{% else %}
|
|
{% for hdr in groups.keys()|sort %}
|
|
{% set outer_loop = loop %}
|
|
<div class="sigl-category text-sm text-gray-600 font-bold py-1 px-4 bg-gray-50 border-b border-gray-300">{{ hdr }}</div>
|
|
<ul class="sigl-list">
|
|
{% for e in groups[hdr]|sort(attribute='name') %}
|
|
<li data-value="{{ e.name|lower }}" class="sigl-list-item block w-full py-2{% if not (loop.last and outer_loop.last) %} border-b border-gray-300{% endif %}">
|
|
<a href="{{ url_for('products.detail', id=e.id) }}"><div class="px-4">{{ e.name }}</div></a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% endfor %}
|
|
<div id="sigl-no-products-found" class="hidden py-2 border-b border-gray-300">
|
|
<div class="ml-4">No Products Found</div>
|
|
</div>
|
|
{% endif %}
|
|
<script language="javascript">
|
|
function filterList() {
|
|
let nshown = 0;
|
|
const searchEl = document.getElementById('search');
|
|
const searchText = searchEl && searchEl.value.toLowerCase() || '';
|
|
document.querySelectorAll('.sigl-list-item').forEach(function (itm) {
|
|
const itmValue = itm.dataset.value;
|
|
if (searchText === '') {
|
|
console.log(`Showing ${itmValue}`)
|
|
itm.classList.remove('hidden');
|
|
nshown += 1;
|
|
} else {
|
|
if (itmValue.includes(searchText)) {
|
|
console.log(`Hiding ${itmValue}`)
|
|
itm.classList.remove('hidden');
|
|
nshown += 1;
|
|
} else {
|
|
console.log(`Showing ${itmValue}`)
|
|
itm.classList.add('hidden');
|
|
}
|
|
}
|
|
});
|
|
|
|
document.querySelectorAll('.sigl-category').forEach(function (itm) {
|
|
const ul = itm.nextElementSibling;
|
|
const lis = [].slice.call(ul.children);
|
|
const nShowing = lis
|
|
.map((itm) => itm.classList.contains('hidden') ? 0 : 1)
|
|
.reduce((p, i) => p + i, 0);
|
|
|
|
if (nShowing === 0) {
|
|
itm.classList.add('hidden');
|
|
} else {
|
|
itm.classList.remove('hidden');
|
|
}
|
|
});
|
|
|
|
const noneFound = document.getElementById('sigl-no-products-found');
|
|
if (nshown === 0) {
|
|
noneFound.classList.remove('hidden');
|
|
} else {
|
|
noneFound.classList.add('hidden');
|
|
}
|
|
}
|
|
</script>
|
|
{% endblock %} |