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

routes.py

@@ -162,8 +162,8 @@ def index():
 
     # Count items per condition
     expected_conditions = [
-        'Deployed', 'Disposed', 'Inoperable', 'Partially Inoperable',
+        'Deployed','Inoperable', 'Partially Inoperable',
-        'Removed', 'Unverified', 'Working'
+        'Unverified', 'Working'
     ]
     pivot = df['condition'].value_counts().reindex(expected_conditions, fill_value=0)
 
@@ -204,7 +204,6 @@ FILTER_MAP = {
 
 @main.route("/inventory")
 def list_inventory():
-    page = request.args.get('page', default=1, type=int)
     filter_by = request.args.get('filter_by', type=str)
     id = request.args.get('id', type=int)
 
@@ -272,17 +271,15 @@ def inventory_index():
 
 @main.route("/inventory_item/<int:id>")
 def inventory_item(id):
-    worklog_page = request.args.get("worklog_page", default=1, type=int)
     inventory_query = db.session.query(Inventory)
     item = eager_load_inventory_relationships(inventory_query).filter(Inventory.id == id).first()
     brands = db.session.query(Brand).all()
     users = eager_load_user_relationships(db.session.query(User)).all()
     rooms = eager_load_room_relationships(db.session.query(Room)).all()
     worklog_query = db.session.query(WorkLog).filter(WorkLog.work_item_id == id)
-    worklog_pagination = make_paginated_data(worklog_query, worklog_page, 5)
+    worklog = eager_load_worklog_relationships(worklog_query).all()
     types = db.session.query(Item).all()
     filtered_worklog_headers = {k: v for k, v in worklog_headers.items() if k not in ['Work Item', 'Contact', 'Follow Up?', 'Quick Analysis?']}
-    worklog = worklog_pagination['items']
 
     if item:
         title = f"Inventory Record - {item.identifier}"
@@ -292,8 +289,6 @@ def inventory_item(id):
     return render_template("inventory.html", title=title, item=item, 
                            brands=brands, users=users, rooms=rooms, 
                            worklog=worklog,
-                           worklog_pagination=worklog_pagination, 
-                           worklog_page=worklog_page,
                            worklog_headers=filtered_worklog_headers,
                            worklog_rows=[{"id": log.id, "cells": [fn(log) for fn in filtered_worklog_headers.values()]} for log in worklog],
                            types=types
@@ -301,16 +296,14 @@ def inventory_item(id):
 
 @main.route("/users")
 def list_users():
-    page = request.args.get('page', default=1, type=int)
     query = eager_load_user_relationships(db.session.query(User)).order_by(User.last_name, User.first_name)
-    return render_paginated_table(
+    users = query.all()
-        query=query,
+    return render_template(
-        page=page,
+        'table.html',
-        title="Users",
+        header = user_headers,
-        headers=user_headers,
+        rows = [{"id": user.id, "cells": [fn(user) for fn in user_headers.values()]} for user in users],
-        row_fn=lambda i: [fn(i) for fn in user_headers.values()],
+        title = "Users",
-        endpoint="main.list_users",
+        entry_route = 'user'
-        entry_route="user"
     )
 
 @main.route("/user/<int:id>")
@@ -327,14 +320,13 @@ def user(id):
         .filter(Inventory.owner_id == id)
         .filter(Inventory.condition.in_(ACTIVE_STATUSES))
     )
-    inventory_pagination = make_paginated_data(inventory_query, asset_page, 10)
+    
-    inventory = inventory_pagination['items']
+    inventory = inventory_query.all()
     filtered_inventory_headers = {k: v for k, v in inventory_headers.items() if k not in ['Date Entered', 'Inventory #', 'Serial #', 
                                                                                           'Bar Code #', 'Condition', 'Owner', 'Notes',
                                                                                           'Brand', 'Model', 'Shared?', 'Location']}
     worklog_query = eager_load_worklog_relationships(db.session.query(WorkLog)).filter(WorkLog.contact_id == id)
-    worklog_pagination = make_paginated_data(worklog_query, worklog_page, 10)
+    worklog = worklog_query.order_by(WorkLog.start_time.desc()).all()
-    worklog = worklog_pagination['items']
     filtered_worklog_headers = {k: v for k, v in worklog_headers.items() if k not in ['Contact', 'Follow Up?', 'Quick Analysis?']}
     return render_template(
         "user.html", 
@@ -342,27 +334,21 @@ def user(id):
         user=user, users=users, rooms=rooms, assets=inventory, 
         inventory_headers=filtered_inventory_headers,
         inventory_rows=[{"id": item.id, "cells": [fn(item) for fn in filtered_inventory_headers.values()]} for item in inventory],
-        inventory_pagination=inventory_pagination,
-        asset_page=asset_page,
         worklog=worklog,
         worklog_headers=filtered_worklog_headers,
-        worklog_rows=[{"id": log.id, "cells": [fn(log) for fn in filtered_worklog_headers.values()]} for log in worklog],
+        worklog_rows=[{"id": log.id, "cells": [fn(log) for fn in filtered_worklog_headers.values()]} for log in worklog]
-        worklog_pagination=worklog_pagination,
-        worklog_page=worklog_page
     )
 
 @main.route("/worklog")
 def list_worklog(page=1):
     page = request.args.get('page', default=1, type=int)
     query = eager_load_worklog_relationships(db.session.query(WorkLog)) 
-    return render_paginated_table(
+    return render_template(
-        query=query,
+        'table.html',
-        page=page,
+        header=worklog_headers,
+        rows=[{"id": log.id, "cells": [fn(log) for fn in worklog_headers.values()]} for log in query.all()],
         title="Work Log",
-        headers=worklog_headers,
+        entry_route='worklog_entry'
-        row_fn=lambda i: [fn(i) for fn in worklog_headers.values()],
-        endpoint="main.list_worklog",
-        entry_route="worklog_entry"
     )
 
 @main.route("/worklog/<int:id>")
@@ -377,9 +363,6 @@ def worklog_entry(id):
 @main.route("/search")
 def search():
     query = request.args.get('q', '').strip()
-    inventory_page = request.args.get('inventory_page', default=1, type=int)
-    user_page = request.args.get('user_page', default=1, type=int)
-    worklog_page = request.args.get('worklog_page', default=1, type=int)
 
     if not query:
         return redirect(url_for('index'))
@@ -396,7 +379,7 @@ def search():
             UserAlias.first_name.ilike(f"%{query}%"),
             UserAlias.last_name.ilike(f"%{query}%")
         ))
-    inventory_pagination = make_paginated_data(inventory_query, inventory_page)
+    inventory_results = inventory_query.all()
     user_query = eager_load_user_relationships(db.session.query(User).join(UserAlias, User.supervisor)).filter(
         or_(
             User.first_name.ilike(f"%{query}%"),
@@ -404,7 +387,7 @@ def search():
             UserAlias.first_name.ilike(f"%{query}%"),
             UserAlias.last_name.ilike(f"%{query}%")
         ))
-    user_pagination = make_paginated_data(user_query, user_page)
+    user_results = user_query.all()
     worklog_query = eager_load_worklog_relationships(db.session.query(WorkLog).join(UserAlias, WorkLog.contact).join(InventoryAlias, WorkLog.work_item)).filter(
         or_(
             WorkLog.notes.ilike(f"%{query}%"),
@@ -414,26 +397,23 @@ def search():
             InventoryAlias.serial.ilike(f"%{query}%"),
             InventoryAlias.barcode.ilike(f"%{query}%")
         ))
-    worklog_pagination = make_paginated_data(worklog_query, worklog_page)
+    worklog_results = worklog_query.all()
     
     results = {
         'inventory': {
             'results': inventory_query, 
             'headers': inventory_headers, 
-            'rows': [{"id": item.id, "cells": [fn(item) for fn in inventory_headers.values()]} for item in inventory_pagination['items']],
+            'rows': [{"id": item.id, "cells": [fn(item) for fn in inventory_headers.values()]} for item in inventory_results]
-            'pagination': inventory_pagination
         },
         'users': {
             'results': user_query, 
             'headers': user_headers, 
-            'rows': [{"id": user.id, "cells": [fn(user) for fn in user_headers.values()]} for user in user_pagination['items']],
+            'rows': [{"id": user.id, "cells": [fn(user) for fn in user_headers.values()]} for user in user_results]
-            'pagination': user_pagination
         },
         'worklog': {
             'results': worklog_query, 
             'headers': worklog_headers, 
-            'rows': [{"id": log.id, "cells": [fn(log) for fn in worklog_headers.values()]} for log in worklog_pagination['items']],
+            'rows': [{"id": log.id, "cells": [fn(log) for fn in worklog_headers.values()]} for log in worklog_results]
-            'pagination': worklog_pagination
         }
     }
 

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,16 +36,11 @@
 
 <script>
     document.addEventListener("DOMContentLoaded", function () {
-        {# console.log($('table[id="datatable-{{ id|default('table')|replace(' ', '-')|lower }}"]'))
+        new DataTable('#datatable-{{ id|default('table')|replace(' ', ' - ')|lower }}', {
-        $('table[id="datatable-{{ id|default('table')|replace(' ', '-')|lower }}"]').DataTable({
             pageLength: {{ per_page }},
-            lengthChange: false,
+            scrollX: true,
-            ordering: true,
+            scrollY: '60vh',
-            stateSave: true
+            scrollCollapse: true,
-        }) #}
-        new DataTable('#datatable-{{ id|default('table')|replace(' ', '-')|lower }}', {
-            pageLength: {{ per_page }},
-            colReorder: true
         })
     })
 </script>
@@ -53,45 +48,3 @@
 <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_table(headers=header, rows=rows, id='table', entry_route=entry_route) }}
-{# { tables.render_pagination(endpoint, page, has_prev, has_next, total_pages, extra_args=extra_args) } #}
 {% 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 %}