Migrate WCF.ACP.Language.ItemList to TypeScript

com.woltlab.wcf/fileDelete.xml

@@ -26,6 +26,8 @@
 		<file>acp/images/wcfLogoWhite.svg</file>
 		<file>acp/install.php</file>
 		<file>acp/js/WCF.ACP.User.js</file>
+		<file>acp/js/WCF.ACP.Language.js</file>
+		<file>acp/js/WCF.ACP.Language.min.js</file>
 		<file>acp/js/wcombined.min.js</file>
 		<file>acp/post_install.php</file>
 		<file>acp/pre_update_com.woltlab.wcf_2.1.php</file>

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);
+}

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>

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>
 

wcfsetup/install/files/lib/data/language/item/LanguageItemAction.class.php

@@ -112,6 +112,7 @@ public function prepareEdit()
 
         return [
             'languageItem' => $item->languageItem,
+            'isCustomLanguageItem' => $item->isCustomLanguageItem,
             'template' => WCF::getTPL()->fetch('languageItemEditDialog'),
         ];
     }