From e473f93beb72f4ebe11155c9ee162444fce9fe8b Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Sun, 5 May 2024 12:50:23 +0200 Subject: [PATCH] Clean up the error and editor id handling --- .../Core/Component/Attachment/Entry.ts | 65 +++++++++---------- .../Core/Component/Attachment/List.ts | 14 ++-- .../Core/Component/Attachment/Entry.js | 59 ++++++++--------- .../Core/Component/Attachment/List.js | 14 ++-- 4 files changed, 71 insertions(+), 81 deletions(-) diff --git a/ts/WoltLabSuite/Core/Component/Attachment/Entry.ts b/ts/WoltLabSuite/Core/Component/Attachment/Entry.ts index e4723e1984..c6204b8dd7 100644 --- a/ts/WoltLabSuite/Core/Component/Attachment/Entry.ts +++ b/ts/WoltLabSuite/Core/Component/Attachment/Entry.ts @@ -9,17 +9,23 @@ type FileProcessorData = { attachmentID: number; }; -function fileInitializationCompleted(element: HTMLElement, file: WoltlabCoreFileElement, editorId: string): void { +function fileInitializationCompleted(element: HTMLElement, file: WoltlabCoreFileElement, editor: HTMLElement): void { const data = file.data; if (data === undefined) { - // TODO: error handling - return; + throw new Error("No meta data was returned from the server.", { + cause: { + file, + }, + }); } const fileId = file.fileId; if (fileId === undefined) { - // TODO: error handling - return; + throw new Error("The file id is not set.", { + cause: { + file, + }, + }); } const extraButtons: HTMLButtonElement[] = []; @@ -33,16 +39,16 @@ function fileInitializationCompleted(element: HTMLElement, file: WoltlabCoreFile const url = file.thumbnails.find((thumbnail) => thumbnail.identifier === "")?.link; if (url !== undefined) { - insertButton = getInsertThumbnailButton((data as FileProcessorData).attachmentID, url, editorId); + insertButton = getInsertThumbnailButton((data as FileProcessorData).attachmentID, url, editor); extraButtons.push( - getInsertAttachBbcodeButton((data as FileProcessorData).attachmentID, file.link ? file.link : "", editorId), + getInsertAttachBbcodeButton((data as FileProcessorData).attachmentID, file.link ? file.link : "", editor), ); } else { insertButton = getInsertAttachBbcodeButton( (data as FileProcessorData).attachmentID, file.link ? file.link : "", - editorId, + editor, ); } @@ -63,7 +69,7 @@ function fileInitializationCompleted(element: HTMLElement, file: WoltlabCoreFile insertButton = getInsertAttachBbcodeButton( (data as FileProcessorData).attachmentID, file.isImage() && file.link ? file.link : "", - editorId, + editor, ); } @@ -82,7 +88,7 @@ function fileInitializationCompleted(element: HTMLElement, file: WoltlabCoreFile } const listItem = document.createElement("li"); - listItem.append(getDeleteAttachButton(fileId, (data as FileProcessorData).attachmentID, editorId, element)); + listItem.append(getDeleteAttachButton(fileId, (data as FileProcessorData).attachmentID, editor, element)); dropdownMenu.append(listItem); const moreOptions = document.createElement("button"); @@ -109,7 +115,7 @@ function fileInitializationCompleted(element: HTMLElement, file: WoltlabCoreFile function getDeleteAttachButton( fileId: number, attachmentId: number, - editorId: string, + editor: HTMLElement, element: HTMLElement, ): HTMLButtonElement { const button = document.createElement("button"); @@ -117,12 +123,6 @@ function getDeleteAttachButton( button.textContent = "TODO: delete"; button.addEventListener("click", () => { - const editor = document.getElementById(editorId); - if (editor === null) { - // TODO: error handling - return; - } - void deleteFile(fileId).then((result) => { result.unwrap(); @@ -137,18 +137,12 @@ function getDeleteAttachButton( return button; } -function getInsertAttachBbcodeButton(attachmentId: number, url: string, editorId: string): HTMLButtonElement { +function getInsertAttachBbcodeButton(attachmentId: number, url: string, editor: HTMLElement): HTMLButtonElement { const button = document.createElement("button"); button.type = "button"; button.textContent = "TODO: insert"; button.addEventListener("click", () => { - const editor = document.getElementById(editorId); - if (editor === null) { - // TODO: error handling - return; - } - dispatchToCkeditor(editor).insertAttachment({ attachmentId, url, @@ -158,18 +152,12 @@ function getInsertAttachBbcodeButton(attachmentId: number, url: string, editorId return button; } -function getInsertThumbnailButton(attachmentId: number, url: string, editorId: string): HTMLButtonElement { +function getInsertThumbnailButton(attachmentId: number, url: string, editor: HTMLElement): HTMLButtonElement { const button = document.createElement("button"); button.type = "button"; button.textContent = "TODO: insert thumbnail"; button.addEventListener("click", () => { - const editor = document.getElementById(editorId); - if (editor === null) { - // TODO: error handling - return; - } - dispatchToCkeditor(editor).insertAttachment({ attachmentId, url, @@ -189,11 +177,20 @@ function fileInitializationFailed(element: HTMLElement, file: WoltlabCoreFileEle } // TODO: Add a proper error message, this is for development purposes only. - element.append(JSON.stringify(file.validationError)); + markElementAsErroneous(element, JSON.stringify(file.validationError)); +} + +function markElementAsErroneous(element: HTMLElement, errorMessage: string): void { element.classList.add("attachment__item--error"); + + const errorElement = document.createElement("div"); + errorElement.classList.add("attachemnt__item__errorMessage"); + errorElement.textContent = errorMessage; + + element.append(errorElement); } -export function createAttachmentFromFile(file: WoltlabCoreFileElement, editorId: string) { +export function createAttachmentFromFile(file: WoltlabCoreFileElement, editor: HTMLElement) { const element = document.createElement("li"); element.classList.add("attachment__item"); @@ -213,7 +210,7 @@ export function createAttachmentFromFile(file: WoltlabCoreFileElement, editorId: void file.ready .then(() => { - fileInitializationCompleted(element, file, editorId); + fileInitializationCompleted(element, file, editor); }) .catch((reason) => { fileInitializationFailed(element, file, reason); diff --git a/ts/WoltLabSuite/Core/Component/Attachment/List.ts b/ts/WoltLabSuite/Core/Component/Attachment/List.ts index f5aab72e5e..5e4c801e39 100644 --- a/ts/WoltLabSuite/Core/Component/Attachment/List.ts +++ b/ts/WoltLabSuite/Core/Component/Attachment/List.ts @@ -7,21 +7,19 @@ import { listenToCkeditor } from "../Ckeditor/Event"; // element. Do not remove! import "../File/woltlab-core-file"; -function fileToAttachment(fileList: HTMLElement, file: WoltlabCoreFileElement, editorId: string): void { - fileList.append(createAttachmentFromFile(file, editorId)); +function fileToAttachment(fileList: HTMLElement, file: WoltlabCoreFileElement, editor: HTMLElement): void { + fileList.append(createAttachmentFromFile(file, editor)); } export function setup(editorId: string): void { const container = document.getElementById(`attachments_${editorId}`); if (container === null) { - // TODO: error handling - return; + throw new Error(`The attachments container for '${editorId}' does not exist.`); } const editor = document.getElementById(editorId); if (editor === null) { - // TODO: error handling - return; + throw new Error(`The editor element for '${editorId}' does not exist.`); } const uploadButton = container.querySelector("woltlab-core-file-upload"); @@ -41,7 +39,7 @@ export function setup(editorId: string): void { } uploadButton.addEventListener("uploadStart", (event: CustomEvent) => { - fileToAttachment(fileList!, event.detail, editorId); + fileToAttachment(fileList!, event.detail, editor); }); listenToCkeditor(editor).uploadAttachment((payload) => { @@ -54,7 +52,7 @@ export function setup(editorId: string): void { const existingFiles = container.querySelector(".attachment__list__existingFiles"); if (existingFiles !== null) { existingFiles.querySelectorAll("woltlab-core-file").forEach((file) => { - fileToAttachment(fileList!, file, editorId); + fileToAttachment(fileList!, file, editor); }); existingFiles.remove(); diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Attachment/Entry.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Attachment/Entry.js index e0c09b3f47..5e21ba650f 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Attachment/Entry.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Attachment/Entry.js @@ -3,16 +3,22 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/FileUtil", "WoltLabSui Object.defineProperty(exports, "__esModule", { value: true }); exports.createAttachmentFromFile = void 0; Listener_1 = tslib_1.__importDefault(Listener_1); - function fileInitializationCompleted(element, file, editorId) { + function fileInitializationCompleted(element, file, editor) { const data = file.data; if (data === undefined) { - // TODO: error handling - return; + throw new Error("No meta data was returned from the server.", { + cause: { + file, + }, + }); } const fileId = file.fileId; if (fileId === undefined) { - // TODO: error handling - return; + throw new Error("The file id is not set.", { + cause: { + file, + }, + }); } const extraButtons = []; let insertButton; @@ -23,11 +29,11 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/FileUtil", "WoltLabSui } const url = file.thumbnails.find((thumbnail) => thumbnail.identifier === "")?.link; if (url !== undefined) { - insertButton = getInsertThumbnailButton(data.attachmentID, url, editorId); - extraButtons.push(getInsertAttachBbcodeButton(data.attachmentID, file.link ? file.link : "", editorId)); + insertButton = getInsertThumbnailButton(data.attachmentID, url, editor); + extraButtons.push(getInsertAttachBbcodeButton(data.attachmentID, file.link ? file.link : "", editor)); } else { - insertButton = getInsertAttachBbcodeButton(data.attachmentID, file.link ? file.link : "", editorId); + insertButton = getInsertAttachBbcodeButton(data.attachmentID, file.link ? file.link : "", editor); } if (file.link !== undefined && file.filename !== undefined) { const link = document.createElement("a"); @@ -42,7 +48,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/FileUtil", "WoltLabSui } } else { - insertButton = getInsertAttachBbcodeButton(data.attachmentID, file.isImage() && file.link ? file.link : "", editorId); + insertButton = getInsertAttachBbcodeButton(data.attachmentID, file.isImage() && file.link ? file.link : "", editor); } const dropdownMenu = document.createElement("ul"); dropdownMenu.classList.add("dropdownMenu"); @@ -57,7 +63,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/FileUtil", "WoltLabSui dropdownMenu.append(listItem); } const listItem = document.createElement("li"); - listItem.append(getDeleteAttachButton(fileId, data.attachmentID, editorId, element)); + listItem.append(getDeleteAttachButton(fileId, data.attachmentID, editor, element)); dropdownMenu.append(listItem); const moreOptions = document.createElement("button"); moreOptions.classList.add("button", "small", "jsTooltip"); @@ -75,16 +81,11 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/FileUtil", "WoltLabSui (0, Simple_1.toggleDropdown)(moreOptions.id); }); } - function getDeleteAttachButton(fileId, attachmentId, editorId, element) { + function getDeleteAttachButton(fileId, attachmentId, editor, element) { const button = document.createElement("button"); button.type = "button"; button.textContent = "TODO: delete"; button.addEventListener("click", () => { - const editor = document.getElementById(editorId); - if (editor === null) { - // TODO: error handling - return; - } void (0, DeleteFile_1.deleteFile)(fileId).then((result) => { result.unwrap(); (0, Event_1.dispatchToCkeditor)(editor).removeAttachment({ @@ -95,16 +96,11 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/FileUtil", "WoltLabSui }); return button; } - function getInsertAttachBbcodeButton(attachmentId, url, editorId) { + function getInsertAttachBbcodeButton(attachmentId, url, editor) { const button = document.createElement("button"); button.type = "button"; button.textContent = "TODO: insert"; button.addEventListener("click", () => { - const editor = document.getElementById(editorId); - if (editor === null) { - // TODO: error handling - return; - } (0, Event_1.dispatchToCkeditor)(editor).insertAttachment({ attachmentId, url, @@ -112,16 +108,11 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/FileUtil", "WoltLabSui }); return button; } - function getInsertThumbnailButton(attachmentId, url, editorId) { + function getInsertThumbnailButton(attachmentId, url, editor) { const button = document.createElement("button"); button.type = "button"; button.textContent = "TODO: insert thumbnail"; button.addEventListener("click", () => { - const editor = document.getElementById(editorId); - if (editor === null) { - // TODO: error handling - return; - } (0, Event_1.dispatchToCkeditor)(editor).insertAttachment({ attachmentId, url, @@ -137,10 +128,16 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/FileUtil", "WoltLabSui return; } // TODO: Add a proper error message, this is for development purposes only. - element.append(JSON.stringify(file.validationError)); + markElementAsErroneous(element, JSON.stringify(file.validationError)); + } + function markElementAsErroneous(element, errorMessage) { element.classList.add("attachment__item--error"); + const errorElement = document.createElement("div"); + errorElement.classList.add("attachemnt__item__errorMessage"); + errorElement.textContent = errorMessage; + element.append(errorElement); } - function createAttachmentFromFile(file, editorId) { + function createAttachmentFromFile(file, editor) { const element = document.createElement("li"); element.classList.add("attachment__item"); const fileWrapper = document.createElement("div"); @@ -155,7 +152,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/FileUtil", "WoltLabSui element.append(fileWrapper, filename, fileSize); void file.ready .then(() => { - fileInitializationCompleted(element, file, editorId); + fileInitializationCompleted(element, file, editor); }) .catch((reason) => { fileInitializationFailed(element, file, reason); diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Attachment/List.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Attachment/List.js index 41acc3ca3f..64aa59d3b7 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Attachment/List.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Attachment/List.js @@ -2,19 +2,17 @@ define(["require", "exports", "./Entry", "../Ckeditor/Event", "../File/woltlab-c "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.setup = void 0; - function fileToAttachment(fileList, file, editorId) { - fileList.append((0, Entry_1.createAttachmentFromFile)(file, editorId)); + function fileToAttachment(fileList, file, editor) { + fileList.append((0, Entry_1.createAttachmentFromFile)(file, editor)); } function setup(editorId) { const container = document.getElementById(`attachments_${editorId}`); if (container === null) { - // TODO: error handling - return; + throw new Error(`The attachments container for '${editorId}' does not exist.`); } const editor = document.getElementById(editorId); if (editor === null) { - // TODO: error handling - return; + throw new Error(`The editor element for '${editorId}' does not exist.`); } const uploadButton = container.querySelector("woltlab-core-file-upload"); if (uploadButton === null) { @@ -31,7 +29,7 @@ define(["require", "exports", "./Entry", "../Ckeditor/Event", "../File/woltlab-c uploadButton.insertAdjacentElement("afterend", fileList); } uploadButton.addEventListener("uploadStart", (event) => { - fileToAttachment(fileList, event.detail, editorId); + fileToAttachment(fileList, event.detail, editor); }); (0, Event_1.listenToCkeditor)(editor).uploadAttachment((payload) => { const event = new CustomEvent("ckeditorDrop", { @@ -42,7 +40,7 @@ define(["require", "exports", "./Entry", "../Ckeditor/Event", "../File/woltlab-c const existingFiles = container.querySelector(".attachment__list__existingFiles"); if (existingFiles !== null) { existingFiles.querySelectorAll("woltlab-core-file").forEach((file) => { - fileToAttachment(fileList, file, editorId); + fileToAttachment(fileList, file, editor); }); existingFiles.remove(); } -- 2.20.1