Layout changes

src/app/item.rs

@@ -50,7 +50,7 @@ pub async fn item(State(db): State<SqlitePool>,
                   Path(id): Path<i64>,
                   user: SessionUser
 ) -> Result<Response, AppError> {
-    let mut item: ItemDisplayItem = inventory_item_get_by_id_with_unit(&db, id).await?.into();
+    let item: ItemDisplayItem = inventory_item_get_by_id_with_unit(&db, id).await?.into();
 
     Ok(ItemTemplate { item_id: id, item }.into_response())
 }
@@ -67,16 +67,13 @@ pub async fn item_count(State(db): State<SqlitePool>, Path(id): Path<i64>) -> Re
 #[template(path = "item-stats-fragment.html")]
 struct ItemStatsTemplate {
     pub item_id: i64,
-    pub amount: String,
-    pub unit_abbreviation: String,
+    pub item: ItemDisplayItem,
     pub value: String,
 }
 pub async fn item_stats(State(db): State<SqlitePool>, Path(id): Path<i64>) -> Result<Response, AppError> {
     //TODO This is pretty chatty with the database. Might could cut down the
     // number of queries
-    let amount = sum_all_adjustments_for_item(&db, id).await?.to_string();
-
-    let unit_abbreviation = inventory_item_get_unit_abbreviation(&db, id).await?;
+    let item: ItemDisplayItem = inventory_item_get_by_id_with_unit(&db, id).await?.into();
 
     let value = get_item_adjustment_valuation_weighted_mean(&db, id)
         .await?
@@ -86,5 +83,5 @@ pub async fn item_stats(State(db): State<SqlitePool>, Path(id): Path<i64>) -> Re
 
     let value = int_cents_to_dollars_string(value);
 
-    Ok(ItemStatsTemplate { item_id: id, amount, unit_abbreviation, value }.into_response())
+    Ok(ItemStatsTemplate { item_id: id, item, value }.into_response())
 }

templates/adjustment-new-stock-form.html

@@ -1,30 +1,43 @@
 
 <form hx-post="/item/{{item_id}}/adjustment/new-stock" hx-target="this" hx-swap="outerHTML" >
-    <div class="mb-3">
-        <label for="amount" class="form-label">Amount</label>
-        <input id="amount" class="form-control" name="amount" type="number" required
-               {% if !amount_error.is_empty() -%}
-               aria-invalid="true"
-               aria-describedby="invalid-amount"
-               {% endif -%}
-        />
-        {% if !amount_error.is_empty() -%}
-        <small id="invalid-amount" class="invalid-feedback">{{ amount_error }}</small>
-        {% endif -%}
-    </div>
-    <div class="mb-3">
-        <label for="price" class="form-label">Price</label>
-        <input id="price" class="form-control" name="price" required
-               {% if !price_error.is_empty() -%}
-               aria-invalid="true"
-               aria-describedby="invalid-price"
-               {% endif -%}
-        />
-        {% if !price_error.is_empty() -%}
-        <small id="invalid-price" class="invalid-feedback">{{ price_error }}</small>
-        {% endif -%}
-    </div>
-    <div class="mb-3">
-        <button class="btn btn-primary">Add Stock</button>
+    <div class="row">
+        <div class="col">
+            <input type="number"
+                   id="amount"
+                   name="amount"
+                   step="0.01"
+                   class="form-control"
+                   placeholder="Amount"
+                   aria-label="amount"
+                   required
+                   {% if !amount_error.is_empty() -%}
+                   aria-invalid="true"
+                   aria-describedby="invalid-amount"
+                   {% endif -%}
+            />
+            {% if !amount_error.is_empty() -%}
+            <small id="invalid-amount" class="invalid-feedback">{{ amount_error }}</small>
+            {% endif -%}
+        </div>
+        <div class="col">
+            <input type="text"
+                   id="price"
+                   name="price"
+                   placeholder="Price"
+                   class="form-control"
+                   aria-label="price"
+                   required
+                   {% if !price_error.is_empty() -%}
+                   aria-invalid="true"
+                   aria-describedby="invalid-price"
+                   {% endif -%}
+            />
+            {% if !price_error.is_empty() -%}
+            <small id="invalid-price" class="invalid-feedback">{{ price_error }}</small>
+            {% endif -%}
+        </div>
+        <div class="col">
+            <button class="btn btn-primary">Add</button>
+        </div>
     </div>
 </form>

templates/adjustment-sale-form.html

@@ -1,18 +1,27 @@
 
 <form hx-post="/item/{{item_id}}/adjustment/sale" hx-target="this" hx-swap="outerHTML" >
-    <div class="mb-3">
-        <label for="amount" class="form-label">Amount</label>
-        <input id="amount" class="form-control" name="amount" type="number" step="0.01" required
-           {% if !amount_error.is_empty() -%}
-               aria-invalid="true"
-               aria-describedby="invalid-amount"
-           {% endif -%}
-        />
-        {% if !amount_error.is_empty() -%}
+    <div class="row">
+        <div class="col">
+            <!--<label for="amount" class="form-label">Amount</label>-->
+            <input type="number"
+                   id="amount"
+                   name="amount"
+                   step="0.01"
+                   class="form-control"
+                   placeholder="Amount"
+                   aria-label="amount"
+                   required
+                   {% if !amount_error.is_empty() -%}
+                   aria-invalid="true"
+                   aria-describedby="invalid-amount"
+                   {% endif -%}
+            />
+            {% if !amount_error.is_empty() -%}
             <small id="invalid-amount" class="invalid-feedback">{{ amount_error }}</small>
-        {% endif -%}
-    </div>
-    <div class="mb-3">
-        <button class="btn btn-primary">Record Sale</button>
+            {% endif -%}
+        </div>
+        <div class="col">
+            <button class="btn btn-primary">Record Sale</button>
+        </div>
     </div>
 </form>

templates/item-stats-fragment.html

@@ -1,6 +1,36 @@
 
-<div hx-get="/item/{{item_id}}/stats" hx-trigger="new-adjustment from:body" hx-swap="outerHTML" class="row">
-    <div class="col">Amount in stock: {{amount}} {{unit_abbreviation}}</div>
-    <div class="col">Total Value: {{value}}</div>
-</div>
+<section hx-get="/item/{{item_id}}/stats" hx-trigger="new-adjustment from:body" hx-swap="outerHTML" class="mb-4">
+    <div class="row">
+        <div class="col-md-3">
+            <div class="card text-center mb-1">
+                <div class="card-header">
+                    <p class="text-bolder text-uppercase">Stock</p>
+                </div>
+                <div class="card-body">
+                    <p class="display-6">{{item.amount}} {{item.display_unit_short}}</p>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-3">
+            <div class="card text-center mb-1">
+                <div class="card-header">
+                    <p class="text-bolder text-uppercase">Reorder Point</p>
+                </div>
+                <div class="card-body">
+                    <p class="display-6">{{item.reorder_point}} {{item.display_unit_short}}</p>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-3">
+            <div class="card text-center mb-1">
+                <div class="card-header">
+                    <p class="text-bolder text-uppercase">Value</p>
+                </div>
+                <div class="card-body">
+                    <p class="display-6">{{value}}</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
 

templates/item.html

@@ -4,26 +4,37 @@
 
 {% block content %}
 
+<div class="container mb-5">
 <h2>{{item.name}} {% if !item.active %}<span class="badge text-bg-danger">Inactive</span> {% endif %}</h2>
+</div>
 
 <section class="container">
     <div hx-get="/item/{{item_id}}/stats" hx-trigger="load" hx-swap="outerHTML">
     </div>
-
-    <div class="grid">
-        <article>Reorder at: {{item.reorder_point}}</article>
-    </div>
 </section>
 
 {% if item.active %}
 <section class="container-fluid">
-    <div class="row">
-        <div class="col-sm-6">
-            <div hx-get="/item/{{item_id}}/adjustment/sale" hx-trigger="load" hx-swap="outerHTML">
+
+    <div x-data="{ open: false }" class="mb-3">
+        <div class="d-flex justify-content-start">
+            <div class="me-3">
+                <button class="btn btn-primary" @click="open = ! open">Sale</button>
+            </div>
+            <div x-show="open" @click.outside="open = false">
+                <div hx-get="/item/{{item_id}}/adjustment/sale" hx-trigger="load" hx-swap="outerHTML"></div>
             </div>
         </div>
-        <div class="col-sm-6">
-            <div hx-get="/item/{{item_id}}/adjustment/new-stock" hx-trigger="load" hx-swap="outerHTML">
+    </div>
+
+    <div x-data="{ open: false }" class="mb-3">
+        <div class="d-flex justify-content-start">
+            <div class="me-3">
+                <button class="btn btn-primary" @click="open = ! open">Stock</button>
+            </div>
+            <div x-show="open" @click.outside="open = false">
+                <div hx-get="/item/{{item_id}}/adjustment/new-stock" hx-trigger="load" hx-swap="outerHTML">
+                </div>
             </div>
         </div>
     </div>