Add [data-formbuilder] and Psr15DialogFormResponse

ts/WoltLabSuite/Core/Bootstrap.ts

@@ -32,6 +32,7 @@ import { init as initSearch } from "./Ui/Search";
 import { PageMenuMainProvider } from "./Ui/Page/Menu/Main/Provider";
 import { whenFirstSeen } from "./LazyLoader";
 import { adoptPageOverlayContainer } from "./Helper/PageOverlay";
+import { setup as setupFormBuilderButton } from "./Component/FormBuilder/Button";
 
 // perfectScrollbar does not need to be bound anywhere, it just has to be loaded for WCF.js
 import "perfect-scrollbar";
@@ -103,6 +104,7 @@ export function setup(options: BoostrapOptions): void {
   UiObjectActionDelete.setup();
   UiObjectActionToggle.setup();
   initSearch();
+  setupFormBuilderButton();
 
   // Convert forms with `method="get"` into `method="post"`
   document.querySelectorAll("form[method=get]").forEach((form: HTMLFormElement) => {

ts/WoltLabSuite/Core/Component/FormBuilder/Button.ts

@@ -0,0 +1,81 @@
+/**
+ * Binds to button-like elements with the attribute [data-formbuilder] and invokes
+ * the endpoint to request the form builder dialog.
+ *
+ * @author Alexander Ebert
+ * @copyright 2001-2023 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @since 6.0
+ */
+
+import { dialogFactory } from "../Dialog";
+import { wheneverSeen } from "../../Helper/Selector";
+
+const reponseIdentifier = "__Psr15DialogFormResponse";
+
+type Psr15DialogFormResponse = {
+  payload:
+    | {
+        reload: true;
+      }
+    | {
+        redirectUrl: string;
+      };
+  __Psr15DialogFormResponse: true;
+};
+
+async function requestForm(element: HTMLElement): Promise<void> {
+  const { ok, result } = await dialogFactory().usingFormBuilder().fromEndpoint(element.dataset.endpoint!);
+  if (!ok) {
+    return;
+  }
+
+  const event = new CustomEvent<unknown>("formBuilder:result", {
+    cancelable: true,
+    detail: {
+      result,
+    },
+  });
+  element.dispatchEvent(event);
+
+  if (event.defaultPrevented) {
+    return;
+  }
+
+  if (typeof result === "object" && result !== null && Object.hasOwn(result, reponseIdentifier)) {
+    const payload = (result as Psr15DialogFormResponse).payload;
+    if ("reload" in payload) {
+      window.location.reload();
+    } else {
+      window.location.href = payload.redirectUrl;
+    }
+
+    return;
+  }
+}
+
+export function setup(): void {
+  wheneverSeen("[data-formbuilder]", (element) => {
+    if (element.tagName !== "A" && element.tagName !== "BUTTON") {
+      throw new TypeError("Cannot initialize the FormBuilder on non button-like elements", {
+        cause: {
+          element,
+        },
+      });
+    }
+
+    if (!element.dataset.endpoint) {
+      throw new Error("Missing the [data-endpoint] attribute.", {
+        cause: {
+          element,
+        },
+      });
+    }
+
+    element.addEventListener("click", (event) => {
+      event.preventDefault();
+
+      void requestForm(element);
+    });
+  });
+}

wcfsetup/install/files/lib/system/form/builder/Psr15DialogFormResponse.class.php

@@ -0,0 +1,58 @@
+<?php
+
+namespace wcf\system\form\builder;
+
+use Laminas\Diactoros\Response\JsonResponse;
+use Psr\Http\Message\ResponseInterface;
+
+/**
+ * Creates a response that is understood by the `[data-formbuilder]` implementation
+ * as a shortcut for tasks like reloading the page or redirecting to another URL.
+ *
+ * @author Alexander Ebert
+ * @copyright 2001-2023 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @since 6.0
+ */
+final class Psr15DialogFormResponse
+{
+    private readonly array $payload;
+
+    private const RESPONSE_IDENTIFIER = "__Psr15DialogFormResponse";
+
+    /**
+     * Redirects the client to the provided URL.
+     */
+    public static function redirect(string $redirectUrl): self
+    {
+        return new self([
+            "redirectUrl" => $redirectUrl,
+        ]);
+    }
+
+    /**
+     * Instructs the client to reload the page.
+     */
+    public static function reload(): self
+    {
+        return new self([
+            "reload" => true,
+        ]);
+    }
+
+    /**
+     * Converts this into a PSR response.
+     */
+    public function toResponse(): ResponseInterface
+    {
+        return new JsonResponse([
+            'payload' => $this->payload,
+            self::RESPONSE_IDENTIFIER => true,
+        ]);
+    }
+
+    private function __construct(array $payload)
+    {
+        $this->payload = $payload;
+    }
+}