Fixed formatting and added error messages.

resources/assets/js/vues/components/comments/comment-reply.js

@@ -21,28 +21,24 @@ const props = {
     }, isEdit: {
         default: false,
         type: Boolean
-  }};
+    }
+};
 
 function data() {
-  var comment = null;
-  // initialize comment if not passed.
-  if (!this.commentObj || this.isReply) {
-    comment = {
+    let comment = {
         text: ''
     };
 
     if (this.isReply) {
         comment.page_id = this.commentObj.page_id;
         comment.id = this.commentObj.id;
-    }
-  } else {
+    } else if (this.isEdit) {
         comment = this.commentObj;
     }
 
     return {
-    trans: trans,
-    parentId: null,
-    comment: comment
+        comment: comment,
+        trans: trans
     };
 }
 
@@ -51,7 +47,7 @@ const methods = {
         let pageId = this.comment.page_id || this.pageId;
         let commentText = this.comment.text;
         if (!commentText) {
-        return this.$emit('evt.empty-comment');
+            return this.$events.emit('error', trans('errors.empty_comment'))
         }
         let commentHTML = md.render(commentText);
         let serviceUrl = `/ajax/page/${pageId}/comment/`;
@@ -69,9 +65,9 @@ const methods = {
             // if its reply, get the parent comment id
             reqObj.parent_id = this.comment.id;
         }
-
         $http[httpMethod](window.baseUrl(serviceUrl), reqObj).then(resp => {
             if (!isCommentOpSuccess(resp)) {
+                this.$events.emit('error', getErrorMsg(resp));
                 return;
             }
             // hide the comments first, and then retrigger the refresh
@@ -85,10 +81,11 @@ const methods = {
                 } else {
                     this.$parent.$emit('new-comment', event, resp.data.comment);
                 }
-            this.$emit('evt.comment-success', null, true);
             }
-
-    }, checkError);
+            this.$events.emit('success', resp.data.message);
+        }).catch(err => {
+            this.$events.emit('error', trans('errors.comment_add'))
+        });
     },
     closeBox: function (event) {
         this.$emit('editor-removed', event);
@@ -104,20 +101,11 @@ function isCommentOpSuccess(resp) {
     return false;
 }
 
-function checkError(msgKey) {
-  return function(response) {
-    let msg = null;
-    if (isCommentOpSuccess(response)) {
-        // all good
-        return;
-    } else if (response.data) {
-        msg = response.data.message;
+function getErrorMsg(response) {
+    if (response.data) {
+        return response.data.message;
     } else {
-        msg = trans(msgKey);
-    }
-    if (msg) {
-        events.emit('success', msg);
-    }
+        return trans('errors.comment_add');
     }
 }
 

resources/assets/js/vues/components/comments/comment.js

@@ -37,7 +37,7 @@ const template = `
               </li>
           </ul>
       </div>
-      <div v-if="showEditor && level <= 3">
+      <div v-if="showEditor">
         <comment-reply :page-id="comment.page_id" :comment-obj="comment"
           v-on:editor-removed.stop.prevent="hideComment"
           v-on:comment-replied.stop="commentReplied(...arguments)"
@@ -59,8 +59,8 @@ const props = ['initialComment', 'index', 'level', 'permissions', 'currentUserId
 
 function data() {
     return {
-    trans: trans,
         commentHref: null,
+        trans: trans,
         comments: [],
         showEditor: false,
         comment: this.initialComment,
@@ -76,15 +76,13 @@ const methods = {
         }
         this.$http.delete(window.baseUrl(`/ajax/comment/${this.comment.id}`)).then(resp => {
             if (!isCommentOpSuccess(resp)) {
+                this.$events.emit('error', trans('error.comment_delete'));
                 return;
             }
-      updateComment(this.comment, resp.data, true);
-    }, function (resp) {
-      if (isCommentOpSuccess(resp)) {
             this.$events.emit('success', trans('entities.comment_deleted'));
-      } else {
+            this.comment = resp.data.comment;
+        }).catch(err => {
             this.$events.emit('error', trans('error.comment_delete'));
-      }
         });
     },
     replyComment: function () {
@@ -170,21 +168,10 @@ function isCommentOpSuccess(resp) {
     return false;
 }
 
-function updateComment(comment, resp, isDelete) {
-  comment.text = resp.comment.text;
-  comment.updated = resp.comment.updated;
-  comment.updated_by = resp.comment.updated_by;
-  comment.active = resp.comment.active;
-  if (isDelete && !resp.comment.active) {
-      comment.html = trans('entities.comment_deleted');
-  } else {
-      comment.html = resp.comment.html;
-  }
-}
-
 module.exports = {
     name: 'comment',
     template, data, props, methods, computed, mounted, components: {
         commentReply
-}};
+    }
+};
 

resources/assets/js/vues/page-comments.js

@@ -50,6 +50,7 @@ function mounted() {
         if (!isCommentOpSuccess(resp)) {
             // just show that no comments are available.
             vm.totalComments = 0;
+            this.$events.emit('error', getErrorMsg(resp));
             return;
         }
         this.comments = resp.data.comments;
@@ -59,11 +60,10 @@ function mounted() {
         if (!linkedCommentId) {
             return;
         }
-    $timeout(function() {
-        // wait for the UI to render.
         focusLinkedComment(linkedCommentId);
+    }).catch(err => {
+        this.$events.emit('error', 'errors.comment_list');
     });
-  }, checkError('errors.comment_list'));
 }
 
 function isCommentOpSuccess(resp) {
@@ -73,20 +73,11 @@ function isCommentOpSuccess(resp) {
     return false;
 }
 
-function checkError(msgKey) {
-  return function(response) {
-    let msg = null;
-    if (isCommentOpSuccess(response)) {
-        // all good
-        return;
-    } else if (response.data) {
-        msg = response.data.message;
+function getErrorMsg(response) {
+    if (response.data) {
+        return response.data.message;
     } else {
-        msg = trans(msgKey);
-    }
-    if (msg) {
-        events.emit('success', msg);
-    }
+        return trans('errors.comment_add');
     }
 }
 

resources/lang/en/errors.php

@@ -63,7 +63,7 @@ return [
     // Comments
     'comment_list' => 'An error occurred while fetching the comments.',
     'cannot_add_comment_to_draft' => 'You cannot add comments to a draft.',
-    'comment_add' => 'An error occurred while adding the comment.',
+    'comment_add' => 'An error occurred while adding / updating the comment.',
     'comment_delete' => 'An error occurred while deleting the comment.',
     'empty_comment' => 'Cannot add an empty comment.',