search, refresh and row select

apps/api/views.py

@@ -101,7 +101,7 @@ class Server_DetailView(DetailView):
 
 class ContentFilter_ListView(ListCreateView):
     filterset_fields = ("id", "server", "name", "match", "matching_algorithm", "is_insensitive", "is_whitelist")
-    search_fields = ("server", "name", "match")
+    search_fields = ("name", "match")
     ordering_fields = ("id", "server", "name", "match", "matching_algorithm", "is_insensitive", "is_whitelist")
     serializer_class = ContentFilterSerializer
 
@@ -153,7 +153,7 @@ class MessageStyle_DetailView(ChangableDetailView):
 
 class Subscription_ListView(ListCreateView):
     filterset_fields = ("id", "server", "name", "url", "created_at", "updated_at", "extra_notes", "active", "filters", "message_style", "unique_rules")
-    search_fields = ("server", "name", "url", "extra_notes")
+    search_fields = ("name", "url", "extra_notes")
     ordering_fields = ("id", "server", "name", "url", "created_at", "updated_at", "extra_notes", "active", "message_style")
     serializer_class = SubscriptionSerializer
 
@@ -172,7 +172,7 @@ class Subscription_DetailView(ChangableDetailView):
 
 class Content_ListView(ListCreateView):
     filterset_fields = ("id", "subscription", "item_id", "item_guid", "item_url", "item_title", "item_content_hash")
-    search_fields = ("subscription", "item_id", "item_guid", "item_url", "item_title", "item_content_hash")
+    search_fields = ("item_id", "item_guid", "item_url", "item_title", "item_content_hash")
     ordering_fields = ("id", "subscription", "item_id", "item_guid", "item_url", "item_title", "item_content_hash")
     serializer_class = ContentSerializer
 

apps/home/static/home/js/tables.js

@@ -37,6 +37,9 @@ function initializeDataTable(tableId, columns) {
     });
     bindTablePagination(tableId);
     bindTablePageSizer(tableId);
+    bindTableSearch(tableId);
+    bindRefreshButton(tableId);
+    bindTableSelectColumn(tableId);
 }
 
 
@@ -101,6 +104,7 @@ async function loadTableData(tableId, url, method) {
     populateTable(tableId, data);
 }
 
+
 // region Pagination
 
 function bindTablePagination(tableId) {
@@ -216,6 +220,7 @@ function AddTablePageEllipsis($paginationArea) {
     $paginationArea.find(".page-next").parent().before(ellipsisItem);
 }
 
+
 // region Page Sizer
 
 function updateTableTotalCount(tableId, data) {
@@ -230,4 +235,73 @@ function bindTablePageSizer(tableId) {
         setTableFilter(tableId, "page_size", $(this).val());
         $(tableId).trigger("doDataLoad");
     });
+}
+
+
+// region Search Filters
+
+_searchTimeouts = {};
+function bindTableSearch(tableId) {
+    let $tableFilters = $(tableId).closest('.js-tableBody').siblings('.js-tableFilters');
+    $tableFilters.on("input", ".search-filter", function() {
+        clearTimeout(_searchTimeouts[tableId]);
+
+        let searchString = $(this).val();
+        setTableFilter(tableId, "search", searchString);
+
+        _searchTimeouts[tableId] = setTimeout(function() {
+            $(tableId).trigger("doDataLoad");
+        }, 300);
+    });
+}
+
+
+// region Button Controls
+
+function bindRefreshButton(tableId) {
+    let $tableFilters = $(tableId).closest('.js-tableBody').siblings('.js-tableFilters');
+    $tableFilters.on("click", ".table-refresh-btn", function() {
+        $(tableId).trigger("doDataLoad");
+    })
+}
+
+
+// region Select Checkboxes
+
+function bindTableSelectColumn(tableId) {
+    $(tableId).on("change", "tbody tr .table-select-row", function() {
+        let selected = $(this).prop("checked");
+        let rowIndex = $(this).closest("tr").index();
+        let row = $(tableId).DataTable().row(rowIndex);
+
+        selected === true ? row.select() : row.deselect();
+        determineSelectAllState(tableId);
+    });
+
+    $(tableId).on("change", "thead .table-select-all", function() {
+        let selected = $(this).prop("checked");
+        let table = $(tableId).DataTable();
+        $(tableId).find("tbody tr").each(function(rowIndex) {
+            let row = table.row(rowIndex);
+            selected === true ? row.select() : row.deselect();
+            $(this).find(".table-select-row").prop("checked", selected);
+        });
+
+        determineSelectAllState(tableId);
+    });
+}
+
+function determineSelectAllState(tableId) {
+    let table = $(tableId).DataTable();
+    let selectedRowsCount = table.rows(".selected").data().toArray().length;
+    let allRowsCount = table.rows().data().toArray().length;
+
+    let doCheck = selectedRowsCount === allRowsCount;
+    let doIndeterminate = !doCheck && selectedRowsCount > 0;
+
+    $checkbox = $(tableId).find("thead .table-select-all");
+    $checkbox.prop("checked", doCheck);
+    $checkbox.prop("indeterminate", doIndeterminate);
+
+    // TODO: disable/enable delete button here  
 }

apps/home/templates/home/tabs/subs.html

@@ -4,7 +4,7 @@
             <span class="input-group-text">
                 <i class="bi bi-search"></i>
             </span>
-            <input type="search" class="form-control" placeholder="Search">
+            <input type="search" class="form-control search-filter" placeholder="Search">
         </div>
     </div>
     <div class="col-md-6 col-lg-7 col-xl-8 col-xxl-9 text-md-end table-search-buttons">