Merge pull request #174 from hargata/Hargata/pinned.notes.garage

display pinned notes in garage.

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)
         {

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">

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>

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");
 }