Comments: Moved to tab UI, Converted tabs component to ts

[bookstack] / resources / js / components / page-comments.ts

diff --git a/resources/js/components/page-comments.ts b/resources/js/components/page-comments.ts
index a19d2c7d4b128d4deeae63cd36bffaa2e6c89c40..2482c9dcb7dd30667821830c03e5eeccb1fa56aa 100644 (file)
--- a/resources/js/components/page-comments.ts
+++ b/resources/js/components/page-comments.ts
@@ -1,6 +1,7 @@
 import {Component} from './component';
 import {getLoading, htmlToDom} from '../services/dom.ts';
 import {buildForInput} from '../wysiwyg-tinymce/config';
+import {Tabs} from "./tabs";
 
 export interface CommentReplyEvent extends Event {
     detail: {
@@ -9,14 +10,22 @@ export interface CommentReplyEvent extends Event {
     }
 }
 
+export interface ArchiveEvent extends Event {
+    detail: {
+        new_thread_dom: HTMLElement;
+    }
+}
+
 export class PageComments extends Component {
 
     private elem: HTMLElement;
     private pageId: number;
     private container: HTMLElement;
     private commentCountBar: HTMLElement;
-    private commentsTitle: HTMLElement;
+    private activeTab: HTMLElement;
+    private archivedTab: HTMLElement;
     private addButtonContainer: HTMLElement;
+    private archiveContainer: HTMLElement;
     private replyToRow: HTMLElement;
     private formContainer: HTMLElement;
     private form: HTMLFormElement;
@@ -30,6 +39,7 @@ export class PageComments extends Component {
     private wysiwygEditor: any = null;
     private createdText: string;
     private countText: string;
+    private archivedCountText: string;
     private parentId: number | null = null;
     private contentReference: string = '';
     private formReplyText: string = '';
@@ -41,8 +51,10 @@ export class PageComments extends Component {
         // Element references
         this.container = this.$refs.commentContainer;
         this.commentCountBar = this.$refs.commentCountBar;
-        this.commentsTitle = this.$refs.commentsTitle;
+        this.activeTab = this.$refs.activeTab;
+        this.archivedTab = this.$refs.archivedTab;
         this.addButtonContainer = this.$refs.addButtonContainer;
+        this.archiveContainer = this.$refs.archiveContainer;
         this.replyToRow = this.$refs.replyToRow;
         this.formContainer = this.$refs.formContainer;
         this.form = this.$refs.form as HTMLFormElement;
@@ -59,6 +71,7 @@ export class PageComments extends Component {
         // Translations
         this.createdText = this.$opts.createdText;
         this.countText = this.$opts.countText;
+        this.archivedCountText = this.$opts.archivedCountText;
 
         this.formReplyText = this.formReplyLink?.textContent || '';
 
@@ -75,6 +88,16 @@ export class PageComments extends Component {
             this.setReply(event.detail.id, event.detail.element);
         });
 
+        this.elem.addEventListener('page-comment-archive', (event: ArchiveEvent) => {
+            this.archiveContainer.append(event.detail.new_thread_dom);
+            setTimeout(() => this.updateCount(), 1);
+        });
+
+        this.elem.addEventListener('page-comment-unarchive', (event: ArchiveEvent) => {
+            this.container.append(event.detail.new_thread_dom);
+            setTimeout(() => this.updateCount(), 1);
+        });
+
         if (this.form) {
             this.removeReplyToButton.addEventListener('click', this.removeReplyTo.bind(this));
             this.hideFormButton.addEventListener('click', this.hideForm.bind(this));
@@ -95,7 +118,7 @@ export class PageComments extends Component {
         const reqData = {
             html: this.wysiwygEditor.getContent(),
             parent_id: this.parentId || null,
-            content_reference: this.contentReference || '',
+            content_ref: this.contentReference || '',
         };
 
         window.$http.post(`/comment/${this.pageId}`, reqData).then(resp => {
@@ -120,8 +143,10 @@ export class PageComments extends Component {
     }
 
     protected updateCount(): void {
-        const count = this.getCommentCount();
-        this.commentsTitle.textContent = window.$trans.choice(this.countText, count);
+        const activeCount = this.getActiveThreadCount();
+        this.activeTab.textContent = window.$trans.choice(this.countText, activeCount);
+        const archivedCount = this.getArchivedThreadCount();
+        this.archivedTab.textContent = window.$trans.choice(this.archivedCountText, archivedCount);
     }
 
     protected resetForm(): void {
@@ -139,12 +164,18 @@ export class PageComments extends Component {
         this.addButtonContainer.toggleAttribute('hidden', true);
         this.formContainer.scrollIntoView({behavior: 'smooth', block: 'nearest'});
         this.loadEditor();
+
+        // Ensure the active comments tab is displaying
+        const tabs = window.$components.firstOnElement(this.elem, 'tabs');
+        if (tabs instanceof Tabs) {
+            tabs.show('comment-tab-panel-active');
+        }
     }
 
     protected hideForm(): void {
         this.resetForm();
         this.formContainer.toggleAttribute('hidden', true);
-        if (this.getCommentCount() > 0) {
+        if (this.getActiveThreadCount() > 0) {
             this.elem.append(this.addButtonContainer);
         } else {
             this.commentCountBar.append(this.addButtonContainer);
@@ -182,8 +213,12 @@ export class PageComments extends Component {
         }
     }
 
-    protected getCommentCount(): number {
-        return this.container.querySelectorAll('[component="page-comment"]').length;
+    protected getActiveThreadCount(): number {
+        return this.container.querySelectorAll(':scope > .comment-branch:not([hidden])').length;
+    }
+
+    protected getArchivedThreadCount(): number {
+        return this.archiveContainer.querySelectorAll(':scope > .comment-branch').length;
     }
 
     protected setReply(commentLocalId, commentElement): void {