Added edit functionality for service records

Controllers/VehicleController.cs

@@ -73,5 +73,20 @@ namespace CarCareTracker.Controllers
             var result = _serviceRecordDataAccess.SaveServiceRecordToVehicle(serviceRecord.ToServiceRecord());
             return Json(result);
         }
+        [HttpGet]
+        public IActionResult GetServiceRecordById(int serviceRecordId)
+        {
+            var result = _serviceRecordDataAccess.GetServiceRecordById(serviceRecordId);
+            //convert to Input object.
+            var convertedResult = new ServiceRecordInput { Id = result.Id, 
+                Cost = result.Cost, 
+                Date = result.Date.ToShortDateString(), 
+                Description = result.Description,
+                Mileage = result.Mileage,
+                Notes = result.Notes,
+                VehicleId = result.VehicleId
+            };
+            return Json(convertedResult);
+        }
     }
 }

External/Implementations/ServiceRecordDataAccess.cs

@@ -17,6 +17,14 @@ namespace CarCareTracker.External.Implementations
                 return serviceRecords.ToList() ?? new List<ServiceRecord>();
             };
         }
+        public ServiceRecord GetServiceRecordById(int serviceRecordId)
+        {
+            using (var db = new LiteDatabase(dbName))
+            {
+                var table = db.GetCollection<ServiceRecord>(tableName);
+                return table.FindById(serviceRecordId);
+            };
+        }
         public bool SaveServiceRecordToVehicle(ServiceRecord serviceRecord)
         {
             using (var db = new LiteDatabase(dbName))

External/Interfaces/IServiceRecordDataAccess.cs

@@ -5,6 +5,7 @@ namespace CarCareTracker.External.Interfaces
     public interface IServiceRecordDataAccess
     {
         public List<ServiceRecord> GetServiceRecordsByVehicleId(int vehicleId);
+        public ServiceRecord GetServiceRecordById(int serviceRecordId);
         public bool SaveServiceRecordToVehicle(ServiceRecord serviceRecord);
     }
 }

Views/Vehicle/Index.cshtml

@@ -46,7 +46,7 @@
                     </div>
                 </div>
             </div> 
-            <div class="row" id="ServiceRecordContainer">             
+            <div class="row" id="ServiceRecordContainer" style="overflow-x: auto;">             
             </div>
         </div>
         <div class="tab-pane fade" id="gas-tab-pane" role="tabpanel" tabindex="0">111</div>

Views/Vehicle/_ServiceRecords.cshtml

@@ -4,22 +4,29 @@
     <table class="table">
         <thead class="table-light">
             <tr class="d-flex">
-                <th scope="col" class="col-2">Date</th>
+                <th scope="col" class="col-1">Date</th>
                 <th scope="col" class="col-2">Mileage</th>
                 <th scope="col" class="col-4">Description</th>
                 <th scope="col" class="col-2">Cost</th>
                 <th scope="col" class="col-2">Notes</th>
+                <th scope="col" class="col-1">Actions</th>
             </tr>
         </thead>
         <tbody>
-            @foreach(ServiceRecord serviceRecord in Model)
+            @foreach (ServiceRecord serviceRecord in Model)
             {
                 <tr class="d-flex">
-                    <td class="col-2">@serviceRecord.Date.ToShortDateString()</td>
-                    <td class ="col-2">@serviceRecord.Mileage</td>
+                    <td class="col-1">@serviceRecord.Date.ToShortDateString()</td>
+                    <td class="col-2">@serviceRecord.Mileage</td>
                     <td class="col-4">@serviceRecord.Description</td>
                     <td class="col-2">@serviceRecord.Cost.ToString("C")</td>
-                    <td class="col-2">@serviceRecord.Notes</td>
+                    <td class="col-2 text-truncate" onclick="showServiceRecordNotes('@serviceRecord.Notes')" style="cursor:alias;">@serviceRecord.Notes</td>
+                    <td class="col-1">
+                        <div class="btn-group">
+                            <button onclick="showEditServiceRecordModal(@serviceRecord.Id)" class="btn btn-warning btn-sm"><i class="bi bi-pencil-square"></i></button>
+                            <button onclick="" class="btn btn-danger btn-sm"><i class="bi bi-trash"></i></button>
+                        </div>
+                    </td>
                 </tr>
             }
         </tbody>
@@ -54,7 +61,8 @@
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-secondary" onclick="hideAddServiceRecordModal()">Cancel</button>
-                    <button type="button" class="btn btn-primary" onclick="addServiceRecordToVehicle()">Add New Service Record</button>
+                    <button type="button" id="addServiceRecordButton" class="btn btn-primary" onclick="addServiceRecordToVehicle()">Add New Service Record</button>
+                    <button type="button" id="editServiceRecordButton" class="btn btn-primary" onclick="editServiceRecordToVehicle()" style="display:none;">Edit Service Record</button>
                 </div>
             </form>
         </div>

wwwroot/js/shared.js

@@ -27,4 +27,12 @@ function errorToast(message) {
             toast.onmouseleave = Swal.resumeTimer;
         }
     })
+}
+function genericSwal(title, message) {
+    Swal.fire({
+        showConfirmButton: true,
+        title: title,
+        text: message,
+        icon: "info"
+    })
 }

wwwroot/js/vehicle.js

@@ -49,12 +49,53 @@ function DeleteVehicle(vehicleId) {
         }
     })
 }
+var serviceRecordEditId = 0;
+function showEditServiceRecordModal(serviceRecordId) {
+    //retrieve service record object.
+    $.get(`/Vehicle/GetServiceRecordById?serviceRecordId=${serviceRecordId}`, function (data) {
+        if (data) {
+            //UI elements.
+            $("#addServiceRecordButton").hide();
+            $("#editServiceRecordButton").show();
+            //pre-populate fields.
+            $("#serviceRecordDate").val(data.date);
+            $("#serviceRecordMileage").val(data.mileage);
+            $("#serviceRecordDescription").val(data.description);
+            $("#serviceRecordCost").val(data.cost);
+            $("#serviceRecordNotes").val(data.notes);
+            serviceRecordEditId = serviceRecordId; //set global var.
+            $('#addServiceRecordModal').modal('show');
+        }
+    });
+}
 function showAddServiceRecordModal() {
+    serviceRecordEditId = 0;
+    $("#addServiceRecordButton").show();
+    $("#editServiceRecordButton").hide();
     $('#addServiceRecordModal').modal('show');
 }
 function hideAddServiceRecordModal() {
+    serviceRecordEditId = 0;
     $('#addServiceRecordModal').modal('hide');
 }
+function editServiceRecordToVehicle() {
+    var formValues = getAndValidateServiceRecordValues();
+    //validate
+    if (formValues.hasError) {
+        errorToast("Please check the form data");
+        return;
+    }
+    //save to db.
+    $.post('/Vehicle/SaveServiceRecordToVehicleId', { serviceRecord: formValues }, function (data) {
+        if (data) {
+            successToast("Service Record updated.");
+            hideAddServiceRecordModal();
+            getVehicleServiceRecords(formValues.vehicleId);
+        } else {
+            errorToast("An error has occurred, please try again later.");
+        }
+    })
+}
 function addServiceRecordToVehicle() {
     //get values
     var formValues = getAndValidateServiceRecordValues();
@@ -108,6 +149,7 @@ function getAndValidateServiceRecordValues() {
         $("#serviceRecordCost").removeClass("is-invalid");
     }
     return {
+        id: serviceRecordEditId,
         hasError: hasError,
         vehicleId: vehicleId,
         date: serviceDate,
@@ -116,4 +158,10 @@ function getAndValidateServiceRecordValues() {
         cost: serviceCost,
         notes: serviceNotes
     }
+}
+function showServiceRecordNotes(note) {
+    if (note.trim() == '') {
+        return;
+    }
+    genericSwal("Note", note);
 }