Delegate the filter handling to Filter

Author: dtdesign

ts/WoltLabSuite/Core/Component/GridView.ts

@@ -109,9 +109,9 @@ export class GridView {
       parameters.push(parameter);
     }
 
-    this.#filter.getActiveFilters().forEach((value, key) => {
-      parameters.push([`filters[${key}]`, value]);
-    });
+    for (const parameter of this.#filter.getQueryParameters()) {
+      parameters.push(parameter);
+    }
 
     if (parameters.length > 0) {
       url.search += url.search !== "" ? "&" : "?";
@@ -145,21 +145,16 @@ export class GridView {
 
   #handlePopState(): void {
     let pageNo = 1;
-    this.#filter.resetFilters();
 
     const url = new URL(window.location.href);
     url.searchParams.forEach((value, key) => {
       if (key === "pageNo") {
         pageNo = parseInt(value, 10);
         return;
       }
-
-      const matches = key.match(/^filters\[([a-z0-9_]+)\]$/i);
-      if (matches) {
-        this.#filter.setFilter(matches[1], value);
-      }
     });
 
+    this.#filter.updateFromSearchParams(url.searchParams);
     this.#sorting.updateFromSearchParams(url.searchParams);
 
     this.#switchPage(pageNo, false);

ts/WoltLabSuite/Core/Component/GridView/Filter.ts

@@ -16,16 +16,29 @@ export class Filter extends EventTarget {
     this.#setupEventListeners();
   }
 
-  resetFilters(): void {
-    this.#filters.clear();
+  getActiveFilters(): Map<string, string> {
+    return new Map(this.#filters);
   }
 
-  setFilter(key: string, value: string): void {
-    this.#filters.set(key, value);
+  getQueryParameters(): [string, string][] {
+    const parameters: [string, string][] = [];
+
+    for (const [key, value] of this.#filters.entries()) {
+      parameters.push([`filters[${key}]`, value]);
+    }
+
+    return parameters;
   }
 
-  getActiveFilters(): Map<string, string> {
-    return new Map(this.#filters);
+  updateFromSearchParams(params: URLSearchParams): void {
+    this.#filters.clear();
+
+    params.forEach((value, key) => {
+      const matches = key.match(/^filters\[([a-z0-9_]+)\]$/i);
+      if (matches) {
+        this.#filters.set(matches[1], value);
+      }
+    });
   }
 
   setFilterLabels(labels: ArrayLike<string>): void {