From 1c2f83026c082cf7e4ee337353297f93a0218bfa Mon Sep 17 00:00:00 2001
From: "DESKTOP-T0O5CDB\\DESK-555BD" <ivancheahkf@gmail.com>
Date: Fri, 26 Jan 2024 12:01:53 -0700
Subject: [PATCH] display pinned notes in garage.

---
 Controllers/VehicleController.cs |  8 ++++++++
 Views/Home/_GarageDisplay.cshtml |  2 +-
 Views/Vehicle/_Notes.cshtml      |  2 +-
 wwwroot/js/garage.js             | 23 +++++++++++++++++++++++
 4 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/Controllers/VehicleController.cs b/Controllers/VehicleController.cs
index 862577d..517f5ed 100644
--- a/Controllers/VehicleController.cs
+++ b/Controllers/VehicleController.cs
@@ -1311,6 +1311,14 @@ namespace CarCareTracker.Controllers
             result = result.OrderByDescending(x => x.Pinned).ToList();
             return PartialView("_Notes", result);
         }
+        [TypeFilter(typeof(CollaboratorFilter))]
+        [HttpGet]
+        public IActionResult GetPinnedNotesByVehicleId(int vehicleId)
+        {
+            var result = _noteDataAccess.GetNotesByVehicleId(vehicleId);
+            result = result.Where(x=>x.Pinned).ToList();
+            return Json(result);
+        }
         [HttpPost]
         public IActionResult SaveNoteToVehicleId(Note note)
         {
diff --git a/Views/Home/_GarageDisplay.cshtml b/Views/Home/_GarageDisplay.cshtml
index b6ff76b..0c972e1 100644
--- a/Views/Home/_GarageDisplay.cshtml
+++ b/Views/Home/_GarageDisplay.cshtml
@@ -4,7 +4,7 @@
 {
     foreach (Vehicle vehicle in Model)
     {
-        <div class="col-xl-2 col-lg-4 col-md-4 col-sm-4 col-4">
+        <div class="col-xl-2 col-lg-4 col-md-4 col-sm-4 col-4" id="gridVehicle_@vehicle.Id" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="bottom" data-bs-trigger="manual" onmouseenter="loadPinnedNotes(@vehicle.Id)" onmouseleave="hidePinnedNotes(@vehicle.Id)">
             <div class="card" onclick="viewVehicle(@vehicle.Id)">
                 <img src="@vehicle.ImageLocation" style="height:145px; object-fit:scale-down;" />
                 <div class="card-body">
diff --git a/Views/Vehicle/_Notes.cshtml b/Views/Vehicle/_Notes.cshtml
index 430eea8..bdf486c 100644
--- a/Views/Vehicle/_Notes.cshtml
+++ b/Views/Vehicle/_Notes.cshtml
@@ -29,7 +29,7 @@
                     <tr class="d-flex" style="cursor:pointer;" onclick="showEditNoteModal(@note.Id)">
                         @if (note.Pinned)
                         {
-                            <td class="col-3"><i class='bi bi-pin-fill me-2'></i>@note.Description"</td>
+                            <td class="col-3"><i class='bi bi-pin-fill me-2'></i>@note.Description</td>
                         } else
                         {
                             <td class="col-3">@note.Description</td>
diff --git a/wwwroot/js/garage.js b/wwwroot/js/garage.js
index a63f96b..ba01f77 100644
--- a/wwwroot/js/garage.js
+++ b/wwwroot/js/garage.js
@@ -28,4 +28,27 @@ function performLogOut() {
             window.location.href = '/Login';
         }
     })
+}
+function loadPinnedNotes(vehicleId) {
+    var hoveredGrid = $(`#gridVehicle_${vehicleId}`);
+    if (hoveredGrid.attr("data-bs-title") == undefined) {
+        $.get(`/Vehicle/GetPinnedNotesByVehicleId?vehicleId=${vehicleId}`, function (data) {
+            if (data.length > 0) {
+                //converted pinned notes to html.
+                var htmlString = "<ul class='list-group list-group-flush'>";
+                data.forEach(x => {
+                    htmlString += `<li><b>${x.description}</b> : ${x.noteText}</li>`;
+                });
+                htmlString += "</ul>";
+                hoveredGrid.attr("data-bs-title", htmlString);
+                new bootstrap.Tooltip(hoveredGrid);
+                hoveredGrid.tooltip("show");
+            }
+        });
+    } else {
+        hoveredGrid.tooltip("show");
+    }
+}
+function hidePinnedNotes(vehicleId) {
+    $(`#gridVehicle_${vehicleId}`).tooltip("hide");
 }
\ No newline at end of file