Refactor templates and add search functionality with improved navigation and user experience

templates/fragments/_breadcrumb_fragment.html

@@ -0,0 +1,33 @@
+{% macro breadcrumb_header(breadcrumbs=[], title=None, submit_button=False) %}
+    <nav class="row d-flex mb-3 justify-content-between">
+        <div class="col">
+            <ol class="breadcrumb">
+                <li class="breadcrumb-item">
+                    <a href="{{ url_for('index') }}" class="link-success link-underline-opacity-0">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                             class="bi bi-house" viewBox="0 0 16 16">
+                            <path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293zM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5z"/>
+                        </svg>
+                    </a>
+                </li>
+                {% for crumb in breadcrumbs %}
+                    <li class="breadcrumb-item">
+                        {% if crumb.url %}
+                            <a href="{{ crumb.url }}" class="link-success link-underline-opacity-0">{{ crumb.label }}</a>
+                        {% else %}
+                            {{ crumb.label }}
+                        {% endif %}
+                    </li>
+                {% endfor %}
+                {% if title %}
+                    <li class="breadcrumb-item active">{{ title }}</li>
+                {% endif %}
+            </ol>
+        </div>
+        {% if submit_button %}
+        <div class="col text-end">
+            <button type="submit" class="btn btn-primary">Save</button>
+        </div>
+        {% endif %}
+    </nav>
+{% endmacro %}

templates/fragments/_icon_fragment.html

@@ -0,0 +1,25 @@
+{% set inventory %}
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor"
+    class="bi bi-laptop align-self-center" viewBox="0 0 16 16">
+    <path
+        d="M13.5 3a.5.5 0 0 1 .5.5V11H2V3.5a.5.5 0 0 1 .5-.5zm-11-1A1.5 1.5 0 0 0 1 3.5V12h14V3.5A1.5 1.5 0 0 0 13.5 2zM0 12.5h16a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 12.5" />
+</svg>
+{% endset %}
+
+{% set log %}
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor"
+    class="bi bi-file-text align-self-center" viewBox="0 0 16 16">
+    <path
+        d="M5 4a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm-.5 2.5A.5.5 0 0 1 5 6h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5M5 8a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1z" />
+    <path
+        d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1" />
+</svg>
+{% endset %}
+
+{% set user %}
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor"
+    class="bi bi-person align-self-center" viewBox="0 0 16 16">
+    <path
+        d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4m-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10s-3.516.68-4.168 1.332c-.678.678-.83 1.418-.832 1.664z" />
+</svg>
+{% endset %}

templates/fragments/_link_fragment.html

@@ -0,0 +1,11 @@
+{% macro category_link(endpoint, label, icon_html=None, arguments={}) %}
+<div class="col">
+    <a href="{{ url_for('main.' + endpoint, **arguments) }}"
+        class="d-flex flex-column justify-content-center link-success link-underline-opacity-0">
+        {% if icon_html %}
+            {{ icon_html | safe }}
+        {% endif %}
+        {{ label }}
+    </a>
+</div>
+{% endmacro %}

templates/fragments/_table_fragment.html

@@ -0,0 +1,81 @@
+{% macro render_table(headers, rows, entry_route=None, title=None) %}
+{% if rows %}
+<div class="table-responsive">
+    <table
+        class="table table-bordered table-sm table-hover table-striped table-light m-0{% if title %} caption-top{% endif %}">
+        {% if title %}
+        <caption>{{ title }}</caption>
+        {% endif %}
+        <thead class="sticky-top">
+            <tr>
+                {% for h in headers %}
+                <th>{{ h }}</th>
+                {% endfor %}
+            </tr>
+        </thead>
+        <tbody>
+            {% for row in rows %}
+            <tr {% if entry_route %}onclick="window.location='{{ url_for('main.' + entry_route, id=row.id) }}'"
+                style="cursor: pointer;" {% endif %}>
+                {% for cell in row.cells %}
+                <td {% if cell.type=='bool' %}class="text-center" {% endif %}>
+                    {% if cell.type == 'bool' %}
+                    {{ cell.html | safe }}
+                    {% elif cell.url %}
+                    <a href="{{ cell.url }}">{{ cell.text }}</a>
+                    {% else %}
+                    {{ cell.text or '-' }}
+                    {% endif %}
+                </td>
+                {% endfor %}
+            </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+</div>
+{% else %}
+<div class="container text-center">No data.</div>
+{% endif %}
+{% endmacro %}
+
+{% macro render_pagination(endpoint, page, has_prev, has_next, total_pages, page_variable='page', extra_args={}) %}
+{% set prev_args = extra_args.copy() %}
+{% set next_args = extra_args.copy() %}
+{% set first_args = extra_args.copy() %}
+{% set last_args = extra_args.copy() %}
+{% set _ = prev_args.update({page_variable: page - 1}) %}
+{% set _ = next_args.update({page_variable: page + 1}) %}
+{% set _ = first_args.update({page_variable: 1}) %}
+{% set _ = last_args.update({page_variable: total_pages}) %}
+{% if total_pages > 1 %}
+
+<div class="d-flex justify-content-between pt-3 px-5 align-items-center">
+    <div>
+        <a href="{{ url_for(endpoint, **first_args) }}"
+            class="btn btn-primary{% if not has_prev %} disabled{% endif %}">&laquo; First</a>
+        <a href="{{ url_for(endpoint, **prev_args) }}"
+            class="btn btn-primary{% if not has_prev %} disabled{% endif %}">&lt; Prev</a>
+    </div>
+
+    <div class="d-flex flex-column align-items-center text-center pt-3">
+        <div>Page {{ page }} of {{ total_pages }}</div>
+        <div>
+            {% for number in range(page - 2, page + 3) if number > 0 and number <= total_pages %} {% set
+                args=extra_args.copy() %} {% set _=args.update({page_variable: number}) %} <a
+                href="{{ url_for(endpoint, **args) }}"
+                class="btn btn-sm {% if number == page %}btn-primary{% else %}btn-outline-primary{% endif %} mx-1">
+                {{ number }}
+                </a>
+                {% endfor %}
+        </div>
+    </div>
+
+    <div>
+        <a href="{{ url_for(endpoint, **next_args) }}"
+            class="btn btn-primary{% if not has_next %} disabled{% endif %}">Next &gt;</a>
+        <a href="{{ url_for(endpoint, **last_args) }}"
+            class="btn btn-primary{% if not has_next %} disabled{% endif %}">Last &raquo;</a>
+    </div>
+</div>
+{% endif %}
+{% endmacro %}