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

routes.py

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

templates/form.html

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

templates/fragments/_icon_fragment.html

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

templates/fragments/_link_fragment.html

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

templates/index.html

@@ -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>
+<h1 class="text-center display-3">Table of Contents</h1>
-    <div class="row text-center m-5">
+<div class="row text-center m-5">
-        <div class="col">
+    {{ links.category_link(endpoint = 'inventory_index', label = 'Inventory', icon_html = icons.inventory) }}
-            <a class="link-success link-underline-opacity-0" href="{{ url_for('main.inventory_index') }}">Inventory</a>
+    {{ links.category_link(endpoint = 'list_users', label = "Users", icon_html = icons.user) }}
-        </div>
+    {{ links.category_link(endpoint = 'list_worklog', label = 'Worklog', icon_html = icons.log) }}
-        <div class="col">
+</div>
-           <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 %}

templates/inventory.html

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

templates/inventory_index.html

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

templates/layout.html

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

templates/search.html

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

templates/table.html

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

templates/user.html

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

templates/worklog.html

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