Merge remote-tracking branch 'origin/6.2' into 6.2-PaidSubscriptionUserListPage-to-grid-view

# Conflicts:
#	wcfsetup/install/files/lib/bootstrap/com.woltlab.wcf.php

Author: Cyperghost

ts/WoltLabSuite/Core/Component/GridView.ts

@@ -82,7 +82,7 @@ export class GridView {
         dropdown?.querySelectorAll<HTMLButtonElement>("[data-interaction]").forEach((element) => {
           element.addEventListener("click", () => {
             row.dispatchEvent(
-              new CustomEvent("interaction", {
+              new CustomEvent("interaction:execute", {
                 detail: element.dataset,
                 bubbles: true,
               }),
@@ -98,25 +98,25 @@ export class GridView {
       void this.#loadRows(StateChangeCause.Change);
     });
 
-    this.#table.addEventListener("refresh", (event) => {
+    this.#table.addEventListener("interaction:invalidate", (event) => {
       void this.#refreshRow(event.target as HTMLElement);
     });
 
-    this.#table.addEventListener("remove", (event) => {
+    this.#table.addEventListener("interaction:remove", (event) => {
       (event.target as HTMLElement).remove();
     });
 
-    this.#table.addEventListener("reset-selection", () => {
+    this.#table.addEventListener("interaction:reset-selection", () => {
       this.#state.resetSelection();
     });
   }
 
   #setupState(gridId: string, pageNo: number, baseUrl: string, sortField: string, sortOrder: string): State {
     const state = new State(gridId, this.#table, pageNo, baseUrl, sortField, sortOrder);
-    state.addEventListener("change", (event) => {
+    state.addEventListener("grid-view:change", (event) => {
       void this.#loadRows(event.detail.source);
     });
-    state.addEventListener("getBulkInteractions", (event) => {
+    state.addEventListener("grid-view:get-bulk-interactions", (event) => {
       void this.#loadBulkInteractions(event.detail.objectIds);
     });
 

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

@@ -111,19 +111,19 @@ export class Filter extends EventTarget {
     if (ok) {
       this.#filters = new Map(Object.entries(result as ArrayLike<string>));
 
-      this.dispatchEvent(new CustomEvent("change"));
+      this.dispatchEvent(new CustomEvent("grid-view:change"));
     }
   }
 
   #removeFilter(filter: string): void {
     this.#filters.delete(filter);
 
-    this.dispatchEvent(new CustomEvent("change"));
+    this.dispatchEvent(new CustomEvent("grid-view:change"));
   }
 }
 
 interface FilterEventMap {
-  change: CustomEvent<void>;
+  "grid-view:change": CustomEvent<void>;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging

ts/WoltLabSuite/Core/Component/GridView/Selection.ts

@@ -184,7 +184,9 @@ export class Selection extends EventTarget {
       return;
     }
 
-    this.dispatchEvent(new CustomEvent("getBulkInteractions", { detail: { objectIds: this.getSelectedIds() } }));
+    this.dispatchEvent(
+      new CustomEvent("grid-view:get-bulk-interactions", { detail: { objectIds: this.getSelectedIds() } }),
+    );
 
     if (this.#bulkInteractionsLoadingDelay !== undefined) {
       window.clearTimeout(this.#bulkInteractionsLoadingDelay);
@@ -281,7 +283,7 @@ export class Selection extends EventTarget {
 }
 
 interface SelectionEventMap {
-  getBulkInteractions: CustomEvent<{ objectIds: number[] }>;
+  "grid-view:get-bulk-interactions": CustomEvent<{ objectIds: number[] }>;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging

ts/WoltLabSuite/Core/Component/GridView/Sorting.ts

@@ -78,7 +78,7 @@ export class Sorting extends EventTarget {
 
     this.#renderActiveSorting();
 
-    this.dispatchEvent(new CustomEvent("change"));
+    this.dispatchEvent(new CustomEvent("grid-view:change"));
   }
 
   #renderActiveSorting(): void {
@@ -93,7 +93,7 @@ export class Sorting extends EventTarget {
 }
 
 interface SortingEventMap {
-  change: CustomEvent<void>;
+  "grid-view:change": CustomEvent<void>;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging

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

@@ -45,18 +45,20 @@ export class State extends EventTarget {
     });
 
     this.#filter = new Filter(gridId);
-    this.#filter.addEventListener("change", () => {
+    this.#filter.addEventListener("grid-view:change", () => {
       this.#switchPage(1, StateChangeCause.Change);
     });
 
     this.#sorting = new Sorting(table, sortField, sortOrder);
-    this.#sorting.addEventListener("change", () => {
+    this.#sorting.addEventListener("grid-view:change", () => {
       this.#switchPage(1, StateChangeCause.Change);
     });
 
     this.#selection = new Selection(gridId, table);
-    this.#selection.addEventListener("getBulkInteractions", (event) => {
-      this.dispatchEvent(new CustomEvent("getBulkInteractions", { detail: { objectIds: event.detail.objectIds } }));
+    this.#selection.addEventListener("grid-view:get-bulk-interactions", (event) => {
+      this.dispatchEvent(
+        new CustomEvent("grid-view:get-bulk-interactions", { detail: { objectIds: event.detail.objectIds } }),
+      );
     });
 
     window.addEventListener("popstate", () => {
@@ -98,7 +100,7 @@ export class State extends EventTarget {
     this.#pagination.page = pageNo;
     this.#pageNo = pageNo;
 
-    this.dispatchEvent(new CustomEvent("change", { detail: { source } }));
+    this.dispatchEvent(new CustomEvent("grid-view:change", { detail: { source } }));
   }
 
   #updateQueryString(): void {
@@ -157,8 +159,8 @@ export class State extends EventTarget {
 }
 
 interface StateEventMap {
-  change: CustomEvent<{ source: StateChangeCause }>;
-  getBulkInteractions: CustomEvent<{ objectIds: number[] }>;
+  "grid-view:change": CustomEvent<{ source: StateChangeCause }>;
+  "grid-view:get-bulk-interactions": CustomEvent<{ objectIds: number[] }>;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging

ts/WoltLabSuite/Core/Component/Interaction/Bulk/FormBuilderDialog.ts

@@ -28,7 +28,7 @@ async function handleFormBuilderDialogAction(
     }
 
     element.dispatchEvent(
-      new CustomEvent("refresh", {
+      new CustomEvent("interaction:invalidate", {
         bubbles: true,
       }),
     );
@@ -37,7 +37,7 @@ async function handleFormBuilderDialogAction(
   // TODO: This shows a generic success message and should be replaced with a more specific message.
   showNotification();
 
-  container.dispatchEvent(new CustomEvent("reset-selection"));
+  container.dispatchEvent(new CustomEvent("interaction:reset-selection"));
 }
 
 export function setup(identifier: string, container: HTMLElement): void {

ts/WoltLabSuite/Core/Component/Interaction/Bulk/Rpc.ts

@@ -53,7 +53,7 @@ async function handleRpcInteraction(
         }
 
         element.dispatchEvent(
-          new CustomEvent("remove", {
+          new CustomEvent("interaction:remove", {
             bubbles: true,
           }),
         );
@@ -67,7 +67,7 @@ async function handleRpcInteraction(
       }
 
       element.dispatchEvent(
-        new CustomEvent("refresh", {
+        new CustomEvent("interaction:invalidate", {
           bubbles: true,
         }),
       );
@@ -77,7 +77,7 @@ async function handleRpcInteraction(
     showNotification();
   }
 
-  container.dispatchEvent(new CustomEvent("reset-selection"));
+  container.dispatchEvent(new CustomEvent("interaction:reset-selection"));
 }
 
 export function setup(identifier: string, container: HTMLElement): void {

ts/WoltLabSuite/Core/Component/Interaction/FormBuilderDialog.ts

@@ -18,7 +18,7 @@ async function handleFormBuilderDialogAction(element: HTMLElement, endpoint: str
   }
 
   element.dispatchEvent(
-    new CustomEvent("refresh", {
+    new CustomEvent("interaction:invalidate", {
       bubbles: true,
     }),
   );
@@ -28,7 +28,7 @@ async function handleFormBuilderDialogAction(element: HTMLElement, endpoint: str
 }
 
 export function setup(identifier: string, container: HTMLElement): void {
-  container.addEventListener("interaction", (event: CustomEvent) => {
+  container.addEventListener("interaction:execute", (event: CustomEvent) => {
     if (event.detail.interaction === identifier) {
       void handleFormBuilderDialogAction(event.target as HTMLElement, event.detail.endpoint);
     }

ts/WoltLabSuite/Core/Component/Interaction/LegacyDboAction.ts

@@ -34,14 +34,14 @@ async function handleDboAction(
     // TODO: This shows a generic success message and should be replaced with a more specific message.
     showNotification(undefined, () => {
       element.dispatchEvent(
-        new CustomEvent("remove", {
+        new CustomEvent("interaction:remove", {
           bubbles: true,
         }),
       );
     });
   } else {
     element.dispatchEvent(
-      new CustomEvent("refresh", {
+      new CustomEvent("interaction:invalidate", {
         bubbles: true,
       }),
     );
@@ -52,7 +52,7 @@ async function handleDboAction(
 }
 
 export function setup(identifier: string, container: HTMLElement): void {
-  container.addEventListener("interaction", (event: CustomEvent) => {
+  container.addEventListener("interaction:execute", (event: CustomEvent) => {
     if (event.detail.interaction === identifier) {
       void handleDboAction(
         event.target as HTMLElement,

ts/WoltLabSuite/Core/Component/Interaction/Rpc.ts

@@ -45,7 +45,7 @@ async function handleRpcInteraction(
     // TODO: This shows a generic success message and should be replaced with a more specific message.
     showNotification(undefined, () => {
       element.dispatchEvent(
-        new CustomEvent("remove", {
+        new CustomEvent("interaction:remove", {
           bubbles: true,
         }),
       );
@@ -55,7 +55,7 @@ async function handleRpcInteraction(
       container.dispatchEvent(new CustomEvent("interaction:invalidate-all"));
     } else {
       element.dispatchEvent(
-        new CustomEvent("refresh", {
+        new CustomEvent("interaction:invalidate", {
           bubbles: true,
         }),
       );
@@ -67,7 +67,7 @@ async function handleRpcInteraction(
 }
 
 export function setup(identifier: string, container: HTMLElement): void {
-  container.addEventListener("interaction", (event: CustomEvent) => {
+  container.addEventListener("interaction:execute", (event: CustomEvent) => {
     if (event.detail.interaction === identifier) {
       void handleRpcInteraction(
         container,