Customization: Added parent tag classes

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

diff --git a/resources/js/components/page-comment.ts b/resources/js/components/page-comment.ts
index 11ad769b1d04040d7a9bae6a19984326dba777e1..a0bb7a55bf8985c3c54cf8358e7dc4e3b67f6dd9 100644 (file)
--- a/resources/js/components/page-comment.ts
+++ b/resources/js/components/page-comment.ts
@@ -1,26 +1,39 @@
 import {Component} from './component';
 import {Component} from './component';

-import {getLoading, htmlToDom} from '../services/dom.ts';
+import {getLoading, htmlToDom} from '../services/dom';

 import {buildForInput} from '../wysiwyg-tinymce/config';
 import {buildForInput} from '../wysiwyg-tinymce/config';

+import {PageCommentReference} from "./page-comment-reference";
+import {HttpError} from "../services/http";
+
+export interface PageCommentReplyEventData {
+    id: string; // ID of comment being replied to
+    element: HTMLElement; // Container for comment replied to
+}
+
+export interface PageCommentArchiveEventData {
+    new_thread_dom: HTMLElement;
+}

 
 export class PageComment extends Component {
 
 
 export class PageComment extends Component {
 

-    protected commentId: string;
-    protected commentLocalId: string;
-    protected deletedText: string;
-    protected updatedText: string;
+    protected commentId!: string;
+    protected commentLocalId!: string;
+    protected deletedText!: string;
+    protected updatedText!: string;
+    protected archiveText!: string;

 
     protected wysiwygEditor: any = null;
 
     protected wysiwygEditor: any = null;

-    protected wysiwygLanguage: string;
-    protected wysiwygTextDirection: string;
-
-    protected container: HTMLElement;
-    protected contentContainer: HTMLElement;
-    protected form: HTMLFormElement;
-    protected formCancel: HTMLElement;
-    protected editButton: HTMLElement;
-    protected deleteButton: HTMLElement;
-    protected replyButton: HTMLElement;
-    protected input: HTMLInputElement;
+    protected wysiwygLanguage!: string;
+    protected wysiwygTextDirection!: string;
+
+    protected container!: HTMLElement;
+    protected contentContainer!: HTMLElement;
+    protected form!: HTMLFormElement;
+    protected formCancel!: HTMLElement;
+    protected editButton!: HTMLElement;
+    protected deleteButton!: HTMLElement;
+    protected replyButton!: HTMLElement;
+    protected archiveButton!: HTMLElement;
+    protected input!: HTMLInputElement;

 
     setup() {
         // Options
 
     setup() {
         // Options


@@ -28,6 +41,7 @@ export class PageComment extends Component {
         this.commentLocalId = this.$opts.commentLocalId;
         this.deletedText = this.$opts.deletedText;
         this.updatedText = this.$opts.updatedText;
         this.commentLocalId = this.$opts.commentLocalId;
         this.deletedText = this.$opts.deletedText;
         this.updatedText = this.$opts.updatedText;

+        this.archiveText = this.$opts.archiveText;

 
         // Editor reference and text options
         this.wysiwygLanguage = this.$opts.wysiwygLanguage;
 
         // Editor reference and text options
         this.wysiwygLanguage = this.$opts.wysiwygLanguage;


@@ -41,6 +55,7 @@ export class PageComment extends Component {
         this.editButton = this.$refs.editButton;
         this.deleteButton = this.$refs.deleteButton;
         this.replyButton = this.$refs.replyButton;
         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();
         this.input = this.$refs.input as HTMLInputElement;
 
         this.setupListeners();


@@ -48,10 +63,11 @@ export class PageComment extends Component {
 
     protected setupListeners(): void {
         if (this.replyButton) {
 
     protected setupListeners(): void {
         if (this.replyButton) {

-            this.replyButton.addEventListener('click', () => this.$emit('reply', {
+            const data: PageCommentReplyEventData = {

                 id: this.commentLocalId,
                 element: this.container,
                 id: this.commentLocalId,
                 element: this.container,

-            }));
+            };
+            this.replyButton.addEventListener('click', () => this.$emit('reply', data));

         }
 
         if (this.editButton) {
         }
 
         if (this.editButton) {


@@ -63,6 +79,10 @@ export class PageComment extends Component {
         if (this.deleteButton) {
             this.deleteButton.addEventListener('click', this.delete.bind(this));
         }
         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 {
     }
 
     protected toggleEditMode(show: boolean) : void {


@@ -86,10 +106,10 @@ export class PageComment extends Component {
             drawioUrl: '',
             pageId: 0,
             translations: {},
             drawioUrl: '',
             pageId: 0,
             translations: {},

-            translationMap: (window as Record<string, Object>).editor_translations,
+            translationMap: (window as unknown as Record<string, Object>).editor_translations,

         });
 
         });
 

-        (window as {tinymce: {init: (Object) => Promise<any>}}).tinymce.init(config).then(editors => {
+        (window as unknown as {tinymce: {init: (arg0: Object) => Promise<any>}}).tinymce.init(config).then(editors => {

             this.wysiwygEditor = editors[0];
             setTimeout(() => this.wysiwygEditor.focus(), 50);
         });
             this.wysiwygEditor = editors[0];
             setTimeout(() => this.wysiwygEditor.focus(), 50);
         });


@@ -111,7 +131,9 @@ export class PageComment extends Component {
             window.$events.success(this.updatedText);
         } catch (err) {
             console.error(err);
             window.$events.success(this.updatedText);
         } catch (err) {
             console.error(err);

-            window.$events.showValidationErrors(err);
+            if (err instanceof HttpError) {
+                window.$events.showValidationErrors(err);
+            }

             this.form.toggleAttribute('hidden', false);
             loading.remove();
         }
             this.form.toggleAttribute('hidden', false);
             loading.remove();
         }


@@ -122,10 +144,37 @@ export class PageComment extends Component {
 
         await window.$http.delete(`/comment/${this.commentId}`);
         this.$emit('delete');
 
         await window.$http.delete(`/comment/${this.commentId}`);
         this.$emit('delete');

-        this.container.closest('.comment-branch')?.remove();
+
+        const branch = this.container.closest('.comment-branch');
+        if (branch instanceof HTMLElement) {
+            const refs = window.$components.allWithinElement<PageCommentReference>(branch, 'page-comment-reference');
+            for (const ref of refs) {
+                ref.hideMarker();
+            }
+            branch.remove();
+        }
+

         window.$events.success(this.deletedText);
     }
 
         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);
+        const eventData: PageCommentArchiveEventData = {new_thread_dom: htmlToDom(response.data as string)};
+        this.$emit(action, eventData);
+
+        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');
     protected showLoading(): HTMLElement {
         const loading = getLoading();
         loading.classList.add('px-l');