]> BookStack Code Mirror - bookstack/blob - resources/js/components/page-comment.js
Comments: updated component and split out code
[bookstack] / resources / js / components / page-comment.js
1 import {Component} from './component';
2 import {getLoading, htmlToDom} from '../services/dom';
3
4 export class PageComment extends Component {
5
6     setup() {
7         // Options
8         this.commentId = this.$opts.commentId;
9         this.commentLocalId = this.$opts.commentLocalId;
10         this.commentParentId = this.$opts.commentParentId;
11         this.deletedText = this.$opts.deletedText;
12         this.updatedText = this.$opts.updatedText;
13
14         // Element References
15         this.container = this.$el;
16         this.contentContainer = this.$refs.contentContainer;
17         this.form = this.$refs.form;
18         this.formCancel = this.$refs.formCancel;
19         this.editButton = this.$refs.editButton;
20         this.deleteButton = this.$refs.deleteButton;
21         this.replyButton = this.$refs.replyButton;
22         this.input = this.$refs.input;
23
24         this.setupListeners();
25     }
26
27     setupListeners() {
28         this.replyButton.addEventListener('click', () => this.$emit('reply', {id: this.commentLocalId}));
29         this.editButton.addEventListener('click', this.startEdit.bind(this));
30         this.deleteButton.addEventListener('click', this.delete.bind(this));
31         this.form.addEventListener('submit', this.update.bind(this));
32         this.formCancel.addEventListener('click', () => this.toggleEditMode(false));
33     }
34
35     toggleEditMode(show) {
36         this.contentContainer.toggleAttribute('hidden', show);
37         this.form.toggleAttribute('hidden', !show);
38     }
39
40     startEdit() {
41         this.toggleEditMode(true);
42         const lineCount = this.$refs.input.value.split('\n').length;
43         this.$refs.input.style.height = `${(lineCount * 20) + 40}px`;
44     }
45
46     async update(event) {
47         event.preventDefault();
48         const loading = this.showLoading();
49         this.form.toggleAttribute('hidden', true);
50
51         const reqData = {
52             text: this.input.value,
53             parent_id: this.parentId || null,
54         };
55
56         try {
57             const resp = await window.$http.put(`/comment/${this.commentId}`, reqData);
58             const newComment = htmlToDom(resp.data);
59             this.container.replaceWith(newComment);
60             window.$events.success(this.updatedText);
61         } catch (err) {
62             console.error(err);
63             window.$events.showValidationErrors(err);
64             this.form.toggleAttribute('hidden', false);
65             loading.remove();
66         }
67     }
68
69     async delete() {
70         this.showLoading();
71
72         await window.$http.delete(`/comment/${this.commentId}`);
73         this.container.closest('.comment-branch').remove();
74         window.$events.success(this.deletedText);
75         this.$emit('delete');
76     }
77
78     showLoading() {
79         const loading = getLoading();
80         loading.classList.add('px-l');
81         this.container.append(loading);
82         return loading;
83     }
84
85 }