BookStack Code Mirror - bookstack/blob - 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
  27 function data() {
  28     let comment = {
  29         text: ''
  30     };
  31
  32     if (this.isReply) {
  33         comment.page_id = this.commentObj.page_id;
  34         comment.id = this.commentObj.id;
  35     } else if (this.isEdit) {
  36         comment = this.commentObj;
  37     }
  38
  39     return {
  40         comment: comment,
  41         trans: trans
  42     };
  43 }
  44
  45 const methods = {
  46     saveComment: function (event) {
  47         let pageId = this.comment.page_id || this.pageId;
  48         let commentText = this.comment.text;
  49         if (!commentText) {
  50             return this.$events.emit('error', trans('errors.empty_comment'))
  51         }
  52         let commentHTML = md.render(commentText);
  53         let serviceUrl = `/ajax/page/${pageId}/comment/`;
  54         let httpMethod = 'post';
  55         let reqObj = {
  56             text: commentText,
  57             html: commentHTML
  58         };
  59
  60         if (this.isEdit === true) {
  61             // this will be set when editing the comment.
  62             serviceUrl = `/ajax/page/${pageId}/comment/${this.comment.id}`;
  63             httpMethod = 'put';
  64         } else if (this.isReply === true) {
  65             // if its reply, get the parent comment id
  66             reqObj.parent_id = this.comment.id;
  67         }
  68         $http[httpMethod](window.baseUrl(serviceUrl), reqObj).then(resp => {
  69             if (!isCommentOpSuccess(resp)) {
  70                 this.$events.emit('error', getErrorMsg(resp));
  71                 return;
  72             }
  73             // hide the comments first, and then retrigger the refresh
  74             if (this.isEdit) {
  75                 this.$emit('comment-edited', event, resp.data.comment);
  76             } else {
  77                 this.comment.text = '';
  78                 this.$emit('comment-added', event);
  79                 if (this.isReply === true) {
  80                     this.$emit('comment-replied', event, resp.data.comment);
  81                 } else {
  82                     this.$parent.$emit('new-comment', event, resp.data.comment);
  83                 }
  84             }
  85             this.$events.emit('success', resp.data.message);
  86         }).catch(err => {
  87             this.$events.emit('error', trans('errors.comment_add'))
  88         });
  89     },
  90     closeBox: function (event) {
  91         this.$emit('editor-removed', event);
  92     }
  93 };
  94
  95 const computed = {};
  96
  97 function isCommentOpSuccess(resp) {
  98     if (resp && resp.data && resp.data.status === 'success') {
  99         return true;
 100     }
 101     return false;
 102 }
 103
 104 function getErrorMsg(response) {
 105     if (response.data) {
 106         return response.data.message;
 107     } else {
 108         return trans('errors.comment_add');
 109     }
 110 }
 111
 112 module.exports = { name: 'comment-reply', template, data, props, methods, computed };
 113