webapp/bookstack
webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-06-07 04:22:06 +03:00
Code

Fixed formatting and added error messages.

Browse Source
This commit is contained in:
Abijeet 2017-08-21 02:21:31 +05:30
parent e8fa58f201
commit ac07cb41b6
4 changed files with 240 additions and 274 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

164
resources/assets/js/vues/components/comments/comment-reply.js
View File

@ -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 };

207
resources/assets/js/vues/components/comments/comment.js
View File

@ -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
}}; }
};

141
resources/assets/js/vues/page-comments.js
View File

@ -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
}; };

2
resources/lang/en/errors.php
View File

@ -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.',