]> BookStack Code Mirror - bookstack/blob - resources/assets/js/vues/components/comments/comment-reply.js
Refactored Angular code to instead use VueJS, left with permissions, testing and...
[bookstack] / resources / assets / js / vues / components / comments / comment-reply.js
1 const MarkdownIt = require("markdown-it");
2 const md = new MarkdownIt({html: true});
3
4 var template = `
5 <div class="comment-editor" v-cloak>
6 <form novalidate>
7     <textarea name="markdown" rows="3" v-model="comment.text" :placeholder="trans('entities.comment_placeholder')"></textarea>
8     <input type="hidden" v-model="comment.pageId" name="comment.pageId" :value="pageId">
9     <button type="button" v-if="isReply || isEdit" class="button muted" v-on:click="closeBox">{{ trans('entities.comment_cancel') }}</button>
10     <button type="submit" class="button pos" v-on:click.prevent="saveComment">{{ trans('entities.comment_save') }}</button>
11 </form>
12 </div>
13 `;
14
15 const props = {
16   pageId: {},
17   commentObj: {},
18   isReply: {
19     default: false,
20     type: Boolean
21   }, isEdit: {
22     default: false,
23     type: Boolean
24   }};
25
26 function data () {
27   var comment = null;
28   // initialize comment if not passed.
29   if (!this.commentObj || this.isReply) {
30     comment = {
31       text: ''
32     };
33
34     if (this.isReply) {
35       comment.page_id = this.commentObj.page_id;
36       comment.id = this.commentObj.id;
37     }
38   } else {
39     comment = this.commentObj;
40   }
41
42   return {
43     trans: trans,
44     parentId: null,
45     comment: comment
46   };
47 }
48
49 const methods = {
50   saveComment: function (event) {
51     let pageId = this.comment.page_id || this.pageId;
52     let commentText = this.comment.text;
53     if (!commentText) {
54         return this.$emit('evt.empty-comment');
55     }
56     let commentHTML = md.render(commentText);
57     let serviceUrl = `/ajax/page/${pageId}/comment/`;
58     let httpMethod = 'post';
59     let reqObj = {
60         text: commentText,
61         html: commentHTML
62     };
63
64     if (this.isEdit === true) {
65         // this will be set when editing the comment.
66         serviceUrl = `/ajax/page/${pageId}/comment/${this.comment.id}`;
67         httpMethod = 'put';
68     } else if (this.isReply === true) {
69         // if its reply, get the parent comment id
70         reqObj.parent_id = this.comment.id;
71     }
72
73     $http[httpMethod](window.baseUrl(serviceUrl), reqObj).then(resp => {
74         if (!isCommentOpSuccess(resp)) {
75              return;
76         }
77         // hide the comments first, and then retrigger the refresh
78         if (this.isEdit) {
79             this.$emit('comment-edited', event, resp.data.comment);
80         } else {
81             this.comment.text = '';
82             this.$emit('comment-added', event);
83             if (this.isReply === true) {
84               this.$emit('comment-replied', event, resp.data.comment);
85             } else {
86               this.$parent.$emit('new-comment', event, resp.data.comment);
87             }
88             this.$emit('evt.comment-success', null, true);
89         }
90
91     }, checkError);
92   },
93   closeBox: function (event) {
94     this.$emit('editor-removed', event);
95   }
96 };
97
98 const computed = {};
99
100 function isCommentOpSuccess(resp) {
101   if (resp && resp.data && resp.data.status === 'success') {
102       return true;
103   }
104   return false;
105 }
106
107 function checkError(msgKey) {
108   return function(response) {
109     let msg = null;
110     if (isCommentOpSuccess(response)) {
111         // all good
112         return;
113     } else if (response.data) {
114         msg = response.data.message;
115     } else {
116         msg = trans(msgKey);
117     }
118     if (msg) {
119         events.emit('success', msg);
120     }
121   }
122 }
123
124 module.exports = {name: 'comment-reply', template, data, props, methods, computed};
125