mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-09-06 01:22:23 +00:00
Fixed formatting and added error messages.
This commit is contained in:
Abijeet
parent
e8fa58f201
commit
ac07cb41b6
@ -1,5 +1,5 @@
|
|||||||
const MarkdownIt = require("markdown-it");
|
const MarkdownIt = require("markdown-it");
|
||||||
const md = new MarkdownIt({html: true});
|
const md = new MarkdownIt({ html: true });
|
||||||
|
|
||||||
var template = `
|
var template = `
|
||||||
<div class="comment-editor" v-cloak>
|
<div class="comment-editor" v-cloak>
|
||||||
@ -13,113 +13,101 @@ var template = `
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
const props = {
|
const props = {
|
||||||
pageId: {},
|
pageId: {},
|
||||||
commentObj: {},
|
commentObj: {},
|
||||||
isReply: {
|
isReply: {
|
||||||
default: false,
|
default: false,
|
||||||
type: Boolean
|
type: Boolean
|
||||||
}, isEdit: {
|
}, isEdit: {
|
||||||
default: false,
|
default: false,
|
||||||
type: Boolean
|
type: Boolean
|
||||||
}};
|
}
|
||||||
|
};
|
||||||
|
|
||||||
function data () {
|
function data() {
|
||||||
var comment = null;
|
let comment = {
|
||||||
// initialize comment if not passed.
|
text: ''
|
||||||
if (!this.commentObj || this.isReply) {
|
|
||||||
comment = {
|
|
||||||
text: ''
|
|
||||||
};
|
};
|
||||||
|
|
||||||
if (this.isReply) {
|
if (this.isReply) {
|
||||||
comment.page_id = this.commentObj.page_id;
|
comment.page_id = this.commentObj.page_id;
|
||||||
comment.id = this.commentObj.id;
|
comment.id = this.commentObj.id;
|
||||||
|
} else if (this.isEdit) {
|
||||||
|
comment = this.commentObj;
|
||||||
}
|
}
|
||||||
} else {
|
|
||||||
comment = this.commentObj;
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
trans: trans,
|
comment: comment,
|
||||||
parentId: null,
|
trans: trans
|
||||||
comment: comment
|
};
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const methods = {
|
const methods = {
|
||||||
saveComment: function (event) {
|
saveComment: function (event) {
|
||||||
let pageId = this.comment.page_id || this.pageId;
|
let pageId = this.comment.page_id || this.pageId;
|
||||||
let commentText = this.comment.text;
|
let commentText = this.comment.text;
|
||||||
if (!commentText) {
|
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/`;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
$http[httpMethod](window.baseUrl(serviceUrl), reqObj).then(resp => {
|
|
||||||
if (!isCommentOpSuccess(resp)) {
|
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
// hide the comments first, and then retrigger the refresh
|
let commentHTML = md.render(commentText);
|
||||||
if (this.isEdit) {
|
let serviceUrl = `/ajax/page/${pageId}/comment/`;
|
||||||
this.$emit('comment-edited', event, resp.data.comment);
|
let httpMethod = 'post';
|
||||||
} else {
|
let reqObj = {
|
||||||
this.comment.text = '';
|
text: commentText,
|
||||||
this.$emit('comment-added', event);
|
html: commentHTML
|
||||||
if (this.isReply === true) {
|
};
|
||||||
this.$emit('comment-replied', event, resp.data.comment);
|
|
||||||
} else {
|
if (this.isEdit === true) {
|
||||||
this.$parent.$emit('new-comment', event, resp.data.comment);
|
// 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;
|
||||||
|
}
|
||||||
|
$http[httpMethod](window.baseUrl(serviceUrl), reqObj).then(resp => {
|
||||||
|
if (!isCommentOpSuccess(resp)) {
|
||||||
|
this.$events.emit('error', getErrorMsg(resp));
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
this.$emit('evt.comment-success', null, true);
|
// hide the comments first, and then retrigger the refresh
|
||||||
}
|
if (this.isEdit) {
|
||||||
|
this.$emit('comment-edited', event, resp.data.comment);
|
||||||
}, checkError);
|
} else {
|
||||||
},
|
this.comment.text = '';
|
||||||
closeBox: function (event) {
|
this.$emit('comment-added', event);
|
||||||
this.$emit('editor-removed', event);
|
if (this.isReply === true) {
|
||||||
}
|
this.$emit('comment-replied', event, resp.data.comment);
|
||||||
|
} else {
|
||||||
|
this.$parent.$emit('new-comment', event, resp.data.comment);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
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 = {};
|
const computed = {};
|
||||||
|
|
||||||
function isCommentOpSuccess(resp) {
|
function isCommentOpSuccess(resp) {
|
||||||
if (resp && resp.data && resp.data.status === 'success') {
|
if (resp && resp.data && resp.data.status === 'success') {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
function checkError(msgKey) {
|
function getErrorMsg(response) {
|
||||||
return function(response) {
|
if (response.data) {
|
||||||
let msg = null;
|
return response.data.message;
|
||||||
if (isCommentOpSuccess(response)) {
|
|
||||||
// all good
|
|
||||||
return;
|
|
||||||
} else if (response.data) {
|
|
||||||
msg = response.data.message;
|
|
||||||
} else {
|
} else {
|
||||||
msg = trans(msgKey);
|
return trans('errors.comment_add');
|
||||||
}
|
}
|
||||||
if (msg) {
|
|
||||||
events.emit('success', msg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
module.exports = {name: 'comment-reply', template, data, props, methods, computed};
|
module.exports = { name: 'comment-reply', template, data, props, methods, computed };
|
||||||
|
|
||||||
|
|||||||
@ -37,7 +37,7 @@ const template = `
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="showEditor && level <= 3">
|
<div v-if="showEditor">
|
||||||
<comment-reply :page-id="comment.page_id" :comment-obj="comment"
|
<comment-reply :page-id="comment.page_id" :comment-obj="comment"
|
||||||
v-on:editor-removed.stop.prevent="hideComment"
|
v-on:editor-removed.stop.prevent="hideComment"
|
||||||
v-on:comment-replied.stop="commentReplied(...arguments)"
|
v-on:comment-replied.stop="commentReplied(...arguments)"
|
||||||
@ -57,134 +57,121 @@ const template = `
|
|||||||
|
|
||||||
const props = ['initialComment', 'index', 'level', 'permissions', 'currentUserId'];
|
const props = ['initialComment', 'index', 'level', 'permissions', 'currentUserId'];
|
||||||
|
|
||||||
function data () {
|
function data() {
|
||||||
return {
|
return {
|
||||||
trans: trans,
|
commentHref: null,
|
||||||
commentHref: null,
|
trans: trans,
|
||||||
comments: [],
|
comments: [],
|
||||||
showEditor: false,
|
showEditor: false,
|
||||||
comment: this.initialComment,
|
comment: this.initialComment,
|
||||||
nextLevel: this.level + 1
|
nextLevel: this.level + 1
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
const methods = {
|
const methods = {
|
||||||
deleteComment: function () {
|
deleteComment: function () {
|
||||||
var resp = window.confirm(trans('entities.comment_delete_confirm'));
|
var resp = window.confirm(trans('entities.comment_delete_confirm'));
|
||||||
if (!resp) {
|
if (!resp) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this.$http.delete(window.baseUrl(`/ajax/comment/${this.comment.id}`)).then(resp => {
|
this.$http.delete(window.baseUrl(`/ajax/comment/${this.comment.id}`)).then(resp => {
|
||||||
if (!isCommentOpSuccess(resp)) {
|
if (!isCommentOpSuccess(resp)) {
|
||||||
return;
|
this.$events.emit('error', trans('error.comment_delete'));
|
||||||
}
|
return;
|
||||||
updateComment(this.comment, resp.data, true);
|
}
|
||||||
}, function (resp) {
|
this.$events.emit('success', trans('entities.comment_deleted'));
|
||||||
if (isCommentOpSuccess(resp)) {
|
this.comment = resp.data.comment;
|
||||||
this.$events.emit('success', trans('entities.comment_deleted'));
|
}).catch(err => {
|
||||||
} else {
|
this.$events.emit('error', trans('error.comment_delete'));
|
||||||
this.$events.emit('error', trans('error.comment_delete'));
|
});
|
||||||
}
|
},
|
||||||
});
|
replyComment: function () {
|
||||||
},
|
this.toggleEditor(false);
|
||||||
replyComment: function () {
|
},
|
||||||
this.toggleEditor(false);
|
editComment: function () {
|
||||||
},
|
this.toggleEditor(true);
|
||||||
editComment: function () {
|
},
|
||||||
this.toggleEditor(true);
|
hideComment: function () {
|
||||||
},
|
this.showEditor = false;
|
||||||
hideComment: function () {
|
},
|
||||||
this.showEditor = false;
|
toggleEditor: function (isEdit) {
|
||||||
},
|
this.showEditor = false;
|
||||||
toggleEditor: function (isEdit) {
|
this.isEdit = isEdit;
|
||||||
this.showEditor = false;
|
this.isReply = !isEdit;
|
||||||
this.isEdit = isEdit;
|
this.showEditor = true;
|
||||||
this.isReply = !isEdit;
|
},
|
||||||
this.showEditor = true;
|
commentReplied: function (event, comment) {
|
||||||
},
|
this.comments.push(comment);
|
||||||
commentReplied: function (event, comment) {
|
this.showEditor = false;
|
||||||
this.comments.push(comment);
|
},
|
||||||
this.showEditor = false;
|
commentEdited: function (event, comment) {
|
||||||
},
|
this.comment = comment;
|
||||||
commentEdited: function (event, comment) {
|
this.showEditor = false;
|
||||||
this.comment = comment;
|
},
|
||||||
this.showEditor = false;
|
commentAdded: function (event, comment) {
|
||||||
},
|
// this is to handle non-parent child relationship
|
||||||
commentAdded: function (event, comment) {
|
// we want to make it go up.
|
||||||
// this is to handle non-parent child relationship
|
this.$emit('comment-added', event);
|
||||||
// we want to make it go up.
|
},
|
||||||
this.$emit('comment-added', event);
|
canEditOrDelete: function (prop) {
|
||||||
},
|
if (!this.comment.active) {
|
||||||
canEditOrDelete: function (prop) {
|
return false;
|
||||||
if (!this.comment.active) {
|
}
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!this.permissions) {
|
if (!this.permissions) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
let propAll = 'comment_' + prop + '_all';
|
let propAll = 'comment_' + prop + '_all';
|
||||||
let propOwn = 'comment_' + prop + '_own';
|
let propOwn = 'comment_' + prop + '_own';
|
||||||
|
|
||||||
if (this.permissions[propAll]) {
|
if (this.permissions[propAll]) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.permissions[propOwn] && this.comment.created_by.id === this.currentUserId) {
|
if (this.permissions[propOwn] && this.comment.created_by.id === this.currentUserId) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
},
|
},
|
||||||
canComment: function () {
|
canComment: function () {
|
||||||
if (!this.permissions) {
|
if (!this.permissions) {
|
||||||
return false;
|
return false;
|
||||||
|
}
|
||||||
|
return this.permissions.comment_create === true;
|
||||||
}
|
}
|
||||||
return this.permissions.comment_create === true;
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const computed = {
|
const computed = {
|
||||||
commentId: {
|
commentId: {
|
||||||
get: function () {
|
get: function () {
|
||||||
return `comment-${this.comment.page_id}-${this.comment.id}`;
|
return `comment-${this.comment.page_id}-${this.comment.id}`;
|
||||||
},
|
},
|
||||||
set: function () {
|
set: function () {
|
||||||
this.commentHref = `#?cm=${this.commentId}`
|
this.commentHref = `#?cm=${this.commentId}`
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
function mounted () {
|
function mounted() {
|
||||||
if (this.comment.sub_comments && this.comment.sub_comments.length) {
|
if (this.comment.sub_comments && this.comment.sub_comments.length) {
|
||||||
// set this so that we can render the next set of sub comments.
|
// set this so that we can render the next set of sub comments.
|
||||||
this.comments = this.comment.sub_comments;
|
this.comments = this.comment.sub_comments;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function isCommentOpSuccess(resp) {
|
function isCommentOpSuccess(resp) {
|
||||||
if (resp && resp.data && resp.data.status === 'success') {
|
if (resp && resp.data && resp.data.status === 'success') {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
return false;
|
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 = {
|
module.exports = {
|
||||||
name: 'comment',
|
name: 'comment',
|
||||||
template, data, props, methods, computed, mounted, components: {
|
template, data, props, methods, computed, mounted, components: {
|
||||||
commentReply
|
commentReply
|
||||||
}};
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|||||||
@ -2,107 +2,98 @@ const comment = require('./components/comments/comment');
|
|||||||
const commentReply = require('./components/comments/comment-reply');
|
const commentReply = require('./components/comments/comment-reply');
|
||||||
|
|
||||||
let data = {
|
let data = {
|
||||||
totalCommentsStr: trans('entities.comments_loading'),
|
totalCommentsStr: trans('entities.comments_loading'),
|
||||||
comments: [],
|
comments: [],
|
||||||
permissions: null,
|
permissions: null,
|
||||||
currentUserId: null,
|
currentUserId: null,
|
||||||
trans: trans,
|
trans: trans,
|
||||||
commentCount: 0
|
commentCount: 0
|
||||||
};
|
};
|
||||||
|
|
||||||
let methods = {
|
let methods = {
|
||||||
commentAdded: function () {
|
commentAdded: function () {
|
||||||
++this.totalComments;
|
++this.totalComments;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
let computed = {
|
let computed = {
|
||||||
totalComments: {
|
totalComments: {
|
||||||
get: function () {
|
get: function () {
|
||||||
return this.commentCount;
|
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) {
|
canComment: function () {
|
||||||
this.commentCount = value;
|
if (!this.permissions) {
|
||||||
if (value === 0) {
|
return false;
|
||||||
this.totalCommentsStr = trans('entities.no_comments');
|
}
|
||||||
} else if (value === 1) {
|
return this.permissions.comment_create === true;
|
||||||
this.totalCommentsStr = trans('entities.one_comment');
|
|
||||||
} else {
|
|
||||||
this.totalCommentsStr = trans('entities.x_comments', {
|
|
||||||
numComments: value
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
|
||||||
canComment: function () {
|
|
||||||
if (!this.permissions) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
return this.permissions.comment_create === true;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function mounted() {
|
function mounted() {
|
||||||
this.pageId = Number(this.$el.getAttribute('page-id'));
|
this.pageId = Number(this.$el.getAttribute('page-id'));
|
||||||
// let linkedCommentId = this.$route.query.cm;
|
// let linkedCommentId = this.$route.query.cm;
|
||||||
let linkedCommentId = null;
|
let linkedCommentId = null;
|
||||||
this.$http.get(window.baseUrl(`/ajax/page/${this.pageId}/comments/`)).then(resp => {
|
this.$http.get(window.baseUrl(`/ajax/page/${this.pageId}/comments/`)).then(resp => {
|
||||||
if (!isCommentOpSuccess(resp)) {
|
if (!isCommentOpSuccess(resp)) {
|
||||||
// just show that no comments are available.
|
// just show that no comments are available.
|
||||||
vm.totalComments = 0;
|
vm.totalComments = 0;
|
||||||
return;
|
this.$events.emit('error', getErrorMsg(resp));
|
||||||
}
|
return;
|
||||||
this.comments = resp.data.comments;
|
}
|
||||||
this.totalComments = +resp.data.total;
|
this.comments = resp.data.comments;
|
||||||
this.permissions = resp.data.permissions;
|
this.totalComments = +resp.data.total;
|
||||||
this.currentUserId = resp.data.user_id;
|
this.permissions = resp.data.permissions;
|
||||||
if (!linkedCommentId) {
|
this.currentUserId = resp.data.user_id;
|
||||||
return;
|
if (!linkedCommentId) {
|
||||||
}
|
return;
|
||||||
$timeout(function() {
|
}
|
||||||
// wait for the UI to render.
|
|
||||||
focusLinkedComment(linkedCommentId);
|
focusLinkedComment(linkedCommentId);
|
||||||
|
}).catch(err => {
|
||||||
|
this.$events.emit('error', 'errors.comment_list');
|
||||||
});
|
});
|
||||||
}, checkError('errors.comment_list'));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function isCommentOpSuccess(resp) {
|
function isCommentOpSuccess(resp) {
|
||||||
if (resp && resp.data && resp.data.status === 'success') {
|
if (resp && resp.data && resp.data.status === 'success') {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
function checkError(msgKey) {
|
function getErrorMsg(response) {
|
||||||
return function(response) {
|
if (response.data) {
|
||||||
let msg = null;
|
return response.data.message;
|
||||||
if (isCommentOpSuccess(response)) {
|
|
||||||
// all good
|
|
||||||
return;
|
|
||||||
} else if (response.data) {
|
|
||||||
msg = response.data.message;
|
|
||||||
} else {
|
} else {
|
||||||
msg = trans(msgKey);
|
return trans('errors.comment_add');
|
||||||
}
|
}
|
||||||
if (msg) {
|
|
||||||
events.emit('success', msg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function created () {
|
function created() {
|
||||||
this.$on('new-comment', function (event, comment) {
|
this.$on('new-comment', function (event, comment) {
|
||||||
this.comments.push(comment);
|
this.comments.push(comment);
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
function beforeDestroy() {
|
function beforeDestroy() {
|
||||||
this.$off('new-comment');
|
this.$off('new-comment');
|
||||||
}
|
}
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
data, methods, mounted, computed, components : {
|
data, methods, mounted, computed, components: {
|
||||||
comment, commentReply
|
comment, commentReply
|
||||||
},
|
},
|
||||||
created, beforeDestroy
|
created, beforeDestroy
|
||||||
};
|
};
|
||||||
@ -63,7 +63,7 @@ return [
|
|||||||
// Comments
|
// Comments
|
||||||
'comment_list' => 'An error occurred while fetching the comments.',
|
'comment_list' => 'An error occurred while fetching the comments.',
|
||||||
'cannot_add_comment_to_draft' => 'You cannot add comments to a draft.',
|
'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.',
|
'comment_delete' => 'An error occurred while deleting the comment.',
|
||||||
'empty_comment' => 'Cannot add an empty comment.',
|
'empty_comment' => 'Cannot add an empty comment.',
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user