Refactor worklog handling and table rendering in templates for improved clarity and performance

templates/fragments/_table_fragment.html

@@ -1,8 +1,7 @@
-{% macro render_table(headers, rows, entry_route=None, title=None) %}
+{% macro render_table(headers, rows, id, entry_route=None, title=None, per_page=15) %}
 {% if rows %}
 <div class="table-responsive">
-    <table
-        id="datatable-{{ title|default('table')|replace(' ', '-')|lower }}"
+    <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>
@@ -34,13 +33,29 @@
         </tbody>
     </table>
 </div>
+
+<script>
+    document.addEventListener("DOMContentLoaded", function () {
+        {# console.log($('table[id="datatable-{{ id|default('table')|replace(' ', '-')|lower }}"]'))
+        $('table[id="datatable-{{ id|default('table')|replace(' ', '-')|lower }}"]').DataTable({
+            pageLength: {{ per_page }},
+            lengthChange: false,
+            ordering: true,
+            stateSave: true
+        }) #}
+        new DataTable('#datatable-{{ id|default('table')|replace(' ', '-')|lower }}', {
+            pageLength: {{ per_page }},
+            colReorder: 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 prev_args = extra_args.copy() %}
 {% set next_args = extra_args.copy() %}
 {% set first_args = extra_args.copy() %}
 {% set last_args = extra_args.copy() %}
@@ -78,5 +93,5 @@
             class="btn btn-primary{% if not has_next %} disabled{% endif %}">Last &raquo;</a>
     </div>
 </div>
-{% endif %}
+{% endif % #}
 {% endmacro %}

templates/index.html

@@ -8,7 +8,7 @@
     <h1 class="display-4">Welcome to Inventory Manager</h1>
     <p class="lead">Find out about all of your assets.</p>
     <div class="row">
-        {% if stale_pagination['items'] %}
+        {% if stale_worklog_rows %}
         <div class="col">
             <div class="card">
                 <div class="card-body">
@@ -16,17 +16,11 @@
                     <h6 class="card-subtitle mb-2 text-body-secondary">You have {{ stale_count }} worklogs
                         that need attention!</h6>
                     {{ tables.render_table(
-                    stale_worklog_headers,
-                    stale_worklog_rows,
-                    'worklog_entry'
-                    )}}
-                    {{ tables.render_pagination(
-                    'index',
-                    stale_pagination['page'],
-                    stale_pagination['has_prev'],
-                    stale_pagination['has_next'],
-                    stale_pagination['total_pages'],
-                    page_variable='stale_worklog_page'
+                        headers = stale_worklog_headers,
+                        rows = stale_worklog_rows,
+                        id = 'Stale Worklog',
+                        entry_route = 'worklog_entry',
+                        per_page = 3
                     )}}
                 </div>
             </div>

templates/inventory.html

@@ -124,18 +124,7 @@ submit_button=True) }}
             </div>
             {% if worklog %}
             <div class="col-6">
-                {{ tables.render_table(worklog_headers, worklog_rows, 'worklog_entry', 'Work Log') }}
-                {% if worklog_pagination['total_pages'] > 1 %}
-                {{ 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.inventory_item',
-                page_variable='worklog_page',
-                extra_args={'id': item.id, 'worklog_page': worklog_page, 'filter_by': filter_by, 'id': id}
-                ) }}
-                {% endif %}
+                {{ tables.render_table(headers=worklog_headers, rows=worklog_rows, id='worklog', entry_route='worklog_entry', title='Work Log') }}
             </div>
             {% endif %}
         </div>

templates/layout.html

@@ -18,9 +18,7 @@
         rel="stylesheet" integrity="sha384-gdnBcErvPbrURVoR9w3NhVMliw+ZmcTCmq+64xj2Ksx21nRJFX3qW0zFvBotL5rm"
         crossorigin="anonymous">
     <style>
-        {
-            % block style %
-        }
+        {% block style %}
 
         .sticky-top {
             position: sticky;
@@ -47,9 +45,7 @@
             background-color: white;
         }
 
-            {
-            % endblock %
-        }
+            {% endblock %}
     </style>
 </head>
 
@@ -96,15 +92,6 @@
         searchInput.addEventListener('input', () => {
             searchButton.disabled = searchInput.value.trim() === '';
         });
-
-        document.addEventListener("DOMContentLoaded", function () {
-            $('table[id^="datatable-"]').DataTable({
-                pageLength: 25,
-                lengthChange: false,
-                ordering: true,
-                stateSave: true
-            })
-        })
         {% block script %} {% endblock %}
     </script>
 </body>

templates/table.html

@@ -10,6 +10,6 @@
     breadcrumbs=breadcrumb
 ) }}
 
-{{ tables.render_table(header, rows, entry_route) }}
+{{ 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) } #}
 {% endblock %}