From 999649a095286fec898d47354216c7cb6a1ef9d6 Mon Sep 17 00:00:00 2001
From: "DESKTOP-GENO133\\IvanPlex" <ivancheahkf@gmail.com>
Date: Fri, 5 Jan 2024 09:07:28 -0700
Subject: [PATCH] Usability enhancements: placeholders in vehicle and service
 record modals

---
 Views/Vehicle/_ServiceRecordModal.cshtml | 19 +++++++++++--------
 Views/Vehicle/_VehicleModal.cshtml       | 15 ++++++++-------
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/Views/Vehicle/_ServiceRecordModal.cshtml b/Views/Vehicle/_ServiceRecordModal.cshtml
index c40c1bd..e95174f 100644
--- a/Views/Vehicle/_ServiceRecordModal.cshtml
+++ b/Views/Vehicle/_ServiceRecordModal.cshtml
@@ -1,6 +1,9 @@
 @model ServiceRecordInput
+@{
+    var isNew = Model.Id == 0;
+}
 <div class="modal-header">
-    <h5 class="modal-title">@(Model.Id == 0 ? "Add New Service Record" : "Edit Service Record")</h5>
+    <h5 class="modal-title">@(isNew ? "Add New Service Record" : "Edit Service Record")</h5>
     <button type="button" class="btn-close" onclick="hideAddServiceRecordModal()" aria-label="Close"></button>
 </div>
 <div class="modal-body">
@@ -11,15 +14,15 @@
                     <input type="text" id="workAroundInput" style="height:0px; width:0px; display:none;">
                     <label for="serviceRecordDate">Date</label>
                     <div class="input-group">
-                        <input type="text" id="serviceRecordDate" class="form-control" value="@Model.Date">
+                        <input type="text" id="serviceRecordDate" class="form-control" placeholder="Date serviced" value="@Model.Date">
                         <span class="input-group-text"><i class="bi bi-calendar-event"></i></span>
                     </div>
                     <label for="serviceRecordMileage">Odometer</label>
-                    <input type="number" id="serviceRecordMileage" class="form-control" value="@Model.Mileage">
+                    <input type="number" id="serviceRecordMileage" class="form-control" placeholder="Odometer reading when serviced" value="@(isNew ? "" : Model.Mileage)">
                     <label for="serviceRecordDescription">Description</label>
-                    <input type="text" id="serviceRecordDescription" class="form-control" value="@Model.Description">
+                    <input type="text" id="serviceRecordDescription" class="form-control" placeholder="Description of item(s) serviced(i.e. Oil Change)" value="@Model.Description">
                     <label for="serviceRecordCost">Cost</label>
-                    <input type="number" id="serviceRecordCost" class="form-control" value="@Model.Cost">
+                    <input type="number" id="serviceRecordCost" class="form-control" placeholder="Cost of service" value="@(isNew ? "" : Model.Cost)">
                 </div>
                 <div class="col-md-6 col-12">
                     <label for="serviceRecordNotes">Notes(optional)</label>
@@ -50,16 +53,16 @@
     </form>
 </div>
 <div class="modal-footer">
-    @if (Model.Id > 0)
+    @if (!isNew)
     {
         <button type="button" class="btn btn-danger" onclick="deleteServiceRecord(@Model.Id)" style="margin-right:auto;">Delete</button>
     }
     <button type="button" class="btn btn-secondary" onclick="hideAddServiceRecordModal()">Cancel</button>
-    @if (Model.Id == 0)
+    @if (isNew)
     {
         <button type="button" class="btn btn-primary" onclick="saveServiceRecordToVehicle()">Add New Service Record</button>
     }
-    else if (Model.Id > 0)
+    else if (!isNew)
     {
         <button type="button" class="btn btn-primary" onclick="saveServiceRecordToVehicle(true)">Edit Service Record</button>
     }
diff --git a/Views/Vehicle/_VehicleModal.cshtml b/Views/Vehicle/_VehicleModal.cshtml
index 142a506..42f0595 100644
--- a/Views/Vehicle/_VehicleModal.cshtml
+++ b/Views/Vehicle/_VehicleModal.cshtml
@@ -1,24 +1,25 @@
 @model Vehicle
 @{
+    var isNew = Model.Id == 0;
     if (Model.ImageLocation == "/defaults/noimage.png")
     {
         Model.ImageLocation = "";
     }
 }
 <div class="modal-header">
-    <h5 class="modal-title" id="addVehicleModalLabel">@(Model.Id == 0 ? "Add New Vehicle" : "Edit Vehicle")</h5>
+    <h5 class="modal-title" id="addVehicleModalLabel">@(isNew ? "Add New Vehicle" : "Edit Vehicle")</h5>
 </div>
 <div class="modal-body">
     <form class="form-inline">
         <div class="form-group">
             <label for="inputYear">Year</label>
-            <input type="number" id="inputYear" class="form-control" value="@(Model.Year > 0 ? Model.Year : "")">
+            <input type="number" id="inputYear" class="form-control" placeholder="Year(must be after 1900)" value="@(isNew ? "" : Model.Year)">
             <label for="inputMake">Make</label>
-            <input type="text" id="inputMake" class="form-control" value="@Model.Make">
+            <input type="text" id="inputMake" class="form-control" placeholder="Make" value="@Model.Make">
             <label for="inputModel">Model</label>
-            <input type="text" id="inputModel" class="form-control" value="@Model.Model">
+            <input type="text" id="inputModel" class="form-control" placeholder="Model" value="@Model.Model">
             <label for="inputLicensePlate">License Plate</label>
-            <input type="text" id="inputLicensePlate" class="form-control" value="@Model.LicensePlate">
+            <input type="text" id="inputLicensePlate" class="form-control" placeholder="License Plate" value="@Model.LicensePlate">
             @if (!string.IsNullOrWhiteSpace(Model.ImageLocation))
             {
                 <label for="inputImage">Replace picture(optional)</label>
@@ -32,11 +33,11 @@
     </form>
 </div>
 <div class="modal-footer">
-    @if (Model.Id == 0)
+    @if (isNew)
     {
         <button type="button" class="btn btn-secondary" onclick="hideAddVehicleModal()">Cancel</button>
         <button type="button" onclick="saveVehicle(false)" class="btn btn-primary">Add New Vehicle</button>
-    } else if (Model.Id > 0)
+    } else if (!isNew)
     {
         <button type="button" class="btn btn-secondary" onclick="hideEditVehicleModal()">Cancel</button>
         <button type="button" onclick="saveVehicle(true)" class="btn btn-primary">Save Vehicle</button>