Skip to content

Commit 98dfe70

Browse files
BurntimeXBurntimeX
committed
Migrate WCF.Message.EditHistory to Typescript
Closes #6084
1 parent e004b8f commit 98dfe70

File tree

14 files changed

+429
-96
lines changed

14 files changed

+429
-96
lines changed

‎com.woltlab.wcf/templates/editHistory.tpl‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@
7979
{lang}wcf.edit.versions{/lang} <span class="badge">{#$versionCount+1}</span>
8080
</h2>
8181

82-
<table class="table">
82+
<table class="table" id="editHistory">
8383
<thead>
8484
<tr>
8585
<th class="columnID columnEditID" colspan="2">{lang}wcf.edit.version{/lang}</th>
@@ -103,14 +103,14 @@
103103
<td class="columnID"><strong>{lang}wcf.edit.currentVersion{/lang}</strong></td>
104104
<td class="columnText columnUser"><a href="{link controller='User' id=$object->getUserID() title=$object->getUsername()}{/link}">{$object->getUsername()}</a></td>
105105
<td class="columnText columnEditReason">{$object->getEditReason()}</td>
106-
<td class="columnDate columnTime">{@$object->getTime()|time}</td>
106+
<td class="columnDate columnTime">{time time=$object->getTime()}</td>
107107

108108
{event name='columns'}
109109
</tr>
110110
{foreach from=$objects item=edit name=edit}
111111
<tr class="jsEditRow">
112112
<td class="columnIcon">
113-
<button type="button" class="jsRevertButton jsTooltip" title="{lang}wcf.edit.revert{/lang}" data-object-id="{@$edit->entryID}" data-confirm-message="{lang __encode=true}wcf.edit.revert.sure{/lang}">
113+
<button type="button" class="jsRevertButton jsTooltip" title="{lang}wcf.edit.revert{/lang}" data-object-id="{@$edit->entryID}" data-confirm-message="{lang __encode=true}wcf.edit.revert.confirmMessage{/lang}">
114114
{icon name='rotate-left'}
115115
</button>
116116
<input type="radio" name="oldID" value="{$edit->entryID}"{if $oldID == $edit->entryID} checked{/if}> <input type="radio" name="newID" value="{$edit->entryID}"{if $newID == $edit->entryID} checked{/if}>
@@ -119,15 +119,15 @@
119119
<td class="columnID">{#($tpl[foreach][edit][total] - $tpl[foreach][edit][iteration] + 1)}</td>
120120
<td class="columnText columnUser"><a href="{link controller='User' id=$edit->userID title=$edit->username}{/link}">{$edit->username}</a></td>
121121
<td class="columnText columnEditReason">{$edit->editReason}</td>
122-
<td class="columnDate columnTime">{@$edit->time|time}</td>
122+
<td class="columnDate columnTime">{time time=$edit->time}</td>
123123

124124
{event name='columns'}
125125
</tr>
126126
{/foreach}
127127
</tbody>
128128
<script data-relocate="true">
129-
$(function () {
130-
new WCF.Message.EditHistory($('input[name=oldID]'), $('input[name=newID]'), '.jsEditRow');
129+
require(['WoltLabSuite/Core/Controller/EditHistory/VersionList'], ({ setup }) => {
130+
setup(document.getElementById('editHistory'));
131131
});
132132
</script>
133133
</table>

‎ts/WoltLabSuite/Core/Acp/Controller/VersionTracker/VersionList.ts‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
/**
2+
* Handles the list of versions in the version tracker list.
3+
*
4+
* @author Marcel Werk
5+
* @copyright 2001-2024 WoltLab GmbH
6+
* @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
7+
* @since 6.2
8+
*/
9+
10+
import { revertVersion } from "WoltLabSuite/Core/Api/Versionstrackers/RevertVersion";
11+
import { confirmationFactory } from "WoltLabSuite/Core/Component/Confirmation";
12+
import * as UiNotification from "WoltLabSuite/Core/Ui/Notification";
13+
14+
function initRevertButtons(container: HTMLElement, objectType: string, objectId: number): void {
15+
container.querySelectorAll<HTMLButtonElement>(".jsRevertButton").forEach((button) => {
16+
button.addEventListener("click", async () => {
17+
const result = await confirmationFactory().custom(button.dataset.confirmMessage!).withoutMessage();
18+
if (!result) {
19+
return;
20+
}
21+
22+
const response = await revertVersion(objectType, objectId, parseInt(button.dataset.objectId!));
23+
if (response.ok) {
24+
UiNotification.show(undefined, () => {
25+
window.location.reload();
26+
});
27+
}
28+
});
29+
});
30+
}
31+
32+
function initRadioButtons(container: HTMLElement): void {
33+
const oldIdInputs = container.querySelectorAll<HTMLInputElement>("input[name=oldID]");
34+
const newIdInputs = container.querySelectorAll<HTMLInputElement>("input[name=newID]");
35+
36+
function newInputChanged(newIdInput: HTMLInputElement): void {
37+
const newId = newIdInput.value === "current" ? Infinity : parseInt(newIdInput.value);
38+
39+
oldIdInputs.forEach((oldIdInput) => {
40+
const oldId = oldIdInput.value === "current" ? Infinity : parseInt(oldIdInput.value);
41+
42+
oldIdInput.disabled = oldId >= newId;
43+
});
44+
}
45+
46+
newIdInputs.forEach((newIdInput) => {
47+
newIdInput.addEventListener("change", () => {
48+
newInputChanged(newIdInput);
49+
});
50+
if (newIdInput.checked) {
51+
newInputChanged(newIdInput);
52+
}
53+
});
54+
55+
function oldInputChanged(oldIdInput: HTMLInputElement): void {
56+
const oldId = oldIdInput.value === "current" ? Infinity : parseInt(oldIdInput.value);
57+
58+
newIdInputs.forEach((newIdInput) => {
59+
const newId = newIdInput.value === "current" ? Infinity : parseInt(newIdInput.value);
60+
61+
newIdInput.disabled = newId <= oldId;
62+
});
63+
}
64+
65+
oldIdInputs.forEach((oldIdInput) => {
66+
oldIdInput.addEventListener("change", () => {
67+
oldInputChanged(oldIdInput);
68+
});
69+
if (oldIdInput.checked) {
70+
oldInputChanged(oldIdInput);
71+
}
72+
});
73+
}
74+
75+
export function setup(container: HTMLElement, objectType: string, objectId: number): void {
76+
initRevertButtons(container, objectType, objectId);
77+
initRadioButtons(container);
78+
}

‎ts/WoltLabSuite/Core/Api/Versionstrackers/RevertVersion.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
/**
2+
* Reverts a version tracker object to a previous version.
3+
*
4+
* @author Marcel Werk
5+
* @copyright 2001-2024 WoltLab GmbH
6+
* @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
7+
* @since 6.2
8+
* @woltlabExcludeBundle tiny
9+
*/
10+
11+
import { prepareRequest } from "WoltLabSuite/Core/Ajax/Backend";
12+
import { ApiResult, apiResultFromError, apiResultFromValue } from "../Result";
13+
14+
export async function revertVersion(objectType: string, objectId: number, versionId: number): Promise<ApiResult<[]>> {
15+
try {
16+
await prepareRequest(`${window.WSC_RPC_API_URL}core/versiontrackers/revert`)
17+
.post({
18+
objectType,
19+
objectId,
20+
versionId,
21+
})
22+
.fetchAsJson();
23+
} catch (e) {
24+
return apiResultFromError(e);
25+
}
26+
27+
return apiResultFromValue([]);
28+
}

‎ts/WoltLabSuite/Core/Controller/EditHistory/VersionList.ts‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
/**
2+
* Handles the list of versions in the edit history.
3+
*
4+
* @author Marcel Werk
5+
* @copyright 2001-2024 WoltLab GmbH
6+
* @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
7+
* @since 6.2
8+
*/
9+
10+
import { dboAction } from "WoltLabSuite/Core/Ajax";
11+
import { confirmationFactory } from "WoltLabSuite/Core/Component/Confirmation";
12+
import * as UiNotification from "WoltLabSuite/Core/Ui/Notification";
13+
14+
function initRevertButtons(container: HTMLElement): void {
15+
container.querySelectorAll<HTMLButtonElement>(".jsRevertButton").forEach((button) => {
16+
button.addEventListener("click", async () => {
17+
const result = await confirmationFactory().custom(button.dataset.confirmMessage!).withoutMessage();
18+
if (!result) {
19+
return;
20+
}
21+
22+
void revert(parseInt(button.dataset.objectId!));
23+
});
24+
});
25+
}
26+
27+
async function revert(objectId: number): Promise<void> {
28+
await dboAction("revert", "wcf\\data\\edit\\history\\entry\\EditHistoryEntryAction").objectIds([objectId]).dispatch();
29+
30+
UiNotification.show(undefined, () => {
31+
window.location.reload();
32+
});
33+
}
34+
35+
function initRadioButtons(container: HTMLElement): void {
36+
const oldIdInputs = container.querySelectorAll<HTMLInputElement>("input[name=oldID]");
37+
const newIdInputs = container.querySelectorAll<HTMLInputElement>("input[name=newID]");
38+
39+
function newInputChanged(newIdInput: HTMLInputElement): void {
40+
const newId = newIdInput.value === "current" ? Infinity : parseInt(newIdInput.value);
41+
42+
oldIdInputs.forEach((oldIdInput) => {
43+
const oldId = oldIdInput.value === "current" ? Infinity : parseInt(oldIdInput.value);
44+
45+
oldIdInput.disabled = oldId >= newId;
46+
});
47+
}
48+
49+
newIdInputs.forEach((newIdInput) => {
50+
newIdInput.addEventListener("change", () => {
51+
newInputChanged(newIdInput);
52+
});
53+
newInputChanged(newIdInput);
54+
});
55+
56+
function oldInputChanged(oldIdInput: HTMLInputElement): void {
57+
const oldId = oldIdInput.value === "current" ? Infinity : parseInt(oldIdInput.value);
58+
59+
newIdInputs.forEach((newIdInput) => {
60+
const newId = newIdInput.value === "current" ? Infinity : parseInt(newIdInput.value);
61+
62+
newIdInput.disabled = newId <= oldId;
63+
});
64+
}
65+
66+
oldIdInputs.forEach((oldIdInput) => {
67+
oldIdInput.addEventListener("change", () => {
68+
oldInputChanged(oldIdInput);
69+
});
70+
oldInputChanged(oldIdInput);
71+
});
72+
}
73+
74+
export function setup(container: HTMLElement): void {
75+
initRevertButtons(container);
76+
initRadioButtons(container);
77+
}

‎wcfsetup/install/files/acp/templates/versionTrackerList.tpl‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@
9494
{lang}wcf.edit.versions{/lang} <span class="badge">{#$versionCount+1}</span>
9595
</h2>
9696

97-
<table class="table">
97+
<table class="table" id="versionList">
9898
<thead>
9999
<tr>
100100
<th class="columnID columnEditID" colspan="2">{lang}wcf.edit.version{/lang}</th>
@@ -116,37 +116,31 @@
116116
</td>
117117
<td class="columnID"><strong>{lang}wcf.edit.currentVersion{/lang}</strong></td>
118118
<td class="columnText columnUser">{if $object->getUserID()}<a href="{link controller='UserEdit' id=$object->getUserID()}{/link}">{$object->getUsername()}{else}---{/if}</a></td>
119-
<td class="columnDate columnTime">{if $object->getTime()}{@$object->getTime()|time}{else}---{/if}</td>
119+
<td class="columnDate columnTime">{if $object->getTime()}{time time=$object->getTime()}{else}---{/if}</td>
120120

121121
{event name='columns'}
122122
</tr>
123123
{foreach from=$versions item=edit name=edit}
124124
<tr class="jsEditRow">
125125
<td class="columnIcon">
126-
<button type="button" class="jsRevertButton jsTooltip" title="{lang}wcf.edit.revert{/lang}" data-object-id="{@$edit->versionID}" data-confirm-message="{lang __encode=true}wcf.edit.revert.sure{/lang}">
126+
<button type="button" class="jsRevertButton jsTooltip" title="{lang}wcf.edit.revert{/lang}" data-object-id="{@$edit->versionID}" data-confirm-message="{lang __encode=true}wcf.edit.revert.confirmMessage{/lang}">
127127
{icon name='arrow-rotate-left'}
128128
</button>
129129
<input type="radio" name="oldID" value="{$edit->versionID}"{if $oldID == $edit->versionID} checked{/if}> <input type="radio" name="newID" value="{$edit->versionID}"{if $newID == $edit->versionID} checked{/if}>
130130
{event name='rowButtons'}
131131
</td>
132132
<td class="columnID">{#($tpl[foreach][edit][total] - $tpl[foreach][edit][iteration] + 1)}</td>
133133
<td class="columnText columnUser"><a href="{link controller='UserEdit' id=$edit->userID title=$edit->username}{/link}">{$edit->username}</a></td>
134-
<td class="columnDate columnTime">{@$edit->time|time}</td>
134+
<td class="columnDate columnTime">{time time=$edit->time}</td>
135135

136136
{event name='columns'}
137137
</tr>
138138
{/foreach}
139139
</tbody>
140140

141-
{js application='wcf' file='WCF.Message' bundle='WCF.Combined'}
142141
<script data-relocate="true">
143-
$(function () {
144-
new WCF.Message.EditHistory($('input[name=oldID]'), $('input[name=newID]'), '.jsEditRow', undefined, {
145-
isVersionTracker: true,
146-
versionTrackerObjectType: '{$objectType}',
147-
versionTrackerObjectId: {@$objectID},
148-
redirectUrl: '{$object->getEditLink()}'
149-
});
142+
require(['WoltLabSuite/Core/Acp/Controller/VersionTracker/VersionList'], ({ setup }) => {
143+
setup(document.getElementById('versionList'), '{$objectType|encodeJS}', {$objectID});
150144
});
151145
</script>
152146
</table>

‎wcfsetup/install/files/js/WCF.Message.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ WCF.Message = { };
1212
if (COMPILER_TARGET_DEFAULT) {
1313
/**
1414
* Provides the dynamic parts of the edit history interface.
15+
*
16+
* @deprecated 6.2 Use `WoltLabSuite/Core/Controller/EditHistory/VersionList` or `WoltLabSuite/Core/Acp/Controller/VersionTracker/VersionList` instead.
1517
*/
1618
WCF.Message.EditHistory = Class.extend({
1719
/**

‎wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Controller/VersionTracker/VersionList.js‎

Lines changed: 68 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎wcfsetup/install/files/js/WoltLabSuite/Core/Api/Versionstrackers/RevertVersion.js‎

Lines changed: 29 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)