scaffolding to allow for vehicle editing.

Controllers/HomeController.cs

@@ -37,22 +37,10 @@ namespace CarCareTracker.Controllers
         {
             return View();
         }
-        [HttpPost]
-        public IActionResult AddVehicle(Vehicle vehicleInput)
+        [HttpGet]
+        public IActionResult AddVehiclePartialView()
         {
-            try
-            {
-                //move image from temp folder to images folder.
-                vehicleInput.ImageLocation = _fileHelper.MoveFileFromTemp(vehicleInput.ImageLocation, "images/");
-                //save vehicle.
-                var result = _dataAccess.SaveVehicle(vehicleInput);
-                return Json(result);
-            }
-            catch(Exception ex)
-            {
-                _logger.LogError(ex, "Error Saving Vehicle");
-                return Json(false);
-            }
+            return PartialView("_VehicleModal", new Vehicle());
         }
 
         [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]

Controllers/VehicleController.cs

@@ -44,6 +44,29 @@ namespace CarCareTracker.Controllers
             var data = _dataAccess.GetVehicleById(vehicleId);
             return View(data);
         }
+        [HttpGet]
+        public IActionResult GetEditVehiclePartialViewById(int vehicleId)
+        {
+            var data = _dataAccess.GetVehicleById(vehicleId);
+            return PartialView("_VehicleModal", data);
+        }
+        [HttpPost]
+        public IActionResult SaveVehicle(Vehicle vehicleInput)
+        {
+            try
+            {
+                //move image from temp folder to images folder.
+                vehicleInput.ImageLocation = _fileHelper.MoveFileFromTemp(vehicleInput.ImageLocation, "images/");
+                //save vehicle.
+                var result = _dataAccess.SaveVehicle(vehicleInput);
+                return Json(result);
+            }
+            catch (Exception ex)
+            {
+                _logger.LogError(ex, "Error Saving Vehicle");
+                return Json(false);
+            }
+        }
         [HttpPost]
         public IActionResult DeleteVehicle(int vehicleId)
         {

Helper/FileHelper.cs

@@ -15,7 +15,7 @@
         public string MoveFileFromTemp(string currentFilePath, string newFolder)
         {
             string tempPath = "temp/";
-            if (!currentFilePath.StartsWith("/temp/")) //file is not in temp directory.
+            if (string.IsNullOrWhiteSpace(currentFilePath) || !currentFilePath.StartsWith("/temp/")) //file is not in temp directory.
             {
                 return currentFilePath;
             }

Views/Home/Index.cshtml

@@ -34,30 +34,8 @@
 
 <div class="modal fade" id="addVehicleModal" tabindex="-1" role="dialog" aria-labelledby="addVehicleModalLabel" aria-hidden="true">
     <div class="modal-dialog" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title" id="addVehicleModalLabel">Add New 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">
-                        <label for="inputMake">Make</label>
-                        <input type="text" id="inputMake" class="form-control">
-                        <label for="inputModel">Model</label>
-                        <input type="text" id="inputModel" class="form-control">
-                        <label for="inputLicensePlate">License Plate</label>
-                        <input type="text" id="inputLicensePlate" class="form-control">
-                        <label for="inputImage">Upload a picture(optional)</label>
-                        <input onChange="uploadFileAsync()" type="file" accept=".png,.jpg,.jpeg" class="form-control-file" id="inputImage">
-                    </div>
-                </form>
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" onclick="hideAddVehicleModal()">Cancel</button>
-                <button type="button" onclick="addVehicle()" class="btn btn-primary">Add New Vehicle</button>
-            </div>
+        <div class="modal-content" id="addVehicleModalContent">
+           
         </div>
     </div>
 </div>

Views/Shared/_VehicleModal.cshtml

@@ -0,0 +1,49 @@
+@model Vehicle
+@{
+    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>
+</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">
+            <label for="inputMake">Make</label>
+            <input type="text" id="inputMake" class="form-control" value="@Model.Make">
+            <label for="inputModel">Model</label>
+            <input type="text" id="inputModel" class="form-control" value="@Model.Model">
+            <label for="inputLicensePlate">License Plate</label>
+            <input type="text" id="inputLicensePlate" class="form-control" value="@Model.LicensePlate">
+            @if (!string.IsNullOrWhiteSpace(Model.ImageLocation))
+            {
+                <label for="inputImage">Replace picture(optional)</label>
+                <input onChange="uploadFileAsync()" type="file" accept=".png,.jpg,.jpeg" class="form-control-file" id="inputImage">
+            } else
+            {
+                <label for="inputImage">Upload a picture(optional)</label>
+                <input onChange="uploadFileAsync()" type="file" accept=".png,.jpg,.jpeg" class="form-control-file" id="inputImage">
+            }
+        </div>
+    </form>
+</div>
+<div class="modal-footer">
+    <button type="button" class="btn btn-secondary" onclick="hideAddVehicleModal()">Cancel</button>
+    @if (Model.Id == 0)
+    {
+        <button type="button" onclick="saveVehicle(false)" class="btn btn-primary">Add New Vehicle</button>
+    } else if (Model.Id > 0)
+    {
+        <button type="button" onclick="saveVehicle(true)" class="btn btn-primary">Save Vehicle</button>
+    }
+</div>
+<script>
+    var uploadedFile = "@Model.ImageLocation";
+    function getVehicleModelData() {
+        return { id: @Model.Id}
+    }
+</script>

Views/Vehicle/Index.cshtml

@@ -35,7 +35,7 @@
         <li class="nav-item" role="presentation">
             <button class="nav-link" id="accident-tab" data-bs-toggle="tab" data-bs-target="#accident-tab-pane" type="button" role="tab" aria-selected="false"><i class="bi bi-exclamation-octagon me-2"></i>Collisions</button>
         </li>
-        <li class="nav-item" role="presentation">
+        <li class="nav-item ms-auto" role="presentation">
             <button class="nav-link" id="manage-tab" data-bs-toggle="tab" data-bs-target="#manage-tab-pane" type="button" role="tab" aria-selected="false"><i class="bi bi-wrench me-2"></i>Manage Vehicle</button>
         </li>
     </ul>

wwwroot/js/garage.js

@@ -1,10 +1,13 @@
-var uploadedFile = "";
-function showAddVehicleModal() {
+function showAddVehicleModal() {
     uploadedFile = "";
+    $.get('/Home/AddVehiclePartialView', function (data) {
+        if (data) {
+            $("#addVehicleModalContent").html(data);
+        }
+    })
     $('#addVehicleModal').modal('show');
 }
 function hideAddVehicleModal() {
-    uploadedFile = "";
     $('#addVehicleModal').modal('hide');
 }
 $(document).ready(function () {
@@ -16,84 +19,3 @@ function loadGarage() {
         $("#garageContainer").html(data);
     });
 }
-function viewVehicle(vehicleId) {
-    window.location.href = `/Vehicle/Index?vehicleId=${vehicleId}`;
-}
-function returnToGarage() {
-    window.location.href = '/Home';
-}
-function saveVehicleNote(vehicleId) {
-    var noteText = $("#noteTextArea").val();
-    $.post('/Vehicle/SaveNoteToVehicle', { vehicleId: vehicleId, noteText: noteText }, function (data) {
-        if (data) {
-            //window.location.href = '/Home';
-        }
-    })
-}
-function addVehicle() {
-    var vehicleYear = $("#inputYear").val();
-    var vehicleMake = $("#inputMake").val();
-    var vehicleModel = $("#inputModel").val();
-    var vehicleLicensePlate = $("#inputLicensePlate").val();
-    //validate
-    var hasError = false;
-    if (vehicleYear.trim() == '' || parseInt(vehicleYear) < 1900) {
-        hasError = true;
-        $("#inputYear").addClass("is-invalid");
-    } else {
-        $("#inputYear").removeClass("is-invalid");
-    }
-    if (vehicleMake.trim() == '') {
-        hasError = true;
-        $("#inputMake").addClass("is-invalid");
-    } else {
-        $("#inputMake").removeClass("is-invalid");
-    }
-    if (vehicleModel.trim() == '') {
-        hasError = true;
-        $("#inputModel").addClass("is-invalid");
-    } else {
-        $("#inputModel").removeClass("is-invalid");
-    }
-    if (vehicleLicensePlate.trim() == '') {
-        hasError = true;
-        $("#inputLicensePlate").addClass("is-invalid");
-    } else {
-        $("#inputLicensePlate").removeClass("is-invalid");
-    }
-    if (hasError) {
-        return;
-    }
-    $.post('/Home/AddVehicle', {
-        imageLocation: uploadedFile,
-        year: vehicleYear,
-        make: vehicleMake,
-        model: vehicleModel,
-        licensePlate: vehicleLicensePlate
-    }, function (data) {
-        if (data) {
-            successToast("Vehicle added");
-            hideAddVehicleModal();
-            loadGarage();
-        } else {
-            errorToast("An error has occurred, please try again later.");
-        }
-    });
-}
-function uploadFileAsync() {
-    let formData = new FormData();
-    formData.append("file", $("#inputImage")[0].files[0]);
-    $.ajax({
-        url: "/Files/HandleFileUpload",
-        data: formData,
-        cache: false,
-        processData: false,
-        contentType: false,
-        type: 'POST',
-        success: function (response) {
-            if (response.trim() != '') {
-                uploadedFile = response;
-            }
-        }
-    });
-}

wwwroot/js/shared.js

@@ -28,3 +28,80 @@ function errorToast(message) {
         }
     })
 }
+function viewVehicle(vehicleId) {
+    window.location.href = `/Vehicle/Index?vehicleId=${vehicleId}`;
+}
+function saveVehicle(isEdit) {
+    var vehicleId = getVehicleModelData().id;
+    var vehicleYear = $("#inputYear").val();
+    var vehicleMake = $("#inputMake").val();
+    var vehicleModel = $("#inputModel").val();
+    var vehicleLicensePlate = $("#inputLicensePlate").val();
+    //validate
+    var hasError = false;
+    if (vehicleYear.trim() == '' || parseInt(vehicleYear) < 1900) {
+        hasError = true;
+        $("#inputYear").addClass("is-invalid");
+    } else {
+        $("#inputYear").removeClass("is-invalid");
+    }
+    if (vehicleMake.trim() == '') {
+        hasError = true;
+        $("#inputMake").addClass("is-invalid");
+    } else {
+        $("#inputMake").removeClass("is-invalid");
+    }
+    if (vehicleModel.trim() == '') {
+        hasError = true;
+        $("#inputModel").addClass("is-invalid");
+    } else {
+        $("#inputModel").removeClass("is-invalid");
+    }
+    if (vehicleLicensePlate.trim() == '') {
+        hasError = true;
+        $("#inputLicensePlate").addClass("is-invalid");
+    } else {
+        $("#inputLicensePlate").removeClass("is-invalid");
+    }
+    if (hasError) {
+        return;
+    }
+    $.post('/Vehicle/SaveVehicle', {
+        id: vehicleId,
+        imageLocation: uploadedFile,
+        year: vehicleYear,
+        make: vehicleMake,
+        model: vehicleModel,
+        licensePlate: vehicleLicensePlate
+    }, function (data) {
+        if (data) {
+            if (!isEdit) {
+                successToast("Vehicle added");
+                hideAddVehicleModal();
+                loadGarage();
+            }
+            else {
+                viewVehicle(vehicleId);
+            }
+        } else {
+            errorToast("An error has occurred, please try again later.");
+        }
+    });
+}
+function uploadFileAsync() {
+    let formData = new FormData();
+    formData.append("file", $("#inputImage")[0].files[0]);
+    $.ajax({
+        url: "/Files/HandleFileUpload",
+        data: formData,
+        cache: false,
+        processData: false,
+        contentType: false,
+        type: 'POST',
+        success: function (response) {
+            if (response.trim() != '') {
+                uploadedFile = response;
+            }
+        }
+    });
+}