From dd3458c416404811b7168f0c73aa99ef61d72ff9 Mon Sep 17 00:00:00 2001
From: Marcel Werk <burntime@woltlab.com>
Date: Mon, 9 Sep 2024 15:18:53 +0200
Subject: [PATCH] Grid view (PoC)

See #5967
---
 com.woltlab.wcf/templates/shared_gridView.tpl |  31 +++++
 ts/WoltLabSuite/Core/Api/GridViews/GetRows.ts |  21 +++
 ts/WoltLabSuite/Core/Component/GridView.ts    |  61 ++++++++
 .../files/acp/templates/userRankList.tpl      |   6 +-
 .../Core/Api/GridViews/GetRows.js             |  19 +++
 .../WoltLabSuite/Core/Component/GridView.js   |  55 ++++++++
 .../lib/acp/page/UserRankListPage.class.php   |  15 ++
 .../files/lib/bootstrap/com.woltlab.wcf.php   |   1 +
 .../core/gridViews/GetRows.class.php          |  48 +++++++
 .../view/grid/AbstractGridView.class.php      | 130 ++++++++++++++++++
 .../system/view/grid/GridViewColumn.class.php | 101 ++++++++++++++
 .../view/grid/UserRankGridView.class.php      | 108 +++++++++++++++
 .../renderer/AbstractColumnRenderer.class.php |  11 ++
 .../renderer/DefaultColumnRenderer.class.php  |  18 +++
 .../grid/renderer/IColumnRenderer.class.php   |  10 ++
 .../renderer/LinkColumnRenderer.class.php     |  31 +++++
 .../renderer/NumberColumnRenderer.class.php   |  18 +++
 .../renderer/TitleColumnRenderer.class.php    |  11 ++
 18 files changed, 693 insertions(+), 2 deletions(-)
 create mode 100644 com.woltlab.wcf/templates/shared_gridView.tpl
 create mode 100644 ts/WoltLabSuite/Core/Api/GridViews/GetRows.ts
 create mode 100644 ts/WoltLabSuite/Core/Component/GridView.ts
 create mode 100644 wcfsetup/install/files/js/WoltLabSuite/Core/Api/GridViews/GetRows.js
 create mode 100644 wcfsetup/install/files/js/WoltLabSuite/Core/Component/GridView.js
 create mode 100644 wcfsetup/install/files/lib/system/endpoint/controller/core/gridViews/GetRows.class.php
 create mode 100644 wcfsetup/install/files/lib/system/view/grid/AbstractGridView.class.php
 create mode 100644 wcfsetup/install/files/lib/system/view/grid/GridViewColumn.class.php
 create mode 100644 wcfsetup/install/files/lib/system/view/grid/UserRankGridView.class.php
 create mode 100644 wcfsetup/install/files/lib/system/view/grid/renderer/AbstractColumnRenderer.class.php
 create mode 100644 wcfsetup/install/files/lib/system/view/grid/renderer/DefaultColumnRenderer.class.php
 create mode 100644 wcfsetup/install/files/lib/system/view/grid/renderer/IColumnRenderer.class.php
 create mode 100644 wcfsetup/install/files/lib/system/view/grid/renderer/LinkColumnRenderer.class.php
 create mode 100644 wcfsetup/install/files/lib/system/view/grid/renderer/NumberColumnRenderer.class.php
 create mode 100644 wcfsetup/install/files/lib/system/view/grid/renderer/TitleColumnRenderer.class.php

diff --git a/com.woltlab.wcf/templates/shared_gridView.tpl b/com.woltlab.wcf/templates/shared_gridView.tpl
new file mode 100644
index 0000000000..8c63d1f10a
--- /dev/null
+++ b/com.woltlab.wcf/templates/shared_gridView.tpl
@@ -0,0 +1,31 @@
+<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>
+				{unsafe:$view->renderHeader()}
+			</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}'
+		);
+	});
+</script>
diff --git a/ts/WoltLabSuite/Core/Api/GridViews/GetRows.ts b/ts/WoltLabSuite/Core/Api/GridViews/GetRows.ts
new file mode 100644
index 0000000000..f84280e050
--- /dev/null
+++ b/ts/WoltLabSuite/Core/Api/GridViews/GetRows.ts
@@ -0,0 +1,21 @@
+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): 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());
+
+  let response: Response;
+  try {
+    response = (await prepareRequest(url).get().allowCaching().disableLoadingIndicator().fetchAsJson()) as Response;
+  } catch (e) {
+    return apiResultFromError(e);
+  }
+
+  return apiResultFromValue(response);
+}
diff --git a/ts/WoltLabSuite/Core/Component/GridView.ts b/ts/WoltLabSuite/Core/Component/GridView.ts
new file mode 100644
index 0000000000..73e184bd28
--- /dev/null
+++ b/ts/WoltLabSuite/Core/Component/GridView.ts
@@ -0,0 +1,61 @@
+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;
+
+  constructor(gridId: string, gridClassName: string, pageNo: number, baseUrl: string = "") {
+    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.#initPagination();
+  }
+
+  #initPagination(): void {
+    this.#topPagination.addEventListener("switchPage", (event: CustomEvent) => {
+      this.#switchPage(event.detail);
+    });
+    this.#bottomPagination.addEventListener("switchPage", (event: CustomEvent) => {
+      this.#switchPage(event.detail);
+    });
+  }
+
+  async #switchPage(pageNo: number): Promise<void> {
+    this.#topPagination.page = pageNo;
+    this.#bottomPagination.page = pageNo;
+
+    const response = await getRows(this.#gridClassName, pageNo);
+    this.#pageNo = pageNo;
+    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 (parameters.length > 0) {
+      url.search += url.search !== "" ? "&" : "?";
+      url.search += new URLSearchParams(parameters).toString();
+    }
+
+    window.history.pushState({ name: "gridView" }, document.title, url.toString());
+  }
+}
diff --git a/wcfsetup/install/files/acp/templates/userRankList.tpl b/wcfsetup/install/files/acp/templates/userRankList.tpl
index b9dbcbce21..8fabc66d57 100644
--- a/wcfsetup/install/files/acp/templates/userRankList.tpl
+++ b/wcfsetup/install/files/acp/templates/userRankList.tpl
@@ -39,7 +39,9 @@
 {/hascontent}
 
 {if $objects|count}
-	<div class="section tabularBox">
+	{unsafe:$view->render()}
+	
+	{*<div class="section tabularBox">
 		<table class="table jsObjectActionContainer" data-object-action-class-name="wcf\data\user\rank\UserRankAction">
 			<thead>
 				<tr>
@@ -85,7 +87,7 @@
 				{/foreach}
 			</tbody>
 		</table>
-	</div>
+	</div>*}
 	
 	<footer class="contentFooter">
 		{hascontent}
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Api/GridViews/GetRows.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Api/GridViews/GetRows.js
new file mode 100644
index 0000000000..841c6b6b42
--- /dev/null
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Api/GridViews/GetRows.js
@@ -0,0 +1,19 @@
+define(["require", "exports", "WoltLabSuite/Core/Ajax/Backend", "../Result"], function (require, exports, Backend_1, Result_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.getRows = void 0;
+    async function getRows(gridViewClass, pageNo) {
+        const url = new URL(`${window.WSC_RPC_API_URL}core/gridViews/rows`);
+        url.searchParams.set("gridView", gridViewClass);
+        url.searchParams.set("pageNo", pageNo.toString());
+        let response;
+        try {
+            response = (await (0, Backend_1.prepareRequest)(url).get().allowCaching().disableLoadingIndicator().fetchAsJson());
+        }
+        catch (e) {
+            return (0, Result_1.apiResultFromError)(e);
+        }
+        return (0, Result_1.apiResultFromValue)(response);
+    }
+    exports.getRows = getRows;
+});
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/GridView.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/GridView.js
new file mode 100644
index 0000000000..d69b702885
--- /dev/null
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/GridView.js
@@ -0,0 +1,55 @@
+define(["require", "exports", "tslib", "../Api/GridViews/GetRows", "../Dom/Util"], function (require, exports, tslib_1, GetRows_1, Util_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.GridView = void 0;
+    Util_1 = tslib_1.__importDefault(Util_1);
+    class GridView {
+        #gridClassName;
+        #table;
+        #topPagination;
+        #bottomPagination;
+        #baseUrl;
+        #pageNo;
+        constructor(gridId, gridClassName, pageNo, baseUrl = "") {
+            this.#gridClassName = gridClassName;
+            this.#table = document.getElementById(`${gridId}_table`);
+            this.#topPagination = document.getElementById(`${gridId}_topPagination`);
+            this.#bottomPagination = document.getElementById(`${gridId}_bottomPagination`);
+            this.#pageNo = pageNo;
+            this.#baseUrl = baseUrl;
+            this.#initPagination();
+        }
+        #initPagination() {
+            this.#topPagination.addEventListener("switchPage", (event) => {
+                this.#switchPage(event.detail);
+            });
+            this.#bottomPagination.addEventListener("switchPage", (event) => {
+                this.#switchPage(event.detail);
+            });
+        }
+        async #switchPage(pageNo) {
+            this.#topPagination.page = pageNo;
+            this.#bottomPagination.page = pageNo;
+            const response = await (0, GetRows_1.getRows)(this.#gridClassName, pageNo);
+            this.#pageNo = pageNo;
+            Util_1.default.setInnerHtml(this.#table.querySelector("tbody"), response.unwrap().template);
+            this.#updateQueryString();
+        }
+        #updateQueryString() {
+            if (!this.#baseUrl) {
+                return;
+            }
+            const url = new URL(this.#baseUrl);
+            const parameters = [];
+            if (this.#pageNo > 1) {
+                parameters.push(["pageNo", this.#pageNo.toString()]);
+            }
+            if (parameters.length > 0) {
+                url.search += url.search !== "" ? "&" : "?";
+                url.search += new URLSearchParams(parameters).toString();
+            }
+            window.history.pushState({ name: "gridView" }, document.title, url.toString());
+        }
+    }
+    exports.GridView = GridView;
+});
diff --git a/wcfsetup/install/files/lib/acp/page/UserRankListPage.class.php b/wcfsetup/install/files/lib/acp/page/UserRankListPage.class.php
index 366c4ff65a..4559ddd4c2 100644
--- a/wcfsetup/install/files/lib/acp/page/UserRankListPage.class.php
+++ b/wcfsetup/install/files/lib/acp/page/UserRankListPage.class.php
@@ -4,6 +4,9 @@ namespace wcf\acp\page;
 
 use wcf\data\user\rank\I18nUserRankList;
 use wcf\page\SortablePage;
+use wcf\system\request\LinkHandler;
+use wcf\system\view\grid\UserRankGridView;
+use wcf\system\WCF;
 
 /**
  * Lists available user ranks.
@@ -58,4 +61,16 @@ class UserRankListPage extends SortablePage
             LEFT JOIN   wcf1_user_group user_group
             ON          user_group.groupID = user_rank.groupID';
     }
+
+    public function assignVariables()
+    {
+        parent::assignVariables();
+
+        $view = new UserRankGridView(isset($_GET['pageNo']) ? \intval($_GET['pageNo']) : 1);
+        $view->setBaseUrl(LinkHandler::getInstance()->getControllerLink(self::class));
+
+        WCF::getTPL()->assign([
+            'view' => $view,
+        ]);
+    }
 }
diff --git a/wcfsetup/install/files/lib/bootstrap/com.woltlab.wcf.php b/wcfsetup/install/files/lib/bootstrap/com.woltlab.wcf.php
index f3554ed8ec..57d5782e4c 100644
--- a/wcfsetup/install/files/lib/bootstrap/com.woltlab.wcf.php
+++ b/wcfsetup/install/files/lib/bootstrap/com.woltlab.wcf.php
@@ -134,6 +134,7 @@ return static function (): void {
             $event->register(new \wcf\system\endpoint\controller\core\comments\responses\RenderResponse);
             $event->register(new \wcf\system\endpoint\controller\core\comments\responses\RenderResponses);
             $event->register(new \wcf\system\endpoint\controller\core\comments\responses\UpdateResponse);
+            $event->register(new \wcf\system\endpoint\controller\core\gridViews\GetRows);
             $event->register(new \wcf\system\endpoint\controller\core\messages\GetMentionSuggestions);
             $event->register(new \wcf\system\endpoint\controller\core\sessions\DeleteSession);
         }
diff --git a/wcfsetup/install/files/lib/system/endpoint/controller/core/gridViews/GetRows.class.php b/wcfsetup/install/files/lib/system/endpoint/controller/core/gridViews/GetRows.class.php
new file mode 100644
index 0000000000..cb7f5da14d
--- /dev/null
+++ b/wcfsetup/install/files/lib/system/endpoint/controller/core/gridViews/GetRows.class.php
@@ -0,0 +1,48 @@
+<?php
+
+namespace wcf\system\endpoint\controller\core\gridViews;
+
+use Laminas\Diactoros\Response\JsonResponse;
+use Psr\Http\Message\ResponseInterface;
+use Psr\Http\Message\ServerRequestInterface;
+use wcf\http\Helper;
+use wcf\system\endpoint\GetRequest;
+use wcf\system\endpoint\IController;
+use wcf\system\exception\PermissionDeniedException;
+use wcf\system\exception\UserInputException;
+use wcf\system\view\grid\AbstractGridView;
+
+#[GetRequest('/core/gridViews/rows')]
+final class GetRows implements IController
+{
+    #[\Override]
+    public function __invoke(ServerRequestInterface $request, array $variables): ResponseInterface
+    {
+        $parameters = Helper::mapApiParameters($request, GetRowsParameters::class);
+
+        if (!\is_subclass_of($parameters->gridView, AbstractGridView::class)) {
+            throw new UserInputException('gridView', $parameters->gridView);
+        }
+
+        $view = new $parameters->gridView($parameters->pageNo);
+        \assert($view instanceof AbstractGridView);
+
+        if (!$view->isAccessible()) {
+            throw new PermissionDeniedException();
+        }
+
+        return new JsonResponse([
+            'template' => $view->renderRows(),
+        ]);
+    }
+}
+
+/** @internal */
+final class GetRowsParameters
+{
+    public function __construct(
+        /** @var non-empty-string */
+        public readonly string $gridView,
+        public readonly int $pageNo
+    ) {}
+}
diff --git a/wcfsetup/install/files/lib/system/view/grid/AbstractGridView.class.php b/wcfsetup/install/files/lib/system/view/grid/AbstractGridView.class.php
new file mode 100644
index 0000000000..07bb3c7723
--- /dev/null
+++ b/wcfsetup/install/files/lib/system/view/grid/AbstractGridView.class.php
@@ -0,0 +1,130 @@
+<?php
+
+namespace wcf\system\view\grid;
+
+use wcf\system\WCF;
+
+abstract class AbstractGridView
+{
+    private array $columns = [];
+    private int $rowsPerPage = 2;
+    private string $baseUrl = '';
+
+    public function __construct(private readonly int $pageNo = 1)
+    {
+        $this->init();
+    }
+
+    protected function init(): void {}
+
+    public function addColumn(GridViewColumn $column): void
+    {
+        $this->columns[] = $column;
+    }
+
+    /**
+     * @param GridViewColumn[] $columns
+     */
+    public function addColumns(array $columns): void
+    {
+        foreach ($columns as $column) {
+            $this->addColumn($column);
+        }
+    }
+
+    /**
+     * @return GridViewColumn[]
+     */
+    public function getColumns(): array
+    {
+        return $this->columns;
+    }
+
+    public function render(): string
+    {
+        return WCF::getTPL()->fetch('shared_gridView', 'wcf', ['view' => $this], true);
+    }
+
+    public function renderHeader(): string
+    {
+        $header = '';
+
+        foreach ($this->getColumns() as $column) {
+            $header .= <<<EOT
+                <th class="{$column->getClasses()}">{$column->getLabel()}</th>
+            EOT;
+        }
+
+        return $header;
+    }
+
+    public function renderRows(): string
+    {
+        $result = '';
+
+        foreach ($this->getRows($this->rowsPerPage, ($this->pageNo - 1) * $this->rowsPerPage) as $row) {
+            $result .= <<<EOT
+                <tr>
+            EOT;
+
+            foreach ($this->getColumns() as $column) {
+                $result .= <<<EOT
+                    <td class="{$column->getClasses()}">
+                        {$column->render($this->getData($row,$column->getID()),$row)}
+                    </td>
+                EOT;
+            }
+
+            $result .= <<<EOT
+                </tr>
+            EOT;
+        }
+
+        return $result;
+    }
+
+    protected function getData(mixed $row, string $identifer): mixed
+    {
+        return $row[$identifer] ?? '';
+    }
+
+    public abstract function getRows(int $limit, int $offset = 0): array;
+
+
+    public function getPageNo(): int
+    {
+        return $this->pageNo;
+    }
+
+    public function countPages(): int
+    {
+        return 3;
+    }
+
+    public function getClassName(): string
+    {
+        return \get_class($this);
+    }
+
+    public function isAccessible(): bool
+    {
+        return true;
+    }
+
+    public function getID(): string
+    {
+        $classNamePieces = \explode('\\', static::class);
+
+        return \implode('-', $classNamePieces);
+    }
+
+    public function setBaseUrl(string $url): void
+    {
+        $this->baseUrl = $url;
+    }
+
+    public function getBaseUrl(): string
+    {
+        return $this->baseUrl;
+    }
+}
diff --git a/wcfsetup/install/files/lib/system/view/grid/GridViewColumn.class.php b/wcfsetup/install/files/lib/system/view/grid/GridViewColumn.class.php
new file mode 100644
index 0000000000..8f33a03864
--- /dev/null
+++ b/wcfsetup/install/files/lib/system/view/grid/GridViewColumn.class.php
@@ -0,0 +1,101 @@
+<?php
+
+namespace wcf\system\view\grid;
+
+use wcf\system\view\grid\renderer\DefaultColumnRenderer;
+use wcf\system\view\grid\renderer\IColumnRenderer;
+use wcf\system\WCF;
+
+final class GridViewColumn
+{
+    /**
+     * @var IColumnRenderer[]
+     */
+    private array $renderer = [];
+
+    private string $label = '';
+
+    private static DefaultColumnRenderer $defaultRenderer;
+
+    private function __construct(private readonly string $id) {}
+
+    public static function for(string $id): static
+    {
+        return new static($id);
+    }
+
+    public function render(mixed $value, mixed $context = null): string
+    {
+        if ($this->getRenderers() === []) {
+            return self::getDefaultRenderer()->render($value, $context);
+        }
+
+        foreach ($this->getRenderers() as $renderer) {
+            $value = $renderer->render($value, $context);
+        }
+
+        return $value;
+    }
+
+    public function getClasses(): string
+    {
+        if ($this->getRenderers() === []) {
+            return self::getDefaultRenderer()->getClasses();
+        }
+
+        return \implode(' ', \array_map(
+            static function (IColumnRenderer $renderer) {
+                return $renderer->getClasses();
+            },
+            $this->getRenderers()
+        ));
+    }
+
+    public function renderer(array|IColumnRenderer $renderers): static
+    {
+        if (!\is_array($renderers)) {
+            $renderers = [$renderers];
+        }
+
+        foreach ($renderers as $renderer) {
+            \assert($renderer instanceof IColumnRenderer);
+            $this->renderer[] = $renderer;
+        }
+
+        return $this;
+    }
+
+    public function label(string $languageItem): static
+    {
+        $this->label = WCF::getLanguage()->get($languageItem);
+
+        return $this;
+    }
+
+    /**
+     * @return IColumnRenderer[]
+     */
+    public function getRenderers(): array
+    {
+        return $this->renderer;
+    }
+
+    public function getID(): string
+    {
+        return $this->id;
+    }
+
+    public function getLabel(): string
+    {
+        return $this->label;
+    }
+
+    private static function getDefaultRenderer(): DefaultColumnRenderer
+    {
+        if (!isset(self::$defaultRenderer)) {
+            self::$defaultRenderer = new DefaultColumnRenderer();
+        }
+
+        return self::$defaultRenderer;
+    }
+}
diff --git a/wcfsetup/install/files/lib/system/view/grid/UserRankGridView.class.php b/wcfsetup/install/files/lib/system/view/grid/UserRankGridView.class.php
new file mode 100644
index 0000000000..f6ca575906
--- /dev/null
+++ b/wcfsetup/install/files/lib/system/view/grid/UserRankGridView.class.php
@@ -0,0 +1,108 @@
+<?php
+
+namespace wcf\system\view\grid;
+
+use wcf\acp\form\UserRankEditForm;
+use wcf\data\DatabaseObject;
+use wcf\data\user\group\UserGroup;
+use wcf\data\user\rank\UserRank;
+use wcf\data\user\rank\UserRankList;
+use wcf\system\view\grid\renderer\DefaultColumnRenderer;
+use wcf\system\view\grid\renderer\LinkColumnRenderer;
+use wcf\system\view\grid\renderer\NumberColumnRenderer;
+use wcf\system\view\grid\renderer\TitleColumnRenderer;
+use wcf\system\WCF;
+use wcf\util\StringUtil;
+
+final class UserRankGridView extends AbstractGridView
+{
+    #[\Override]
+    protected function init(): void
+    {
+        $this->addColumns([
+            GridViewColumn::for('rankID')
+                ->label('wcf.global.objectID')
+                ->renderer(new NumberColumnRenderer()),
+            GridViewColumn::for('rankTitle')
+                ->label('wcf.acp.user.rank.title')
+                ->renderer([
+                    new class extends TitleColumnRenderer {
+                        public function render(mixed $value, mixed $context = null): string
+                        {
+                            \assert($context instanceof UserRank);
+
+                            return '<span class="badge label' . ($context->cssClassName ? ' ' . $context->cssClassName : '') . '">'
+                                . StringUtil::encodeHTML($context->getTitle())
+                                . '<span>';
+                        }
+                    },
+                    new LinkColumnRenderer(UserRankEditForm::class, [], 'wcf.acp.user.rank.edit'),
+                ]),
+            GridViewColumn::for('rankImage')
+                ->label('wcf.acp.user.rank.image')
+                ->renderer([
+                    new class extends DefaultColumnRenderer {
+                        public function render(mixed $value, mixed $context = null): string
+                        {
+                            \assert($context instanceof UserRank);
+
+                            return $context->rankImage ? $context->getImage() : '';
+                        }
+                    },
+                ]),
+            GridViewColumn::for('groupID')
+                ->label('wcf.user.group')
+                ->renderer([
+                    new class extends DefaultColumnRenderer {
+                        public function render(mixed $value, mixed $context = null): string
+                        {
+                            return StringUtil::encodeHTML(UserGroup::getGroupByID($value)->getName());
+                        }
+                    },
+                ]),
+            GridViewColumn::for('requiredGender')
+                ->label('wcf.user.option.gender')
+                ->renderer([
+                    new class extends DefaultColumnRenderer {
+                        public function render(mixed $value, mixed $context = null): string
+                        {
+                            if (!$value) {
+                                return '';
+                            }
+
+                            return WCF::getLanguage()->get(match ($value) {
+                                1 => 'wcf.user.gender.male',
+                                2 => 'wcf.user.gender.female',
+                                default => 'wcf.user.gender.other'
+                            });
+                        }
+                    },
+                ]),
+            GridViewColumn::for('requiredPoints')
+                ->label('wcf.acp.user.rank.requiredPoints')
+                ->renderer(new NumberColumnRenderer()),
+        ]);
+    }
+
+    public function getRows(int $limit, int $offset = 0): array
+    {
+        $list = new UserRankList();
+        $list->sqlLimit = $limit;
+        $list->sqlOffset = $offset;
+        $list->readObjects();
+
+        return $list->getObjects();
+    }
+
+    protected function getData(mixed $row, string $identifer): mixed
+    {
+        \assert($row instanceof DatabaseObject);
+
+        return $row->__get($identifer);
+    }
+
+    public function isAccessible(): bool
+    {
+        return \MODULE_USER_RANK && WCF::getSession()->getPermission('admin.user.rank.canManageRank');
+    }
+}
diff --git a/wcfsetup/install/files/lib/system/view/grid/renderer/AbstractColumnRenderer.class.php b/wcfsetup/install/files/lib/system/view/grid/renderer/AbstractColumnRenderer.class.php
new file mode 100644
index 0000000000..d641d36016
--- /dev/null
+++ b/wcfsetup/install/files/lib/system/view/grid/renderer/AbstractColumnRenderer.class.php
@@ -0,0 +1,11 @@
+<?php
+
+namespace wcf\system\view\grid\renderer;
+
+abstract class AbstractColumnRenderer implements IColumnRenderer
+{
+    public function getClasses(): string
+    {
+        return '';
+    }
+}
diff --git a/wcfsetup/install/files/lib/system/view/grid/renderer/DefaultColumnRenderer.class.php b/wcfsetup/install/files/lib/system/view/grid/renderer/DefaultColumnRenderer.class.php
new file mode 100644
index 0000000000..56ea0ae1c8
--- /dev/null
+++ b/wcfsetup/install/files/lib/system/view/grid/renderer/DefaultColumnRenderer.class.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace wcf\system\view\grid\renderer;
+
+use wcf\util\StringUtil;
+
+class DefaultColumnRenderer extends AbstractColumnRenderer
+{
+    public function render(mixed $value, mixed $context = null): string
+    {
+        return StringUtil::encodeHTML($value);
+    }
+
+    public function getClasses(): string
+    {
+        return 'columnText';
+    }
+}
diff --git a/wcfsetup/install/files/lib/system/view/grid/renderer/IColumnRenderer.class.php b/wcfsetup/install/files/lib/system/view/grid/renderer/IColumnRenderer.class.php
new file mode 100644
index 0000000000..406c492904
--- /dev/null
+++ b/wcfsetup/install/files/lib/system/view/grid/renderer/IColumnRenderer.class.php
@@ -0,0 +1,10 @@
+<?php
+
+namespace wcf\system\view\grid\renderer;
+
+interface IColumnRenderer
+{
+    public function render(mixed $value, mixed $context = null): string;
+
+    public function getClasses(): string;
+}
diff --git a/wcfsetup/install/files/lib/system/view/grid/renderer/LinkColumnRenderer.class.php b/wcfsetup/install/files/lib/system/view/grid/renderer/LinkColumnRenderer.class.php
new file mode 100644
index 0000000000..f2173ea9b4
--- /dev/null
+++ b/wcfsetup/install/files/lib/system/view/grid/renderer/LinkColumnRenderer.class.php
@@ -0,0 +1,31 @@
+<?php
+
+namespace wcf\system\view\grid\renderer;
+
+use wcf\data\DatabaseObject;
+use wcf\system\request\LinkHandler;
+use wcf\system\WCF;
+
+class LinkColumnRenderer extends AbstractColumnRenderer
+{
+    public function __construct(
+        private readonly string $controllerClass,
+        private readonly array $parameters = [],
+        private readonly string $titleLanguageItem = ''
+    ) {}
+
+
+    public function render(mixed $value, mixed $context = null): string
+    {
+        \assert($context instanceof DatabaseObject);
+        $href = LinkHandler::getInstance()->getControllerLink(
+            $this->controllerClass,
+            \array_merge($this->parameters, ['object' => $context])
+        );
+
+        return '<a href="' . $href . '"'
+            . ($this->titleLanguageItem ? ' title="' . WCF::getLanguage()->get($this->titleLanguageItem) . '"' : '') . '>'
+            . $value
+            . '</a>';
+    }
+}
diff --git a/wcfsetup/install/files/lib/system/view/grid/renderer/NumberColumnRenderer.class.php b/wcfsetup/install/files/lib/system/view/grid/renderer/NumberColumnRenderer.class.php
new file mode 100644
index 0000000000..e26d30532a
--- /dev/null
+++ b/wcfsetup/install/files/lib/system/view/grid/renderer/NumberColumnRenderer.class.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace wcf\system\view\grid\renderer;
+
+use wcf\util\StringUtil;
+
+class NumberColumnRenderer extends AbstractColumnRenderer
+{
+    public function render(mixed $value, mixed $context = null): string
+    {
+        return StringUtil::formatNumeric($value);
+    }
+
+    public function getClasses(): string
+    {
+        return 'columnDigits';
+    }
+}
diff --git a/wcfsetup/install/files/lib/system/view/grid/renderer/TitleColumnRenderer.class.php b/wcfsetup/install/files/lib/system/view/grid/renderer/TitleColumnRenderer.class.php
new file mode 100644
index 0000000000..114cdb0622
--- /dev/null
+++ b/wcfsetup/install/files/lib/system/view/grid/renderer/TitleColumnRenderer.class.php
@@ -0,0 +1,11 @@
+<?php
+
+namespace wcf\system\view\grid\renderer;
+
+class TitleColumnRenderer extends DefaultColumnRenderer
+{
+    public function getClasses(): string
+    {
+        return 'columnTitle';
+    }
+}
-- 
2.20.1