Bulk interactions

Author: BurntimeX

com.woltlab.wcf/templates/shared_gridView.tpl

@@ -22,9 +22,9 @@
 		<table class="gridView__table" id="{$view->getID()}_table"{if !$view->countRows()} hidden{/if}>
 			<thead>
 				<tr class="gridView__headerRow">
-					{if true}
+					{if $view->hasBulkInteractions()}
 						<th class="gridView__headerColumn gridView__selectColumn">
-							<input type="checkbox" class="gridView__selectAllRows" aria-label="todo: select all rows">
+							<input type="checkbox" class="gridView__selectAllRows" aria-label="{lang}wcf.clipboard.item.markAll{/lang}">
 						</th>
 					{/if}
 					{foreach from=$view->getVisibleColumns() item='column'}
@@ -57,9 +57,18 @@
 		<woltlab-core-pagination id="{$view->getID()}_pagination" page="{$view->getPageNo()}" count="{$view->countPages()}"></woltlab-core-pagination>
 	</div>
 
-	<div class="gridView__selectionBar">
-
-	</div>
+	{if $view->hasBulkInteractions()}
+		<div id="{$view->getID()}_selectionBar" class="gridView__selectionBar dropdown" hidden>
+			<button type="button" id="{$view->getID()}_bulkInteractionButton" class="button gridView__bulkInteractionButton dropdownToggle">3 Entries Selected</button>
+			<ul class="dropdownMenu">
+				<li class="disabled"><span>Lädt ...</span></li>
+				<li class="dropdownDivider"></li>
+				<li>
+					<button type="button" id="{$view->getID()}_resetSelectionButton">{lang}wcf.clipboard.item.unmarkAll{/lang}</button>
+				</li>
+			</ul>
+		</div>
+	{/if}
 
 	<woltlab-core-notice type="info" id="{$view->getID()}_noItemsNotice"{if $view->countRows()} hidden{/if}>{lang}wcf.global.noItems{/lang}</woltlab-core-notice>
 </div>
@@ -73,14 +82,18 @@
 			'{unsafe:$view->getBaseUrl()|encodeJS}',
 			'{unsafe:$view->getSortField()|encodeJS}',
 			'{unsafe:$view->getSortOrder()|encodeJS}',
+			'{unsafe:$view->getBulkInteractionProviderClassName()|encodeJS}',
 			new Map([
 				{foreach from=$view->getParameters() key='name' item='value'}
 					['{unsafe:$name|encodeJs}', '{unsafe:$value|encodeJs}'],
 				{/foreach}
-			])
+			]),
 		);
 	});
 </script>
 {if $view->hasInteractions()}
 	{unsafe:$view->renderInteractionInitialization()}
 {/if}
+{if $view->hasBulkInteractions()}
+	{unsafe:$view->renderBulkInteractionInitialization()}
+{/if}

com.woltlab.wcf/templates/shared_gridViewRows.tpl

@@ -1,9 +1,9 @@
 
 {foreach from=$view->getRows() item='row'}
 	<tr class="gridView__row" data-object-id="{$view->getObjectID($row)}">
-		{if true}
+		{if $view->hasBulkInteractions()}
 			<td class="gridView__column gridView__selectColumn">
-				<input type="checkbox" class="gridView__selectRow" aria-label="todo: select row">
+				<input type="checkbox" class="gridView__selectRow" aria-label="{lang}wcf.clipboard.item.mark{/lang}">
 			</td>
 		{/if}
 		{foreach from=$view->getVisibleColumns() item='column'}

ts/WoltLabSuite/Core/Api/Interactions/GetBulkContextMenuOptions.ts

@@ -0,0 +1,23 @@
+import { prepareRequest } from "WoltLabSuite/Core/Ajax/Backend";
+import { ApiResult, apiResultFromError, apiResultFromValue } from "../Result";
+
+type Response = {
+  template: string;
+};
+
+export async function getBulkContextMenuOptions(
+  providerClassName: string,
+  objectIds: number[],
+): Promise<ApiResult<Response>> {
+  let response: Response;
+  try {
+    response = (await prepareRequest(`${window.WSC_RPC_API_URL}core/interactions/bulk-context-menu-options`)
+      .post({ provider: providerClassName, objectIDs: objectIds })
+      .disableLoadingIndicator()
+      .fetchAsJson()) as Response;
+  } catch (e) {
+    return apiResultFromError(e);
+  }
+
+  return apiResultFromValue(response);
+}

ts/WoltLabSuite/Core/Component/GridView.ts

@@ -1,5 +1,6 @@
 import { getRow } from "../Api/Gridviews/GetRow";
 import { getRows } from "../Api/Gridviews/GetRows";
+import { getBulkContextMenuOptions } from "../Api/Interactions/GetBulkContextMenuOptions";
 import DomChangeListener from "../Dom/Change/Listener";
 import DomUtil from "../Dom/Util";
 import { wheneverFirstSeen } from "../Helper/Selector";
@@ -10,9 +11,8 @@ export class GridView {
   readonly #gridClassName: string;
   readonly #table: HTMLTableElement;
   readonly #state: State;
-
   readonly #noItemsNotice: HTMLElement;
-
+  readonly #bulkInteractionProviderClassName: string;
   #gridViewParameters?: Map<string, string>;
 
   constructor(
@@ -22,12 +22,13 @@ export class GridView {
     baseUrl: string = "",
     sortField = "",
     sortOrder = "ASC",
+    bulkInteractionProviderClassName: string,
     gridViewParameters?: Map<string, string>,
   ) {
     this.#gridClassName = gridClassName;
     this.#table = document.getElementById(`${gridId}_table`) as HTMLTableElement;
     this.#noItemsNotice = document.getElementById(`${gridId}_noItemsNotice`) as HTMLElement;
-
+    this.#bulkInteractionProviderClassName = bulkInteractionProviderClassName;
     this.#gridViewParameters = gridViewParameters;
 
     this.#initInteractions();
@@ -98,7 +99,15 @@ export class GridView {
     state.addEventListener("change", (event) => {
       void this.#loadRows(event.detail.source);
     });
+    state.addEventListener("getBulkInteractions", (event) => {
+      void this.#loadBulkInteractions(event.detail.objectIds);
+    });
 
     return state;
   }
+
+  async #loadBulkInteractions(objectIds: number[]): Promise<void> {
+    const response = await getBulkContextMenuOptions(this.#bulkInteractionProviderClassName, objectIds);
+    this.#state.setBulkInteractionContextMenuOptions(response.unwrap().template);
+  }
 }

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

@@ -1,18 +1,34 @@
 import { getStoragePrefix } from "WoltLabSuite/Core/Core";
 import { wheneverFirstSeen } from "WoltLabSuite/Core/Helper/Selector";
 
-export class Selection {
+// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging
+export class Selection extends EventTarget {
   readonly #markAll: HTMLInputElement | null = null;
   readonly #table: HTMLTableElement;
+  readonly #selectionBar: HTMLElement | null = null;
+  readonly #bulkInteractionButton: HTMLButtonElement | null = null;
+  #bulkInteractionContextMenuOptions: string | null = null;
+
+  constructor(gridId: string, table: HTMLTableElement) {
+    super();
 
-  constructor(table: HTMLTableElement) {
     this.#table = table;
 
     this.#markAll = this.#table.querySelector<HTMLInputElement>(".gridView__selectAllRows");
     this.#markAll?.addEventListener("change", () => {
       this.#change(this.#markAll!.checked);
     });
 
+    this.#selectionBar = document.getElementById(`${gridId}_selectionBar`) as HTMLElement;
+    this.#bulkInteractionButton = document.getElementById(`${gridId}_bulkInteractionButton`) as HTMLButtonElement;
+    this.#bulkInteractionButton?.addEventListener("click", () => {
+      this.#showBulkInteractionMenu();
+    });
+
+    document.getElementById(`${gridId}_resetSelectionButton`)?.addEventListener("click", () => {
+      this.#resetSelection();
+    });
+
     wheneverFirstSeen(`#${this.#table.id} .gridView__selectRow`, (checkbox: HTMLInputElement) => {
       checkbox.addEventListener("change", () => {
         this.#change();
@@ -74,6 +90,10 @@ export class Selection {
     if (!skipStorage) {
       this.#saveSelection(checkboxes);
     }
+
+    this.#bulkInteractionContextMenuOptions = null;
+
+    this.#updateSelectionBar();
   }
 
   #saveSelection(checkboxes: HTMLInputElement[]): void {
@@ -128,6 +148,67 @@ export class Selection {
   #getStorageKey(): string {
     return getStoragePrefix() + `gridView-${this.#table.id}-selection`;
   }
+
+  #updateSelectionBar(): void {
+    const selectedIds = this.getSelectedIds();
+
+    if (!this.#selectionBar) {
+      return;
+    }
+
+    if (selectedIds.length === 0) {
+      this.#selectionBar.hidden = true;
+      return;
+    }
+
+    this.#selectionBar.hidden = false;
+    this.#bulkInteractionButton!.textContent = `${selectedIds.length} selected`;
+  }
+
+  #showBulkInteractionMenu(): void {
+    if (this.#bulkInteractionContextMenuOptions === null) {
+      this.#loadBulkInteractionMenu();
+      return;
+    }
+  }
+
+  #loadBulkInteractionMenu(): void {
+    this.dispatchEvent(new CustomEvent("getBulkInteractions", { detail: { objectIds: this.getSelectedIds() } }));
+  }
+
+  setBulkInteractionContextMenuOptions(options: string): void {
+    this.#bulkInteractionContextMenuOptions = options;
+  }
+
+  #resetSelection(): void {
+    if (this.#markAll !== null) {
+      this.#markAll.checked = false;
+      this.#markAll.indeterminate = false;
+    }
+
+    this.#table
+      .querySelectorAll<HTMLInputElement>(".gridView__selectRow")
+      .forEach((checkbox) => (checkbox.checked = false));
+
+    window.localStorage.removeItem(this.#getStorageKey());
+
+    this.#updateSelectionBar();
+  }
+}
+
+interface SelectionEventMap {
+  getBulkInteractions: CustomEvent<{ objectIds: number[] }>;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging
+export interface Selection extends EventTarget {
+  addEventListener: {
+    <T extends keyof SelectionEventMap>(
+      type: T,
+      listener: (this: Selection, ev: SelectionEventMap[T]) => any,
+      options?: boolean | AddEventListenerOptions,
+    ): void;
+  } & HTMLElement["addEventListener"];
 }
 
 export default Selection;

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

@@ -45,7 +45,10 @@ export class State extends EventTarget {
       this.#switchPage(1, StateChangeCause.Change);
     });
 
-    this.#selection = new Selection(table);
+    this.#selection = new Selection(gridId, table);
+    this.#selection.addEventListener("getBulkInteractions", (event) => {
+      this.dispatchEvent(new CustomEvent("getBulkInteractions", { detail: { objectIds: event.detail.objectIds } }));
+    });
 
     window.addEventListener("popstate", () => {
       this.#handlePopState();
@@ -134,10 +137,15 @@ export class State extends EventTarget {
 
     this.#switchPage(pageNo, StateChangeCause.History);
   }
+
+  setBulkInteractionContextMenuOptions(options: string): void {
+    this.#selection.setBulkInteractionContextMenuOptions(options);
+  }
 }
 
 interface StateEventMap {
   change: CustomEvent<{ source: StateChangeCause }>;
+  getBulkInteractions: CustomEvent<{ objectIds: number[] }>;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging