From 0e22dcac4c2594d1d7353c28951cfc9f6f428120 Mon Sep 17 00:00:00 2001
From: Corban-Lee <corbz.jones@gmail.com>
Date: Wed, 24 Jul 2024 22:49:09 +0100
Subject: [PATCH 1/3] toast improvements

---
 apps/static/js/home/content.js |  7 ++++++-
 apps/static/js/home/filters.js | 16 ++++++++++++++--
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/apps/static/js/home/content.js b/apps/static/js/home/content.js
index cde9716..15448c7 100644
--- a/apps/static/js/home/content.js
+++ b/apps/static/js/home/content.js
@@ -152,7 +152,12 @@ async function deleteSelectedContent() {
     var rows = contentTable.rows(".selected").data();
     $.each(rows, async function() {
         await deleteTrackedContent(this.id);
-        showToast("danger", "Deleted Tracked Content", "It can now appear be sent again. Content ID: " + this.id);
+        showToast(
+            "success",
+            "Deletion Successful",
+            `This content may appear again under the <b>${this.subscription.name}</b> Subscription:<br><br>${this.guid}`,
+            10000
+        );
     });
 
     setTimeout(async () => {
diff --git a/apps/static/js/home/filters.js b/apps/static/js/home/filters.js
index 07c1bd8..092eacc 100644
--- a/apps/static/js/home/filters.js
+++ b/apps/static/js/home/filters.js
@@ -246,7 +246,12 @@ async function deleteSelectedFilters() {
     var rows = filtersTable.rows(".selected").data();
     $.each(rows, async function() {
         await deleteFilter(this.id);
-        showToast("danger", "Deleted Filter", "Filter ID: " + this.id)
+        showToast(
+            "success",
+            "Deletion Successful",
+            `Content Filter <b>${this.name}</b> has been erased.`,
+            10000
+        );  
     })
 
     setTimeout(async () => {
@@ -258,8 +263,15 @@ async function deleteSelectedFilters() {
 
 $("#deleteEditFilter").on("click", async function() {
     const filterId = $("#filterId").val();
+    const row = filtersTable.row(function(index, row) {row.id == id}).data();
+    alert(filterId + JSON.stringify(row, null, 4))
     await deleteFilter(filterId);
     await loadFilters(getCurrentlyActiveServer().guild_id);
     $("#filterFormModal").modal("hide");
-    showToast("danger", "Deleted Filter", "Filter ID: " + filterId);
+    showToast(
+        "success",
+        "Deletion Successful",
+        `Content Filter <b>${row.name}</b> has been erased.`,
+        10000
+    );
 });
\ No newline at end of file

From aafbedb08a31c732b285a5bb75560e022291c706 Mon Sep 17 00:00:00 2001
From: Corban-Lee <corbz.jones@gmail.com>
Date: Wed, 24 Jul 2024 22:50:04 +0100
Subject: [PATCH 2/3] gracefully display filters

---
 apps/api/metadata.py | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/apps/api/metadata.py b/apps/api/metadata.py
index 9f69b80..114b0d9 100644
--- a/apps/api/metadata.py
+++ b/apps/api/metadata.py
@@ -1,6 +1,12 @@
-from rest_framework import serializers
+
+from logging import getLogger
+
+from rest_framework import serializers, fields
 from rest_framework.metadata import SimpleMetadata
 from rest_framework.request import clone_request
+from django.utils.encoding import force_str
+
+log = getLogger(__name__)
 
 
 class ExpandedMetadata(SimpleMetadata):
@@ -11,6 +17,9 @@ class ExpandedMetadata(SimpleMetadata):
         if hasattr(view, "ordering_fields"):
             metadata["sort"] = view.ordering_fields
 
+        if hasattr(view, "filterset_fields"):
+            metadata["filter"] = view.filterset_fields
+
         return metadata
 
     def determine_actions(self, request, view):
@@ -39,3 +48,13 @@ class ExpandedMetadata(SimpleMetadata):
                 view.request = request
 
         return actions
+
+    def get_field_info(self, field):
+        field_info = super().get_field_info(field)
+        if hasattr(field, 'default') and field.default is not fields.empty:
+            field_info['default'] = field.default
+
+        if hasattr(field, 'initial') and field.initial is not fields.empty:
+            field_info['initial'] = field.initial
+
+        return field_info

From 74dd3de7627fb6fc9a05c1ff3b389c93f2e71f00 Mon Sep 17 00:00:00 2001
From: Corban-Lee <corbz.jones@gmail.com>
Date: Wed, 24 Jul 2024 22:50:31 +0100
Subject: [PATCH 3/3] also gracefully display filters

---
 apps/api/serializers.py |   1 +
 apps/static/js/table.js | 102 ++++++++++++++++++++++++++++++++++++----
 2 files changed, 94 insertions(+), 9 deletions(-)

diff --git a/apps/api/serializers.py b/apps/api/serializers.py
index 8dff87a..473ee94 100644
--- a/apps/api/serializers.py
+++ b/apps/api/serializers.py
@@ -143,6 +143,7 @@ class SubscriptionSerializer_GET(DynamicModelSerializer):
 
     article_title_mutators = ArticleMutatorSerializer(many=True)
     article_desc_mutators = ArticleMutatorSerializer(many=True)
+    active = serializers.BooleanField(initial=True)
 
     class Meta:
         model = Subscription
diff --git a/apps/static/js/table.js b/apps/static/js/table.js
index b900993..97dc180 100644
--- a/apps/static/js/table.js
+++ b/apps/static/js/table.js
@@ -11,6 +11,8 @@ async function initTable(containingSelector, tableId, loadDataFunc, newRowFunc,
     createTableControls(containingSelector, pageSizeId);
 
     await bindSearchBar(searchId, loadDataFunc);
+    // await bindSortDropdown(sortDropdownId, loadDataFunc);
+    await bindFilterDropdown(filterDropdownId, loadDataFunc);
     await bindTablePagination(`${containingSelector} .table-pagination`, loadDataFunc);
     await bindTablePaginationResizer(`${containingSelector} .table-page-sizer`, loadDataFunc);
 }
@@ -50,8 +52,8 @@ function createSearchRow(containingSelector, searchId, sortDropdownId, filterDro
     if (options.sort) {
         $(`${containingSelector} .table-search-row .table-search-buttons`).append(`
             <div class="d-inline-block ms-3">
-                <div id=${sortDropdownId} class="dropdown table-sort-dropdown">
-                    <button type="button" class="btn btn-secondary rounded-1" data-bs-toggle="dropdown">
+                <div id="${sortDropdownId}" class="dropdown table-sort-dropdown">
+                    <button type="button" class="btn btn-secondary rounded-1" data-bs-toggle="dropdown" data-bs-auto-close="outside">
                         <i class="bi bi-sort-alpha-up"></i>
                     </button>
                     <ul class="dropdown-menu dropdown-menu-end">
@@ -63,11 +65,11 @@ function createSearchRow(containingSelector, searchId, sortDropdownId, filterDro
         populateSortDropdown(sortDropdownId, options.sort);
     }
 
-    if (options.actions.GET) {
+    if (options.filter && options.actions.GET) {
         $(`${containingSelector} .table-search-row .table-search-buttons`).append(`
             <div class="d-inline-block ms-3">
-                <div id=${filterDropdownId} class="dropdown table-filter-dropdown">
-                    <button type="button" class="btn btn-secondary rounded-1" data-bs-toggle="dropdown">
+                <div id="${filterDropdownId}" class="dropdown table-filter-dropdown">
+                    <button type="button" class="btn btn-secondary rounded-1" data-bs-toggle="dropdown" data-bs-auto-close="outside">
                         <i class="bi bi-funnel"></i>
                     </button>
                     <ul class="dropdown-menu dropdown-menu-end">
@@ -76,7 +78,7 @@ function createSearchRow(containingSelector, searchId, sortDropdownId, filterDro
                 </div>
             </div>
         `);
-        populateFilterDropdown();
+        populateFilterDropdown(filterDropdownId, options.actions.GET, options.filter);
     }
 
     if (deleteSelectedFunc) {
@@ -93,7 +95,7 @@ function createSearchRow(containingSelector, searchId, sortDropdownId, filterDro
 
 function populateSortDropdown(sortDropdownId, sortOptions) {
     sortOptions.forEach(sortKey => {
-        let label = sortKey.replace(/_/g, " ")
+        let label = sortKey.replace(/_/g, " ");
         $(`#${sortDropdownId} .dropdown-menu`).append(`
             <li>
                 <button type="button" class="dropdown-item text-capitalize d-flex justify-content-between" data-sortkey="${sortKey}">
@@ -109,19 +111,101 @@ function populateSortDropdown(sortDropdownId, sortOptions) {
     });
 }
 
-function populateFilterDropdown() { }
+function populateFilterDropdown(filterDropdownId, options, filterKeys) {
+    for (key in options) {
+        if (!filterKeys.includes(key))
+            continue;
+
+        let label = options[key].label; // key.replace(/_/g, " ");
+            id = key + "Filter";
+            $elem = null;
+
+        switch (options[key].type) {
+            case ("boolean"):
+                $elem = $(`
+                    <div>
+                        <input type="checkbox" name="${id}" id="${id}" class="btn-check" autocomplete="off" data-key="${key}">
+                        <label for="${id}" class="dropdown-item d-flex justify-content-between" role="button">
+                            <span>${label}</span>
+                            <i class="bi bi-x"></i>
+                        </label>
+                    </div>
+                `);
+                bindFilterBoolean($elem);
+                $elem.find('input[type="checkbox"]').prop("checked", options[key].default ? true : false).trigger("change");
+                updateCheckboxState($elem);
+                break
+
+            default:
+                continue;
+        }
+
+        $(`#${filterDropdownId} .dropdown-menu`).append($("<li>").append($elem));
+    }
+}
+
+function bindFilterBoolean($elem) {
+    $elem.find('label').on("click", function(event) {
+        event.preventDefault();
+        let $input = $elem.find('input[type="checkbox"]');
+        let state = $input.data("state");
+
+        switch (state) {
+            case true:
+                state = false;
+                break;
+            case false:
+                state = null;
+                break;
+            case null:
+            default:
+                state = true;
+                break;
+        }
+
+        $input.data("state", state);
+        updateCheckboxState($elem);
+    });
+}
+
+function updateCheckboxState($elem) {
+    let state = $elem.find('input[type="checkbox"]').data("state");
+    let $icon = $elem.find(".bi");
+
+    switch (state) {
+        case true:
+            $elem.find('input[type="checkbox"]').prop("checked", true);
+            $icon.removeClass().addClass("bi bi-check");
+            break;
+        case false:
+            $elem.find('input[type="checkbox"]').prop("checked", false);
+            $icon.removeClass().addClass("bi bi-x");
+            break;
+        case null:
+        default:
+            $elem.find('input[type="checkbox"]').prop("checked", false);
+            $icon.removeClass().addClass("bi bi-dash");
+            break;
+    }
+}
 
 async function bindSearchBar(searchBarSelector, loadDataFunc) {
     searchBar = $("#" + searchBarSelector)
     searchBar.on("input", async function() {
         clearTimeout(timeouts[searchBarSelector]);
-        searchString = $(this).val();
+        var searchString = $(this).val();
         timeouts[searchBarSelector] = setTimeout(async function() {
             await loadDataFunc(getCurrentlyActiveServer().guild_id, 1, null, searchString);
         }, 300);
     });
 }
 
+async function bindFilterDropdown(filterDropdownId, loadDataFunc) {
+    $(`#${filterDropdownId} input`).on("change", function() {
+        alert($(this).attr("data-key"));
+    });
+}
+
 function createTable(containingSelector, tableId) {
     $(containingSelector).append(`
     <div class="table-responsive my-3 px-3">