Merge pull request #6261 from WoltLab/6.2-GridView-Dialog

Implement `usingGridView()` to create an dialog with a grid view

Author: Cyperghost

ts/WoltLabSuite/Core/Component/Dialog/Setup.ts

@@ -11,6 +11,7 @@
 import DialogControls from "./Controls";
 import * as DomUtil from "../../Dom/Util";
 import FormBuilderSetup from "../FormBuilder/Setup";
+import GridViewSetup from "WoltLabSuite/Core/Component/GridView/Setup";
 
 export class DialogSetup {
   fromElement(element: HTMLElement | DocumentFragment): DialogControls {
@@ -51,6 +52,10 @@ export class DialogSetup {
     return new FormBuilderSetup();
   }
 
+  usingGridView(): GridViewSetup {
+    return new GridViewSetup();
+  }
+
   withoutContent(): DialogControls {
     const dialog = document.createElement("woltlab-core-dialog");
 

ts/WoltLabSuite/Core/Component/GridView/Setup.ts

@@ -0,0 +1,52 @@
+/**
+ * @author Olaf Braun
+ * @copyright 2001-2025 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @since 6.2
+ */
+
+import { prepareRequest } from "WoltLabSuite/Core/Ajax/Backend";
+import WoltlabCoreDialog from "WoltLabSuite/Core/Element/woltlab-core-dialog";
+
+interface ResponseGridView {
+  gridView: string;
+}
+
+export class GridViewSetup {
+  async fromPreset(
+    title: string,
+    gridViewClass: string,
+    pageNo: number = 1,
+    sortField: string = "",
+    sortOrder: string = "ASC",
+    filters?: Map<string, string>,
+    gridViewParameters?: Map<string, string>,
+  ): Promise<WoltlabCoreDialog> {
+    const url = new URL(`${window.WSC_RPC_API_URL}core/grid-views/render`);
+    url.searchParams.set("gridView", gridViewClass);
+    url.searchParams.set("pageNo", pageNo.toString());
+    url.searchParams.set("sortField", sortField);
+    url.searchParams.set("sortOrder", sortOrder);
+    if (filters) {
+      filters.forEach((value, key) => {
+        url.searchParams.set(`filters[${key}]`, value);
+      });
+    }
+    if (gridViewParameters) {
+      gridViewParameters.forEach((value, key) => {
+        url.searchParams.set(`gridViewParameters[${key}]`, value);
+      });
+    }
+    const json = (await prepareRequest(url).get().fetchAsJson()) as ResponseGridView;
+
+    // Prevents a circular dependency.
+    const { dialogFactory } = await import("../Dialog");
+
+    const dialog = dialogFactory().fromHtml(json.gridView).withoutControls();
+    dialog.show(title);
+
+    return dialog;
+  }
+}
+
+export default GridViewSetup;

wcfsetup/install/files/js/WoltLabSuite/Core/Component/Dialog/Setup.js

@@ -138,6 +138,7 @@ static function (\wcf\event\endpoint\ControllerCollecting $event) {
             $event->register(new \wcf\system\endpoint\controller\core\comments\responses\UpdateResponse());
             $event->register(new \wcf\system\endpoint\controller\core\exceptions\RenderException());
             $event->register(new \wcf\system\endpoint\controller\core\gridViews\GetRows());
+            $event->register(new \wcf\system\endpoint\controller\core\gridViews\GetGridView());
             $event->register(new \wcf\system\endpoint\controller\core\gridViews\GetRow());
             $event->register(new \wcf\system\endpoint\controller\core\cronjobs\logs\ClearLogs());
             $event->register(new \wcf\system\endpoint\controller\core\messages\GetMentionSuggestions());

wcfsetup/install/files/js/WoltLabSuite/Core/Component/GridView/Setup.js

@@ -0,0 +1,77 @@
+<?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\gridView\AbstractGridView;
+
+/**
+ * API endpoint for the rendering of a grid view in a dialog.
+ *
+ * @author Olaf Braun
+ * @copyright 2001-2025 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @since 6.2
+ */
+#[GetRequest('/core/grid-views/render')]
+final class GetGridView implements IController
+{
+    #[\Override]
+    public function __invoke(ServerRequestInterface $request, array $variables): ResponseInterface
+    {
+        $parameters = Helper::mapApiParameters($request, GetGridViewParameters::class);
+
+        if (!\is_subclass_of($parameters->gridView, AbstractGridView::class)) {
+            throw new UserInputException('gridView', 'invalid');
+        }
+
+        $view = new $parameters->gridView(...$parameters->gridViewParameters);
+        // @phpstan-ignore function.alreadyNarrowedType, instanceof.alwaysTrue
+        \assert($view instanceof AbstractGridView);
+
+        if (!$view->isAccessible()) {
+            throw new PermissionDeniedException();
+        }
+
+        $view->setPageNo($parameters->pageNo);
+        if ($parameters->sortField) {
+            $view->setSortField($parameters->sortField);
+        }
+        if ($parameters->sortOrder) {
+            $view->setSortOrder($parameters->sortOrder);
+        }
+
+        if ($parameters->filters !== []) {
+            $view->setActiveFilters($parameters->filters);
+        }
+
+        return new JsonResponse([
+            'gridView' => $view->render(),
+        ]);
+    }
+}
+
+/** @internal */
+final class GetGridViewParameters
+{
+    public function __construct(
+        /** @var non-empty-string */
+        public readonly string $gridView,
+        /** @var positive-int */
+        public readonly int $pageNo,
+        public readonly string $sortField,
+        public readonly string $sortOrder,
+        /** @var array<string, string|int> */
+        public readonly array $filters,
+        /** @var array<string, string> */
+        public readonly array $gridViewParameters,
+    ) {
+    }
+}