made notes named and easier to traverse.

Controllers/VehicleController.cs

@@ -103,34 +103,12 @@ namespace CarCareTracker.Controllers
                 _serviceRecordDataAccess.DeleteAllServiceRecordsByVehicleId(vehicleId) &&
                 _collisionRecordDataAccess.DeleteAllCollisionRecordsByVehicleId(vehicleId) &&
                 _taxRecordDataAccess.DeleteAllTaxRecordsByVehicleId(vehicleId) &&
-                _noteDataAccess.DeleteNoteByVehicleId(vehicleId) &&
+                _noteDataAccess.DeleteAllNotesByVehicleId(vehicleId) &&
                 _reminderRecordDataAccess.DeleteAllReminderRecordsByVehicleId(vehicleId) &&
                 _upgradeRecordDataAccess.DeleteAllUpgradeRecordsByVehicleId(vehicleId) &&
                 _dataAccess.DeleteVehicle(vehicleId);
             return Json(result);
         }
-        [HttpPost]
-        public IActionResult SaveNoteToVehicle(Note newNote)
-        {
-            //check if there is already an existing note for this vehicle.
-            var existingNote = _noteDataAccess.GetNoteByVehicleId(newNote.VehicleId);
-            if (existingNote.Id != default)
-            {
-                newNote.Id = existingNote.Id;
-            }
-            var result = _noteDataAccess.SaveNoteToVehicleId(newNote);
-            return Json(result);
-        }
-        [HttpGet]
-        public IActionResult GetNoteByVehicleId(int vehicleId)
-        {
-            var existingNote = _noteDataAccess.GetNoteByVehicleId(vehicleId);
-            if (existingNote.Id != default)
-            {
-                return Json(existingNote.NoteText);
-            }
-            return Json("");
-        }
         #region "Bulk Imports"
         [HttpGet]
         public IActionResult GetBulkImportModalPartialView(ImportMode mode)
@@ -744,5 +722,36 @@ namespace CarCareTracker.Controllers
             return Json(result);
         }
         #endregion
+        #region "Notes"
+        [HttpGet]
+        public IActionResult GetNotesByVehicleId(int vehicleId)
+        {
+            var result = _noteDataAccess.GetNotesByVehicleId(vehicleId);
+            return PartialView("_Notes", result);
+        }
+        [HttpPost]
+        public IActionResult SaveNoteToVehicleId(Note note)
+        {
+            var result = _noteDataAccess.SaveNoteToVehicle(note);
+            return Json(result);
+        }
+        [HttpGet]
+        public IActionResult GetAddNotePartialView()
+        {
+            return PartialView("_NoteModal", new Note());
+        }
+        [HttpGet]
+        public IActionResult GetNoteForEditById(int noteId)
+        {
+            var result = _noteDataAccess.GetNoteById(noteId);
+            return PartialView("_NoteModal", result);
+        }
+        [HttpPost]
+        public IActionResult DeleteNoteById(int noteId)
+        {
+            var result = _noteDataAccess.DeleteNoteById(noteId);
+            return Json(result);
+        }
+        #endregion
     }
 }

External/Implementations/NoteDataAccess.cs

@@ -9,16 +9,24 @@ namespace CarCareTracker.External.Implementations
     {
         private static string dbName = StaticHelper.DbName;
         private static string tableName = "notes";
-        public Note GetNoteByVehicleId(int vehicleId)
+        public List<Note> GetNotesByVehicleId(int vehicleId)
         {
             using (var db = new LiteDatabase(dbName))
             {
                 var table = db.GetCollection<Note>(tableName);
-                var noteToReturn = table.FindOne(Query.EQ(nameof(Note.VehicleId), vehicleId));
-                return noteToReturn ?? new Note();
+                var noteToReturn = table.Find(Query.EQ(nameof(Note.VehicleId), vehicleId));
+                return noteToReturn.ToList() ?? new List<Note>();
             };
         }
-        public bool SaveNoteToVehicleId(Note note)
+        public Note GetNoteById(int noteId)
+        {
+            using (var db = new LiteDatabase(dbName))
+            {
+                var table = db.GetCollection<Note>(tableName);
+                return table.FindById(noteId);
+            };
+        }
+        public bool SaveNoteToVehicle(Note note)
         {
             using (var db = new LiteDatabase(dbName))
             {
@@ -27,12 +35,21 @@ namespace CarCareTracker.External.Implementations
                 return true;
             };
         }
-        public bool DeleteNoteByVehicleId(int vehicleId)
+        public bool DeleteNoteById(int noteId)
         {
             using (var db = new LiteDatabase(dbName))
             {
                 var table = db.GetCollection<Note>(tableName);
-                table.DeleteMany(Query.EQ(nameof(Note.VehicleId), vehicleId));
+                table.Delete(noteId);
+                return true;
+            };
+        }
+        public bool DeleteAllNotesByVehicleId(int vehicleId)
+        {
+            using (var db = new LiteDatabase(dbName))
+            {
+                var table = db.GetCollection<Note>(tableName);
+                var notes = table.DeleteMany(Query.EQ(nameof(Note.VehicleId), vehicleId));
                 return true;
             };
         }

External/Interfaces/INoteDataAccess.cs

@@ -4,8 +4,10 @@ namespace CarCareTracker.External.Interfaces
 {
     public interface INoteDataAccess
     {
-        public Note GetNoteByVehicleId(int vehicleId);
-        public bool SaveNoteToVehicleId(Note note);
-        bool DeleteNoteByVehicleId(int vehicleId);
+        public List<Note> GetNotesByVehicleId(int vehicleId);
+        public Note GetNoteById(int noteId);
+        public bool SaveNoteToVehicle(Note note);
+        public bool DeleteNoteById(int noteId);
+        public bool DeleteAllNotesByVehicleId(int vehicleId);
     }
 }

Models/Note.cs

@@ -4,6 +4,7 @@
     {
         public int Id { get; set; }
         public int VehicleId { get; set; }
+        public string Description { get; set; }
         public string NoteText { get; set; }
     }
 }

Views/Vehicle/Index.cshtml

@@ -10,6 +10,7 @@
     <script src="~/js/taxrecord.js" asp-append-version="true"></script>
     <script src="~/js/reminderrecord.js" asp-append-version="true"></script>
     <script src="~/js/upgraderecord.js" asp-append-version="true"></script>
+    <script src="~/js/note.js" asp-append-version="true"></script>
     <script src="~/lib/chart-js/chart.umd.js"></script>
 }
 <div class="container">
@@ -57,21 +58,7 @@
         <div class="tab-pane fade show active" id="servicerecord-tab-pane" role="tabpanel" tabindex="0"></div>
         <div class="tab-pane fade" id="gas-tab-pane" role="tabpanel" tabindex="0"></div>
         <div class="tab-pane fade" id="tax-tab-pane" role="tabpanel" tabindex="0"></div>
-        <div class="tab-pane fade" id="notes-tab-pane" role="tabpanel" tabindex="0">
-            <div class="row">
-                <div class="col-12">
-                    <label for="noteTextArea" class="form-label">This is where you can store notes related to the vehicle such as tire size, oil filter size, oil types, etc.</label>
-                    <textarea class="form-control vehicleNoteContainer" id="noteTextArea"></textarea>
-                </div>
-            </div>
-            <div class="row">
-                <div class="d-flex flex-row-reverse">
-                    <div>
-                        <button onclick="saveVehicleNote(@Model.Id)" class="btn btn-primary btn-md mt-1 mb-1"><i class="bi bi-pencil-square"></i>Save Note</button>
-                    </div>
-                </div>
-            </div>
-        </div>
+        <div class="tab-pane fade" id="notes-tab-pane" role="tabpanel" tabindex="0"></div>
         <div class="tab-pane fade" id="accident-tab-pane" role="tabpanel" tabindex="0"></div>
         <div class="tab-pane fade" id="reminder-tab-pane" role="tabpanel" tabindex="0"></div>
         <div class="tab-pane fade" id="report-tab-pane" role="tabpanel" tabindex="0"></div>

Views/Vehicle/_NoteModal.cshtml

@@ -0,0 +1,45 @@
+@model Note
+@{
+    var isNew = Model.Id == 0;
+}
+<div class="modal-header">
+    <h5 class="modal-title">@(isNew ? "Add New Note" : "Edit Note")</h5>
+    <button type="button" class="btn-close" onclick="hideAddNoteModal()" aria-label="Close"></button>
+</div>
+<div class="modal-body">
+    <form>
+        <div class="form-group">
+            <div class="row">
+                <div class="col-12">
+                    <input type="text" id="workAroundInput" style="height:0px; width:0px; display:none;">
+                    <label for="noteDescription">Description</label>
+                    <input type="text" id="noteDescription" class="form-control" placeholder="Description of the note" value="@(isNew ? "" : Model.Description)">
+                </div>
+                <div class="col-12">
+                    <label for="noteTextArea">Notes</label>
+                    <textarea class="form-control vehicleNoteContainer" id="noteTextArea">@Model.NoteText</textarea>
+                </div>
+            </div>
+        </div>
+    </form>
+</div>
+<div class="modal-footer">
+    @if (!isNew)
+    {
+        <button type="button" class="btn btn-danger" onclick="deleteNote(@Model.Id)" style="margin-right:auto;">Delete</button>
+    }
+    <button type="button" class="btn btn-secondary" onclick="hideAddNoteModal()">Cancel</button>
+    @if (isNew)
+    {
+        <button type="button" class="btn btn-primary" onclick="saveNoteToVehicle()">Add New Note</button>
+    }
+    else if (!isNew)
+    {
+        <button type="button" class="btn btn-primary" onclick="saveNoteToVehicle(true)">Edit Note</button>
+    }
+</div>
+<script>
+    function getNoteModelData(){
+        return { id: @Model.Id}
+    }
+</script>

Views/Vehicle/_Notes.cshtml

@@ -0,0 +1,40 @@
+@model List<Note>
+<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 Notes: {Model.Count()}")</span>
+        </div>
+        <div>
+                <button onclick="showAddNoteModal()" class="btn btn-primary btn-md mt-1 mb-1"><i class="bi bi-pencil-square me-2"></i>Add Note</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-3">Description</th>
+                    <th scope="col" class="col-9">Note</th>
+                </tr>
+            </thead>
+            <tbody>
+                @foreach (Note note in Model)
+                {
+                    <tr class="d-flex" style="cursor:pointer;" onclick="showEditNoteModal(@note.Id)">
+                        <td class="col-3">@note.Description</td>
+                        <td class="col-9 text-truncate">@note.NoteText</td>
+                    </tr>
+                }
+            </tbody>
+        </table>
+    </div>
+</div>
+
+
+<div class="modal fade" data-bs-focus="false" id="noteModal" tabindex="-1" role="dialog" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content" id="noteModalContent">
+        </div>
+    </div>
+</div>

wwwroot/js/note.js

@@ -0,0 +1,90 @@
+function showAddNoteModal() {
+    $.get('/Vehicle/GetAddNotePartialView', function (data) {
+        if (data) {
+            $("#noteModalContent").html(data);
+            $('#noteModal').modal('show');
+        }
+    });
+}
+function showEditNoteModal(noteId) {
+    $.get(`/Vehicle/GetNoteForEditById?noteId=${noteId}`, function (data) {
+        if (data) {
+            $("#noteModalContent").html(data);
+            $('#noteModal').modal('show');
+        }
+    });
+}
+function hideAddNoteModal() {
+    $('#noteModal').modal('hide');
+}
+function deleteNote(noteId) {
+    $("#workAroundInput").show();
+    Swal.fire({
+        title: "Confirm Deletion?",
+        text: "Deleted Notes cannot be restored.",
+        showCancelButton: true,
+        confirmButtonText: "Delete",
+        confirmButtonColor: "#dc3545"
+    }).then((result) => {
+        if (result.isConfirmed) {
+            $.post(`/Vehicle/DeleteNoteById?noteId=${noteId}`, function (data) {
+                if (data) {
+                    hideAddNoteModal();
+                    successToast("Note Deleted");
+                    var vehicleId = GetVehicleId().vehicleId;
+                    getVehicleNote(vehicleId);
+                } else {
+                    errorToast("An error has occurred, please try again later.");
+                }
+            });
+        } else {
+            $("#workAroundInput").hide();
+        }
+    });
+}
+function saveNoteToVehicle(isEdit) {
+    //get values
+    var formValues = getAndValidateNoteValues();
+    //validate
+    if (formValues.hasError) {
+        errorToast("Please check the form data");
+        return;
+    }
+    //save to db.
+    $.post('/Vehicle/SaveNoteToVehicleId', { note: formValues }, function (data) {
+        if (data) {
+            successToast(isEdit ? "Note Updated" : "Note Added.");
+            hideAddNoteModal();
+            getVehicleNote(formValues.vehicleId);
+        } else {
+            errorToast("An error has occurred, please try again later.");
+        }
+    })
+}
+function getAndValidateNoteValues() {
+    var noteDescription = $("#noteDescription").val();
+    var noteText = $("#noteTextArea").val();
+    var vehicleId = GetVehicleId().vehicleId;
+    var noteId = getNoteModelData().id;
+    //validation
+    var hasError = false;
+    if (noteDescription.trim() == '') { //eliminates whitespace.
+        hasError = true;
+        $("#noteDescription").addClass("is-invalid");
+    } else {
+        $("#noteDescription").removeClass("is-invalid");
+    }
+    if (noteText.trim() == '') {
+        hasError = true;
+        $("#noteTextArea").addClass("is-invalid");
+    } else {
+        $("#noteTextArea").removeClass("is-invalid");
+    }
+    return {
+        id: noteId,
+        hasError: hasError,
+        vehicleId: vehicleId,
+        description: noteDescription,
+        noteText: noteText
+    }
+}

wwwroot/js/vehicle.js

@@ -63,15 +63,18 @@ $(document).ready(function () {
             case "upgrade-tab":
                 $("#upgrade-tab-pane").html("");
                 break;
+            case "notes-tab":
+                $("#notes-tab-pane").html("");
+                break;
         }
     });
     getVehicleServiceRecords(vehicleId);
 });
 
 function getVehicleNote(vehicleId) {
-    $.get(`/Vehicle/GetNoteByVehicleId?vehicleId=${vehicleId}`, function (data) {
+    $.get(`/Vehicle/GetNotesByVehicleId?vehicleId=${vehicleId}`, function (data) {
         if (data) {
-            $("#noteTextArea").val(data);
+            $("#notes-tab-pane").html(data);
         }
     });
 }
@@ -111,7 +114,6 @@ function getVehicleTaxRecords(vehicleId) {
     $.get(`/Vehicle/GetTaxRecordsByVehicleId?vehicleId=${vehicleId}`, function (data) {
         if (data) {
             $("#tax-tab-pane").html(data);
-            getVehicleHaveImportantReminders(vehicleId);
         }
     });
 }