Merge pull request #6258 from WoltLab/6.2-pagination-behavior-attribute

Allow control of the behavior of the pagination

Author: BurntimeX

com.woltlab.wcf/templates/shared_gridView.tpl

@@ -68,7 +68,13 @@
 		{/if}
 
 		<div class="gridView__pagination">
-			<woltlab-core-pagination id="{$view->getID()}_pagination" page="{$view->getPageNo()}" count="{$view->countPages()}"></woltlab-core-pagination>
+			<woltlab-core-pagination
+				id="{$view->getID()}_pagination"
+				page="{$view->getPageNo()}"
+				count="{$view->countPages()}"
+				behavior="button"
+				url="{$view->getBaseUrl()}"
+			></woltlab-core-pagination>
 		</div>
 	</div>
 

ts/WoltLabSuite/Core/Component/GridView/State.ts

@@ -64,6 +64,8 @@ export class State extends EventTarget {
     window.addEventListener("popstate", () => {
       this.#handlePopState();
     });
+
+    this.#updatePaginationUrl();
   }
 
   getPageNo(): number {
@@ -89,6 +91,7 @@ export class State extends EventTarget {
   updateFromResponse(cause: StateChangeCause, count: number, filterLabels: ArrayLike<string>): void {
     this.#filter.setFilterLabels(filterLabels);
     this.#pagination.count = count;
+    this.#updatePaginationUrl();
     this.#selection.refresh();
 
     if (cause === StateChangeCause.Change || cause === StateChangeCause.Pagination) {
@@ -131,6 +134,30 @@ export class State extends EventTarget {
     window.history.pushState({}, document.title, url.toString());
   }
 
+  #updatePaginationUrl(): void {
+    if (!this.#baseUrl) {
+      return;
+    }
+
+    const url = new URL(this.#baseUrl);
+
+    const parameters: [string, string][] = [];
+    for (const parameter of this.#sorting.getQueryParameters()) {
+      parameters.push(parameter);
+    }
+
+    for (const parameter of this.#filter.getQueryParameters()) {
+      parameters.push(parameter);
+    }
+
+    if (parameters.length > 0) {
+      url.search += url.search !== "" ? "&" : "?";
+      url.search += new URLSearchParams(parameters).toString();
+    }
+
+    this.#pagination.url = url.toString();
+  }
+
   #handlePopState(): void {
     let pageNo = 1;
 

ts/WoltLabSuite/WebComponent/woltlab-core-pagination.ts

@@ -135,6 +135,16 @@
       if (url) {
         button = document.createElement("a");
         button.href = url;
+
+        if (this.behavior === "button") {
+          button.addEventListener("click", (event) => {
+            event.preventDefault();
+
+            if (this.page !== page) {
+              this.#switchPage(page);
+            }
+          });
+        }
       } else {
         button = document.createElement("button");
         button.type = "button";
@@ -241,6 +251,10 @@
 
     getLinkUrl(page: number): string {
       if (!this.url) {
+        if (this.behavior === "link") {
+          throw new Error("The 'url' attribute is missing.");
+        }
+
         return "";
       }
 
@@ -253,7 +267,7 @@
 
     jumpToPage(page: number): void {
       const url = this.getLinkUrl(page);
-      if (url) {
+      if (url && this.behavior !== "button") {
         window.location.href = url;
       } else {
         this.#switchPage(page);
@@ -298,6 +312,21 @@
       this.setAttribute("url", url);
       this.#render();
     }
+
+    get behavior(): "auto" | "button" | "link" {
+      const behavior = this.getAttribute("behavior");
+
+      if (behavior === "button" || behavior === "link") {
+        return behavior;
+      }
+
+      return "auto";
+    }
+
+    set behavior(behavior: "auto" | "button" | "link") {
+      this.setAttribute("behavior", behavior);
+      this.#render();
+    }
   }
 
   // eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging

ts/global.d.ts

@@ -128,6 +128,8 @@ declare global {
     set page(page: number);
     get url(): string;
     set url(url: string);
+    get behavior(): "auto" | "button" | "link";
+    set behavior(url: "auto" | "button" | "link");
   }
 
   interface WoltlabCoreToggleButtonElement extends HTMLElement {