Grid view (PoC)

com.woltlab.wcf/templates/shared_gridView.tpl

@@ -0,0 +1,45 @@
+{if $view->countRows()}
+	<div class="paginationTop">
+		<woltlab-core-pagination id="{$view->getID()}_topPagination" page="{$view->getPageNo()}" count="{$view->countPages()}"></woltlab-core-pagination>
+	</div>
+
+	<div class="section tabularBox">
+		<table class="table" id="{$view->getID()}_table">
+			<thead>
+				<tr>
+					{foreach from=$view->getColumns() item='column'}
+						<th
+							class="{$column->getClasses()}"
+							data-id="{$column->getID()}"
+							data-sortable="{$column->isSortable()}"
+						>
+							{unsafe:$column->getLabel()}
+						</th>
+					{/foreach}
+				</td>
+			</thead>
+			<tbody>
+				{unsafe:$view->renderRows()}
+			</tbody>
+		</table>
+	</div>
+
+	<div class="paginationBottom">
+		<woltlab-core-pagination id="{$view->getID()}_bottomPagination" page="{$view->getPageNo()}" count="{$view->countPages()}"></woltlab-core-pagination>
+	</div>
+
+	<script data-relocate="true">
+		require(['WoltLabSuite/Core/Component/GridView'], ({ GridView }) => {
+			new GridView(
+				'{unsafe:$view->getID()|encodeJs}',
+				'{unsafe:$view->getClassName()|encodeJS}',
+				{$view->getPageNo()},
+				'{unsafe:$view->getBaseUrl()|encodeJS}',
+				'{unsafe:$view->getSortField()|encodeJS}',
+				'{unsafe:$view->getSortOrder()|encodeJS}'
+			);
+		});
+	</script>
+{else}
+	<woltlab-core-notice type="info">{lang}wcf.global.noItems{/lang}</woltlab-core-notice>
+{/if}

com.woltlab.wcf/templates/shared_gridViewRows.tpl

@@ -0,0 +1,10 @@
+
+{foreach from=$view->getRows() item='row'}
+	<tr>
+		{foreach from=$view->getColumns() item='column'}
+			<td class="{$column->getClasses()}">
+				{unsafe:$view->renderColumn($column, $row)}
+			</td>
+		{/foreach}
+	</tr>
+{/foreach}

ts/WoltLabSuite/Core/Api/GridViews/GetRows.ts

@@ -0,0 +1,28 @@
+import { prepareRequest } from "WoltLabSuite/Core/Ajax/Backend";
+import { ApiResult, apiResultFromError, apiResultFromValue } from "../Result";
+
+type Response = {
+  template: string;
+};
+
+export async function getRows(
+  gridViewClass: string,
+  pageNo: number,
+  sortField: string = "",
+  sortOrder: string = "ASC",
+): Promise<ApiResult<Response>> {
+  const url = new URL(`${window.WSC_RPC_API_URL}core/gridViews/rows`);
+  url.searchParams.set("gridView", gridViewClass);
+  url.searchParams.set("pageNo", pageNo.toString());
+  url.searchParams.set("sortField", sortField);
+  url.searchParams.set("sortOrder", sortOrder);
+
+  let response: Response;
+  try {
+    response = (await prepareRequest(url).get().allowCaching().disableLoadingIndicator().fetchAsJson()) as Response;
+  } catch (e) {
+    return apiResultFromError(e);
+  }
+
+  return apiResultFromValue(response);
+}

ts/WoltLabSuite/Core/Component/GridView.ts

@@ -0,0 +1,119 @@
+import { getRows } from "../Api/GridViews/GetRows";
+import DomUtil from "../Dom/Util";
+
+export class GridView {
+  readonly #gridClassName: string;
+  readonly #table: HTMLTableElement;
+  readonly #topPagination: WoltlabCorePaginationElement;
+  readonly #bottomPagination: WoltlabCorePaginationElement;
+  readonly #baseUrl: string;
+  #pageNo: number;
+  #sortField: string;
+  #sortOrder: string;
+
+  constructor(
+    gridId: string,
+    gridClassName: string,
+    pageNo: number,
+    baseUrl: string = "",
+    sortField = "",
+    sortOrder = "ASC",
+  ) {
+    this.#gridClassName = gridClassName;
+    this.#table = document.getElementById(`${gridId}_table`) as HTMLTableElement;
+    this.#topPagination = document.getElementById(`${gridId}_topPagination`) as WoltlabCorePaginationElement;
+    this.#bottomPagination = document.getElementById(`${gridId}_bottomPagination`) as WoltlabCorePaginationElement;
+    this.#pageNo = pageNo;
+    this.#baseUrl = baseUrl;
+    this.#sortField = sortField;
+    this.#sortOrder = sortOrder;
+
+    this.#initPagination();
+    this.#initSorting();
+  }
+
+  #initPagination(): void {
+    this.#topPagination.addEventListener("switchPage", (event: CustomEvent) => {
+      void this.#switchPage(event.detail);
+    });
+    this.#bottomPagination.addEventListener("switchPage", (event: CustomEvent) => {
+      void this.#switchPage(event.detail);
+    });
+  }
+
+  #initSorting(): void {
+    this.#table.querySelectorAll<HTMLTableCellElement>('th[data-sortable="1"]').forEach((element) => {
+      const link = document.createElement("a");
+      link.role = "button";
+      link.addEventListener("click", () => {
+        this.#sort(element.dataset.id!);
+      });
+
+      link.textContent = element.textContent;
+      element.innerHTML = "";
+      element.append(link);
+    });
+
+    this.#renderActiveSorting();
+  }
+
+  #sort(sortField: string): void {
+    if (this.#sortField == sortField && this.#sortOrder == "ASC") {
+      this.#sortOrder = "DESC";
+    } else {
+      this.#sortField = sortField;
+      this.#sortOrder = "ASC";
+    }
+
+    this.#switchPage(1);
+    this.#renderActiveSorting();
+  }
+
+  #renderActiveSorting(): void {
+    this.#table.querySelectorAll<HTMLTableCellElement>('th[data-sortable="1"]').forEach((element) => {
+      element.classList.remove("active", "ASC", "DESC");
+
+      if (element.dataset.id == this.#sortField) {
+        element.classList.add("active", this.#sortOrder);
+      }
+    });
+  }
+
+  #switchPage(pageNo: number): void {
+    this.#topPagination.page = pageNo;
+    this.#bottomPagination.page = pageNo;
+    this.#pageNo = pageNo;
+
+    this.#loadRows();
+  }
+
+  async #loadRows(): Promise<void> {
+    const response = await getRows(this.#gridClassName, this.#pageNo, this.#sortField, this.#sortOrder);
+    DomUtil.setInnerHtml(this.#table.querySelector("tbody")!, response.unwrap().template);
+    this.#updateQueryString();
+  }
+
+  #updateQueryString(): void {
+    if (!this.#baseUrl) {
+      return;
+    }
+
+    const url = new URL(this.#baseUrl);
+
+    const parameters: [string, string][] = [];
+    if (this.#pageNo > 1) {
+      parameters.push(["pageNo", this.#pageNo.toString()]);
+    }
+    if (this.#sortField) {
+      parameters.push(["sortField", this.#sortField]);
+      parameters.push(["sortOrder", this.#sortOrder]);
+    }
+
+    if (parameters.length > 0) {
+      url.search += url.search !== "" ? "&" : "?";
+      url.search += new URLSearchParams(parameters).toString();
+    }
+
+    window.history.pushState({}, document.title, url.toString());
+  }
+}

wcfsetup/install/files/acp/templates/userRankList.tpl

@@ -19,7 +19,7 @@
 
 <header class="contentHeader">
 	<div class="contentHeaderTitle">
-		<h1 class="contentTitle">{lang}wcf.acp.user.rank.list{/lang} <span class="badge badgeInverse">{#$items}</span></h1>
+		<h1 class="contentTitle">{lang}wcf.acp.user.rank.list{/lang} <span class="badge badgeInverse">{#$gridView->countRows()}</span></h1>
 	</div>
 
 	<nav class="contentHeaderNavigation">
@@ -32,78 +32,6 @@
 	</nav>
 </header>
 
-{hascontent}
-	<div class="paginationTop">
-		{content}{pages print=true assign=pagesLinks controller="UserRankList" link="pageNo=%d&sortField=$sortField&sortOrder=$sortOrder"}{/content}
-	</div>
-{/hascontent}
-
-{if $objects|count}
-	<div class="section tabularBox">
-		<table class="table jsObjectActionContainer" data-object-action-class-name="wcf\data\user\rank\UserRankAction">
-			<thead>
-				<tr>
-					<th class="columnID columnRankID{if $sortField == 'rankID'} active {@$sortOrder}{/if}" colspan="2"><a href="{link controller='UserRankList'}pageNo={@$pageNo}&sortField=rankID&sortOrder={if $sortField == 'rankID' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.global.objectID{/lang}</a></th>
-					<th class="columnTitle columnRankTitle{if $sortField == 'rankTitleI18n'} active {@$sortOrder}{/if}"><a href="{link controller='UserRankList'}pageNo={@$pageNo}&sortField=rankTitleI18n&sortOrder={if $sortField == 'rankTitleI18n' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.acp.user.rank.title{/lang}</a></th>
-					<th class="columnText columnRankImage{if $sortField == 'rankImage'} active {@$sortOrder}{/if}"><a href="{link controller='UserRankList'}pageNo={@$pageNo}&sortField=rankImage&sortOrder={if $sortField == 'rankImage' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.acp.user.rank.image{/lang}</a></th>
-					<th class="columnText columnGroupID{if $sortField == 'groupID'} active {@$sortOrder}{/if}"><a href="{link controller='UserRankList'}pageNo={@$pageNo}&sortField=groupID&sortOrder={if $sortField == 'groupID' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.user.group{/lang}</a></th>
-					<th class="columnText columnRequiredGender{if $sortField == 'requiredGender'} active {@$sortOrder}{/if}"><a href="{link controller='UserRankList'}pageNo={@$pageNo}&sortField=requiredGender&sortOrder={if $sortField == 'requiredGender' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.user.option.gender{/lang}</a></th>
-					<th class="columnDigits columnRequiredPoints{if $sortField == 'requiredPoints'} active {@$sortOrder}{/if}"><a href="{link controller='UserRankList'}pageNo={@$pageNo}&sortField=requiredPoints&sortOrder={if $sortField == 'requiredPoints' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.acp.user.rank.requiredPoints{/lang}</a></th>
-
-					{event name='columnHeads'}
-				</tr>
-			</thead>
-
-			<tbody class="jsReloadPageWhenEmpty">
-				{foreach from=$objects item=userRank}
-					<tr class="jsUserRankRow jsObjectActionObject" data-object-id="{@$userRank->getObjectID()}">
-						<td class="columnIcon">
-							<a href="{link controller='UserRankEdit' id=$userRank->rankID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip">{icon name='pencil'}</a>
-							{objectAction action="delete" objectTitle=$userRank->getTitle()}
-
-							{event name='rowButtons'}
-						</td>
-						<td class="columnID columnRankID">{@$userRank->rankID}</td>
-						<td class="columnTitle columnRankTitle"><a href="{link controller='UserRankEdit' id=$userRank->rankID}{/link}" title="{lang}wcf.acp.user.rank.edit{/lang}" class="badge label{if $userRank->cssClassName} {$userRank->cssClassName}{/if}">{$userRank->getTitle()}</a></td>
-						<td class="columnText columnRankImage">{if $userRank->rankImage}{@$userRank->getImage()}{/if}</td>
-						<td class="columnText columnGroupID">{$userRank->groupName|phrase}</td>
-						<td class="columnText columnRequiredGender">
-							{if $userRank->requiredGender}
-								{if $userRank->requiredGender == 1}
-									{lang}wcf.user.gender.male{/lang}
-								{elseif $userRank->requiredGender == 2}
-									{lang}wcf.user.gender.female{/lang}
-								{else}
-									{lang}wcf.user.gender.other{/lang}
-								{/if}
-							{/if}
-						</td>
-						<td class="columnDigits columnRequiredPoints">{#$userRank->requiredPoints}</td>
-
-						{event name='columns'}
-					</tr>
-				{/foreach}
-			</tbody>
-		</table>
-	</div>
-
-	<footer class="contentFooter">
-		{hascontent}
-			<div class="paginationBottom">
-				{content}{@$pagesLinks}{/content}
-			</div>
-		{/hascontent}
-
-		<nav class="contentFooterNavigation">
-			<ul>
-				<li><a href="{link controller='UserRankAdd'}{/link}" class="button">{icon name='plus'} <span>{lang}wcf.acp.user.rank.add{/lang}</span></a></li>
-
-				{event name='contentFooterNavigation'}
-			</ul>
-		</nav>
-	</footer>
-{else}
-	<woltlab-core-notice type="info">{lang}wcf.global.noItems{/lang}</woltlab-core-notice>
-{/if}
+{unsafe:$gridView->render()}
 
 {include file='footer'}