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

This commit is contained in:
Yaro Kasear 2025-06-13 08:50:39 -05:00
parent 684a98b216
commit f4f9f84387
15 changed files with 97 additions and 43 deletions

Binary file not shown.

View file

@ -248,7 +248,7 @@ def list_users():
def user(id):
asset_page = request.args.get("asset_page", default=1, type=int)
worklog_page = request.args.get("worklog_page", default=1, type=int)
users_query = db.session.query(User)
users_query = db.session.query(User).order_by(User.first_name, User.last_name)
users = eager_load_user_relationships(users_query).all()
user = next((u for u in users if u.id == id), None)
rooms_query = db.session.query(Room)
@ -304,3 +304,7 @@ def worklog_entry(id):
item_query = db.session.query(Inventory)
items = eager_load_inventory_relationships(item_query).all()
return render_template("worklog.html", title=f"Work Log #{id}", log=log, users=users, items=items, form_fields=worklog_form_fields)
@main.route("/search")
def search():
return render_template('search.html', title="Database Search")

View file

@ -1,8 +1,6 @@
<!-- templates/worklog.html -->
{% extends "layout.html" %}
{% import "_table_fragment.html" as tables %}
{% block title %}{{ title }}{% endblock %}
{% block content %}

View file

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

View file

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

View file

@ -1,21 +1,13 @@
<!-- templates/index.html -->
{% extends "layout.html" %}
{% import "_table_fragment.html" as tables %}
{% block title %}{{ title }}{% endblock %}
{% block content %}
<h1 class="text-center display-3">Table of Contents</h1>
<div class="row text-center m-5">
<div class="col">
<a class="link-success link-underline-opacity-0" href="{{ url_for('main.inventory_index') }}">Inventory</a>
</div>
<div class="col">
<a class="link-success link-underline-opacity-0" href="{{ url_for('main.list_users') }}">Users</a>
</div>
<div class="col">
<a class="link-success link-underline-opacity-0" href="{{ url_for('main.list_worklog') }}">Work Log</a>
</div>
</div>
{% endblock %}
<h1 class="text-center display-3">Table of Contents</h1>
<div class="row text-center m-5">
{{ links.category_link(endpoint = 'inventory_index', label = 'Inventory', icon_html = icons.inventory) }}
{{ links.category_link(endpoint = 'list_users', label = "Users", icon_html = icons.user) }}
{{ links.category_link(endpoint = 'list_worklog', label = 'Worklog', icon_html = icons.log) }}
</div>
{% endblock %}

View file

@ -1,9 +1,6 @@
<!-- templates/inventory.html -->
{% extends "layout.html" %}
{% import "_breadcrumb_fragment.html" as breadcrumbs %}
{% import "_table_fragment.html" as tables %}
{% block title %}{{ title }}{% endblock %}
{% block content %}

View file

@ -1,9 +1,6 @@
<!-- templates/inventory_index.html -->
{% extends "layout.html" %}
{% import "_breadcrumb_fragment.html" as breadcrumbs %}
{% import "_table_fragment.html" as tables %}
{% block title %}{{ title }}{% endblock %}
{% block content %}

View file

@ -1,3 +1,8 @@
{% import "fragments/_breadcrumb_fragment.html" as breadcrumbs %}
{% import "fragments/_icon_fragment.html" as icons %}
{% import "fragments/_link_fragment.html" as links %}
{% import "fragments/_table_fragment.html" as tables %}
<!-- templates/layout.html -->
<!doctype html>
<html lang="en">

29
templates/search.html Normal file
View file

@ -0,0 +1,29 @@
<!-- templates/user.html -->
{% extends "layout.html" %}
{% block title %}{{ title }}{% endblock %}
{% block content %}
{{ breadcrumbs.breadcrumb_header(
title=title,
) }}
<div class="container">
<h1 class="display-1 text-center">Search Categories</h1>
<div class="row text-center m-5">
<div class="col">
<a href="" class="link-success link-underline-opacity-0 d-flex flex-column justify-content-center">
<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>
Inventory
</a>
</div>
<div class="col">Users</div>
<div class="col">Work Logs</div>
</div>
</div>
{% endblock %}

View file

@ -1,9 +1,6 @@
<!-- templates/table.html -->
{% extends "layout.html" %}
{% import "_breadcrumb_fragment.html" as breadcrumbs %}
{% import "_table_fragment.html" as tables %}
{% block title %}{{ title }}{% endblock %}
{% block content %}

View file

@ -1,31 +1,32 @@
<!-- templates/user.html -->
{% extends "layout.html" %}
{% import "_breadcrumb_fragment.html" as breadcrumbs %}
{% import "_table_fragment.html" as tables %}
{% block title %}{{ title }}{% endblock %}
{% block content %}
{{ breadcrumbs.breadcrumb_header(
title=title,
breadcrumbs=[
{'label': 'Users', 'url': url_for('main.list_users')}
]
) }}
{% if not user.active %}
<div class="alert alert-danger">This user is inactive. You will not be able to make any changes to this record.</div>
{% endif %}
<div class="container">
<form action="POST">
<div class="row">
<div class="col-6">
<label for="lastName" class="form-label">Last Name</label>
<input type="text" class="form-control" id="lastName" placeholder="Doe" value="{{ user.last_name }}">
<input type="text" class="form-control" id="lastName" placeholder="Doe" value="{{ user.last_name }}"{% if not user.active %} disabled readonly{% endif %}>
</div>
<div class="col-6">
<label for="firstName" class="form-label">First Name</label>
<input type="text" class="form-control" id="firstName" placeholder="John" value="{{ user.first_name }}">
<input type="text" class="form-control" id="firstName" placeholder="John" value="{{ user.first_name }}"{% if not user.active %} disabled readonly{% endif %}>
</div>
</div>
@ -47,10 +48,10 @@ breadcrumbs=[
{% endif %}
</label>
<select class="form-select" id="supervisor" name="supervisor"
value="{{ supervisor.id if supervisor else '' }}">
value="{{ supervisor.id if supervisor else '' }}"{% if not user.active %} disabled readonly{% endif %}>
<option>-</option>
{% for supervisor in users %}
<option value="{{ supervisor.id }}"{% if supervisor.id == user.supervisor_id %} selected{% endif %}>
<option value="{{ supervisor.id }}"{% if supervisor.id==user.supervisor_id %} selected{% endif %}>
{{ supervisor.full_name }}</option>
{% endfor %}
</select>
@ -58,35 +59,36 @@ breadcrumbs=[
<div class="col-6">
<label for="location" class="form-label">Location</label>
<select class="form-select" id="location" name="location">
<select class="form-select" id="location" name="location"{% if not user.active %} disabled readonly{% endif %}>
<option>-</option>
{% for location in rooms %}
<option value="{{ location.id }}"{% if location.id == user.location_id %} selected{% endif %}>{{ location.full_name }}</option>
<option value="{{ location.id }}"{% if location.id==user.location_id %} selected{% endif %}>{{
location.full_name }}</option>
{% endfor %}
</select>
</div>
</div>
<div class="row mt-4">
<div class="col-6">
<input type="checkbox" class="form-check-input" id="activeCheck" {% if user.active %}checked{% endif %}>
<input type="checkbox" class="form-check-input" id="activeCheck"{% if user.active %} checked{% endif %}>
<label for="activeCheck" class="form-check-label">Active</label>
</div>
<div class="col-6">
<input type="checkbox" class="form-check-input" id="staffCheck" {% if user.staff %}checked{% endif %}>
<input type="checkbox" class="form-check-input" id="staffCheck"{% if user.staff %} checked{% endif %}{% if not user.active %} disabled readonly{% endif %}>
<label for="staffCheck" class="form-check-label">Staff</label>
</div>
</div>
</form>
<div class="row mt-3">
{% if inventory_rows %}
<div class="col-6">
<div class="col{% if user.worklog_rows %}-6{% endif %}">
<div class="row">
{{ tables.render_table(inventory_headers, inventory_rows, 'inventory_item', title='Assets') }}
</div>
</div>
{% endif %}
{% if worklog_rows %}
<div class="col-6">
<div class="col{% if user.inventory_rows %}-6{% endif %}">
<div class="row">
{{ tables.render_table(worklog_headers, worklog_rows, 'worklog_entry', title='Work Done') }}
</div>

View file

@ -1,9 +1,6 @@
<!-- templates/worklog.html -->
{% extends "layout.html" %}
{% import "_breadcrumb_fragment.html" as breadcrumbs %}
{% import "_table_fragment.html" as tables %}
{% block title %}{{ title }}{% endblock %}
{% block content %}