frontend logic for collision data.

Controllers/VehicleController.cs

@@ -238,11 +238,11 @@ namespace CarCareTracker.Controllers
             return PartialView("_CollisionRecords", result);
         }
         [HttpPost]
-        public IActionResult SaveCollisionRecordToVehicleId(CollisionRecordInput serviceRecord)
+        public IActionResult SaveCollisionRecordToVehicleId(CollisionRecordInput collisionRecord)
         {
             //move files from temp.
-            serviceRecord.Files = serviceRecord.Files.Select(x => { return new UploadedFiles { Name = x.Name, Location = _fileHelper.MoveFileFromTemp(x.Location, "documents/") }; }).ToList();
-            var result = _collisionRecordDataAccess.SaveCollisionRecordToVehicle(serviceRecord.ToCollisionRecord());
+            collisionRecord.Files = collisionRecord.Files.Select(x => { return new UploadedFiles { Name = x.Name, Location = _fileHelper.MoveFileFromTemp(x.Location, "documents/") }; }).ToList();
+            var result = _collisionRecordDataAccess.SaveCollisionRecordToVehicle(collisionRecord.ToCollisionRecord());
             return Json(result);
         }
         [HttpGet]
@@ -251,9 +251,9 @@ namespace CarCareTracker.Controllers
             return PartialView("_CollisionRecordModal", new CollisionRecordInput());
         }
         [HttpGet]
-        public IActionResult GetCollisionRecordForEditById(int serviceRecordId)
+        public IActionResult GetCollisionRecordForEditById(int collisionRecordId)
         {
-            var result = _collisionRecordDataAccess.GetCollisionRecordById(serviceRecordId);
+            var result = _collisionRecordDataAccess.GetCollisionRecordById(collisionRecordId);
             //convert to Input object.
             var convertedResult = new CollisionRecordInput
             {
@@ -269,9 +269,9 @@ namespace CarCareTracker.Controllers
             return PartialView("_CollisionRecordModal", convertedResult);
         }
         [HttpPost]
-        public IActionResult DeleteCollisionRecordById(int serviceRecordId)
+        public IActionResult DeleteCollisionRecordById(int collisionRecordId)
         {
-            var result = _collisionRecordDataAccess.DeleteCollisionRecordById(serviceRecordId);
+            var result = _collisionRecordDataAccess.DeleteCollisionRecordById(collisionRecordId);
             return Json(result);
         }
         #endregion

Views/Vehicle/Index.cshtml

@@ -6,6 +6,7 @@
     <script src="~/js/vehicle.js" asp-append-version="true"></script>
     <script src="~/js/servicerecord.js" asp-append-version="true"></script>
     <script src="~/js/gasrecord.js" asp-append-version="true"></script>
+    <script src="~/js/collisionrecord.js" asp-append-version="true"></script>
 }
 <div class="container">
     <div class="row">
@@ -60,7 +61,7 @@
                 </div>
             </div>
         </div>
-        <div class="tab-pane fade" id="accident-tab-pane" role="tabpanel" tabindex="0">333</div>
+        <div class="tab-pane fade" id="accident-tab-pane" role="tabpanel" tabindex="0"></div>
     </div>
 </div>
 <div class="modal fade" id="editVehicleModal" tabindex="-1" role="dialog">

Views/Vehicle/_CollisionRecordModal.cshtml

@@ -0,0 +1,79 @@
+@model CollisionRecordInput
+<div class="modal-header">
+    <h5 class="modal-title">@(Model.Id == 0 ? "Add New Collision Record" : "Edit Collision Record")</h5>
+    <button type="button" class="btn-close" onclick="hideAddCollisionRecordModal()" aria-label="Close"></button>
+</div>
+<div class="modal-body">
+    <form>
+        <div class="form-group">
+            <div class="row">
+                <div class="col-md-6 col-12">
+                    <input type="text" id="workAroundInput" style="height:0px; width:0px; display:none;">
+                    <label for="collisionRecordDate">Date</label>
+                    <div class="input-group">
+                        <input type="text" id="collisionRecordDate" class="form-control" value="@Model.Date">
+                        <span class="input-group-text"><i class="bi bi-calendar-event"></i></span>
+                    </div>
+                    <label for="collisionRecordMileage">Mileage</label>
+                    <input type="number" id="collisionRecordMileage" class="form-control" value="@Model.Mileage">
+                    <label for="collisionRecordDescription">Description</label>
+                    <input type="text" id="collisionRecordDescription" class="form-control" value="@Model.Description">
+                    <label for="collisionRecordCost">Cost</label>
+                    <input type="number" id="collisionRecordCost" class="form-control" value="@Model.Cost">
+                </div>
+                <div class="col-md-6 col-12">
+                    <label for="collisionRecordNotes">Notes(optional)</label>
+                    <textarea id="collisionRecordNotes" class="form-control" rows="5">@Model.Notes</textarea>
+                    @if (Model.Files.Any())
+                    {
+                        <div>
+                            <label>Uploaded Documents</label>
+                            @foreach (UploadedFiles filesUploaded in Model.Files)
+                            {
+                                <div class="d-flex justify-content-between">
+                                    <a type="button" class="btn btn-link" href="@filesUploaded.Location" target="_blank">@filesUploaded.Name</a>
+                                    <button type="button" class="btn btn-sm btn-outline-danger" onclick="deleteCollisionRecordFile('@filesUploaded.Location', this)"><i class="bi bi-trash"></i></button>
+                                </div>
+                            }
+                            <label for="collisionRecordFiles">Upload more documents</label>
+                            <input onChange="uploadVehicleFilesAsync(this)" type="file" multiple accept=".png,.jpg,.jpeg,.pdf,.xls,.xlsx,.docx" class="form-control-file" id="collisionRecordFiles">
+                        </div>
+                    }
+                    else
+                    {
+                        <label for="collisionRecordFiles">Upload documents(optional)</label>
+                        <input onChange="uploadVehicleFilesAsync(this)" type="file" multiple accept=".png,.jpg,.jpeg,.pdf,.xls,.xlsx,.docx" class="form-control-file" id="collisionRecordFiles">
+                    }
+                </div>
+            </div>
+        </div>
+    </form>
+</div>
+<div class="modal-footer">
+    @if (Model.Id > 0)
+    {
+        <button type="button" class="btn btn-danger" onclick="deleteCollisionRecord(@Model.Id)" style="margin-right:auto;">Delete</button>
+    }
+    <button type="button" class="btn btn-secondary" onclick="hideAddCollisionRecordModal()">Cancel</button>
+    @if (Model.Id == 0)
+    {
+        <button type="button" class="btn btn-primary" onclick="saveCollisionRecordToVehicle()">Add New Collision Record</button>
+    }
+    else if (Model.Id > 0)
+    {
+        <button type="button" class="btn btn-primary" onclick="saveCollisionRecordToVehicle(true)">Edit Collision Record</button>
+    }
+</div>
+<script>
+    var uploadedFiles = [];
+    getUploadedFilesFromModel();
+    function getUploadedFilesFromModel() {
+    @foreach (UploadedFiles filesUploaded in Model.Files)
+    {
+        @:uploadedFiles.push({ name: "@filesUploaded.Name", location: "@filesUploaded.Location" });
+    }
+        }
+    function getCollisionRecordModelData() {
+        return { id: @Model.Id}
+    }
+</script>

Views/Vehicle/_CollisionRecords.cshtml

@@ -0,0 +1,47 @@
+@model List<CollisionRecord>
+<div class="row">
+    <div class="d-flex justify-content-between">
+        <div class="d-flex align-items-center flex-wrap">
+            <span class="ms-2 badge bg-success">@($"# of Collision Records: {Model.Count()}")</span>
+            <span class="ms-2 badge bg-primary">@($"Total: {Model.Sum(x => x.Cost).ToString("C")}")</span>
+        </div>
+        <div>
+            <button onclick="showAddCollisionRecordModal()" class="btn btn-primary btn-md mt-1 mb-1"><i class="bi bi-pencil-square me-2"></i>Add Collision Record</button>
+        </div>
+    </div>
+</div>
+<div class="row vehicleDetailTabContainer">
+    <div class="col-12">
+        <table class="table table-hover">
+            <thead>
+                <tr class="d-flex">
+                    <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-3">Notes</th>
+                </tr>
+            </thead>
+            <tbody>
+                @foreach (CollisionRecord collisionRecord in Model)
+                {
+                    <tr class="d-flex" style="cursor:pointer;" onclick="showEditCollisionRecordModal(@collisionRecord.Id)">
+                        <td class="col-1">@collisionRecord.Date.ToShortDateString()</td>
+                        <td class="col-2">@collisionRecord.Mileage</td>
+                        <td class="col-4">@collisionRecord.Description</td>
+                        <td class="col-2">@collisionRecord.Cost.ToString("C")</td>
+                        <td class="col-3 text-truncate">@collisionRecord.Notes</td>
+                    </tr>
+                }
+            </tbody>
+        </table>
+    </div>
+</div>
+
+
+<div class="modal fade" id="collisionRecordModal" tabindex="-1" role="dialog" aria-hidden="true">
+    <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content" id="collisionRecordModalContent">
+        </div>
+    </div>
+</div>

Views/Vehicle/_ServiceRecords.cshtml

@@ -2,7 +2,7 @@
 <div class="row">
     <div class="d-flex justify-content-between">
         <div class="d-flex align-items-center flex-wrap">
-            <span class="badge bg-success">@($"# of Service Records: {Model.Count()}")</span>
+            <span class="ms-2 badge bg-success">@($"# of Service Records: {Model.Count()}")</span>
             <span class="ms-2 badge bg-primary">@($"Total: {Model.Sum(x => x.Cost).ToString("C")}")</span>
         </div>
         <div>

wwwroot/js/collisionrecord.js

@@ -0,0 +1,121 @@
+function showAddCollisionRecordModal() {
+    $.get('/Vehicle/GetAddCollisionRecordPartialView', function (data) {
+        if (data) {
+            $("#collisionRecordModalContent").html(data);
+            //initiate datepicker
+            $('#collisionRecordDate').datepicker({
+                endDate: "+0d"
+            });
+            $('#collisionRecordModal').modal('show');
+        }
+    });
+}
+function showEditCollisionRecordModal(collisionRecordId) {
+    $.get(`/Vehicle/GetCollisionRecordForEditById?collisionRecordId=${collisionRecordId}`, function (data) {
+        if (data) {
+            $("#collisionRecordModalContent").html(data);
+            //initiate datepicker
+            $('#collisionRecordDate').datepicker({
+                endDate: "+0d"
+            });
+            $('#collisionRecordModal').modal('show');
+        }
+    });
+}
+function hideAddCollisionRecordModal() {
+    $('#collisionRecordModal').modal('hide');
+}
+function deleteCollisionRecord(collisionRecordId) {
+    $("#workAroundInput").show();
+    Swal.fire({
+        title: "Confirm Deletion?",
+        text: "Deleted Collision Records cannot be restored.",
+        showCancelButton: true,
+        confirmButtonText: "Delete",
+        confirmButtonColor: "#dc3545"
+    }).then((result) => {
+        if (result.isConfirmed) {
+            $.post(`/Vehicle/DeleteCollisionRecordById?collisionRecordId=${collisionRecordId}`, function (data) {
+                if (data) {
+                    hideAddCollisionRecordModal();
+                    successToast("Collision Record Deleted");
+                    var vehicleId = GetVehicleId().vehicleId;
+                    getVehicleCollisionRecords(vehicleId);
+                } else {
+                    errorToast("An error has occurred, please try again later.");
+                }
+            });
+        } else {
+            $("#workAroundInput").hide();
+        }
+    });
+}
+function saveCollisionRecordToVehicle(isEdit) {
+    //get values
+    var formValues = getAndValidateCollisionRecordValues();
+    //validate
+    if (formValues.hasError) {
+        errorToast("Please check the form data");
+        return;
+    }
+    //save to db.
+    $.post('/Vehicle/SaveCollisionRecordToVehicleId', { collisionRecord: formValues }, function (data) {
+        if (data) {
+            successToast(isEdit ? "Collision Record Updated" : "Collision Record Added.");
+            hideAddCollisionRecordModal();
+            getVehicleCollisionRecords(formValues.vehicleId);
+        } else {
+            errorToast("An error has occurred, please try again later.");
+        }
+    })
+}
+function getAndValidateCollisionRecordValues() {
+    var collisionDate = $("#collisionRecordDate").val();
+    var collisionMileage = $("#collisionRecordMileage").val();
+    var collisionDescription = $("#collisionRecordDescription").val();
+    var collisionCost = $("#collisionRecordCost").val();
+    var collisionNotes = $("#collisionRecordNotes").val();
+    var vehicleId = GetVehicleId().vehicleId;
+    var collisionRecordId = getCollisionRecordModelData().id;
+    //validation
+    var hasError = false;
+    if (collisionDate.trim() == '') { //eliminates whitespace.
+        hasError = true;
+        $("#collisionRecordDate").addClass("is-invalid");
+    } else {
+        $("#collisionRecordDate").removeClass("is-invalid");
+    }
+    if (collisionMileage.trim() == '' || parseInt(collisionMileage) < 0) {
+        hasError = true;
+        $("#collisionRecordMileage").addClass("is-invalid");
+    } else {
+        $("#collisionRecordMileage").removeClass("is-invalid");
+    }
+    if (collisionDescription.trim() == '') {
+        hasError = true;
+        $("#collisionRecordDescription").addClass("is-invalid");
+    } else {
+        $("#collisionRecordDescription").removeClass("is-invalid");
+    }
+    if (collisionCost.trim() == '') {
+        hasError = true;
+        $("#collisionRecordCost").addClass("is-invalid");
+    } else {
+        $("#collisionRecordCost").removeClass("is-invalid");
+    }
+    return {
+        id: collisionRecordId,
+        hasError: hasError,
+        vehicleId: vehicleId,
+        date: collisionDate,
+        mileage: collisionMileage,
+        description: collisionDescription,
+        cost: collisionCost,
+        notes: collisionNotes,
+        files: uploadedFiles
+    }
+}
+function deleteCollisionRecordFile(fileLocation, event) {
+    event.parentElement.remove();
+    uploadedFiles = uploadedFiles.filter(x => x.location != fileLocation);
+}

wwwroot/js/servicerecord.js

@@ -38,7 +38,7 @@ function deleteServiceRecord(serviceRecordId) {
             $.post(`/Vehicle/DeleteServiceRecordById?serviceRecordId=${serviceRecordId}`, function (data) {
                 if (data) {
                     hideAddServiceRecordModal();
-                    successToast("Service Record deleted");
+                    successToast("Service Record Deleted");
                     var vehicleId = GetVehicleId().vehicleId;
                     getVehicleServiceRecords(vehicleId);
                 } else {

wwwroot/js/vehicle.js

@@ -25,11 +25,20 @@ $(document).ready(function () {
             case "gas-tab":
                 getVehicleGasRecords(vehicleId);
                 break;
+            case "accident-tab":
+                getVehicleCollisionRecords(vehicleId);
+                break;
         }
         switch (e.relatedTarget.id) { //clear out previous tabs with grids in them to help with performance
             case "servicerecord-tab":
                 $("#servicerecord-tab-pane").html("");
                 break;
+            case "gas-tab":
+                $("#gas-tab-pane").html("");
+                break;
+            case "accident-tab":
+                $("#accident-tab-pane").html("");
+                break;
         }
     });
     getVehicleServiceRecords(vehicleId);
@@ -49,6 +58,20 @@ function getVehicleServiceRecords(vehicleId) {
         }
     })
 }
+function getVehicleGasRecords(vehicleId) {
+    $.get(`/Vehicle/GetGasRecordsByVehicleId?vehicleId=${vehicleId}`, function (data) {
+        if (data) {
+            $("#gas-tab-pane").html(data);
+        }
+    });
+}
+function getVehicleCollisionRecords(vehicleId) {
+    $.get(`/Vehicle/GetCollisionRecordsByVehicleId?vehicleId=${vehicleId}`, function (data) {
+        if (data) {
+            $("#accident-tab-pane").html(data);
+        }
+    });
+}
 function editVehicle(vehicleId) {
     $.get(`/Vehicle/GetEditVehiclePartialViewById?vehicleId=${vehicleId}`, function (data) {
         if (data) {
@@ -77,13 +100,6 @@ function deleteVehicle(vehicleId) {
         }
     });
 }
-function getVehicleGasRecords(vehicleId) {
-    $.get(`/Vehicle/GetGasRecordsByVehicleId?vehicleId=${vehicleId}`, function (data) {
-        if (data) {
-            $("#gas-tab-pane").html(data);
-        }
-    });
-}
 function uploadVehicleFilesAsync(event) {
     let formData = new FormData();
     var files = event.files;