Skip to content

Commit 8f92b6f

Browse files
ssddanbrownssddanbrown
committed
Comments: Fixed a range of TS errors + other
- Migrated toolbox component to TS - Aligned how custom event types are managed - Fixed PHP use of content_ref where not provided
1 parent 62f78f1 commit 8f92b6f

File tree

10 files changed

+167
-149
lines changed

10 files changed

+167
-149
lines changed

‎app/Activity/CommentRepo.php‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ public function getById(int $id): Comment
2222
/**
2323
* Create a new comment on an entity.
2424
*/
25-
public function create(Entity $entity, string $html, ?int $parent_id, string $content_ref): Comment
25+
public function create(Entity $entity, string $html, ?int $parentId, string $contentRef): Comment
2626
{
2727
$userId = user()->id;
2828
$comment = new Comment();
@@ -31,8 +31,8 @@ public function create(Entity $entity, string $html, ?int $parent_id, string $co
3131
$comment->created_by = $userId;
3232
$comment->updated_by = $userId;
3333
$comment->local_id = $this->getNextLocalId($entity);
34-
$comment->parent_id = $parent_id;
35-
$comment->content_ref = preg_match('/^bkmrk-(.*?):\d+:(\d*-\d*)?$/', $content_ref) === 1 ? $content_ref : '';
34+
$comment->parent_id = $parentId;
35+
$comment->content_ref = preg_match('/^bkmrk-(.*?):\d+:(\d*-\d*)?$/', $contentRef) === 1 ? $contentRef : '';
3636

3737
$entity->comments()->save($comment);
3838
ActivityService::add(ActivityType::COMMENT_CREATE, $comment);

‎app/Activity/Controllers/CommentController.php‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,8 @@ public function savePageComment(Request $request, int $pageId)
4343

4444
// Create a new comment.
4545
$this->checkPermission('comment-create-all');
46-
$comment = $this->commentRepo->create($page, $input['html'], $input['parent_id'] ?? null, $input['content_ref']);
46+
$contentRef = $input['content_ref'] ?? '';
47+
$comment = $this->commentRepo->create($page, $input['html'], $input['parent_id'] ?? null, $contentRef);
4748

4849
return view('comments.comment-branch', [
4950
'readOnly' => false,

resources/js/components/editor-toolbox.js renamed to resources/js/components/editor-toolbox.ts

Lines changed: 27 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,49 @@
11
import {Component} from './component';
22

3+
export interface EditorToolboxChangeEventData {
4+
tab: string;
5+
open: boolean;
6+
}
7+
38
export class EditorToolbox extends Component {
49

10+
protected container!: HTMLElement;
11+
protected buttons!: HTMLButtonElement[];
12+
protected contentElements!: HTMLElement[];
13+
protected toggleButton!: HTMLElement;
14+
protected editorWrapEl!: HTMLElement;
15+
16+
protected open: boolean = false;
17+
protected tab: string = '';
18+
519
setup() {
620
// Elements
721
this.container = this.$el;
8-
this.buttons = this.$manyRefs.tabButton;
22+
this.buttons = this.$manyRefs.tabButton as HTMLButtonElement[];
923
this.contentElements = this.$manyRefs.tabContent;
1024
this.toggleButton = this.$refs.toggle;
11-
this.editorWrapEl = this.container.closest('.page-editor');
12-
13-
// State
14-
this.open = false;
15-
this.tab = '';
25+
this.editorWrapEl = this.container.closest('.page-editor') as HTMLElement;
1626

1727
this.setupListeners();
1828

1929
// Set the first tab as active on load
20-
this.setActiveTab(this.contentElements[0].dataset.tabContent);
30+
this.setActiveTab(this.contentElements[0].dataset.tabContent || '');
2131
}
2232

23-
setupListeners() {
33+
protected setupListeners(): void {
2434
// Toolbox toggle button click
2535
this.toggleButton.addEventListener('click', () => this.toggle());
2636
// Tab button click
27-
this.container.addEventListener('click', event => {
28-
const button = event.target.closest('button');
29-
if (this.buttons.includes(button)) {
30-
const name = button.dataset.tab;
37+
this.container.addEventListener('click', (event: MouseEvent) => {
38+
const button = (event.target as HTMLElement).closest('button');
39+
if (button instanceof HTMLButtonElement && this.buttons.includes(button)) {
40+
const name = button.dataset.tab || '';
3141
this.setActiveTab(name, true);
3242
}
3343
});
3444
}
3545

36-
toggle() {
46+
protected toggle(): void {
3747
this.container.classList.toggle('open');
3848
const isOpen = this.container.classList.contains('open');
3949
this.toggleButton.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
@@ -42,7 +52,7 @@ export class EditorToolbox extends Component {
4252
this.emitState();
4353
}
4454

45-
setActiveTab(tabName, openToolbox = false) {
55+
protected setActiveTab(tabName: string, openToolbox: boolean = false): void {
4656
// Set button visibility
4757
for (const button of this.buttons) {
4858
button.classList.remove('active');
@@ -65,8 +75,9 @@ export class EditorToolbox extends Component {
6575
this.emitState();
6676
}
6777

68-
emitState() {
69-
this.$emit('change', {tab: this.tab, open: this.open});
78+
protected emitState(): void {
79+
const data: EditorToolboxChangeEventData = {tab: this.tab, open: this.open};
80+
this.$emit('change', data);
7081
}
7182

7283
}

‎resources/js/components/page-comment-reference.ts‎

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import {el} from "../wysiwyg/utils/dom";
44
import commentIcon from "@icons/comment.svg";
55
import closeIcon from "@icons/close.svg";
66
import {debounce, scrollAndHighlightElement} from "../services/util";
7+
import {EditorToolboxChangeEventData} from "./editor-toolbox";
8+
import {TabsChangeEvent} from "./tabs";
79

810
/**
911
* Track the close function for the current open marker so it can be closed
@@ -12,13 +14,13 @@ import {debounce, scrollAndHighlightElement} from "../services/util";
1214
let openMarkerClose: Function|null = null;
1315

1416
export class PageCommentReference extends Component {
15-
protected link: HTMLLinkElement;
16-
protected reference: string;
17+
protected link!: HTMLLinkElement;
18+
protected reference!: string;
1719
protected markerWrap: HTMLElement|null = null;
1820

19-
protected viewCommentText: string;
20-
protected jumpToThreadText: string;
21-
protected closeText: string;
21+
protected viewCommentText!: string;
22+
protected jumpToThreadText!: string;
23+
protected closeText!: string;
2224

2325
setup() {
2426
this.link = this.$el as HTMLLinkElement;
@@ -31,15 +33,15 @@ export class PageCommentReference extends Component {
3133
this.showForDisplay();
3234

3335
// Handle editor view to show on comments toolbox view
34-
window.addEventListener('editor-toolbox-change', (event) => {
35-
const tabName: string = (event as {detail: {tab: string, open: boolean}}).detail.tab;
36-
const isOpen = (event as {detail: {tab: string, open: boolean}}).detail.open;
37-
if (tabName === 'comments' && isOpen && this.link.checkVisibility()) {
38-
this.showForEditor();
39-
} else {
40-
this.hideMarker();
41-
}
42-
});
36+
window.addEventListener('editor-toolbox-change', ((event: CustomEvent<EditorToolboxChangeEventData>) => {
37+
const tabName: string = event.detail.tab;
38+
const isOpen = event.detail.open;
39+
if (tabName === 'comments' && isOpen && this.link.checkVisibility()) {
40+
this.showForEditor();
41+
} else {
42+
this.hideMarker();
43+
}
44+
}) as EventListener);
4345

4446
// Handle visibility changes within editor toolbox archived details dropdown
4547
window.addEventListener('toggle', event => {
@@ -55,8 +57,8 @@ export class PageCommentReference extends Component {
5557
}, {capture: true});
5658

5759
// Handle comments tab changes to hide/show markers & indicators
58-
window.addEventListener('tabs-change', event => {
59-
const sectionId = (event as {detail: {showing: string}}).detail.showing;
60+
window.addEventListener('tabs-change', ((event: CustomEvent<TabsChangeEvent>) => {
61+
const sectionId = event.detail.showing;
6062
if (!sectionId.startsWith('comment-tab-panel')) {
6163
return;
6264
}
@@ -67,7 +69,7 @@ export class PageCommentReference extends Component {
6769
} else {
6870
this.hideMarker();
6971
}
70-
});
72+
}) as EventListener);
7173
}
7274

7375
public showForDisplay() {

‎resources/js/components/page-comment.ts‎

Lines changed: 38 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,39 @@
11
import {Component} from './component';
2-
import {getLoading, htmlToDom} from '../services/dom.ts';
2+
import {getLoading, htmlToDom} from '../services/dom';
33
import {buildForInput} from '../wysiwyg-tinymce/config';
44
import {PageCommentReference} from "./page-comment-reference";
5+
import {HttpError} from "../services/http";
6+
7+
export interface PageCommentReplyEventData {
8+
id: string; // ID of comment being replied to
9+
element: HTMLElement; // Container for comment replied to
10+
}
11+
12+
export interface PageCommentArchiveEventData {
13+
new_thread_dom: HTMLElement;
14+
}
515

616
export class PageComment extends Component {
717

8-
protected commentId: string;
9-
protected commentLocalId: string;
10-
protected deletedText: string;
11-
protected updatedText: string;
12-
protected archiveText: string;
18+
protected commentId!: string;
19+
protected commentLocalId!: string;
20+
protected deletedText!: string;
21+
protected updatedText!: string;
22+
protected archiveText!: string;
1323

1424
protected wysiwygEditor: any = null;
15-
protected wysiwygLanguage: string;
16-
protected wysiwygTextDirection: string;
17-
18-
protected container: HTMLElement;
19-
protected contentContainer: HTMLElement;
20-
protected form: HTMLFormElement;
21-
protected formCancel: HTMLElement;
22-
protected editButton: HTMLElement;
23-
protected deleteButton: HTMLElement;
24-
protected replyButton: HTMLElement;
25-
protected archiveButton: HTMLElement;
26-
protected input: HTMLInputElement;
25+
protected wysiwygLanguage!: string;
26+
protected wysiwygTextDirection!: string;
27+
28+
protected container!: HTMLElement;
29+
protected contentContainer!: HTMLElement;
30+
protected form!: HTMLFormElement;
31+
protected formCancel!: HTMLElement;
32+
protected editButton!: HTMLElement;
33+
protected deleteButton!: HTMLElement;
34+
protected replyButton!: HTMLElement;
35+
protected archiveButton!: HTMLElement;
36+
protected input!: HTMLInputElement;
2737

2838
setup() {
2939
// Options
@@ -53,10 +63,11 @@ export class PageComment extends Component {
5363

5464
protected setupListeners(): void {
5565
if (this.replyButton) {
56-
this.replyButton.addEventListener('click', () => this.$emit('reply', {
66+
const data: PageCommentReplyEventData = {
5767
id: this.commentLocalId,
5868
element: this.container,
59-
}));
69+
};
70+
this.replyButton.addEventListener('click', () => this.$emit('reply', data));
6071
}
6172

6273
if (this.editButton) {
@@ -95,10 +106,10 @@ export class PageComment extends Component {
95106
drawioUrl: '',
96107
pageId: 0,
97108
translations: {},
98-
translationMap: (window as Record<string, Object>).editor_translations,
109+
translationMap: (window as unknown as Record<string, Object>).editor_translations,
99110
});
100111

101-
(window as {tinymce: {init: (Object) => Promise<any>}}).tinymce.init(config).then(editors => {
112+
(window as unknown as {tinymce: {init: (arg0: Object) => Promise<any>}}).tinymce.init(config).then(editors => {
102113
this.wysiwygEditor = editors[0];
103114
setTimeout(() => this.wysiwygEditor.focus(), 50);
104115
});
@@ -120,7 +131,9 @@ export class PageComment extends Component {
120131
window.$events.success(this.updatedText);
121132
} catch (err) {
122133
console.error(err);
123-
window.$events.showValidationErrors(err);
134+
if (err instanceof HttpError) {
135+
window.$events.showValidationErrors(err);
136+
}
124137
this.form.toggleAttribute('hidden', false);
125138
loading.remove();
126139
}
@@ -151,7 +164,8 @@ export class PageComment extends Component {
151164

152165
const response = await window.$http.put(`/comment/${this.commentId}/${action}`);
153166
window.$events.success(this.archiveText);
154-
this.$emit(action, {new_thread_dom: htmlToDom(response.data as string)});
167+
const eventData: PageCommentArchiveEventData = {new_thread_dom: htmlToDom(response.data as string)};
168+
this.$emit(action, eventData);
155169

156170
const branch = this.container.closest('.comment-branch') as HTMLElement;
157171
const references = window.$components.allWithinElement<PageCommentReference>(branch, 'page-comment-reference');

0 commit comments

Comments
 (0)