Migrate `WCF.ACP.Language.ItemList` to TypeScript

diff --git a/ts/WoltLabSuite/Core/Acp/Ui/Language/ItemList.ts b/ts/WoltLabSuite/Core/Acp/Ui/Language/ItemList.ts
new file mode 100644 (file)
index 0000000..4e8072a
--- /dev/null
+++ b/ts/WoltLabSuite/Core/Acp/Ui/Language/ItemList.ts
@@ -0,0 +1,80 @@
+/**
+ * Handles language item list.
+ *
+ * @author  Olaf Braun
+ * @copyright  2001-2024 WoltLab GmbH
+ * @license  GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ */
+
+import { dboAction } from "WoltLabSuite/Core/Ajax";
+import { dialogFactory } from "WoltLabSuite/Core/Component/Dialog";
+import { getPhrase } from "WoltLabSuite/Core/Language";
+import { confirmationFactory } from "WoltLabSuite/Core/Component/Confirmation";
+import { show as showNotification } from "WoltLabSuite/Core/Ui/Notification";
+
+interface BeginEditResponse {
+  languageItem: string;
+  isCustomLanguageItem: boolean;
+  template: string;
+}
+
+export function init() {
+  document.querySelectorAll<HTMLElement>(".jsLanguageItem").forEach((button) => {
+    button.addEventListener("click", () => {
+      void beginEdit(parseInt(button.dataset.languageItemId!, 10));
+    });
+  });
+}
+
+async function beginEdit(languageItemID: number) {
+  const result = (await dboAction("prepareEdit", "wcf\\data\\language\\item\\LanguageItemAction")
+    .objectIds([languageItemID])
+    .dispatch()) as BeginEditResponse;
+
+  const dialog = dialogFactory()
+    .fromHtml(result.template)
+    .asPrompt(
+      result.isCustomLanguageItem
+        ? {
+            extra: getPhrase("wcf.global.button.delete"),
+          }
+        : undefined,
+    );
+
+  dialog.addEventListener("extra", () => {
+    void confirmationFactory()
+      .custom(getPhrase("wcf.global.confirmation.title"))
+      .message(getPhrase("wcf.acp.language.item.delete.confirmMessage"))
+      .then((result) => {
+        if (result) {
+          void dboAction("deleteCustomLanguageItems", "wcf\\data\\language\\item\\LanguageItemAction")
+            .objectIds([languageItemID])
+            .dispatch();
+
+          dialog.close();
+
+          window.location.reload();
+        }
+      });
+  });
+
+  dialog.addEventListener("primary", () => {
+    const languageItemValue = dialog.querySelector<HTMLInputElement>('[name="languageItemValue"]')?.value;
+    const languageCustomItemValue = dialog.querySelector<HTMLInputElement>('[name="languageCustomItemValue"]')?.value;
+    const languageUseCustomValue = dialog.querySelector<HTMLInputElement>('[name="languageUseCustomValue"]')?.checked;
+
+    void dboAction("edit", "wcf\\data\\language\\item\\LanguageItemAction")
+      .objectIds([languageItemID])
+      .payload({
+        languageItemValue: languageItemValue ?? null,
+        languageCustomItemValue: languageCustomItemValue ?? null,
+        languageUseCustomValue: languageUseCustomValue ?? null,
+      })
+      .dispatch()
+      .then(() => {
+        showNotification();
+      });
+  });
+
+  dialog.show(result.languageItem);
+}

diff --git a/wcfsetup/install/files/acp/templates/languageItemEditDialog.tpl b/wcfsetup/install/files/acp/templates/languageItemEditDialog.tpl
index 3b3b327098f6e347f44de7e237bf24562cf6dffe..5b2d8e563f05dfb333c22973cba216d3ad9668e6 100644 (file)
--- a/wcfsetup/install/files/acp/templates/languageItemEditDialog.tpl
+++ b/wcfsetup/install/files/acp/templates/languageItemEditDialog.tpl
@@ -4,7 +4,7 @@
        <dl class="wide">
                <dt></dt>
                <dd>
-                       <textarea rows="5" cols="60" name="languageItemValue" id="overlayLanguageItemValue"{if $item->languageItemOriginIsSystem} readonly{/if}>{$item->languageItemValue}</textarea>
+                       <textarea rows="5" cols="60" name="languageItemValue"{if $item->languageItemOriginIsSystem} readonly{/if}>{$item->languageItemValue}</textarea>
                </dd>
        </dl>
 </section>
@@ -32,23 +32,13 @@
                <dl class="wide">
                        <dt></dt>
                        <dd>
-                               <textarea rows="5" cols="60" name="languageCustomItemValue" id="overlayLanguageCustomItemValue">{$item->languageCustomItemValue}</textarea>
+                               <textarea rows="5" cols="60" name="languageCustomItemValue">{$item->languageCustomItemValue}</textarea>
                        </dd>
                </dl>
                
                <dl class="wide">
                        <dt></dt>
-                       <dd><label><input type="checkbox" name="languageUseCustomValue" id="overlayLanguageUseCustomValue" value="1"{if $item->languageUseCustomValue} checked{/if}> {lang}wcf.acp.language.item.useCustomValue{/lang}</label></dd>
+                       <dd><label><input type="checkbox" name="languageUseCustomValue" value="1"{if $item->languageUseCustomValue} checked{/if}> {lang}wcf.acp.language.item.useCustomValue{/lang}</label></dd>
                </dl>
        </section>
 {/if}
-
-<input type="hidden" name="languageItemID" id="overlayLanguageItemID" value="{$item->languageItemID}">
-
-<div class="formSubmit">
-       <button type="button" class="button buttonPrimary jsSubmitLanguageItem" accesskey="s">{lang}wcf.global.button.submit{/lang}</button>
-       
-       {if $item->isCustomLanguageItem}
-               <button type="button" class="button jsDeleteLanguageItem">{lang}wcf.global.button.delete{/lang}</button>
-       {/if}
-</div>

diff --git a/wcfsetup/install/files/acp/templates/languageItemList.tpl b/wcfsetup/install/files/acp/templates/languageItemList.tpl
index 9b2103c89c66249a8f1b50bb20049af499195bf9..07d91a1276bec6af9f063a57132d33ce90df820f 100644 (file)
--- a/wcfsetup/install/files/acp/templates/languageItemList.tpl
+++ b/wcfsetup/install/files/acp/templates/languageItemList.tpl
@@ -1,11 +1,10 @@
 {include file='header' pageTitle="wcf.acp.language.item.list"}
 
-<script data-relocate="true" src="{@$__wcf->getPath()}acp/js/WCF.ACP.Language.js?v={@LAST_UPDATE_TIME}"></script>
 <script data-relocate="true">
-       $(function() {
-               WCF.Language.add('wcf.acp.language.item.delete.confirmMessage', '{jslang}wcf.acp.language.item.delete.confirmMessage{/jslang}');
-               
-               new WCF.ACP.Language.ItemList();
+       {jsphrase name='wcf.acp.language.item.delete.confirmMessage'}
+
+       require(['WoltLabSuite/Core/Acp/Ui/Language/ItemList'], ({ init }) => {
+               init();
        });
 </script>
 

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Language/ItemList.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Language/ItemList.js
new file mode 100644 (file)
index 0000000..95ce1a8
--- /dev/null
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Language/ItemList.js
@@ -0,0 +1,62 @@
+/**
+ * Handles language item list.
+ *
+ * @author  Olaf Braun
+ * @copyright  2001-2024 WoltLab GmbH
+ * @license  GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ */
+define(["require", "exports", "WoltLabSuite/Core/Ajax", "WoltLabSuite/Core/Component/Dialog", "WoltLabSuite/Core/Language", "WoltLabSuite/Core/Component/Confirmation", "WoltLabSuite/Core/Ui/Notification"], function (require, exports, Ajax_1, Dialog_1, Language_1, Confirmation_1, Notification_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.init = init;
+    function init() {
+        document.querySelectorAll(".jsLanguageItem").forEach((button) => {
+            button.addEventListener("click", () => {
+                void beginEdit(parseInt(button.dataset.languageItemId, 10));
+            });
+        });
+    }
+    async function beginEdit(languageItemID) {
+        const result = (await (0, Ajax_1.dboAction)("prepareEdit", "wcf\\data\\language\\item\\LanguageItemAction")
+            .objectIds([languageItemID])
+            .dispatch());
+        const dialog = (0, Dialog_1.dialogFactory)()
+            .fromHtml(result.template)
+            .asPrompt(result.isCustomLanguageItem
+            ? {
+                extra: (0, Language_1.getPhrase)("wcf.global.button.delete"),
+            }
+            : undefined);
+        dialog.addEventListener("extra", () => {
+            void (0, Confirmation_1.confirmationFactory)()
+                .custom((0, Language_1.getPhrase)("wcf.global.confirmation.title"))
+                .message((0, Language_1.getPhrase)("wcf.acp.language.item.delete.confirmMessage"))
+                .then((result) => {
+                if (result) {
+                    void (0, Ajax_1.dboAction)("deleteCustomLanguageItems", "wcf\\data\\language\\item\\LanguageItemAction")
+                        .objectIds([languageItemID])
+                        .dispatch();
+                    dialog.close();
+                    window.location.reload();
+                }
+            });
+        });
+        dialog.addEventListener("primary", () => {
+            const languageItemValue = dialog.querySelector('[name="languageItemValue"]')?.value;
+            const languageCustomItemValue = dialog.querySelector('[name="languageCustomItemValue"]')?.value;
+            const languageUseCustomValue = dialog.querySelector('[name="languageUseCustomValue"]')?.checked;
+            void (0, Ajax_1.dboAction)("edit", "wcf\\data\\language\\item\\LanguageItemAction")
+                .objectIds([languageItemID])
+                .payload({
+                languageItemValue: languageItemValue ?? null,
+                languageCustomItemValue: languageCustomItemValue ?? null,
+                languageUseCustomValue: languageUseCustomValue ?? null,
+            })
+                .dispatch()
+                .then(() => {
+                (0, Notification_1.show)();
+            });
+        });
+        dialog.show(result.languageItem);
+    }
+});

diff --git a/wcfsetup/install/files/lib/data/language/item/LanguageItemAction.class.php b/wcfsetup/install/files/lib/data/language/item/LanguageItemAction.class.php
index 2775156b1ab1896cc7d2efa87cd575cc790b3bbb..8fd77193153f266ba5628cc02f12dfa426d2cda3 100644 (file)
--- a/wcfsetup/install/files/lib/data/language/item/LanguageItemAction.class.php
+++ b/wcfsetup/install/files/lib/data/language/item/LanguageItemAction.class.php
@@ -112,6 +112,7 @@ class LanguageItemAction extends AbstractDatabaseObjectAction
 
         return [
             'languageItem' => $item->languageItem,
+            'isCustomLanguageItem' => $item->isCustomLanguageItem,
             'template' => WCF::getTPL()->fetch('languageItemEditDialog'),
         ];
     }