From e2cab3764fbcfc271ffe41085b69df0c21f5baa3 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Thu, 8 Dec 2022 12:45:32 +0100 Subject: [PATCH] Use a promise to signal a submitted or discarded form builder dialog --- .../Core/Component/Dialog/Setup.ts | 4 +- .../Core/Component/FormBuilder/Setup.ts | 96 ++++++++++--------- .../Core/Component/Dialog/Setup.js | 4 +- .../Core/Component/FormBuilder/Setup.js | 71 +++++++------- 4 files changed, 91 insertions(+), 84 deletions(-) diff --git a/ts/WoltLabSuite/Core/Component/Dialog/Setup.ts b/ts/WoltLabSuite/Core/Component/Dialog/Setup.ts index f3567de8a7..97f573c68c 100644 --- a/ts/WoltLabSuite/Core/Component/Dialog/Setup.ts +++ b/ts/WoltLabSuite/Core/Component/Dialog/Setup.ts @@ -43,8 +43,8 @@ export class DialogSetup { return this.fromElement(fragment); } - usingFormBuilder(endpoint: string): FormBuilderSetup { - return new FormBuilderSetup(endpoint); + usingFormBuilder(): FormBuilderSetup { + return new FormBuilderSetup(); } withoutContent(): DialogControls { diff --git a/ts/WoltLabSuite/Core/Component/FormBuilder/Setup.ts b/ts/WoltLabSuite/Core/Component/FormBuilder/Setup.ts index 7be9b6ffd1..0f317f7c7d 100644 --- a/ts/WoltLabSuite/Core/Component/FormBuilder/Setup.ts +++ b/ts/WoltLabSuite/Core/Component/FormBuilder/Setup.ts @@ -2,8 +2,6 @@ import { prepareRequest } from "../../Ajax/Backend"; import * as DomUtil from "../../Dom/Util"; import * as FormBuilderManager from "../../Form/Builder/Manager"; -type CallbackAndWhenCompleted = (result: unknown) => void; - type ResponseGetForm = { dialog: string; formId: string; @@ -16,61 +14,69 @@ type ResponseSubmitForm = result: unknown; }; -export class FormBuilderSetup { - readonly #endpoint: string; - - constructor(endpoint: string) { - this.#endpoint = endpoint; - } - - andWhenCompleted(callback: CallbackAndWhenCompleted) { - void this.#dispatch(callback); - } +type Result = + | { + ok: true; + result: T; + } + | { + ok: false; + result: undefined; + }; - async #dispatch(callback: CallbackAndWhenCompleted): Promise { - const json = (await prepareRequest(this.#endpoint).get().fetchAsJson()) as ResponseGetForm; +export class FormBuilderSetup { + async fromEndpoint(url: string): Promise> { + const json = (await prepareRequest(url).get().fetchAsJson()) as ResponseGetForm; // Prevents a circular dependency. const { dialogFactory } = await import("../Dialog"); const dialog = dialogFactory().fromHtml(json.dialog).asPrompt(); - dialog.addEventListener("validate", (event) => { - const validationCallback = FormBuilderManager.getData(json.formId).then(async (data) => { - if (data instanceof Promise) { - data = await data; - } - - const response = (await prepareRequest(this.#endpoint).post(data).fetchAsJson()) as ResponseSubmitForm; - if ("dialog" in response) { - DomUtil.setInnerHtml(dialog.content, response.dialog); - - return false; - } else { - dialog.addEventListener("primary", () => { - if (FormBuilderManager.hasForm(json.formId)) { - FormBuilderManager.unregisterForm(json.formId); - } - - callback(response.result); - - //updateAssignee(response.assignee); - }); + return new Promise>((resolve) => { + dialog.addEventListener("validate", (event) => { + const validationCallback = FormBuilderManager.getData(json.formId).then(async (data) => { + if (data instanceof Promise) { + data = await data; + } + + const response = (await prepareRequest(url).post(data).fetchAsJson()) as ResponseSubmitForm; + if ("dialog" in response) { + DomUtil.setInnerHtml(dialog.content, response.dialog); + + return false; + } else { + dialog.addEventListener("primary", () => { + if (FormBuilderManager.hasForm(json.formId)) { + FormBuilderManager.unregisterForm(json.formId); + } + + resolve({ + ok: true, + result: response.result as T, + }); + }); + + return true; + } + }); + + event.detail.push(validationCallback); + }); - return true; + dialog.addEventListener("cancel", () => { + if (FormBuilderManager.hasForm(json.formId)) { + FormBuilderManager.unregisterForm(json.formId); } - }); - event.detail.push(validationCallback); - }); + resolve({ + ok: false, + result: undefined, + }); + }); - dialog.addEventListener("cancel", () => { - if (FormBuilderManager.hasForm(json.formId)) { - FormBuilderManager.unregisterForm(json.formId); - } + dialog.show(json.title); }); - - dialog.show(json.title); } } diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Dialog/Setup.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Dialog/Setup.js index 1221a870ac..2d5bbc93c2 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Dialog/Setup.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Dialog/Setup.js @@ -38,8 +38,8 @@ define(["require", "exports", "tslib", "./Controls", "../../Dom/Util", "../FormB } return this.fromElement(fragment); } - usingFormBuilder(endpoint) { - return new Setup_1.default(endpoint); + usingFormBuilder() { + return new Setup_1.default(); } withoutContent() { const dialog = document.createElement("woltlab-core-dialog"); diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/FormBuilder/Setup.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/FormBuilder/Setup.js index addac0b0b5..dc66551973 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/FormBuilder/Setup.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/FormBuilder/Setup.js @@ -5,47 +5,48 @@ define(["require", "exports", "tslib", "../../Ajax/Backend", "../../Dom/Util", " DomUtil = tslib_1.__importStar(DomUtil); FormBuilderManager = tslib_1.__importStar(FormBuilderManager); class FormBuilderSetup { - #endpoint; - constructor(endpoint) { - this.#endpoint = endpoint; - } - andWhenCompleted(callback) { - void this.#dispatch(callback); - } - async #dispatch(callback) { - const json = (await (0, Backend_1.prepareRequest)(this.#endpoint).get().fetchAsJson()); + async fromEndpoint(url) { + const json = (await (0, Backend_1.prepareRequest)(url).get().fetchAsJson()); // Prevents a circular dependency. const { dialogFactory } = await new Promise((resolve_1, reject_1) => { require(["../Dialog"], resolve_1, reject_1); }).then(tslib_1.__importStar); const dialog = dialogFactory().fromHtml(json.dialog).asPrompt(); - dialog.addEventListener("validate", (event) => { - const validationCallback = FormBuilderManager.getData(json.formId).then(async (data) => { - if (data instanceof Promise) { - data = await data; - } - const response = (await (0, Backend_1.prepareRequest)(this.#endpoint).post(data).fetchAsJson()); - if ("dialog" in response) { - DomUtil.setInnerHtml(dialog.content, response.dialog); - return false; - } - else { - dialog.addEventListener("primary", () => { - if (FormBuilderManager.hasForm(json.formId)) { - FormBuilderManager.unregisterForm(json.formId); - } - callback(response.result); - //updateAssignee(response.assignee); - }); - return true; + return new Promise((resolve) => { + dialog.addEventListener("validate", (event) => { + const validationCallback = FormBuilderManager.getData(json.formId).then(async (data) => { + if (data instanceof Promise) { + data = await data; + } + const response = (await (0, Backend_1.prepareRequest)(url).post(data).fetchAsJson()); + if ("dialog" in response) { + DomUtil.setInnerHtml(dialog.content, response.dialog); + return false; + } + else { + dialog.addEventListener("primary", () => { + if (FormBuilderManager.hasForm(json.formId)) { + FormBuilderManager.unregisterForm(json.formId); + } + resolve({ + ok: true, + result: response.result, + }); + }); + return true; + } + }); + event.detail.push(validationCallback); + }); + dialog.addEventListener("cancel", () => { + if (FormBuilderManager.hasForm(json.formId)) { + FormBuilderManager.unregisterForm(json.formId); } + resolve({ + ok: false, + result: undefined, + }); }); - event.detail.push(validationCallback); - }); - dialog.addEventListener("cancel", () => { - if (FormBuilderManager.hasForm(json.formId)) { - FormBuilderManager.unregisterForm(json.formId); - } + dialog.show(json.title); }); - dialog.show(json.title); } } exports.FormBuilderSetup = FormBuilderSetup; -- 2.20.1