add case insensitive search to garage

Views/Home/_GarageDisplay.cshtml

@@ -10,7 +10,7 @@
 @if (recordTags.Any())
 {
     <div class='row'>
-        <div class="col-12 d-flex align-items-center flex-wrap mb-2">
+        <div class="col-xl-10 col-lg-9 col-md-8 col-sm-8 col-12 d-flex align-items-center flex-wrap mb-2">
             @foreach (string recordTag in recordTags)
             {
                 <span onclick="filterGarage(this)" class="user-select-none ms-1 me-1 mt-1 mb-1 rounded-pill badge bg-secondary tagfilter" style="cursor:pointer;">@recordTag</span>
@@ -22,6 +22,11 @@
                 }
             </datalist>
         </div>
+        <div class="col-xl-2 col-lg-3 col-md-4 col-sm-4 col-12 pt-2 pb-2">
+            <div class="input-group">
+                <input type="text" id="garageSearchInput" class="form-control" onkeyup="handleGarageSearchKeyPress(event)" placeholder="@translator.Translate(userLanguage, "Search by Keyword")" />
+            </div>
+        </div>
     </div>
 }
     <div class="row gy-3 align-items-stretch vehiclesContainer pb-2 @(recordTags.Any() ? "" : "mt-2")">
@@ -72,10 +77,10 @@
                             </div>
                         }
                         <div class="card-body">
-                            <h5 class="card-title text-truncate garage-item-year" data-unit="@vehicle.Year">@($"{vehicle.Year}")</h5>
+                            <h5 class="garage-item-attribute card-title text-truncate garage-item-year" data-unit="@vehicle.Year">@($"{vehicle.Year}")</h5>
-                            <h5 class="card-title text-truncate">@($"{vehicle.Make}")</h5>
+                            <h5 class="garage-item-attribute card-title text-truncate">@($"{vehicle.Make}")</h5>
-                            <h5 class="card-title text-truncate">@($"{vehicle.Model}")</h5>
+                            <h5 class="garage-item-attribute card-title text-truncate">@($"{vehicle.Model}")</h5>
-                            <p class="card-text text-truncate">@StaticHelper.GetVehicleIdentifier(vehicle)</p>
+                            <p class="garage-item-attribute card-text text-truncate">@StaticHelper.GetVehicleIdentifier(vehicle)</p>
                         </div>
                     </div>
                 </div>

wwwroot/js/garage.js

@@ -188,20 +188,18 @@ function hidePinnedNotes(vehicleId) {
 }
 
 function filterGarage(sender) {
-    var rowData = $(".garage-item");
+    let searchQuery = $('#garageSearchInput').val();
     if (sender == undefined) {
-        rowData.removeClass('override-hide');
+        searchAndFilterGarage(undefined, searchQuery);
         return;
     }
     var tagName = sender.textContent;
     if ($(sender).hasClass("bg-primary")) {
-        rowData.removeClass('override-hide');
+        searchAndFilterGarage(undefined, searchQuery);
         $(sender).removeClass('bg-primary');
         $(sender).addClass('bg-secondary');
     } else {
-        //hide table rows.
+        searchAndFilterGarage(tagName, searchQuery);
-        rowData.addClass('override-hide');
-        $(`[data-tags~='${tagName}']`).removeClass('override-hide');
         if ($(".tagfilter.bg-primary").length > 0) {
             //disabling other filters
             $(".tagfilter.bg-primary").addClass('bg-secondary');
@@ -211,6 +209,42 @@ function filterGarage(sender) {
         $(sender).removeClass('bg-secondary');
     }
 }
+function handleGarageSearchKeyPress(event) {
+    if (event.keyCode == 13) {
+        searchGarage();
+    } else {
+        setDebounce(searchGarage);
+    }
+}
+function searchGarage() {
+    let searchTerm = $('#garageSearchInput').val();
+    let activeTag = $(".tagfilter.bg-primary").length > 0 ? $(".tagfilter.bg-primary")[0].textContent : undefined;
+    searchAndFilterGarage(activeTag, searchTerm);
+}
+function searchAndFilterGarage(searchTag, searchTerm) {
+    let rowData = $(".garage-item");
+    let searchTagEmpty = searchTag == undefined || searchTag.trim() == '';
+    let searchQueryEmpty = searchTerm == undefined || searchTerm.trim() == '';
+    if (searchTagEmpty && searchQueryEmpty) {
+        //show all garage items
+        rowData.removeClass('override-hide');
+        return;
+    }
+    //hide all garage items
+    rowData.addClass('override-hide');
+    if (!searchQueryEmpty && !searchTagEmpty) {
+        $(`.garage-item .card-body .garage-item-attribute:containsNC('${searchTerm}')`).closest(`.garage-item[data-tags~='${searchTag}']`).removeClass('override-hide');
+    } else {
+        if (!searchTagEmpty) {
+            //show all garage items with matching tags
+            $(`[data-tags~='${searchTag}']`).removeClass('override-hide');
+        }
+        if (!searchQueryEmpty) {
+            //show all garage items with matching search terms
+            $(`.garage-item .card-body .garage-item-attribute:containsNC('${searchTerm}')`).closest('.garage-item').removeClass('override-hide');
+        }
+    }
+}
 function sortVehicles(desc) {
     //get row data
     var rowData = $('.garage-item');

wwwroot/js/gasrecord.js

@@ -392,7 +392,7 @@ function searchGasTableRows() {
     Swal.fire({
         title: 'Search Records',
         html: `
-                            <input type="text" id="inputSearch" class="swal2-input" placeholder="Keyword(case sensitive)" onkeydown="handleSwalEnter(event)">
+                            <input type="text" id="inputSearch" class="swal2-input" placeholder="Keyword" onkeydown="handleSwalEnter(event)">
                             `,
         confirmButtonText: 'Search',
         focusConfirm: false,
@@ -403,7 +403,7 @@ function searchGasTableRows() {
     }).then(function (result) {
         if (result.isConfirmed) {
             var rowData = $(`#${tabName} table tbody tr`);
-            var filteredRows = $(`#${tabName} table tbody tr td:contains('${result.value.searchString}')`).parent();
+            var filteredRows = $(`#${tabName} table tbody tr td:containsNC('${result.value.searchString}')`).parent();
             var splitSearchString = result.value.searchString.split('=');
             if (result.value.searchString.includes('=') && splitSearchString.length == 2) {
                 //column specific search.
@@ -412,7 +412,7 @@ function searchGasTableRows() {
                 var columnName = splitSearchString[0];
                 var colSearchString = splitSearchString[1];
                 var colIndex = columns.findIndex(x => x == columnName) + 1;
-                filteredRows = $(`#${tabName} table tbody tr td:nth-child(${colIndex}):contains('${colSearchString}')`).parent();
+                filteredRows = $(`#${tabName} table tbody tr td:nth-child(${colIndex}):containsNC('${colSearchString}')`).parent();
             }
             if (result.value.searchString.trim() == '') {
                 rowData.removeClass('override-hide');

wwwroot/js/shared.js

@@ -1,4 +1,9 @@
-function returnToGarage() {
+$.expr[":"].containsNC = $.expr.createPseudo(function (arg) {
+    return function (elem) {
+        return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
+    };
+});
+function returnToGarage() {
     window.location.href = '/Home';
 }
 function successToast(message) {
@@ -1419,7 +1424,7 @@ function searchTableRows(tabName) {
     Swal.fire({
         title: 'Search Records',
         html: `
-                            <input type="text" id="inputSearch" class="swal2-input" placeholder="Keyword(case sensitive)" onkeydown="handleSwalEnter(event)">
+                            <input type="text" id="inputSearch" class="swal2-input" placeholder="Keyword" onkeydown="handleSwalEnter(event)">
                             `,
         confirmButtonText: 'Search',
         focusConfirm: false,
@@ -1430,7 +1435,7 @@ function searchTableRows(tabName) {
     }).then(function (result) {
         if (result.isConfirmed) {
             var rowData = $(`#${tabName} table tbody tr`);
-            var filteredRows = $(`#${tabName} table tbody tr td:contains('${result.value.searchString}')`).parent();
+            var filteredRows = $(`#${tabName} table tbody tr td:containsNC('${result.value.searchString}')`).parent();
             var splitSearchString = result.value.searchString.split('=');
             if (result.value.searchString.includes('=') && splitSearchString.length == 2) {
                 //column specific search.
@@ -1439,7 +1444,7 @@ function searchTableRows(tabName) {
                 var columnName = splitSearchString[0];
                 var colSearchString = splitSearchString[1];
                 var colIndex = columns.findIndex(x => x == columnName) + 1;
-                filteredRows = $(`#${tabName} table tbody tr td:nth-child(${colIndex}):contains('${colSearchString}')`).parent();
+                filteredRows = $(`#${tabName} table tbody tr td:nth-child(${colIndex}):containsNC('${colSearchString}')`).parent();
             }
             if (result.value.searchString.trim() == '') {
                 rowData.removeClass('override-hide');