Comments: Addressed a range of edge cases and ux issues for references

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

diff --git a/resources/js/components/page-comment.ts b/resources/js/components/page-comment.ts
index b2e2bac2784d9e3306636d3f13fce430bf1c54cf..18b9ab73bf0c82c48cb8380eb42f02e38327a892 100644 (file)
--- a/resources/js/components/page-comment.ts
+++ b/resources/js/components/page-comment.ts
@@ -1,14 +1,15 @@
 import {Component} from './component';
 import {getLoading, htmlToDom} from '../services/dom.ts';
 import {buildForInput} from '../wysiwyg-tinymce/config';
+import {PageCommentReference} from "./page-comment-reference";
 
 export class PageComment extends Component {
 
     protected commentId: string;
     protected commentLocalId: string;
-    protected commentContentRef: string;
     protected deletedText: string;
     protected updatedText: string;
+    protected archiveText: string;
 
     protected wysiwygEditor: any = null;
     protected wysiwygLanguage: string;
@@ -21,15 +22,16 @@ export class PageComment extends Component {
     protected editButton: HTMLElement;
     protected deleteButton: HTMLElement;
     protected replyButton: HTMLElement;
+    protected archiveButton: HTMLElement;
     protected input: HTMLInputElement;
 
     setup() {
         // Options
         this.commentId = this.$opts.commentId;
         this.commentLocalId = this.$opts.commentLocalId;
-        this.commentContentRef = this.$opts.commentContentRef;
         this.deletedText = this.$opts.deletedText;
-        this.updatedText = this.$opts.updatedText;
+        this.deletedText = this.$opts.deletedText;
+        this.archiveText = this.$opts.archiveText;
 
         // Editor reference and text options
         this.wysiwygLanguage = this.$opts.wysiwygLanguage;
@@ -43,6 +45,7 @@ export class PageComment extends Component {
         this.editButton = this.$refs.editButton;
         this.deleteButton = this.$refs.deleteButton;
         this.replyButton = this.$refs.replyButton;
+        this.archiveButton = this.$refs.archiveButton;
         this.input = this.$refs.input as HTMLInputElement;
 
         this.setupListeners();
@@ -65,6 +68,10 @@ export class PageComment extends Component {
         if (this.deleteButton) {
             this.deleteButton.addEventListener('click', this.delete.bind(this));
         }
+
+        if (this.archiveButton) {
+            this.archiveButton.addEventListener('click', this.archive.bind(this));
+        }
     }
 
     protected toggleEditMode(show: boolean) : void {
@@ -124,15 +131,31 @@ export class PageComment extends Component {
 
         await window.$http.delete(`/comment/${this.commentId}`);
         this.$emit('delete');
-        this.container.closest('.comment-branch').remove();
+        this.container.closest('.comment-branch')?.remove();
         window.$events.success(this.deletedText);
     }
 
+    protected async archive(): Promise<void> {
+        this.showLoading();
+        const isArchived = this.archiveButton.dataset.isArchived === 'true';
+        const action = isArchived ? 'unarchive' : 'archive';
+
+        const response = await window.$http.put(`/comment/${this.commentId}/${action}`);
+        window.$events.success(this.archiveText);
+        this.$emit(action, {new_thread_dom: htmlToDom(response.data as string)});
+
+        const branch = this.container.closest('.comment-branch') as HTMLElement;
+        const references = window.$components.allWithinElement<PageCommentReference>(branch, 'page-comment-reference');
+        for (const reference of references) {
+            reference.hideMarker();
+        }
+        branch.remove();
+    }
+
     protected showLoading(): HTMLElement {
         const loading = getLoading();
         loading.classList.add('px-l');
         this.container.append(loading);
         return loading;
     }
-
 }