Add Product Views

sigl/templates/products/home.html.j2

@@ -0,0 +1,82 @@
+{% 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 %}