Refactor inventory and worklog templates for improved rendering and pagination; enhance table display with better responsiveness and usability

templates/fragments/_table_fragment.html

@@ -1,11 +1,11 @@
 {% macro render_table(headers, rows, id, entry_route=None, title=None, per_page=15) %}
 {% if rows %}
+{% if title %}
+<label for="datatable-{{ id|default('table')|replace(' ', '-')|lower }}" class="form-label">{{ title }}</label>
+{% endif %}
 <div class="table-responsive">
     <table id="datatable-{{ id|default('table')|replace(' ', '-')|lower }}"
         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 %}
@@ -36,62 +36,15 @@
 
 <script>
     document.addEventListener("DOMContentLoaded", function () {
-        {# console.log($('table[id="datatable-{{ id|default('table')|replace(' ', '-')|lower }}"]'))
-        $('table[id="datatable-{{ id|default('table')|replace(' ', '-')|lower }}"]').DataTable({
+        new DataTable('#datatable-{{ id|default('table')|replace(' ', ' - ')|lower }}', {
             pageLength: {{ per_page }},
-            lengthChange: false,
-            ordering: true,
-            stateSave: true
-        }) #}
-        new DataTable('#datatable-{{ id|default('table')|replace(' ', '-')|lower }}', {
-            pageLength: {{ per_page }},
-            colReorder: true
+            scrollX: true,
+            scrollY: '60vh',
+            scrollCollapse: true,
         })
     })
 </script>
 {% 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 %}

templates/index.html

@@ -20,7 +20,7 @@
                         rows = stale_worklog_rows,
                         id = 'Stale Worklog',
                         entry_route = 'worklog_entry',
-                        per_page = 3
+                        per_page = 10
                     )}}
                 </div>
             </div>

templates/inventory.html

@@ -12,7 +12,7 @@ title=title,
 submit_button=True) }}
 
 <div class="container">
-    <form action="POST">
+    <form method="POST" action="{{ url_for('main.inventory_item', id=item.id) }}">
         <div class="row">
             <div class="col-6">
                 <label for="timestamp" class="form-label">Date Entered</label>
@@ -28,7 +28,7 @@ submit_button=True) }}
             <div class="col-4">
                 <label for="inventory_name" class="form-label">Inventory #</label>
                 <input type="text" class="form-control" name="inventory_name" placeholder="-"
-                    value="{{ item.inventory_name if item.inventory_name else '' }}">
+                    value="{{ item.inventory_name or '' }}">
             </div>
             <div class="col-4">
                 <label for="serial" class="form-label">Serial #</label>
@@ -44,7 +44,7 @@ submit_button=True) }}
         <div class="row">
             <div class="col-4">
                 <label for="brand" class="form-label">Brand</label>
-                <select class="form-select" id="brand">
+                <select class="form-select" id="brand" name="brand">
                     <option>-</option>
                     {% for brand in brands %}
                     <option value="{{ brand.id }}" {% if brand.id==item.brand_id %} selected{% endif %}>{{ brand.name }}
@@ -101,7 +101,7 @@ submit_button=True) }}
             </div>
             <div class="col-2">
                 <label for="condition" class="form-label">Condition</label>
-                <select name="condition" id="" class="form-select" value="{{ item.condition }}">
+                <select name="condition" id="condition" class="form-select">
                     {% for condition in ["Working", "Deployed", "Partially Inoperable", "Inoperable", "Unverified",
                     "Removed", "Disposed"] %}
                     <option value="{{ condition }}">{{ condition }}</option>

templates/layout.html

@@ -19,13 +19,6 @@
         crossorigin="anonymous">
     <style>
         {% block style %}
-
-        .sticky-top {
-            position: sticky;
-            top: 0;
-            z-index: 1020;
-        }
-
         table td,
         th {
             white-space: nowrap;
@@ -44,7 +37,6 @@
         input[type="checkbox"][disabled]::-moz-checkbox {
             background-color: white;
         }
-
             {% endblock %}
     </style>
 </head>

templates/search.html

@@ -16,20 +16,9 @@ title=title,
         headers = results['inventory']['headers'],
         rows = results['inventory']['rows'],
         entry_route = 'inventory_item',
-        title='Inventory Results'
+        title='Inventory Results',
+        id='search-inventory'
         )}}
-        {{ tables.render_pagination(
-        endpoint = 'main.search',
-        page = results['inventory']['pagination']['page'],
-        has_prev = results['inventory']['pagination']['has_prev'],
-        has_next = results['inventory']['pagination']['has_next'],
-        total_pages = results['inventory']['pagination']['total_pages'],
-        page_variable = 'inventory_page',
-        extra_args = {
-        'q': query,
-        'user_page': results['users']['pagination']['page'],
-        'worklog_page': results['worklog']['pagination']['page']
-        })}}
     </div>
     {% endif %}
     {% if results['users']['rows'] %}
@@ -37,20 +26,10 @@ title=title,
         {{ tables.render_table(
         headers = results['users']['headers'],
         rows = results['users']['rows'],
-        entry_route = 'user', title='User Results'
+        entry_route = 'user', 
+        title='User Results',
+        id='search-users'
         )}}
-        {{ tables.render_pagination(
-        endpoint = 'main.search',
-        page = results['users']['pagination']['page'],
-        has_prev = results['users']['pagination']['has_prev'],
-        has_next = results['users']['pagination']['has_next'],
-        total_pages = results['users']['pagination']['total_pages'],
-        page_variable = 'user_page',
-        extra_args = {
-        'q': query,
-        'inventory_page': results['inventory']['pagination']['page'],
-        'worklog_page': results['worklog']['pagination']['page']
-        })}}
     </div>
     {% endif %}
     {% if results['worklog']['rows'] %}
@@ -59,20 +38,9 @@ title=title,
         headers = results['worklog']['headers'],
         rows = results['worklog']['rows'],
         entry_route = 'worklog_entry',
-        title='Worklog Results'
+        title='Worklog Results',
+        id='search-worklog'
         )}}
-        {{ tables.render_pagination(
-        endpoint = 'main.search',
-        page = results['worklog']['pagination']['page'],
-        has_prev = results['worklog']['pagination']['has_prev'],
-        has_next = results['worklog']['pagination']['has_next'],
-        total_pages = results['worklog']['pagination']['total_pages'],
-        page_variable = 'worklog_page',
-        extra_args = {
-        'q': query,
-        'inventory_page': results['inventory']['pagination']['page'],
-        'user_page': results['users']['pagination']['page']
-        })}}
     </div>
     {% endif %}
 </div>

templates/table.html

@@ -10,6 +10,5 @@
     breadcrumbs=breadcrumb
 ) }}
 
-{{ tables.render_table(headers=header, rows=rows, id=title, entry_route=entry_route) }}
-{# { tables.render_pagination(endpoint, page, has_prev, has_next, total_pages, extra_args=extra_args) } #}
+{{ tables.render_table(headers=header, rows=rows, id='table', entry_route=entry_route) }}
 {% endblock %}

templates/user.html

@@ -83,45 +83,17 @@ breadcrumbs=[
         {% if inventory_rows %}
         <div class="col{% if user.worklog_rows %}-6{% endif %}">
             <div class="row">
-                {{ tables.render_table(inventory_headers, inventory_rows, 'inventory_item', title='Assets') }}
+                {{ tables.render_table(inventory_headers, inventory_rows, 'inventory_item', title='Assets', per_page=8) }}
             </div>
         </div>
         {% endif %}
         {% if worklog_rows %}
         <div class="col{% if user.inventory_rows %}-6{% endif %}">
             <div class="row">
-                {{ tables.render_table(worklog_headers, worklog_rows, 'worklog_entry', title='Work Done') }}
+                {{ tables.render_table(worklog_headers, worklog_rows, 'worklog_entry', title='Work Done', per_page=8) }}
             </div>
         </div>
         {% endif %}
     </div>
-    <div class="row">
-        {% if inventory_pagination['total_pages'] > 1 %}
-        <div class="col-6">
-            {{ tables.render_pagination(
-            page=inventory_pagination['page'],
-            has_prev=inventory_pagination['has_prev'],
-            has_next=inventory_pagination['has_next'],
-            total_pages=inventory_pagination['total_pages'],
-            endpoint='main.user',
-            page_variable='asset_page',
-            extra_args={'id': user.id, 'worklog_page': worklog_page}
-            ) }}
-        </div>
-        {% endif %}
-        {% if worklog_pagination['total_pages'] > 1 %}
-        <div class="col-6">
-            {{ tables.render_pagination(
-            page=worklog_pagination['page'],
-            has_prev=worklog_pagination['has_prev'],
-            has_next=worklog_pagination['has_next'],
-            total_pages=worklog_pagination['total_pages'],
-            endpoint='main.user',
-            page_variable='worklog_page',
-            extra_args={'id': user.id, 'worklog_page': worklog_page}
-            ) }}
-        </div>
-        {% endif %}
-    </div>
 </div>
 {% endblock %}