const MarkdownIt = require("markdown-it");
-const md = new MarkdownIt({html: true});
+const md = new MarkdownIt({ html: true });
var template = `
<div class="comment-editor" v-cloak>
`;
const props = {
- pageId: {},
- commentObj: {},
- isReply: {
- default: false,
- type: Boolean
- }, isEdit: {
- default: false,
- type: Boolean
- }};
+ pageId: {},
+ commentObj: {},
+ isReply: {
+ default: false,
+ type: Boolean
+ }, isEdit: {
+ default: false,
+ type: Boolean
+ }
+};
-function data () {
- var comment = null;
- // initialize comment if not passed.
- if (!this.commentObj || this.isReply) {
- comment = {
- text: ''
+function data() {
+ let comment = {
+ text: ''
};
if (this.isReply) {
- comment.page_id = this.commentObj.page_id;
- comment.id = this.commentObj.id;
+ comment.page_id = this.commentObj.page_id;
+ comment.id = this.commentObj.id;
+ } else if (this.isEdit) {
+ comment = this.commentObj;
}
- } else {
- comment = this.commentObj;
- }
- return {
- trans: trans,
- parentId: null,
- comment: comment
- };
+ return {
+ comment: comment,
+ trans: trans
+ };
}
const methods = {
- saveComment: function (event) {
- let pageId = this.comment.page_id || this.pageId;
- let commentText = this.comment.text;
- if (!commentText) {
- return this.$emit('evt.empty-comment');
- }
- let commentHTML = md.render(commentText);
- let serviceUrl = `/ajax/page/${pageId}/comment/`;
- let httpMethod = 'post';
- let reqObj = {
- text: commentText,
- html: commentHTML
- };
-
- if (this.isEdit === true) {
- // this will be set when editing the comment.
- serviceUrl = `/ajax/page/${pageId}/comment/${this.comment.id}`;
- httpMethod = 'put';
- } else if (this.isReply === true) {
- // if its reply, get the parent comment id
- reqObj.parent_id = this.comment.id;
- }
+ saveComment: function (event) {
+ let pageId = this.comment.page_id || this.pageId;
+ let commentText = this.comment.text;
+ if (!commentText) {
+ return this.$events.emit('error', trans('errors.empty_comment'))
+ }
+ let commentHTML = md.render(commentText);
+ let serviceUrl = `/ajax/page/${pageId}/comment/`;
+ let httpMethod = 'post';
+ let reqObj = {
+ text: commentText,
+ html: commentHTML
+ };
- $http[httpMethod](window.baseUrl(serviceUrl), reqObj).then(resp => {
- if (!isCommentOpSuccess(resp)) {
- return;
+ if (this.isEdit === true) {
+ // this will be set when editing the comment.
+ serviceUrl = `/ajax/page/${pageId}/comment/${this.comment.id}`;
+ httpMethod = 'put';
+ } else if (this.isReply === true) {
+ // if its reply, get the parent comment id
+ reqObj.parent_id = this.comment.id;
}
- // hide the comments first, and then retrigger the refresh
- if (this.isEdit) {
- this.$emit('comment-edited', event, resp.data.comment);
- } else {
- this.comment.text = '';
- this.$emit('comment-added', event);
- if (this.isReply === true) {
- this.$emit('comment-replied', event, resp.data.comment);
+ $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
+ if (this.isEdit) {
+ this.$emit('comment-edited', event, resp.data.comment);
} else {
- this.$parent.$emit('new-comment', event, resp.data.comment);
+ this.comment.text = '';
+ this.$emit('comment-added', event);
+ if (this.isReply === true) {
+ this.$emit('comment-replied', event, resp.data.comment);
+ } else {
+ this.$parent.$emit('new-comment', event, resp.data.comment);
+ }
}
- this.$emit('evt.comment-success', null, true);
- }
-
- }, checkError);
- },
- closeBox: function (event) {
- this.$emit('editor-removed', event);
- }
+ 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);
+ }
};
const computed = {};
function isCommentOpSuccess(resp) {
- if (resp && resp.data && resp.data.status === 'success') {
- return true;
- }
- return false;
+ if (resp && resp.data && resp.data.status === 'success') {
+ return true;
+ }
+ 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');
}
- }
}
-module.exports = {name: 'comment-reply', template, data, props, methods, computed};
+module.exports = { name: 'comment-reply', template, data, props, methods, computed };
</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)"
const props = ['initialComment', 'index', 'level', 'permissions', 'currentUserId'];
-function data () {
- return {
- trans: trans,
- commentHref: null,
- comments: [],
- showEditor: false,
- comment: this.initialComment,
- nextLevel: this.level + 1
- };
+function data() {
+ return {
+ commentHref: null,
+ trans: trans,
+ comments: [],
+ showEditor: false,
+ comment: this.initialComment,
+ nextLevel: this.level + 1
+ };
}
const methods = {
- deleteComment: function () {
- var resp = window.confirm(trans('entities.comment_delete_confirm'));
- if (!resp) {
- return;
- }
- this.$http.delete(window.baseUrl(`/ajax/comment/${this.comment.id}`)).then(resp => {
- if (!isCommentOpSuccess(resp)) {
- return;
- }
- updateComment(this.comment, resp.data, true);
- }, function (resp) {
- if (isCommentOpSuccess(resp)) {
- this.$events.emit('success', trans('entities.comment_deleted'));
- } else {
- this.$events.emit('error', trans('error.comment_delete'));
- }
- });
- },
- replyComment: function () {
- this.toggleEditor(false);
- },
- editComment: function () {
- this.toggleEditor(true);
- },
- hideComment: function () {
- this.showEditor = false;
- },
- toggleEditor: function (isEdit) {
- this.showEditor = false;
- this.isEdit = isEdit;
- this.isReply = !isEdit;
- this.showEditor = true;
- },
- commentReplied: function (event, comment) {
- this.comments.push(comment);
- this.showEditor = false;
- },
- commentEdited: function (event, comment) {
- this.comment = comment;
- this.showEditor = false;
- },
- commentAdded: function (event, comment) {
- // this is to handle non-parent child relationship
- // we want to make it go up.
- this.$emit('comment-added', event);
- },
- canEditOrDelete: function (prop) {
- if (!this.comment.active) {
- return false;
- }
+ deleteComment: function () {
+ var resp = window.confirm(trans('entities.comment_delete_confirm'));
+ if (!resp) {
+ return;
+ }
+ this.$http.delete(window.baseUrl(`/ajax/comment/${this.comment.id}`)).then(resp => {
+ if (!isCommentOpSuccess(resp)) {
+ this.$events.emit('error', trans('error.comment_delete'));
+ return;
+ }
+ this.$events.emit('success', trans('entities.comment_deleted'));
+ this.comment = resp.data.comment;
+ }).catch(err => {
+ this.$events.emit('error', trans('error.comment_delete'));
+ });
+ },
+ replyComment: function () {
+ this.toggleEditor(false);
+ },
+ editComment: function () {
+ this.toggleEditor(true);
+ },
+ hideComment: function () {
+ this.showEditor = false;
+ },
+ toggleEditor: function (isEdit) {
+ this.showEditor = false;
+ this.isEdit = isEdit;
+ this.isReply = !isEdit;
+ this.showEditor = true;
+ },
+ commentReplied: function (event, comment) {
+ this.comments.push(comment);
+ this.showEditor = false;
+ },
+ commentEdited: function (event, comment) {
+ this.comment = comment;
+ this.showEditor = false;
+ },
+ commentAdded: function (event, comment) {
+ // this is to handle non-parent child relationship
+ // we want to make it go up.
+ this.$emit('comment-added', event);
+ },
+ canEditOrDelete: function (prop) {
+ if (!this.comment.active) {
+ return false;
+ }
- if (!this.permissions) {
- return false;
- }
+ if (!this.permissions) {
+ return false;
+ }
- let propAll = 'comment_' + prop + '_all';
- let propOwn = 'comment_' + prop + '_own';
+ let propAll = 'comment_' + prop + '_all';
+ let propOwn = 'comment_' + prop + '_own';
- if (this.permissions[propAll]) {
- return true;
- }
+ if (this.permissions[propAll]) {
+ return true;
+ }
- if (this.permissions[propOwn] && this.comment.created_by.id === this.currentUserId) {
- return true;
- }
+ if (this.permissions[propOwn] && this.comment.created_by.id === this.currentUserId) {
+ return true;
+ }
- return false;
- },
- canComment: function () {
- if (!this.permissions) {
- return false;
+ return false;
+ },
+ canComment: function () {
+ if (!this.permissions) {
+ return false;
+ }
+ return this.permissions.comment_create === true;
}
- return this.permissions.comment_create === true;
- }
};
const computed = {
- commentId: {
- get: function () {
- return `comment-${this.comment.page_id}-${this.comment.id}`;
- },
- set: function () {
- this.commentHref = `#?cm=${this.commentId}`
+ commentId: {
+ get: function () {
+ return `comment-${this.comment.page_id}-${this.comment.id}`;
+ },
+ set: function () {
+ this.commentHref = `#?cm=${this.commentId}`
+ }
}
- }
};
-function mounted () {
- if (this.comment.sub_comments && this.comment.sub_comments.length) {
- // set this so that we can render the next set of sub comments.
- this.comments = this.comment.sub_comments;
- }
+function mounted() {
+ if (this.comment.sub_comments && this.comment.sub_comments.length) {
+ // set this so that we can render the next set of sub comments.
+ this.comments = this.comment.sub_comments;
+ }
}
function isCommentOpSuccess(resp) {
- if (resp && resp.data && resp.data.status === 'success') {
- return true;
- }
- 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;
- }
+ if (resp && resp.data && resp.data.status === 'success') {
+ return true;
+ }
+ return false;
}
module.exports = {
- name: 'comment',
- template, data, props, methods, computed, mounted, components: {
- commentReply
-}};
+ name: 'comment',
+ template, data, props, methods, computed, mounted, components: {
+ commentReply
+ }
+};
const commentReply = require('./components/comments/comment-reply');
let data = {
- totalCommentsStr: trans('entities.comments_loading'),
- comments: [],
- permissions: null,
- currentUserId: null,
- trans: trans,
- commentCount: 0
+ totalCommentsStr: trans('entities.comments_loading'),
+ comments: [],
+ permissions: null,
+ currentUserId: null,
+ trans: trans,
+ commentCount: 0
};
let methods = {
- commentAdded: function () {
- ++this.totalComments;
- }
+ commentAdded: function () {
+ ++this.totalComments;
+ }
}
let computed = {
- totalComments: {
- get: function () {
- return this.commentCount;
+ totalComments: {
+ get: function () {
+ return this.commentCount;
+ },
+ set: function (value) {
+ this.commentCount = value;
+ if (value === 0) {
+ this.totalCommentsStr = trans('entities.no_comments');
+ } else if (value === 1) {
+ this.totalCommentsStr = trans('entities.one_comment');
+ } else {
+ this.totalCommentsStr = trans('entities.x_comments', {
+ numComments: value
+ });
+ }
+ }
},
- set: function (value) {
- this.commentCount = value;
- if (value === 0) {
- this.totalCommentsStr = trans('entities.no_comments');
- } else if (value === 1) {
- this.totalCommentsStr = trans('entities.one_comment');
- } else {
- this.totalCommentsStr = trans('entities.x_comments', {
- numComments: value
- });
- }
- }
- },
- canComment: function () {
- if (!this.permissions) {
- return false;
+ canComment: function () {
+ if (!this.permissions) {
+ return false;
+ }
+ return this.permissions.comment_create === true;
}
- return this.permissions.comment_create === true;
- }
}
function mounted() {
- this.pageId = Number(this.$el.getAttribute('page-id'));
- // let linkedCommentId = this.$route.query.cm;
- let linkedCommentId = null;
- this.$http.get(window.baseUrl(`/ajax/page/${this.pageId}/comments/`)).then(resp => {
- if (!isCommentOpSuccess(resp)) {
- // just show that no comments are available.
- vm.totalComments = 0;
- return;
- }
- this.comments = resp.data.comments;
- this.totalComments = +resp.data.total;
- this.permissions = resp.data.permissions;
- this.currentUserId = resp.data.user_id;
- if (!linkedCommentId) {
- return;
- }
- $timeout(function() {
- // wait for the UI to render.
+ this.pageId = Number(this.$el.getAttribute('page-id'));
+ // let linkedCommentId = this.$route.query.cm;
+ let linkedCommentId = null;
+ this.$http.get(window.baseUrl(`/ajax/page/${this.pageId}/comments/`)).then(resp => {
+ 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;
+ this.totalComments = +resp.data.total;
+ this.permissions = resp.data.permissions;
+ this.currentUserId = resp.data.user_id;
+ if (!linkedCommentId) {
+ return;
+ }
focusLinkedComment(linkedCommentId);
+ }).catch(err => {
+ this.$events.emit('error', 'errors.comment_list');
});
- }, checkError('errors.comment_list'));
}
function isCommentOpSuccess(resp) {
- if (resp && resp.data && resp.data.status === 'success') {
- return true;
- }
- return false;
+ if (resp && resp.data && resp.data.status === 'success') {
+ return true;
+ }
+ 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');
}
- }
}
-function created () {
- this.$on('new-comment', function (event, comment) {
- this.comments.push(comment);
- })
+function created() {
+ this.$on('new-comment', function (event, comment) {
+ this.comments.push(comment);
+ })
}
function beforeDestroy() {
- this.$off('new-comment');
+ this.$off('new-comment');
}
module.exports = {
- data, methods, mounted, computed, components : {
- comment, commentReply
- },
- created, beforeDestroy
+ data, methods, mounted, computed, components: {
+ comment, commentReply
+ },
+ created, beforeDestroy
};
\ No newline at end of file
// 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.',
projects / bookstack / commitdiff