From 1f615fe35e517a5a97ecd5a7653ddd1ea92ca6a0 Mon Sep 17 00:00:00 2001 From: Cyperghost Date: Tue, 2 Jul 2024 10:23:49 +0200 Subject: [PATCH] Insert data handler for an ajax form --- .../Builder/Field/Controller/FileProcessor.ts | 21 ++++++++++++++++ .../Core/Form/Builder/Field/FileProcessor.ts | 24 +++++++++++++++++++ .../Builder/Field/Controller/FileProcessor.js | 15 +++++++++++- .../Core/Form/Builder/Field/FileProcessor.js | 24 +++++++++++++++++++ .../field/FileProcessorFormField.class.php | 5 ++++ 5 files changed, 88 insertions(+), 1 deletion(-) create mode 100644 ts/WoltLabSuite/Core/Form/Builder/Field/FileProcessor.ts create mode 100644 wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/FileProcessor.js diff --git a/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts b/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts index 5581103349..ba6c4d2af9 100644 --- a/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts +++ b/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts @@ -11,6 +11,8 @@ import { deleteFile } from "WoltLabSuite/Core/Api/Files/DeleteFile"; import { formatFilesize } from "WoltLabSuite/Core/FileUtil"; import DomChangeListener from "WoltLabSuite/Core/Dom/Change/Listener"; +const _data = new Map(); + export interface ExtraButton { title: string; icon?: string; @@ -52,6 +54,8 @@ export class FileProcessor { this.#container.querySelectorAll("woltlab-core-file").forEach((element) => { this.#registerFile(element, element.parentElement); }); + + _data.set(fieldId, this); } get classPrefix(): string { @@ -349,4 +353,21 @@ export class FileProcessor { this.addButtons(container, element); } + + get values(): Set { + return new Set( + Array.from(this.#container.querySelectorAll('input[type="hidden"]')).map((input) => + parseInt(input.value, 10), + ), + ); + } +} + +export function getValues(fieldId: string): Set { + const field = _data.get(fieldId); + if (field === undefined) { + throw new Error("Unknown field with id '" + fieldId + "'"); + } + + return field.values; } diff --git a/ts/WoltLabSuite/Core/Form/Builder/Field/FileProcessor.ts b/ts/WoltLabSuite/Core/Form/Builder/Field/FileProcessor.ts new file mode 100644 index 0000000000..5dc1da71c1 --- /dev/null +++ b/ts/WoltLabSuite/Core/Form/Builder/Field/FileProcessor.ts @@ -0,0 +1,24 @@ +/** + * Data handler for a file processor form builder field in an Ajax form. + * + * @author Olaf Braun + * @copyright 2001-2024 WoltLab GmbH + * @license GNU Lesser General Public License + * @since 6.1 + */ + +import Field from "WoltLabSuite/Core/Form/Builder/Field/Field"; +import { FormBuilderData } from "WoltLabSuite/Core/Form/Builder/Data"; +import { getValues } from "WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor"; + +export default class FileProcessor extends Field { + protected _getData(): FormBuilderData { + return { + [this._fieldId]: getValues(this._fieldId), + }; + } + + protected _readField(): void { + // does nothing + } +} diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.js index 47edaa86aa..38ab23cd93 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.js @@ -7,8 +7,9 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSuite/Core/Api/Files/DeleteFile", "WoltLabSuite/Core/FileUtil", "WoltLabSuite/Core/Dom/Change/Listener"], function (require, exports, tslib_1, Language_1, DeleteFile_1, FileUtil_1, Listener_1) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); - exports.FileProcessor = void 0; + exports.getValues = exports.FileProcessor = void 0; Listener_1 = tslib_1.__importDefault(Listener_1); + const _data = new Map(); class FileProcessor { #container; #uploadButton; @@ -35,6 +36,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui this.#container.querySelectorAll("woltlab-core-file").forEach((element) => { this.#registerFile(element, element.parentElement); }); + _data.set(fieldId, this); } get classPrefix() { return this.showBigPreview ? "fileUpload__preview__" : "fileList__"; @@ -289,6 +291,17 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui container.append(input); this.addButtons(container, element); } + get values() { + return new Set(Array.from(this.#container.querySelectorAll('input[type="hidden"]')).map((input) => parseInt(input.value, 10))); + } } exports.FileProcessor = FileProcessor; + function getValues(fieldId) { + const field = _data.get(fieldId); + if (field === undefined) { + throw new Error("Unknown field with id '" + fieldId + "'"); + } + return field.values; + } + exports.getValues = getValues; }); diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/FileProcessor.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/FileProcessor.js new file mode 100644 index 0000000000..242e56508c --- /dev/null +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/FileProcessor.js @@ -0,0 +1,24 @@ +/** + * Data handler for a file processor form builder field in an Ajax form. + * + * @author Olaf Braun + * @copyright 2001-2024 WoltLab GmbH + * @license GNU Lesser General Public License + * @since 6.1 + */ +define(["require", "exports", "tslib", "WoltLabSuite/Core/Form/Builder/Field/Field", "WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor"], function (require, exports, tslib_1, Field_1, FileProcessor_1) { + "use strict"; + Object.defineProperty(exports, "__esModule", { value: true }); + Field_1 = tslib_1.__importDefault(Field_1); + class FileProcessor extends Field_1.default { + _getData() { + return { + [this._fieldId]: (0, FileProcessor_1.getValues)(this._fieldId), + }; + } + _readField() { + // does nothing + } + } + exports.default = FileProcessor; +}); diff --git a/wcfsetup/install/files/lib/system/form/builder/field/FileProcessorFormField.class.php b/wcfsetup/install/files/lib/system/form/builder/field/FileProcessorFormField.class.php index 62b6dc3482..4da671a60e 100644 --- a/wcfsetup/install/files/lib/system/form/builder/field/FileProcessorFormField.class.php +++ b/wcfsetup/install/files/lib/system/form/builder/field/FileProcessorFormField.class.php @@ -29,6 +29,11 @@ final class FileProcessorFormField extends AbstractFormField */ protected $templateName = 'shared_fileProcessorFormField'; + /** + * @inheritDoc + */ + protected $javaScriptDataHandlerModule = 'WoltLabSuite/Core/Form/Builder/Field/FileProcessor'; + private array $context = []; /** -- 2.20.1