From: Marcel Werk <burntime@woltlab.com>
Date: Tue, 16 May 2023 12:25:49 +0000 (+0200)
Subject: Improve search form ux
X-Git-Tag: 6.0.0_Alpha_1~77^2^2~2
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=159faa8d07f18978c56cf81369e3c163e586adce;p=GitHub%2FWoltLab%2FWCF.git

Improve search form ux

If a user uses the search function within a certain area (e.g. subforum or thread), only the corresponding area will be searched. If the search does not return any results in this case, the "advanced filter" area in the search form is collapsed and therefore not directly visible to the user that advanced filters are active.
---

diff --git a/ts/WoltLabSuite/Core/Ui/Search/Extended.ts b/ts/WoltLabSuite/Core/Ui/Search/Extended.ts
index e99bedea6d..bb0127940e 100644
--- a/ts/WoltLabSuite/Core/Ui/Search/Extended.ts
+++ b/ts/WoltLabSuite/Core/Ui/Search/Extended.ts
@@ -42,6 +42,7 @@ export class UiSearchExtended {
   private readonly queryInput: HTMLInputElement;
   private readonly typeInput: HTMLSelectElement;
   private readonly delimiter: HTMLDivElement;
+  private readonly filtersContainer: HTMLElement;
   private searchID: number | undefined = undefined;
   private pages = 0;
   private activePage = 1;
@@ -53,6 +54,7 @@ export class UiSearchExtended {
     this.form = document.getElementById("extendedSearchForm") as HTMLFormElement;
     this.queryInput = document.getElementById("searchQuery") as HTMLInputElement;
     this.typeInput = document.getElementById("searchType") as HTMLSelectElement;
+    this.filtersContainer = document.querySelector(".searchFiltersContainer") as HTMLElement;
     this.delimiter = document.createElement("div");
 
     this.form.insertAdjacentElement("afterend", this.delimiter);
@@ -133,6 +135,10 @@ export class UiSearchExtended {
       this.pages = pages!;
       this.activePage = pageNo!;
       this.showSearchResults(template!);
+    } else if (Object.keys(this.getFormData()).length > 4) {
+      // If no results are found and advanced filters are active,
+      // make sure that the corresponding area is shown,
+      this.filtersContainer.setAttribute("open", "");
     }
   }
 
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search/Extended.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search/Extended.js
index b1ccb74a29..31c02e7b64 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search/Extended.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search/Extended.js
@@ -20,6 +20,7 @@ define(["require", "exports", "tslib", "../../Ajax", "../../Date/Picker", "../..
         queryInput;
         typeInput;
         delimiter;
+        filtersContainer;
         searchID = undefined;
         pages = 0;
         activePage = 1;
@@ -30,6 +31,7 @@ define(["require", "exports", "tslib", "../../Ajax", "../../Date/Picker", "../..
             this.form = document.getElementById("extendedSearchForm");
             this.queryInput = document.getElementById("searchQuery");
             this.typeInput = document.getElementById("searchType");
+            this.filtersContainer = document.querySelector(".searchFiltersContainer");
             this.delimiter = document.createElement("div");
             this.form.insertAdjacentElement("afterend", this.delimiter);
             this.initEventListener();
@@ -98,6 +100,11 @@ define(["require", "exports", "tslib", "../../Ajax", "../../Date/Picker", "../..
                 this.activePage = pageNo;
                 this.showSearchResults(template);
             }
+            else if (Object.keys(this.getFormData()).length > 4) {
+                // If no results are found and advanced filters are active,
+                // make sure that the corresponding area is shown,
+                this.filtersContainer.setAttribute("open", "");
+            }
         }
         updateQueryString(searchAction) {
             const url = new URL(this.form.action);