Skip to content

Commit

Permalink
Merge pull request #6071 from WoltLab/6.2-formbuilder-template-group
Browse files Browse the repository at this point in the history
Use FormBuilder for TemplateGroups
  • Loading branch information
Cyperghost authored Nov 18, 2024
2 parents 63de299 + 50e6685 commit 30812d4
Show file tree
Hide file tree
Showing 7 changed files with 289 additions and 653 deletions.
138 changes: 12 additions & 126 deletions ts/WoltLabSuite/Core/Acp/Ui/Template/Group/Copy.ts
Original file line number Diff line number Diff line change
@@ -1,143 +1,29 @@
/**
* Provides a dialog to copy an existing template group.
*
* @author Alexander Ebert
* @copyright 2001-2019 WoltLab GmbH
* @author Olaf Braun, Alexander Ebert
* @copyright 2001-2024 WoltLab GmbH
* @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
*/

import * as Ajax from "../../../../Ajax";
import { AjaxCallbackObject, AjaxCallbackSetup } from "../../../../Ajax/Data";
import { DialogCallbackObject, DialogCallbackSetup } from "../../../../Ui/Dialog/Data";
import * as Language from "../../../../Language";
import UiDialog from "../../../../Ui/Dialog";
import * as UiNotification from "../../../../Ui/Notification";
import DomUtil from "../../../../Dom/Util";
import { dialogFactory } from "WoltLabSuite/Core/Component/Dialog";

interface AjaxResponse {
returnValues: {
redirectURL: string;
};
interface Response {
redirectURL: string;
}

interface AjaxResponseError {
returnValues?: {
fieldName?: string;
errorType?: string;
};
export function init(): void {
const button = document.querySelector(".jsButtonCopy") as HTMLAnchorElement;
button.addEventListener("click", () => void click(button));
}

class AcpUiTemplateGroupCopy implements AjaxCallbackObject, DialogCallbackObject {
private folderName?: HTMLInputElement = undefined;
private name?: HTMLInputElement = undefined;
private readonly templateGroupId: number;

constructor(templateGroupId: number) {
this.templateGroupId = templateGroupId;

const button = document.querySelector(".jsButtonCopy") as HTMLAnchorElement;
button.addEventListener("click", (ev) => this.click(ev));
}

private click(event: MouseEvent): void {
event.preventDefault();

UiDialog.open(this);
}

_dialogSubmit(): void {
Ajax.api(this, {
parameters: {
templateGroupName: this.name!.value,
templateGroupFolderName: this.folderName!.value,
},
});
}

_ajaxSuccess(data: AjaxResponse): void {
UiDialog.close(this);

async function click(button: HTMLAnchorElement): Promise<void> {
const result = await dialogFactory().usingFormBuilder().fromEndpoint<Response>(button.dataset.endpoint!);
if (result.ok) {
UiNotification.show(undefined, () => {
window.location.href = data.returnValues.redirectURL;
window.location.href = result.result.redirectURL;
});
}

_dialogSetup(): ReturnType<DialogCallbackSetup> {
return {
id: "templateGroupCopy",
options: {
onSetup: () => {
["Name", "FolderName"].forEach((type) => {
const input = document.getElementById("copyTemplateGroup" + type) as HTMLInputElement;
input.value = (document.getElementById("templateGroup" + type) as HTMLInputElement).value;

if (type === "Name") {
this.name = input;
} else {
this.folderName = input;
}
});
},
title: Language.get("wcf.acp.template.group.copy"),
},
source: `<dl>
<dt>
<label for="copyTemplateGroupName">${Language.get("wcf.global.name")}</label>
</dt>
<dd>
<input type="text" id="copyTemplateGroupName" class="long" data-dialog-submit-on-enter="true" required>
</dd>
</dl>
<dl>
<dt>
<label for="copyTemplateGroupFolderName">${Language.get("wcf.acp.template.group.folderName")}</label>
</dt>
<dd>
<input type="text" id="copyTemplateGroupFolderName" class="long" data-dialog-submit-on-enter="true" required>
</dd>
</dl>
<div class="formSubmit">
<button type="button" class="button buttonPrimary" data-type="submit">${Language.get(
"wcf.global.button.submit",
)}</button>
</div>`,
};
}

_ajaxSetup(): ReturnType<AjaxCallbackSetup> {
return {
data: {
actionName: "copy",
className: "wcf\\data\\template\\group\\TemplateGroupAction",
objectIDs: [this.templateGroupId],
},
failure: (data: AjaxResponseError) => {
if (data && data.returnValues && data.returnValues.fieldName && data.returnValues.errorType) {
if (data.returnValues.fieldName === "templateGroupName") {
DomUtil.innerError(
this.name!,
Language.get(`wcf.acp.template.group.name.error.${data.returnValues.errorType}`),
);
} else {
DomUtil.innerError(
this.folderName!,
Language.get(`wcf.acp.template.group.folderName.error.${data.returnValues.errorType}`),
);
}

return false;
}

return true;
},
};
}
}

let acpUiTemplateGroupCopy: AcpUiTemplateGroupCopy;

export function init(templateGroupId: number): void {
if (!acpUiTemplateGroupCopy) {
acpUiTemplateGroupCopy = new AcpUiTemplateGroupCopy(templateGroupId);
}
}
83 changes: 4 additions & 79 deletions wcfsetup/install/files/acp/templates/templateGroupAdd.tpl
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,8 @@

{if $action === 'edit'}
<script data-relocate="true">
require(['Language', 'WoltLabSuite/Core/Acp/Ui/Template/Group/Copy'], function (Language, AcpUiTemplateGroupCopy) {
Language.addObject({
'wcf.acp.template.group.copy': '{jslang}wcf.acp.template.group.copy{/jslang}',
'wcf.acp.template.group.name.error.notUnique': '{jslang}wcf.acp.template.group.name.error.notUnique{/jslang}',
'wcf.acp.template.group.folderName': '{jslang}wcf.acp.template.group.folderName{/jslang}',
'wcf.acp.template.group.folderName.error.invalid': '{jslang}wcf.acp.template.group.folderName.error.invalid{/jslang}',
'wcf.acp.template.group.folderName.error.notUnique': '{jslang}wcf.acp.template.group.folderName.error.notUnique{/jslang}',
'wcf.global.name': '{jslang}wcf.global.name{/jslang}'
});
AcpUiTemplateGroupCopy.init({$templateGroupID});
require(['WoltLabSuite/Core/Acp/Ui/Template/Group/Copy'], (AcpUiTemplateGroupCopy) => {
AcpUiTemplateGroupCopy.init();
});
</script>
{/if}
Expand All @@ -24,80 +15,14 @@

<nav class="contentHeaderNavigation">
<ul>
{if $action === 'edit'}<li><a href="#" class="jsButtonCopy button">{icon name='copy'} <span>{lang}wcf.acp.template.group.copy{/lang}</span></a></li>{/if}
{if $action === 'edit'}<li><button type="button" class="jsButtonCopy button" data-endpoint="{link controller="TemplateGroupCopy" id=$formObject->templateGroupID}{/link}">{icon name='copy'} <span>{lang}wcf.acp.template.group.copy{/lang}</span></button></li>{/if}
<li><a href="{link controller='TemplateGroupList'}{/link}" class="button">{icon name='list'} <span>{lang}wcf.acp.menu.link.template.group.list{/lang}</span></a></li>

{event name='contentHeaderNavigation'}
</ul>
</nav>
</header>

{include file='shared_formNotice'}

<form method="post" action="{if $action == 'add'}{link controller='TemplateGroupAdd'}{/link}{else}{link controller='TemplateGroupEdit' id=$templateGroupID}{/link}{/if}">
<div class="section">
{if $availableTemplateGroups|count}
<dl>
<dt><label for="parentTemplateGroupID">{lang}wcf.acp.template.group.parentTemplateGroup{/lang}</label></dt>
<dd>
<select name="parentTemplateGroupID" id="parentTemplateGroupID">
<option value="0">{lang}wcf.acp.template.group.default{/lang}</option>
{htmlOptions options=$availableTemplateGroups selected=$parentTemplateGroupID disableEncoding=true}
</select>
{if $errorField == 'parentTemplateGroupID'}
<small class="innerError">
{if $errorType == 'empty'}
{lang}wcf.global.form.error.empty{/lang}
{else}
{lang}wcf.acp.template.group.parentTemplateGroupID.error.{@$errorType}{/lang}
{/if}
</small>
{/if}
</dd>
</dl>
{/if}

<dl{if $errorField == 'templateGroupName'} class="formError"{/if}>
<dt><label for="templateGroupName">{lang}wcf.global.name{/lang}</label></dt>
<dd>
<input type="text" id="templateGroupName" name="templateGroupName" value="{$templateGroupName}" required class="long">
{if $errorField == 'templateGroupName'}
<small class="innerError">
{if $errorType == 'empty'}
{lang}wcf.global.form.error.empty{/lang}
{else}
{lang}wcf.acp.template.group.name.error.{@$errorType}{/lang}
{/if}
</small>
{/if}
</dd>
</dl>

<dl{if $errorField == 'templateGroupFolderName'} class="formError"{/if}>
<dt><label for="templateGroupFolderName">{lang}wcf.acp.template.group.folderName{/lang}</label></dt>
<dd>
<input type="text" id="templateGroupFolderName" name="templateGroupFolderName" value="{$templateGroupFolderName}" required class="long">
{if $errorField == 'templateGroupFolderName'}
<small class="innerError">
{if $errorType == 'empty'}
{lang}wcf.global.form.error.empty{/lang}
{else}
{lang}wcf.acp.template.group.folderName.error.{@$errorType}{/lang}
{/if}
</small>
{/if}
</dd>
</dl>

{event name='dataFields'}
</div>

{event name='sections'}

<div class="formSubmit">
<input type="submit" value="{lang}wcf.global.button.submit{/lang}" accesskey="s">
{csrfToken}
</div>
</form>
{unsafe:$form->getHtml()}

{include file='footer'}

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 30812d4

Please sign in to comment.