From: Matthias Schmidt <gravatronics@live.com>
Date: Sat, 17 Apr 2021 14:21:29 +0000 (+0200)
Subject: Add and use `LineBreakSeparatedTextUserGroupOptionType` (#4128)
X-Git-Tag: 5.4.0_Alpha_1~81
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=c843ddbcc9a310a07d2d66dc2c5545c624583ac4;p=GitHub%2FWoltLab%2FWCF.git

Add and use `LineBreakSeparatedTextUserGroupOptionType` (#4128)

The internal implementation of `LineBreakSeparatedTextOptionType` and `Ui/ItemList/LineBreakSeparatedText` required minor adjustments for the list to have unique ids and for the input element to be part of the template so that the user group option type works on `UserGroupOptionForm`.
---

diff --git a/com.woltlab.wcf/package.xml b/com.woltlab.wcf/package.xml
index 0e2f7542f1..77c69fa994 100644
--- a/com.woltlab.wcf/package.xml
+++ b/com.woltlab.wcf/package.xml
@@ -130,5 +130,7 @@ tar cvf com.woltlab.wcf/files_pre.tar -C wcfsetup/install/files/ \
 
 		<!-- Update of the Google Fonts -->
 		<instruction type="script" run="standalone">acp/update_com.woltlab.wcf_5.4_update_google_font.php</instruction>
+		
+		<instruction type="script">acp/update_com.woltlab.wcf_5.4_deleteLanguageItems.php</instruction>
 	</instructions>
 </package>
diff --git a/com.woltlab.wcf/templates/lineBreakSeparatedTextOptionType.tpl b/com.woltlab.wcf/templates/lineBreakSeparatedTextOptionType.tpl
new file mode 100644
index 0000000000..55ef3f857d
--- /dev/null
+++ b/com.woltlab.wcf/templates/lineBreakSeparatedTextOptionType.tpl
@@ -0,0 +1,26 @@
+<ul class="scrollableCheckboxList" {*
+    *}id="lineBreakSeparatedTextOption_{@$identifier}"{*
+    *}{if $values|empty} style="display: none"{/if}{*
+*}>
+    {foreach from=$values item=value}
+        <li data-value="{$value}">
+            <span class="icon icon16 fa-times jsDeleteItem jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}"></span>
+            <span>{$value}</span>
+        </li>
+    {/foreach}
+</ul>
+<input type="hidden" name="values[{$option->optionName}]">
+
+<script data-relocate="true">
+    require(['Language', 'WoltLabSuite/Core/Ui/ItemList/LineBreakSeparatedText'], (Language, { UiItemListLineBreakSeparatedText }) => {
+        Language.addObject({
+            'wcf.acp.option.type.lineBreakSeparatedText.placeholder': '{jslang}wcf.acp.option.type.lineBreakSeparatedText.placeholder{/jslang}',
+            'wcf.acp.option.type.lineBreakSeparatedText.error.duplicate': '{jslang __literal=true}wcf.acp.option.type.lineBreakSeparatedText.error.duplicate{/jslang}',
+            'wcf.acp.option.type.lineBreakSeparatedText.clearList.confirmMessage': '{jslang}wcf.acp.option.type.lineBreakSeparatedText.clearList.confirmMessage{/jslang}',
+        });
+        
+        new UiItemListLineBreakSeparatedText(
+            document.getElementById("lineBreakSeparatedTextOption_{@$identifier}")
+        );
+    });
+</script>
diff --git a/com.woltlab.wcf/userGroupOption.xml b/com.woltlab.wcf/userGroupOption.xml
index eeb6a39bfe..ee955acc69 100644
--- a/com.woltlab.wcf/userGroupOption.xml
+++ b/com.woltlab.wcf/userGroupOption.xml
@@ -567,7 +567,7 @@
 			</option>
 			<option name="user.attachment.allowedExtensions">
 				<categoryname>user.message.attachment</categoryname>
-				<optiontype>textarea</optiontype>
+				<optiontype>lineBreakSeparatedText</optiontype>
 				<defaultvalue>gif
 jpg
 jpeg
@@ -620,7 +620,7 @@ pdf</defaultvalue>
 			</option>
 			<option name="user.contactForm.attachment.allowedExtensions">
 				<categoryname>user.message.contactForm</categoryname>
-				<optiontype>textarea</optiontype>
+				<optiontype>lineBreakSeparatedText</optiontype>
 				<defaultvalue>gif
 jpg
 jpeg
@@ -682,7 +682,7 @@ pdf</defaultvalue>
 			</option>
 			<option name="user.signature.attachment.allowedExtensions">
 				<categoryname>user.signature</categoryname>
-				<optiontype>textarea</optiontype>
+				<optiontype>lineBreakSeparatedText</optiontype>
 				<defaultvalue>gif
 jpg
 jpeg
@@ -810,7 +810,7 @@ bmp</defaultvalue>
 			</option>
 			<option name="user.profile.avatar.allowedFileExtensions">
 				<categoryname>user.profile.avatar</categoryname>
-				<optiontype>textarea</optiontype>
+				<optiontype>lineBreakSeparatedText</optiontype>
 				<defaultvalue>gif
 jpg
 jpeg
diff --git a/syncTemplates.json b/syncTemplates.json
index 4de5d1deec..620a176f0c 100644
--- a/syncTemplates.json
+++ b/syncTemplates.json
@@ -75,6 +75,7 @@
     "formNotice",
     "formSuccess",
     "languageChooser",
+    "lineBreakSeparatedTextOptionType",
     "mediaBBCodeTag",
     "mediaManager",
     "multipleLanguageInputJavascript",
diff --git a/ts/WoltLabSuite/Core/Ui/ItemList/LineBreakSeparatedText.ts b/ts/WoltLabSuite/Core/Ui/ItemList/LineBreakSeparatedText.ts
index 3fde6f417d..1f00d74fbc 100644
--- a/ts/WoltLabSuite/Core/Ui/ItemList/LineBreakSeparatedText.ts
+++ b/ts/WoltLabSuite/Core/Ui/ItemList/LineBreakSeparatedText.ts
@@ -14,7 +14,7 @@ import * as Language from "../../Language";
 import DomUtil from "../../Dom/Util";
 
 export interface LineBreakSeparatedTextOptions {
-  submitFieldName: string;
+  submitFieldName?: string;
 }
 
 export class UiItemListLineBreakSeparatedText {
@@ -23,11 +23,21 @@ export class UiItemListLineBreakSeparatedText {
   protected readonly itemList: HTMLUListElement;
   protected readonly items = new Set<string>();
   protected readonly options: LineBreakSeparatedTextOptions;
+  protected readonly submitField?: HTMLInputElement = undefined;
 
-  constructor(itemList: HTMLUListElement, options: LineBreakSeparatedTextOptions) {
+  constructor(itemList: HTMLUListElement, options: LineBreakSeparatedTextOptions = {}) {
     this.itemList = itemList;
     this.options = options;
 
+    if (!this.options.submitFieldName) {
+      const nextElement = this.itemList.nextElementSibling;
+      if (nextElement instanceof HTMLInputElement && nextElement.type === "hidden") {
+        this.submitField = nextElement;
+      } else {
+        throw new Error("Missing `submitFieldName` option");
+      }
+    }
+
     this.itemList.closest("form")!.addEventListener("submit", () => this.submit());
 
     this.initValues();
@@ -241,11 +251,17 @@ export class UiItemListLineBreakSeparatedText {
    * Adds a hidden input field with the data to the form before it is submitted.
    */
   protected submit(): void {
-    const input = document.createElement("input");
-    input.type = "hidden";
-    input.name = this.options.submitFieldName;
-    input.value = Array.from(this.items).join("\n");
-    this.itemList.parentElement!.append(input);
+    const value = Array.from(this.items).join("\n");
+
+    if (this.submitField) {
+      this.submitField.value = value;
+    } else {
+      const input = document.createElement("input");
+      input.type = "hidden";
+      input.name = this.options.submitFieldName!;
+      input.value = value;
+      this.itemList.parentElement!.append(input);
+    }
   }
 }
 
diff --git a/wcfsetup/install/files/acp/templates/lineBreakSeparatedTextOptionType.tpl b/wcfsetup/install/files/acp/templates/lineBreakSeparatedTextOptionType.tpl
index bc5a5bc084..55ef3f857d 100644
--- a/wcfsetup/install/files/acp/templates/lineBreakSeparatedTextOptionType.tpl
+++ b/wcfsetup/install/files/acp/templates/lineBreakSeparatedTextOptionType.tpl
@@ -1,5 +1,5 @@
 <ul class="scrollableCheckboxList" {*
-    *}id="lineBreakSeparatedTextOption_{@$option->optionID}"{*
+    *}id="lineBreakSeparatedTextOption_{@$identifier}"{*
     *}{if $values|empty} style="display: none"{/if}{*
 *}>
     {foreach from=$values item=value}
@@ -9,6 +9,7 @@
         </li>
     {/foreach}
 </ul>
+<input type="hidden" name="values[{$option->optionName}]">
 
 <script data-relocate="true">
     require(['Language', 'WoltLabSuite/Core/Ui/ItemList/LineBreakSeparatedText'], (Language, { UiItemListLineBreakSeparatedText }) => {
@@ -19,10 +20,7 @@
         });
         
         new UiItemListLineBreakSeparatedText(
-            document.getElementById("lineBreakSeparatedTextOption_{@$option->optionID}"),
-            {
-                submitFieldName: "values[{$option->optionName}]"
-            }
+            document.getElementById("lineBreakSeparatedTextOption_{@$identifier}")
         );
     });
 </script>
diff --git a/wcfsetup/install/files/acp/update_com.woltlab.wcf_5.4_deleteLanguageItems.php b/wcfsetup/install/files/acp/update_com.woltlab.wcf_5.4_deleteLanguageItems.php
new file mode 100644
index 0000000000..dc35b801d5
--- /dev/null
+++ b/wcfsetup/install/files/acp/update_com.woltlab.wcf_5.4_deleteLanguageItems.php
@@ -0,0 +1,16 @@
+<?php
+
+use wcf\data\language\item\LanguageItemAction;
+use wcf\data\language\item\LanguageItemList;
+
+$languageItems = [
+    'wcf.acp.group.option.user.attachment.allowedExtensions.description',
+    'wcf.acp.group.option.user.contactForm.attachment.allowedExtensions.description',
+    'wcf.acp.group.option.user.signature.attachment.allowedExtensions.description',
+];
+
+$languageItemList = new LanguageItemList();
+$languageItemList->getConditionBuilder()->add('languageItem IN (?)', [$languageItems]);
+$languageItemList->readObjects();
+
+(new LanguageItemAction([$languageItemList->getObjects()], 'delete'))->executeAction();
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/ItemList/LineBreakSeparatedText.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/ItemList/LineBreakSeparatedText.js
index 3c1f02b7a3..b8ef7ca454 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/ItemList/LineBreakSeparatedText.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/ItemList/LineBreakSeparatedText.js
@@ -16,12 +16,22 @@ define(["require", "exports", "tslib", "../Confirmation", "../../Language", "../
     Language = tslib_1.__importStar(Language);
     Util_1 = tslib_1.__importDefault(Util_1);
     class UiItemListLineBreakSeparatedText {
-        constructor(itemList, options) {
+        constructor(itemList, options = {}) {
             this.clearButton = undefined;
             this.itemInput = undefined;
             this.items = new Set();
+            this.submitField = undefined;
             this.itemList = itemList;
             this.options = options;
+            if (!this.options.submitFieldName) {
+                const nextElement = this.itemList.nextElementSibling;
+                if (nextElement instanceof HTMLInputElement && nextElement.type === "hidden") {
+                    this.submitField = nextElement;
+                }
+                else {
+                    throw new Error("Missing `submitFieldName` option");
+                }
+            }
             this.itemList.closest("form").addEventListener("submit", () => this.submit());
             this.initValues();
             this.buildUi();
@@ -197,11 +207,17 @@ define(["require", "exports", "tslib", "../Confirmation", "../../Language", "../
          * Adds a hidden input field with the data to the form before it is submitted.
          */
         submit() {
-            const input = document.createElement("input");
-            input.type = "hidden";
-            input.name = this.options.submitFieldName;
-            input.value = Array.from(this.items).join("\n");
-            this.itemList.parentElement.append(input);
+            const value = Array.from(this.items).join("\n");
+            if (this.submitField) {
+                this.submitField.value = value;
+            }
+            else {
+                const input = document.createElement("input");
+                input.type = "hidden";
+                input.name = this.options.submitFieldName;
+                input.value = value;
+                this.itemList.parentElement.append(input);
+            }
         }
     }
     exports.UiItemListLineBreakSeparatedText = UiItemListLineBreakSeparatedText;
diff --git a/wcfsetup/install/files/lib/system/option/LineBreakSeparatedTextOptionType.class.php b/wcfsetup/install/files/lib/system/option/LineBreakSeparatedTextOptionType.class.php
index c21263cbdf..2144c49ae4 100644
--- a/wcfsetup/install/files/lib/system/option/LineBreakSeparatedTextOptionType.class.php
+++ b/wcfsetup/install/files/lib/system/option/LineBreakSeparatedTextOptionType.class.php
@@ -26,7 +26,14 @@ class LineBreakSeparatedTextOptionType extends TextareaOptionType
         $values = ArrayUtil::trim(\explode("\n", StringUtil::unifyNewlines($value)));
         \uasort($values, 'strnatcmp');
 
+        static $identifiers = [];
+        do {
+            $identifier = \substr(StringUtil::getRandomID(), 0, 8);
+        } while (\in_array($identifier, $identifiers));
+        $identifiers[] = $identifier;
+
         return WCF::getTPL()->fetch('lineBreakSeparatedTextOptionType', 'wcf', [
+            'identifier' => $identifier,
             'option' => $option,
             'values' => $values,
         ]);
diff --git a/wcfsetup/install/files/lib/system/option/user/group/LineBreakSeparatedTextUserGroupOptionType.class.php b/wcfsetup/install/files/lib/system/option/user/group/LineBreakSeparatedTextUserGroupOptionType.class.php
new file mode 100644
index 0000000000..89846a887e
--- /dev/null
+++ b/wcfsetup/install/files/lib/system/option/user/group/LineBreakSeparatedTextUserGroupOptionType.class.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace wcf\system\option\user\group;
+
+use wcf\system\option\LineBreakSeparatedTextOptionType;
+use wcf\util\StringUtil;
+
+/**
+ * User group option type implementation for separate items that are stored as line break-separated
+ * text.
+ *
+ * The merge of option values returns merge of all text values.
+ *
+ * @author  Matthias Schmidt
+ * @copyright   2001-2021 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @package WoltLabSuite\Core\System\Option\User\Group
+ * @since   5.4
+ */
+class LineBreakSeparatedTextUserGroupOptionType extends LineBreakSeparatedTextOptionType implements IUserGroupOptionType
+{
+    /**
+     * @inheritDoc
+     */
+    public function merge($defaultValue, $groupValue)
+    {
+        $defaultValue = empty($defaultValue) ? [] : \explode("\n", StringUtil::unifyNewlines($defaultValue));
+        $groupValue = empty($groupValue) ? [] : \explode("\n", StringUtil::unifyNewlines($groupValue));
+
+        return \implode("\n", \array_unique(\array_merge($defaultValue, $groupValue)));
+    }
+}
diff --git a/wcfsetup/install/lang/de.xml b/wcfsetup/install/lang/de.xml
index 7f00bf5198..61114990b9 100644
--- a/wcfsetup/install/lang/de.xml
+++ b/wcfsetup/install/lang/de.xml
@@ -743,7 +743,6 @@ ACHTUNG: Die oben genannten Meldungen sind stark gekürzt. Sie können Details z
 		<item name="wcf.acp.group.option.category.user.message.attachment"><![CDATA[Dateianhänge]]></item>
 		<item name="wcf.acp.group.option.user.attachment.maxSize"><![CDATA[Maximale Dateianhangsgröße]]></item>
 		<item name="wcf.acp.group.option.user.attachment.allowedExtensions"><![CDATA[Erlaubte Dateiendungen]]></item>
-		<item name="wcf.acp.group.option.user.attachment.allowedExtensions.description"><![CDATA[Eine Dateiendung pro Zeile]]></item>
 		<item name="wcf.acp.group.option.user.attachment.maxCount"><![CDATA[Maximale Dateianhänge pro Nachricht]]></item>
 		<item name="wcf.acp.group.option.user.attachment.maxCount.description"/>
 		<item name="wcf.acp.group.option.category.admin.attachment"><![CDATA[Dateianhänge]]></item>
@@ -896,7 +895,6 @@ ACHTUNG: Die oben genannten Meldungen sind stark gekürzt. Sie können Details z
 		<item name="wcf.acp.group.option.category.user.message.contactForm"><![CDATA[Kontaktformular]]></item>
 		<item name="wcf.acp.group.option.user.contactForm.attachment.maxSize"><![CDATA[Maximale Dateianhangsgröße]]></item>
 		<item name="wcf.acp.group.option.user.contactForm.attachment.allowedExtensions"><![CDATA[Erlaubte Dateiendungen]]></item>
-		<item name="wcf.acp.group.option.user.contactForm.attachment.allowedExtensions.description"><![CDATA[Eine Dateiendung pro Zeile]]></item>
 		<item name="wcf.acp.group.option.user.contactForm.attachment.maxCount"><![CDATA[Maximale Dateianhänge pro Nachricht]]></item>
 		<item name="wcf.acp.group.option.user.profile.canEditUserProfile"><![CDATA[Kann eigenes Profil bearbeiten]]></item>
 		<item name="wcf.acp.group.option.user.profile.canHideOnlineStatus"><![CDATA[Kann Online-Status verbergen]]></item>
@@ -907,7 +905,6 @@ ACHTUNG: Die oben genannten Meldungen sind stark gekürzt. Sie können Details z
 		<item name="wcf.acp.group.option.user.signature.attachment.canUpload"><![CDATA[Kann Dateianhänge hochladen]]></item>
 		<item name="wcf.acp.group.option.user.signature.attachment.maxSize"><![CDATA[Maximale Dateianhangsgröße]]></item>
 		<item name="wcf.acp.group.option.user.signature.attachment.allowedExtensions"><![CDATA[Erlaubte Dateiendungen]]></item>
-		<item name="wcf.acp.group.option.user.signature.attachment.allowedExtensions.description"><![CDATA[Eine Dateiendung pro Zeile]]></item>
 		<item name="wcf.acp.group.option.user.signature.attachment.maxCount"><![CDATA[Maximale Dateianhänge]]></item>
 		<item name="wcf.acp.group.requireMultifactor"><![CDATA[Mehrfaktor-Authentifizierung erzwingen]]></item>
 		<item name="wcf.acp.group.requireMultifactor.description"><![CDATA[Benutzer, die Mitglied dieser Benutzergruppe sind, können die Mehrfaktor-Authentifizierung nicht deaktivieren und können besonders geschützte Bereiche erst betreten, wenn sie die Mehrfaktor-Authentifizierung eingerichtet haben.]]></item>
diff --git a/wcfsetup/install/lang/en.xml b/wcfsetup/install/lang/en.xml
index 01039fe4cb..7d6850b3a9 100644
--- a/wcfsetup/install/lang/en.xml
+++ b/wcfsetup/install/lang/en.xml
@@ -720,7 +720,6 @@ ATTENTION: The messages listed above are greatly shortened. You can view details
 		<item name="wcf.acp.group.option.category.user.message.attachment"><![CDATA[Attachments]]></item>
 		<item name="wcf.acp.group.option.user.attachment.maxSize"><![CDATA[Maximum Attachment File Size]]></item>
 		<item name="wcf.acp.group.option.user.attachment.allowedExtensions"><![CDATA[Allowed Attachment File Extensions]]></item>
-		<item name="wcf.acp.group.option.user.attachment.allowedExtensions.description"><![CDATA[Enter one extension per line.]]></item>
 		<item name="wcf.acp.group.option.user.attachment.maxCount"><![CDATA[Maximum Attachments per Message]]></item>
 		<item name="wcf.acp.group.option.user.attachment.maxCount.description"><![CDATA[The maximum number of attachments allowed per message.]]></item>
 		<item name="wcf.acp.group.option.category.admin.attachment"><![CDATA[Attachments]]></item>
@@ -874,7 +873,6 @@ ATTENTION: The messages listed above are greatly shortened. You can view details
 		<item name="wcf.acp.group.option.category.user.message.contactForm"><![CDATA[Contact Form]]></item>
 		<item name="wcf.acp.group.option.user.contactForm.attachment.maxSize"><![CDATA[Maximum Attachment File Size]]></item>
 		<item name="wcf.acp.group.option.user.contactForm.attachment.allowedExtensions"><![CDATA[Allowed Attachment File Extensions]]></item>
-		<item name="wcf.acp.group.option.user.contactForm.attachment.allowedExtensions.description"><![CDATA[Enter one extension per line.]]></item>
 		<item name="wcf.acp.group.option.user.contactForm.attachment.maxCount"><![CDATA[Maximum Attachments per Message]]></item>
 		<item name="wcf.acp.group.option.user.profile.canEditUserProfile"><![CDATA[Can edit their profile]]></item>
 		<item name="wcf.acp.group.option.user.profile.canHideOnlineStatus"><![CDATA[Can hide their online status]]></item>
@@ -885,7 +883,6 @@ ATTENTION: The messages listed above are greatly shortened. You can view details
 		<item name="wcf.acp.group.option.user.signature.attachment.canUpload"><![CDATA[Can Upload Attachments]]></item>
 		<item name="wcf.acp.group.option.user.signature.attachment.maxSize"><![CDATA[Maximum Attachment File Size]]></item>
 		<item name="wcf.acp.group.option.user.signature.attachment.allowedExtensions"><![CDATA[Allowed Attachment File Extensions]]></item>
-		<item name="wcf.acp.group.option.user.signature.attachment.allowedExtensions.description"><![CDATA[Enter one extension per line.]]></item>
 		<item name="wcf.acp.group.option.user.signature.attachment.maxCount"><![CDATA[Maximum Attachments]]></item>
 		<item name="wcf.acp.group.requireMultifactor"><![CDATA[Require Multi-factor Authentication]]></item>
 		<item name="wcf.acp.group.requireMultifactor.description"><![CDATA[Users that are members of this user group may not disable multi-factor authentication. They will also be required to set up multi-factor authentication before they may enter protected areas.]]></item>