Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use FormBuilder for TemplateGroups #6071

Open
wants to merge 5 commits into
base: 6.2
Choose a base branch
from
Open

Use FormBuilder for TemplateGroups #6071

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a630baa
Use the FormBuilder to create/edit template groups
Cyperghost Nov 14, 2024
0768f15
Use FormBuilder to copy template groups
Cyperghost Nov 14, 2024
9a47050
Create functions to get the form field validators
Cyperghost Nov 14, 2024
211ac71
Use correct indent
Cyperghost Nov 14, 2024
50e6685
Insert form fields in a `FormContainer`
Cyperghost Nov 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
138 changes: 12 additions & 126 deletions ts/WoltLabSuite/Core/Acp/Ui/Template/Group/Copy.ts
View file
Open in desktop
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
View file
Open in desktop
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'}
108 changes: 11 additions & 97 deletions wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Template/Group/Copy.js
View file
Open in desktop

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

Loading
Loading