From b0d547d58eae0e68dfd323e59a0b04b794a87bc8 Mon Sep 17 00:00:00 2001
From: Jordan Blasenhauer <blasenhauer.jordan.dev@gmail.com>
Date: Tue, 14 May 2024 15:43:46 +0200
Subject: [PATCH] add new filter class to bans page

---
 src/ui/static/js/bans.js   | 177 ++++++++-----------------------------
 src/ui/templates/bans.html |  16 ++--
 2 files changed, 45 insertions(+), 148 deletions(-)

diff --git a/src/ui/static/js/bans.js b/src/ui/static/js/bans.js
index 022b664b3..4dfb933a9 100644
--- a/src/ui/static/js/bans.js
+++ b/src/ui/static/js/bans.js
@@ -1,126 +1,7 @@
-import { CheckNoMatchFilter } from "./utils/settings.js";
+import {
+  Filter
+} from "./utils/dashboard.js";
 
-class Filter {
-  constructor(prefix = "bans") {
-    this.prefix = prefix;
-    this.container = document.querySelector(`[data-${this.prefix}-filter]`);
-    this.keyInp = document.querySelector("input#keyword");
-    this.termValue = "all";
-    this.reasonValue = "all";
-    this.initHandler();
-  }
-
-  initHandler() {
-    // REASON HANDLER
-    this.container.addEventListener("click", (e) => {
-      try {
-        if (
-          e.target
-            .closest("button")
-            .getAttribute(`data-${this.prefix}-setting-select-dropdown-btn`) ===
-          "reason"
-        ) {
-          setTimeout(() => {
-            const value = document
-              .querySelector(
-                `[data-${this.prefix}-setting-select-text="reason"]`,
-              )
-              .textContent.trim();
-
-            this.reasonValue = value;
-            //run filter
-            this.filter();
-          }, 10);
-        }
-      } catch (err) {}
-    });
-    // TERM HANDLER
-    this.container.addEventListener("click", (e) => {
-      try {
-        if (
-          e.target
-            .closest("button")
-            .getAttribute(`data-${this.prefix}-setting-select-dropdown-btn`) ===
-          "term"
-        ) {
-          setTimeout(() => {
-            const value = document
-              .querySelector(`[data-${this.prefix}-setting-select-text="term"]`)
-              .textContent.trim();
-
-            this.termValue = value;
-            //run filter
-            this.filter();
-          }, 10);
-        }
-      } catch (err) {}
-    });
-    //KEYWORD HANDLER
-    this.keyInp.addEventListener("input", (e) => {
-      this.filter();
-    });
-  }
-
-  filter() {
-    const bans = document.querySelector(`[data-${this.prefix}-list]`).children;
-    if (bans.length === 0) return;
-    //reset
-    for (let i = 0; i < bans.length; i++) {
-      const el = bans[i];
-      el.classList.remove("hidden");
-    }
-    //filter type
-    this.setFilterKeyword(bans);
-    this.setFilterReason(bans);
-    this.setFilterTerm(bans);
-  }
-
-  setFilterKeyword(bans) {
-    const keyword = this.keyInp.value.trim().toLowerCase();
-    if (!keyword) return;
-    for (let i = 0; i < bans.length; i++) {
-      const el = bans[i];
-
-      const ip = this.getElAttribut(el, "ip");
-      const banStart = this.getElAttribut(el, "ban_start");
-      const banEnd = this.getElAttribut(el, "ban_end");
-      const remain = this.getElAttribut(el, "remain");
-
-      if (
-        !ip.includes(keyword) &&
-        !banStart.includes(keyword) &&
-        !banEnd.includes(keyword) &&
-        !remain.includes(keyword)
-      )
-        el.classList.add("hidden");
-    }
-  }
-
-  setFilterTerm(bans) {
-    if (this.termValue === "all") return;
-    for (let i = 0; i < bans.length; i++) {
-      const el = bans[i];
-      const type = this.getElAttribut(el, "term");
-      if (type !== this.termValue) el.classList.add("hidden");
-    }
-  }
-
-  setFilterReason(bans) {
-    if (this.reasonValue === "all") return;
-    for (let i = 0; i < bans.length; i++) {
-      const el = bans[i];
-      const type = this.getElAttribut(el, "reason");
-      if (type !== this.reasonValue) el.classList.add("hidden");
-    }
-  }
-
-  getElAttribut(el, attr) {
-    return el
-      .querySelector(`[data-${this.prefix}-${attr}]`)
-      .getAttribute(`data-${this.prefix}-${attr}`)
-      .trim();
-  }
-}
 
 class Dropdown {
   constructor(prefix = "bans") {
@@ -604,26 +485,38 @@ class AddBanModal {
 }
 
 const setDropdown = new Dropdown();
-const setFilter = new Filter();
 const setUnban = new Unban();
 const setModal = new AddBanModal();
 
-const checkPluginKeyword = new CheckNoMatchFilter(
-  document.querySelector("input#keyword"),
-  "input",
-  document
-    .querySelector("[data-bans-list]")
-    .querySelectorAll("[data-bans-item]"),
-  document.querySelector("[data-bans-list-container]"),
-  document.querySelector("[data-bans-nomatch]"),
-);
-
-const checkPluginSelect = new CheckNoMatchFilter(
-  document.querySelectorAll("button[data-bans-setting-select-dropdown-btn]"),
-  "select",
-  document
-    .querySelector("[data-bans-list]")
-    .querySelectorAll("[data-bans-item]"),
-  document.querySelector("[data-bans-list-container]"),
-  document.querySelector("[data-bans-nomatch]"),
-);
+const filterContainer = document.querySelector("[data-bans-list-container]");
+if(filterContainer) {
+  const noMatchEl = document.querySelector("[data-bans-nomatch]");
+  const filterEls = document.querySelectorAll(`[data-bans-item]`);
+  const keywordFilter = {
+    "handler": document.querySelector("input#keyword"),
+    "handlerType" : "input",
+    "value" : document.querySelector("input#keyword").value,
+    "filterEls": filterEls,
+    "filterAtt" : "data-bans-keyword",
+    "filterType" : "keyword",
+  };
+    const reasonFilter = {
+    "handler": document.querySelector("[data-bans-setting-select-dropdown='reason']"),
+    "handlerType" : "select",
+    "value" : document.querySelector("[data-bans-setting-select-text='reason']").textContent.trim().toLowerCase(),
+    "filterEls": filterEls,
+    "filterAtt" : "data-bans-reason",
+    "filterType" : "match",
+  };
+
+  const termFilter = {
+    "handler": document.querySelector("[data-bans-setting-select-dropdown='term']"),
+    "handlerType" : "select",
+    "value" : document.querySelector("[data-bans-setting-select-text='term']").textContent.trim().toLowerCase(),
+    "filterEls": filterEls,
+    "filterAtt" : "data-bans-term",
+    "filterType" : "match",
+  };
+  new Filter("bans", [keywordFilter, reasonFilter, termFilter], filterContainer, noMatchEl);
+} 
+
diff --git a/src/ui/templates/bans.html b/src/ui/templates/bans.html
index 1d8507ab7..023a8f7b2 100644
--- a/src/ui/templates/bans.html
+++ b/src/ui/templates/bans.html
@@ -130,6 +130,10 @@ <h5 class="mx-2 font-bold dark:text-white/90 mx-2">BANS LIST</h5>
                        {% for ban in bans %}
                            <li data-{{attribute_name}}-item
                                data-{{attribute_name}}-list-item="{{ ban }}"
+                               data-{{attribute_name}}-keyword="{{ ban['ip'] }} {{ ban['ban_start'] }} {{ ban['ban_end'] }}"
+                               data-{{attribute_name}}-reason="{{ ban['reason'] }}"
+                               data-{{attribute_name}}-remain="{{ ban['remain'] }}"
+                               data-{{attribute_name}}-term="{{ ban['term'] }}"
                                class="items-center grid grid-cols-12 border-b border-gray-300 py-2.5 break-all">
                                <div data-{{attribute_name}}-ban-select
                                     data-checkbox-handler="ban-item-{{ loop.index }}"
@@ -153,16 +157,16 @@ <h5 class="mx-2 font-bold dark:text-white/90 mx-2">BANS LIST</h5>
                                    </svg>
                                </div>
                                <p class="dark:text-gray-400 text-sm col-span-2 m-0 mr-1 my-1"
-                                  data-{{attribute_name}}-ip="{{ ban['ip'] }}">{{ ban['ip'] }}</p>
+                                  >{{ ban['ip'] }}</p>
                                <p class="dark:text-gray-400 text-sm col-span-2 m-0 mr-1 my-1"
-                                  data-{{attribute_name}}-reason="{{ ban['reason'] }}">{{ ban['reason'] }}</p>
+                                  >{{ ban['reason'] }}</p>
                                <p class="dark:text-gray-400 text-sm col-span-2 m-0 mr-1 my-1"
-                                  data-{{attribute_name}}-ban_start="{{ ban['ban_start'] }}">{{ ban['ban_start'] }}</p>
+                                  >{{ ban['ban_start'] }}</p>
                                <p class="dark:text-gray-400 text-sm col-span-2 m-0 mr-1 my-1"
-                                  data-{{attribute_name}}-ban_end="{{ ban['ban_end'] }}">{{ ban['ban_end'] }}</p>
+                                  >{{ ban['ban_end'] }}</p>
                                <p class="dark:text-gray-400 text-sm col-span-3 m-0 mr-1 my-1"
-                                  data-{{attribute_name}}-remain="{{ ban['remain'] }}">{{ ban['remain'] }}</p>
-                               <p class="hidden" data-{{attribute_name}}-term="{{ ban['term'] }}">{{ ban['term'] }}</p>
+                                  >{{ ban['remain'] }}</p>
+                               <p class="hidden">{{ ban['term'] }}</p>
                            </li>
                        {% endfor %}
                    </ul>