From 9c3d32e5a02237a331f5943805d4dd29ff66336a Mon Sep 17 00:00:00 2001
From: Yaro Kasear <git@kasear.net>
Date: Wed, 11 Jun 2025 15:34:07 -0500
Subject: [PATCH] Enhance inventory and user templates with select inputs for
 better data handling and navigation

---
 templates/inventory.html | 49 ++++++++++++++++++++++++----------------
 templates/user.html      | 48 +++++++++++++++++++++++----------------
 2 files changed, 58 insertions(+), 39 deletions(-)

diff --git a/templates/inventory.html b/templates/inventory.html
index 773bf93..898a3ef 100644
--- a/templates/inventory.html
+++ b/templates/inventory.html
@@ -12,7 +12,7 @@ breadcrumbs=[
 {'label': "Inventory", 'url': url_for('main.list_inventory')}
 ],
 title=title,
-submit_button=False) }}
+submit_button=True) }}
 
 <div class="container">
     <form action="POST">
@@ -47,14 +47,13 @@ submit_button=False) }}
         <div class="row">
             <div class="col-4">
                 <label for="brand" class="form-label">Brand</label>
-                <input list="brandList" id="brand" name="brand" class="form-control" placeholder="-"
-                    value="{{ item.brand.name }}">
-                <input type="hidden" id="brandId">
-                <datalist id="brandList">
+                <select class="form-select" id="brand">
+                    <option>-</option>
                     {% for brand in brands %}
-                    <option data-id="{{ brand.id }}" value="{{ brand.name }}"></option>
+                    <option value="{{ brand.id }}" {% if brand.id==item.brand_id %} selected{% endif %}>{{ brand.name }}
+                    </option>
                     {% endfor %}
-                </datalist>
+                </select>
             </div>
             <div class="col-4">
                 <label for="model" class="form-label">Model</label>
@@ -68,26 +67,36 @@ submit_button=False) }}
         </div>
         <div class="row">
             <div class="col-4">
-                <label for="owner" class="form-label">Contact</label>
-                <input list="userList" id="owner" class="form-control" name="owner" placeholder="-"
-                    value="{{ item.owner.full_name }}" data-datalist-bind="#userList" data-hidden-target="#userId">
-                <input type="hidden" id="userId">
-                <datalist id="userList">
+                <label for="owner" class="form-label">
+                    Contact
+                    <a href="{{ url_for('main.user', id=item.owner_id) }}"
+                        class="link-success link-underline-opacity-0">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor"
+                            class="bi bi-box-arrow-up-right" viewBox="0 0 16 16">
+                            <path fill-rule="evenodd"
+                                d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5" />
+                            <path fill-rule="evenodd"
+                                d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z" />
+                        </svg>
+                    </a>
+                </label>
+                <select class="form-select" id="userList">
+                    <option>-</option>
                     {% for user in users %}
-                    <option data-id="{{ user.id }}" value="{{ user.full_name }}"></option>
+                    <option value="{{ user.id }}" {% if user.id==item.owner_id %} selected{% endif %}>{{ user.full_name
+                        }}</option>
                     {% endfor %}
-                </datalist>
+                </select>
             </div>
             <div class="col-4">
                 <label for="location" class="form-label">Location</label>
-                <input list="roomList" id="location" class="form-control" name="location" placeholder="-"
-                    value="{{ item.location.full_name }}" data-datalist-bind="#roomList" data-hidden-target="#roomId">
-                <input type="hidden" id="roomId">
-                <datalist id="roomList">
+                <select class="form-select" id="room">
+                    <option>-</option>
                     {% for room in rooms %}
-                    <option data-id="{{ room.id }}" value="{{ room.full_name }}"></option>
+                    <option value="{{ room.id }}" {% if room.id==item.location_id %} selected{% endif %}>{{
+                        room.full_name }}</option>
                     {% endfor %}
-                </datalist>
+                </select>
             </div>
             <div class="col-2">
                 <label for="condition" class="form-label">Condition</label>
diff --git a/templates/user.html b/templates/user.html
index 30af060..ce1edcc 100644
--- a/templates/user.html
+++ b/templates/user.html
@@ -9,10 +9,10 @@
 {% block content %}
 
 {{ breadcrumbs.breadcrumb_header(
-    title=title,
-    breadcrumbs=[
-    {'label': 'Users', 'url': url_for('main.list_users')}
-    ]
+title=title,
+breadcrumbs=[
+{'label': 'Users', 'url': url_for('main.list_users')}
+]
 ) }}
 
 <div class="container">
@@ -31,29 +31,39 @@
 
         <div class="row mt-2">
             <div class="col-6">
-                <label for="supervisor" class="form-label">Supervisor</label>
-                <input list="supervisorList" id="supervisor" name="supervisorName" class="form-control"
-                    value="{{ user.supervisor.full_name }}" data-datalist-bind="#supervisorList"
-                    data-hidden-target="#supervisorId">
-                <input type="hidden" id="supervisorId">
-                <datalist id="supervisorList">
+                <label for="supervisor" class="form-label">
+                    Supervisor
+                    {% if user.supervisor %}
+                    <a href="{{ url_for('main.user', id=user.supervisor_id) }}"
+                        class="link-success link-underline-opacity-0">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor"
+                            class="bi bi-box-arrow-up-right" viewBox="0 0 16 16">
+                            <path fill-rule="evenodd"
+                                d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5" />
+                            <path fill-rule="evenodd"
+                                d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z" />
+                        </svg>
+                    </a>
+                    {% endif %}
+                </label>
+                <select class="form-select" id="supervisor" name="supervisor"
+                    value="{{ supervisor.id if supervisor else '' }}">
+                    <option>-</option>
                     {% for supervisor in users %}
-                    <option data-id="{{ supervisor.id }}" value="{{ supervisor.full_name }}"></option>
+                    <option value="{{ supervisor.id }}"{% if supervisor.id == user.supervisor_id %} selected{% endif %}>
+                        {{ supervisor.full_name }}</option>
                     {% endfor %}
-                </datalist>
+                </select>
             </div>
 
             <div class="col-6">
                 <label for="location" class="form-label">Location</label>
-                <input list="locationList" id="location" name="locationName" class="form-control"
-                    value="{{ user.location.full_name }}" data-datalist-bind="#locationList"
-                    data-hidden-target="#locationId">
-                <input type="hidden" id="locationId">
-                <datalist id="locationList">
+                <select class="form-select" id="location" name="location">
+                    <option>-</option>
                     {% for location in rooms %}
-                    <option data-id="{{ location.id }}" value="{{ location.full_name }}"></option>
+                    <option value="{{ location.id }}"{% if location.id == user.location_id %} selected{% endif %}>{{ location.full_name }}</option>
                     {% endfor %}
-                </datalist>
+                </select>
             </div>
         </div>
         <div class="row mt-4">