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

This commit is contained in:
Yaro Kasear 2025-06-17 09:44:55 -05:00
parent bdd2a43c8b
commit b68c25a05a
8 changed files with 48 additions and 184 deletions

View file

@ -162,8 +162,8 @@ def index():
# Count items per condition
expected_conditions = [
'Deployed', 'Disposed', 'Inoperable', 'Partially Inoperable',
'Removed', 'Unverified', 'Working'
'Deployed','Inoperable', 'Partially Inoperable',
'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(
query=query,
page=page,
users = query.all()
return render_template(
'table.html',
header = user_headers,
rows = [{"id": user.id, "cells": [fn(user) for fn in user_headers.values()]} for user in users],
title = "Users",
headers=user_headers,
row_fn=lambda i: [fn(i) for fn in user_headers.values()],
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_pagination['items']
worklog = worklog_query.order_by(WorkLog.start_time.desc()).all()
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_pagination=worklog_pagination,
worklog_page=worklog_page
worklog_rows=[{"id": log.id, "cells": [fn(log) for fn in filtered_worklog_headers.values()]} for log in worklog]
)
@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(
query=query,
page=page,
return render_template(
'table.html',
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,
row_fn=lambda i: [fn(i) for fn in worklog_headers.values()],
endpoint="main.list_worklog",
entry_route="worklog_entry"
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']],
'pagination': inventory_pagination
'rows': [{"id": item.id, "cells": [fn(item) for fn in inventory_headers.values()]} for item in inventory_results]
},
'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']],
'pagination': user_pagination
'rows': [{"id": user.id, "cells": [fn(user) for fn in user_headers.values()]} for user in user_results]
},
'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']],
'pagination': worklog_pagination
'rows': [{"id": log.id, "cells": [fn(log) for fn in worklog_headers.values()]} for log in worklog_results]
}
}

View file

@ -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 }}"]'))
$('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
scrollX: true,
scrollY: '60vh',
scrollCollapse: 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 %}

View file

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

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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 %}

View file

@ -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 %}