(PoC) Overhaul condition UI

com.woltlab.wcf/package.xml

@@ -51,10 +51,8 @@
 	</instructions>
 
 	<!-- 
-	Required order of the following steps for the update to 6.2:
-	<instruction type="script">acp/update_com.woltlab.wcf_6.2_backgroundJob.php</instruction>
-	<instruction type="database" run="standalone">acp/database/update_com.woltlab.wcf_62_step1.php</instruction>
-	<instruction type="script">acp/update_com.woltlab.wcf_6.2_contactOptions.php</instruction>
-	<instruction type="database" run="standalone">acp/database/update_com.woltlab.wcf_62_step2.php</instruction>
+	Required order of the following steps for the update to 6.3:
+	<instruction type="database" run="standalone">acp/database/update_com.woltlab.wcf_6.3_step1.php</instruction>
+	<instruction type="script">acp/update_com.woltlab.wcf_6.3_userGroupAssignment.php</instruction>
 	-->
 </package>

com.woltlab.wcf/templates/shared_conditionFormContainer.tpl

@@ -0,0 +1,36 @@
+<section id="{$container->getPrefixedId()}Container"{*
+	*}{if !$container->getClasses()|empty} class="{implode from=$container->getClasses() item='class' glue=' '}{$class}{/implode}"{/if}{*
+	*}{foreach from=$container->getAttributes() key='attributeName' item='attributeValue'} {$attributeName}="{$attributeValue}"{/foreach}{*
+	*}{if !$container->checkDependencies()} style="display: none" {/if}{*
+*}>
+	{if $container->getLabel() !== null}
+		{if $container->getDescription() !== null}
+			<header class="sectionHeader">
+				<h2 class="sectionTitle">{unsafe:$container->getLabel()}{if $container->markAsRequired()}<span class="formFieldRequired">*</span>{/if}</h2>
+				<p class="sectionDescription">{unsafe:$container->getDescription()}</p>
+			</header>
+		{else}
+			<h2 class="sectionTitle">{unsafe:$container->getLabel()}{if $container->markAsRequired()}<span class="formFieldRequired">*</span>{/if}</h2>
+		{/if}
+	{/if}
+
+	<div class="conditions" id="{$container->getPrefixedId()}Conditions">
+		{include file='shared_formContainerChildren'}
+	</div>
+
+	<button type="button" class="button" id="{$container->getPrefixedId()}AddCondition">
+		{lang}wcf.condition.add{/lang}
+	</button>
+</section>
+
+{include file='shared_formContainerDependencies'}
+
+<script data-relocate="true">
+	require([
+		'WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/Default',
+		'WoltLabSuite/Core/Form/Builder/Container/ConditionFormField',
+	], (DefaultContainerDependency, { ConditionFormField }) => {
+		new DefaultContainerDependency('{unsafe:$container->getPrefixedId()|encodeJS}Container');
+		new ConditionFormField('{unsafe:$container->getPrefixedId()|encodeJS}', '{link controller="ConditionAdd" isACP=false provider=$container->getConditionProviderClass()}{/link}');
+	});
+</script>

com.woltlab.wcf/templates/shared_prefixFormFieldContainer.tpl

@@ -0,0 +1,60 @@
+{assign var='field' value=$container->getField()}
+{assign var='prefixField' value=$container->getPrefixField()}
+
+<dl id="{$field->getPrefixedId()}Container"{*
+	*}{if !$field->getClasses()|empty} class="{implode from=$field->getClasses() item='class' glue=' '}{$class}{/implode}"{/if}{*
+	*}{foreach from=$field->getAttributes() key='attributeName' item='attributeValue'} {$attributeName}="{$attributeValue}"{/foreach}{*
+	*}{if !$field->checkDependencies()} style="display: none
+;"{/if}{*
+*}>
+	<dt>{if $container->getLabel() !== null}<label for="{$field->getPrefixedId()}">{unsafe:$container->getLabel()}</label>{if $field->isRequired() && $form->marksRequiredFields()} <span class="formFieldRequired">*</span>{/if}{/if}</dt>
+	<dd>
+		<div class="inputAddon">
+			{if $prefixField->isAvailable()}
+				{if !$container->prefixHasSelectableOptions()}
+					<span class="inputPrefix">{unsafe:$prefixField->getFieldHtml()}</span>
+				{else}
+					<span class="inputPrefix dropdown" id="{$prefixField->getPrefixedId()}_dropdown">
+						<span class="dropdownToggle">{unsafe:$container->getSelectedPrefixOption()[label]} {icon name='caret-down' type='solid'}</span>
+
+						<ul class="dropdownMenu">
+							{foreach from=$prefixField->getNestedOptions() item=__fieldNestedOption}
+								<li{if ($prefixField->getValue() == $__fieldNestedOption[value] && $__fieldNestedOption[isSelectable]) || !$__fieldNestedOption[isSelectable]} class="{if $prefixField->getValue() == $__fieldNestedOption[value] && $__fieldNestedOption[isSelectable]}active{if !$__fieldNestedOption[isSelectable]} disabled{/if}{else}disabled{/if}"{/if} data-value="{$__fieldNestedOption[value]}" data-label="{$__fieldNestedOption[label]}"><span>{unsafe:'&nbsp;'|str_repeat:$__fieldNestedOption[depth] * 4}{unsafe:$__fieldNestedOption[label]}</span></li>
+							{/foreach}
+						</ul>
+						<input type="hidden" id="{$prefixField->getPrefixedId()}" name="{$prefixField->getPrefixedId()}" value="{if $prefixField->getValue() === null}{$container->getSelectedPrefixOption()[value]}{else}{$prefixField->getValue()}{/if}" />
+					</span>
+				{/if}
+				{include file='shared_formFieldDependencies' field=$prefixField sandbox=true}
+				{include file='shared_formFieldDataHandler' field=$prefixField sandbox=true}
+			{/if}
+			{unsafe:$field->getFieldHtml()}
+		</div>
+
+		{if $container->getDescription() !== null}
+			<small>{unsafe:$container->getDescription()}</small>
+		{/if}
+
+		{include file='shared_formFieldErrors' field=$field sandbox=true}
+
+		{if $prefixField !== null && $prefixField->isAvailable()}
+			{foreach from=$prefixField->getValidationErrors() item='validationError'}
+				{unsafe:$validationError->getHtml()}
+			{/foreach}
+		{/if}
+
+		{include file='shared_formFieldDependencies' field=$field sandbox=true}
+		{include file='shared_formFieldDataHandler' field=$field sandbox=true}
+	</dd>
+</dl>
+
+{if $prefixField->isAvailable() && !$prefixField->isImmutable() && $container->prefixHasSelectableOptions()}
+	<script data-relocate="true">
+		require(['WoltLabSuite/Core/Form/Builder/Container/SuffixFormField'], function(FormBuilderPrefixFormFieldContainer) {
+			new FormBuilderPrefixFormFieldContainer(
+				'{unsafe:$container->getDocument()->getId()|encodeJS}',
+				'{unsafe:$prefixField->getPrefixedId()|encodeJS}',
+			);
+		});
+	</script>
+{/if}

ts/WoltLabSuite/Core/Form/Builder/Container/ConditionFormField.ts

@@ -0,0 +1,72 @@
+/**
+ * @author Olaf Braun
+ * @copyright 2001-2025 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @since 6.3
+ */
+
+import { promiseMutex } from "WoltLabSuite/Core/Helper/PromiseMutex";
+import { dialogFactory } from "WoltLabSuite/Core/Component/Dialog";
+import { insertHtml } from "WoltLabSuite/Core/Dom/Util";
+import { unescapeHTML } from "WoltLabSuite/Core/StringUtil";
+import { wheneverFirstSeen } from "WoltLabSuite/Core/Helper/Selector";
+import { getPhrase } from "WoltLabSuite/Core/Language";
+
+interface ConditionAddResponse {
+  field: string;
+  conditionType: string;
+}
+
+export class ConditionFormField {
+  readonly #containerId: string;
+  readonly #container: HTMLElement;
+  readonly #button: HTMLButtonElement;
+  #index: number = 0;
+
+  constructor(containerId: string, endpoint: string) {
+    this.#containerId = containerId;
+    this.#container = document.getElementById(`${containerId}Conditions`) as HTMLElement;
+
+    this.#button = document.getElementById(`${containerId}AddCondition`) as HTMLButtonElement;
+    this.#button?.addEventListener(
+      "click",
+      promiseMutex(async () => {
+        await this.#showConditionAddDialog(endpoint);
+      }),
+    );
+
+    wheneverFirstSeen(`#${containerId}Container .condition__container`, (container: HTMLElement) => {
+      const deleteButton = document.createElement("button");
+      deleteButton.type = "button";
+      deleteButton.classList.add("button", "small", "jsTooltip", "condition__remove");
+      deleteButton.title = getPhrase("wcf.global.button.delete");
+      const icon = document.createElement("fa-icon");
+      icon.setIcon("times");
+      deleteButton.appendChild(icon);
+      container.prepend(deleteButton);
+      deleteButton.addEventListener("click", () => {
+        container.remove();
+      });
+
+      const index = parseInt(container.dataset.conditionIndex!);
+      this.#index = Math.max(this.#index, index);
+      const hidden = document.createElement("input");
+      hidden.type = "hidden";
+      hidden.name = `${containerId}[${index}]`;
+      hidden.value = container.dataset.conditionType!;
+      container.appendChild(hidden);
+    });
+  }
+
+  async #showConditionAddDialog(endpoint: string) {
+    const url = new URL(unescapeHTML(endpoint));
+    url.searchParams.set("containerId", this.#containerId);
+    url.searchParams.set("index", (this.#index + 1).toString());
+
+    const { ok, result } = await dialogFactory().usingFormBuilder().fromEndpoint<ConditionAddResponse>(url.toString());
+
+    if (ok) {
+      insertHtml(result.field, this.#container, "append");
+    }
+  }
+}

wcfsetup/install/files/acp/database/update_com.woltlab.wcf_6.3_step1.php

@@ -0,0 +1,21 @@
+<?php
+
+/**
+ * Updates the database layout during the update from 6.2 to 6.3.
+ *
+ * @author Olaf Braun
+ * @copyright 2001-2025 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ */
+
+use wcf\system\database\table\column\DefaultFalseBooleanDatabaseTableColumn;
+use wcf\system\database\table\column\MediumtextDatabaseTableColumn;
+use wcf\system\database\table\PartialDatabaseTable;
+
+return [
+    PartialDatabaseTable::create('wcf1_user_group_assignment')
+        ->columns([
+            MediumtextDatabaseTableColumn::create('conditions'),
+            DefaultFalseBooleanDatabaseTableColumn::create('isLegacy'),
+        ]),
+];

wcfsetup/install/files/acp/templates/userGroupAssignmentAdd.tpl

@@ -17,70 +17,6 @@
 	</nav>
 </header>
 
-{include file='shared_formNotice'}
-
-<form method="post" action="{if $action == 'add'}{link controller='UserGroupAssignmentAdd'}{/link}{else}{link controller='UserGroupAssignmentEdit' object=$assignment}{/link}{/if}">
-	<div class="section">
-		<dl{if $errorField == 'title'} class="formError"{/if}>
-			<dt><label for="title">{lang}wcf.global.name{/lang}</label></dt>
-			<dd>
-				<input type="text" id="title" name="title" value="{$title}" class="long">
-				{if $errorField == 'title'}
-					<small class="innerError">
-						{if $errorType == 'empty'}
-							{lang}wcf.global.form.error.empty{/lang}
-						{else}
-							{lang}wcf.acp.group.assignment.title.error.{$errorType}{/lang}
-						{/if}
-					</small>
-				{/if}
-			</dd>
-		</dl>
-
-		<dl{if $errorField == 'groupID'} class="formError"{/if}>
-			<dt><label for="groupID">{lang}wcf.user.group{/lang}</label></dt>
-			<dd>
-				{htmlOptions name='groupID' id='groupID' options=$userGroups selected=$groupID}
-				{if $errorField == 'groupID'}
-					{if $errorType == 'noValidSelection'}
-						<small class="innerError">{lang}wcf.global.form.error.noValidSelection{/lang}</small>
-					{else}
-						<small class="innerError">{lang}wcf.acp.group.assignment.groupID.error.{$errorType}{/lang}</small>
-					{/if}
-				{/if}
-			</dd>
-		</dl>
-
-		<dl>
-			<dt></dt>
-			<dd>
-				<label><input type="checkbox" id="isDisabled" name="isDisabled"{if $isDisabled} checked{/if}> {lang}wcf.acp.group.assignment.isDisabled{/lang}</label>
-			</dd>
-		</dl>
-
-		{event name='dataFields'}
-	</div>
-
-	{event name='sections'}
-
-	<section class="section">
-		<header class="sectionHeader">
-			<h2 class="sectionTitle">{lang}wcf.acp.group.assignment.conditions{/lang}</h2>
-			<p class="sectionDescription">{lang}wcf.acp.group.assignment.conditions.description{/lang}</p>
-		</header>
-
-		{if $errorField == 'conditions'}
-			<woltlab-core-notice type="error">{lang}wcf.acp.group.assignment.error.noConditions{/lang}</woltlab-core-notice>
-		{/if}
-
-		{include file='shared_userConditions'}
-	</section>
-
-	<div class="formSubmit">
-		<input type="submit" value="{lang}wcf.global.button.submit{/lang}" accesskey="s">
-		<input type="hidden" name="action" value="{$action}">
-		{csrfToken}
-	</div>
-</form>
+{unsafe:$form->getHtml()}
 
 {include file='footer'}

wcfsetup/install/files/acp/templates/userGroupAssignmentList.tpl

@@ -14,6 +14,12 @@
 	</nav>
 </header>
 
+{if $hasLegacyObjects}
+	<woltlab-core-notice type="warning">
+		{lang}wcf.acp.group.assignment.legacyNotice{/lang}
+	</woltlab-core-notice>
+{/if}
+
 <div class="section">
 	{unsafe:$gridView->render()}
 </div>

wcfsetup/install/files/acp/update_com.woltlab.wcf_6.3_userGroupAssignment.php

@@ -0,0 +1,59 @@
+<?php
+
+use wcf\system\condition\ConditionHandler;
+use wcf\system\WCF;
+use wcf\util\JSON;
+
+$exportedConditions = ConditionHandler::getInstance()->exportConditions("com.woltlab.wcf.condition.userGroupAssignment");
+if ($exportedConditions === []) {
+    return;
+}
+
+$sql = "UPDATE wcf1_user_group_assignment
+        SET    conditions = ?,
+               isLegacy = ?
+        WHERE  assignmentID = ?";
+$statement = WCF::getDB()->prepare($sql);
+foreach ($exportedConditions as $assignmentID => $conditionData) {
+    renameObjectTypes($conditionData);
+
+    $statement->execute([
+        JSON::encode($conditionData),
+        1,
+        $assignmentID,
+    ]);
+}
+
+/**
+ * Rename the object types so that the migration functions can handle them.
+ * @see \wcf\system\condition\provider\UserConditionProvider
+ *
+ * @param array<string, mixed> $conditionData
+ */
+function renameObjectTypes(array &$conditionData): void
+{
+    $objectTypeMap = [
+        'com.woltlab.wcf.username' => 'com.woltlab.wcf.user.username',
+        'com.woltlab.wcf.email' => 'com.woltlab.wcf.user.email',
+        'com.woltlab.wcf.userGroup' => 'com.woltlab.wcf.user.userGroup',
+        'com.woltlab.wcf.languages' => 'com.woltlab.wcf.user.languages',
+        'com.woltlab.wcf.registrationDate' => 'com.woltlab.wcf.user.registrationDate',
+        'com.woltlab.wcf.registrationDateInterval' => 'com.woltlab.wcf.user.registrationDateInterval',
+        'com.woltlab.wcf.avatar' => 'com.woltlab.wcf.user.avatar',
+        'com.woltlab.wcf.signature' => 'com.woltlab.wcf.user.signature',
+        'com.woltlab.wcf.coverPhoto' => 'com.woltlab.wcf.user.coverPhoto',
+        'com.woltlab.wcf.state' => 'com.woltlab.wcf.user.state',
+        'com.woltlab.wcf.activityPoints' => 'com.woltlab.wcf.user.activityPoints',
+        'com.woltlab.wcf.likesReceived' => 'com.woltlab.wcf.user.likesReceived',
+        // TODO 'com.woltlab.wcf.userOptions'
+        'com.woltlab.wcf.userTrophyCondition' => 'com.woltlab.wcf.user.trophyCondition',
+        'com.woltlab.wcf.trophyPoints' => 'com.woltlab.wcf.user.trophyPoints',
+    ];
+
+    foreach ($objectTypeMap as $currentName => $newName) {
+        if (isset($conditionData[$currentName])) {
+            $conditionData[$newName] = $conditionData[$currentName];
+            unset($conditionData[$currentName]);
+        }
+    }
+}