Merge pull request #124 from LD-Reborn/23-sub-issue-asset-page-filter

Added filter for /Home/Assets

src/Views/Home/Assets.cshtml

@@ -26,7 +26,14 @@
                     <th>@T["Asset ID"]</th>
                     <th>@T["Asset Name"]</th>
                     <th>@T["Location"]</th>
-                    <th>@T["Action"]</th>
+                    <th class="text-center">@T["Action"]</th>
+                </tr>
+                <tr>
+                    <th><input type="text" class="form-control form-control-sm column-filter" placeholder="@T["Owner"]" data-column="0" /></th>
+                    <th><input type="text" class="form-control form-control-sm column-filter" placeholder="@T["Asset ID"]" data-column="1" /></th>
+                    <th><input type="text" class="form-control form-control-sm column-filter" placeholder="@T["Asset Name"]" data-column="2" /></th>
+                    <th><input type="text" class="form-control form-control-sm column-filter" placeholder="@T["Location"]" data-column="3" /></th>
+                    <th class="text-center">-</th>
                 </tr>
             </thead>
             <tbody>
@@ -39,7 +46,7 @@
                     <td>@assetsTableViewModel.AssetName</td>
                     <td>@assetsTableViewModel.LocationName</td>
                     <td>
-                        <div class="d-flex gap-2">
+                        <div class="d-flex gap-2 justify-content-center">
                             <button class="btn btn-sm btn-warning btn-update"
                                 data-asset-id="@assetsTableViewModel.AssetCn"
                                 data-bs-toggle="modal"
@@ -62,6 +69,35 @@
     </div>
 </div>
 
+<!-- Table filter -->
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+    const filters = document.querySelectorAll('.column-filter');
+    const table = document.querySelector('table');
+    const tbody = table.querySelector('tbody');
+
+    filters.forEach(filter => {
+        filter.addEventListener('input', () => {
+            const rows = tbody.querySelectorAll('tr');
+            const filterValues = Array.from(filters).map(f => f.value.toLowerCase().trim());
+
+            rows.forEach(row => {
+                const cells = row.querySelectorAll('td');
+                let visible = true;
+
+                filterValues.forEach((val, i) => {
+                    if (val && !cells[i].textContent.toLowerCase().includes(val)) {
+                        visible = false;
+                    }
+                });
+
+                row.style.display = visible ? '' : 'none';
+            });
+        });
+    });
+});
+</script>
+
 <!-- Asset Delete Confirmation Modal -->
 <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered">