fixed hiding styles.

Views/Vehicle/_ServiceRecords.cshtml

@@ -3,6 +3,7 @@
 @{
     var enableCsvImports = config.GetUserConfig(User).EnableCsvImports;
     var hideZero = config.GetUserConfig(User).HideZero;
+    var recordTags = Model.SelectMany(x => x.Tags).Distinct();
 }
 @model List<ServiceRecord>
 <div class="row">
@@ -10,6 +11,10 @@
         <div class="d-flex align-items-center flex-wrap">
             <span class="ms-2 badge bg-success">@($"# of Service Records: {Model.Count()}")</span>
             <span class="ms-2 badge bg-primary">@($"Total: {Model.Sum(x => x.Cost).ToString("C")}")</span>
+            @foreach(string recordTag in recordTags)
+            {
+                <span onclick="filterTable('servicerecord-tab-pane', this)" class="ms-2 rounded-pill badge bg-secondary tagfilter" style="cursor:pointer;">@recordTag</span>
+            }
         </div>
         <div>
             @if (enableCsvImports)
@@ -54,7 +59,7 @@
             <tbody>
                 @foreach (ServiceRecord serviceRecord in Model)
                 {
-                    <tr class="d-flex" style="cursor:pointer;" onclick="showEditServiceRecordModal(@serviceRecord.Id)">
+                    <tr class="d-flex" style="cursor:pointer;" onclick="showEditServiceRecordModal(@serviceRecord.Id)" data-tags='@string.Join(",",serviceRecord.Tags)'>
                         <td class="col-2 col-xl-1">@serviceRecord.Date.ToShortDateString()</td>
                         <td class="col-2">@serviceRecord.Mileage</td>
                         <td class="col-3 col-xl-4">@serviceRecord.Description</td>

wwwroot/css/site.css

@@ -300,4 +300,7 @@ input[type="file"] {
 }
 [data-bs-theme=light] .taskCard {
     background-color: rgba(80,80,80,0.25);
+}
+.override-hide{
+    display: none !important;
 }

wwwroot/js/shared.js

@@ -181,6 +181,7 @@ function toggleSort(tabName, sender) {
         sender.removeClass('sort-desc');
         sender.html(`${sortColumn}`);
         $(`#${tabName} table tbody`).html(storedTableRowState);
+        filterTable(tabName, $(".tagfilter.bg-primary").get(0), true);
     } else {
         //first time sorting.
         //check if table was sorted before by a different column(only relevant to fuel tab)
@@ -220,18 +221,47 @@ function sortTable(tabName, columnName, desc) {
         }
     });
     $(`#${tabName} table tbody`).html(sortedRow);
+    filterTable(tabName, $(".tagfilter.bg-primary").get(0), true);
 }
-function filterTable(tabName, sender) {
-    var tagName = sender.textContent;
+function filterTable(tabName, sender, isSort) {
     var rowData = $(`#${tabName} table tbody tr`);
-    rowData.map((index, elem) => {
-        var dataTags = $(elem).attr('data-tags');
-        console.log(dataTags);
-        if (dataTags == undefined || !dataTags.split(",").includes(tagName)) {
-            $(elem).hide();
+    if (sender == undefined) {
+        rowData.removeClass('override-hide');
+        return;
+    }
+    var tagName = sender.textContent;
+    //check for other applied filters
+    if ($(sender).hasClass("bg-primary")) {
+        if (!isSort) {
+            rowData.removeClass('override-hide');
+            $(sender).removeClass('bg-primary');
+            $(sender).addClass('bg-secondary');
         } else {
-            console.log('show');
-           $(elem).show();
+            rowData.map((index, elem) => {
+                var dataTags = $(elem).attr('data-tags');
+                if (dataTags == undefined || !dataTags.split(",").includes(tagName)) {
+                    $(elem).addClass('override-hide');
+                } else {
+                    $(elem).removeClass('override-hide');
+                }
+            });
         }
-    });
+    } else {
+        //hide table rows.
+        rowData.map((index, elem) => {
+            var dataTags = $(elem).attr('data-tags');
+            if (dataTags == undefined || !dataTags.split(",").includes(tagName)) {
+                $(elem).addClass('override-hide');
+            } else {
+                $(elem).removeClass('override-hide');
+            }
+        });
+        if ($(".tagfilter.bg-primary").length > 0) {
+            //disabling other filters
+            $(".tagfilter.bg-primary").addClass('bg-secondary');
+            $(".tagfilter.bg-primary").removeClass('bg-primary');
+        }
+        $(sender).addClass('bg-primary');
+        $(sender).removeClass('bg-secondary');
+    }
 }