mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-10-01 05:36:00 +00:00
#47 - Changes the way we are handling fetching of data for the comment section.
This commit is contained in:
Abijeet
parent
9a97995f18
commit
860d4d4be5
@ -1,12 +1,12 @@
|
||||
<?php
|
||||
|
||||
namespace BookStack;
|
||||
use Illuminate\Support\Facades\DB;
|
||||
|
||||
class Comment extends Ownable
|
||||
{
|
||||
public $sub_comments = [];
|
||||
protected $fillable = ['text', 'html', 'parent_id'];
|
||||
protected $appends = ['created', 'updated'];
|
||||
protected $appends = ['created', 'updated', 'sub_comments'];
|
||||
/**
|
||||
* Get the entity that this comment belongs to
|
||||
* @return \Illuminate\Database\Eloquent\Relations\MorphTo
|
||||
@ -34,24 +34,38 @@ class Comment extends Ownable
|
||||
return $this->belongsTo(User::class);
|
||||
}
|
||||
|
||||
public function getCommentsByPage($pageId, $commentId, $pageNum = 0, $limit = 0) {
|
||||
|
||||
public function getPageComments($pageId) {
|
||||
$query = static::newQuery();
|
||||
$query->join('users AS u', 'comments.created_by', '=', 'u.id');
|
||||
$query->leftJoin('users AS u1', 'comments.updated_by', '=', 'u1.id');
|
||||
$query->leftJoin('images AS i', 'i.id', '=', 'u.image_id');
|
||||
$query->selectRaw('comments.id, text, html, comments.created_by, comments.updated_by, comments.created_at, comments.updated_at, '
|
||||
$query->selectRaw('comments.id, text, html, comments.created_by, comments.updated_by, '
|
||||
. 'comments.created_at, comments.updated_at, comments.parent_id, '
|
||||
. 'u.name AS created_by_name, u1.name AS updated_by_name, '
|
||||
. '(SELECT count(c.id) FROM bookstack.comments c WHERE c.parent_id = comments.id AND page_id = ?) AS cnt_sub_comments, i.url AS avatar ',
|
||||
[$pageId]);
|
||||
|
||||
if (empty($commentId)) {
|
||||
$query->whereRaw('page_id = ? AND parent_id IS NULL', [$pageId]);
|
||||
} else {
|
||||
$query->whereRaw('page_id = ? AND parent_id = ?', [$pageId, $commentId]);
|
||||
}
|
||||
. 'i.url AS avatar ');
|
||||
$query->whereRaw('page_id = ?', [$pageId]);
|
||||
$query->orderBy('created_at');
|
||||
return $query;
|
||||
return $query->get();
|
||||
}
|
||||
|
||||
public function getAllPageComments($pageId) {
|
||||
return self::where('page_id', '=', $pageId)->with(['createdBy' => function($query) {
|
||||
$query->select('id', 'name', 'image_id');
|
||||
}, 'updatedBy' => function($query) {
|
||||
$query->select('id', 'name');
|
||||
}, 'createdBy.avatar' => function ($query) {
|
||||
$query->select('id', 'path', 'url');
|
||||
}])->get();
|
||||
}
|
||||
|
||||
public function getCommentById($commentId) {
|
||||
return self::where('id', '=', $commentId)->with(['createdBy' => function($query) {
|
||||
$query->select('id', 'name', 'image_id');
|
||||
}, 'updatedBy' => function($query) {
|
||||
$query->select('id', 'name');
|
||||
}, 'createdBy.avatar' => function ($query) {
|
||||
$query->select('id', 'path', 'url');
|
||||
}])->first();
|
||||
}
|
||||
|
||||
public function getCreatedAttribute() {
|
||||
@ -72,4 +86,8 @@ class Comment extends Ownable
|
||||
];
|
||||
return $updated;
|
||||
}
|
||||
|
||||
public function getSubCommentsAttribute() {
|
||||
return $this->sub_comments;
|
||||
}
|
||||
}
|
||||
|
||||
@ -54,9 +54,12 @@ class CommentController extends Controller
|
||||
$respMsg = trans('entities.comment_updated');
|
||||
}
|
||||
|
||||
$comment = $this->commentRepo->getCommentById($comment->id);
|
||||
|
||||
return response()->json([
|
||||
'status' => 'success',
|
||||
'message' => $respMsg
|
||||
'message' => $respMsg,
|
||||
'comment' => $comment
|
||||
]);
|
||||
|
||||
}
|
||||
@ -64,11 +67,10 @@ class CommentController extends Controller
|
||||
public function destroy($id) {
|
||||
$comment = $this->comment->findOrFail($id);
|
||||
$this->checkOwnablePermission('comment-delete', $comment);
|
||||
|
||||
//
|
||||
}
|
||||
|
||||
public function getCommentThread($pageId, $commentId = null) {
|
||||
|
||||
public function getPageComments($pageId) {
|
||||
try {
|
||||
$page = $this->entityRepo->getById('page', $pageId, true);
|
||||
} catch (ModelNotFoundException $e) {
|
||||
@ -85,12 +87,7 @@ class CommentController extends Controller
|
||||
|
||||
$this->checkOwnablePermission('page-view', $page);
|
||||
|
||||
$comments = $this->commentRepo->getCommentsForPage($pageId, $commentId);
|
||||
if (empty($commentId)) {
|
||||
// requesting for parent level comments, send the total count as well.
|
||||
$totalComments = $this->commentRepo->getCommentCount($pageId);
|
||||
return response()->json(['success' => true, 'comments'=> $comments, 'total' => $totalComments]);
|
||||
}
|
||||
return response()->json(['success' => true, 'comments'=> $comments]);
|
||||
$comments = $this->commentRepo->getPageComments($pageId);
|
||||
return response()->json(['success' => true, 'comments'=> $comments['comments'], 'total' => $comments['total']]);
|
||||
}
|
||||
}
|
||||
|
||||
@ -39,13 +39,48 @@ class CommentRepo {
|
||||
return $comment;
|
||||
}
|
||||
|
||||
public function getCommentsForPage($pageId, $commentId, $count = 20) {
|
||||
// requesting parent comments
|
||||
$query = $this->comment->getCommentsByPage($pageId, $commentId);
|
||||
return $query->paginate($count);
|
||||
public function getPageComments($pageId) {
|
||||
$comments = $this->comment->getAllPageComments($pageId);
|
||||
$index = [];
|
||||
$totalComments = count($comments);
|
||||
// normalizing the response.
|
||||
foreach($comments as &$comment) {
|
||||
$comment = $this->normalizeComment($comment);
|
||||
$parentId = $comment->parent_id;
|
||||
if (empty($parentId)) {
|
||||
$index[$comment->id] = $comment;
|
||||
continue;
|
||||
}
|
||||
|
||||
if (empty($index[$parentId])) {
|
||||
// weird condition should not happen.
|
||||
continue;
|
||||
}
|
||||
if (empty($index[$parentId]->sub_comments)) {
|
||||
$index[$parentId]->sub_comments = [];
|
||||
}
|
||||
array_push($index[$parentId]->sub_comments, $comment);
|
||||
$index[$comment->id] = $comment;
|
||||
}
|
||||
return [
|
||||
'comments' => $comments,
|
||||
'total' => $totalComments
|
||||
];
|
||||
}
|
||||
|
||||
public function getCommentCount($pageId) {
|
||||
return $this->comment->where('page_id', '=', $pageId)->count();
|
||||
public function getCommentById($commentId) {
|
||||
return $this->normalizeComment($this->comment->getCommentById($commentId));
|
||||
}
|
||||
|
||||
private function normalizeComment($comment) {
|
||||
if (empty($comment)) {
|
||||
return;
|
||||
}
|
||||
$comment->createdBy->avatar_url = $comment->createdBy->getAvatar(50);
|
||||
$comment->createdBy->profile_url = $comment->createdBy->getProfileUrl();
|
||||
if (!empty($comment->updatedBy)) {
|
||||
$comment->updatedBy->profile_url = $comment->updatedBy->getProfileUrl();
|
||||
}
|
||||
return $comment;
|
||||
}
|
||||
}
|
||||
@ -714,10 +714,18 @@ module.exports = function (ngApp, events) {
|
||||
return events.emit('error', trans('error'));
|
||||
}
|
||||
if ($scope.isEdit) {
|
||||
$scope.comment.html = commentHTML;
|
||||
$scope.comment.html = resp.data.comment.html;
|
||||
$scope.comment.text = resp.data.comment.text;
|
||||
$scope.comment.updated = resp.data.comment.updated;
|
||||
$scope.comment.updated_by = resp.data.comment.updated_by;
|
||||
$scope.$emit('evt.comment-success', $scope.comment.id);
|
||||
} else {
|
||||
$scope.comment.text = '';
|
||||
if ($scope.isReply === true && $scope.parent.sub_comments) {
|
||||
$scope.parent.sub_comments.push(resp.data.comment);
|
||||
} else {
|
||||
$scope.$emit('evt.new-comment', resp.data.comment);
|
||||
}
|
||||
$scope.$emit('evt.comment-success', null, true);
|
||||
}
|
||||
events.emit('success', trans(resp.data.message));
|
||||
@ -747,9 +755,14 @@ module.exports = function (ngApp, events) {
|
||||
$scope.errors = {};
|
||||
// keep track of comment levels
|
||||
$scope.level = 1;
|
||||
$scope.defaultAvatar = defaultAvatar;
|
||||
vm.totalCommentsStr = 'Loading...';
|
||||
|
||||
$scope.$on('evt.new-comment', function (event, comment) {
|
||||
// add the comment to the comment list.
|
||||
vm.comments.push(comment);
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
$timeout(function() {
|
||||
$http.get(window.baseUrl(`/ajax/page/${$scope.pageId}/comments/`)).then(resp => {
|
||||
@ -757,7 +770,7 @@ module.exports = function (ngApp, events) {
|
||||
// TODO : Handle error
|
||||
return;
|
||||
}
|
||||
vm.comments = resp.data.comments.data;
|
||||
vm.comments = resp.data.comments;
|
||||
vm.totalComments = resp.data.total;
|
||||
// TODO : Fetch message from translate.
|
||||
if (vm.totalComments === 0) {
|
||||
@ -770,21 +783,10 @@ module.exports = function (ngApp, events) {
|
||||
}, checkError('app'));
|
||||
});
|
||||
|
||||
vm.loadSubComments = function(event, comment) {
|
||||
event.preventDefault();
|
||||
$http.get(window.baseUrl(`/ajax/page/${$scope.pageId}/comments/${comment.id}/sub-comments`)).then(resp => {
|
||||
if (!resp.data || resp.data.success !== true) {
|
||||
return;
|
||||
}
|
||||
comment.is_loaded = true;
|
||||
comment.comments = resp.data.comments.data;
|
||||
}, checkError('app'));
|
||||
};
|
||||
|
||||
function checkError(errorGroupName) {
|
||||
$scope.errors[errorGroupName] = {};
|
||||
return function(response) {
|
||||
console.log(resp);
|
||||
console.log(response);
|
||||
}
|
||||
}
|
||||
}]);
|
||||
|
||||
@ -825,10 +825,12 @@ module.exports = function (ngApp, events) {
|
||||
templateUrl: 'comment-reply.html',
|
||||
scope: {
|
||||
pageId: '=',
|
||||
parentId: '='
|
||||
parentId: '=',
|
||||
parent: '='
|
||||
},
|
||||
link: function (scope, element) {
|
||||
scope.isReply = true;
|
||||
element.find('textarea').focus();
|
||||
scope.$on('evt.comment-success', function (event) {
|
||||
// no need for the event to do anything more.
|
||||
event.stopPropagation();
|
||||
@ -849,6 +851,7 @@ module.exports = function (ngApp, events) {
|
||||
},
|
||||
link: function (scope, element) {
|
||||
scope.isEdit = true;
|
||||
element.find('textarea').focus();
|
||||
scope.$on('evt.comment-success', function (event, commentId) {
|
||||
// no need for the event to do anything more.
|
||||
event.stopPropagation();
|
||||
@ -892,7 +895,7 @@ module.exports = function (ngApp, events) {
|
||||
function compileHtml($container, scope, isReply) {
|
||||
let lnkFunc = null;
|
||||
if (isReply) {
|
||||
lnkFunc = $compile('<comment-reply page-id="comment.pageId" parent-id="comment.id"></comment-reply>');
|
||||
lnkFunc = $compile('<comment-reply page-id="comment.pageId" parent-id="comment.id" parent="comment"></comment-reply>');
|
||||
} else {
|
||||
lnkFunc = $compile('<comment-edit comment="comment"></comment-add>');
|
||||
}
|
||||
|
||||
@ -4,12 +4,7 @@
|
||||
}
|
||||
|
||||
.comment-box:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.load-more-comments {
|
||||
font-size: 0.8em;
|
||||
margin-top: -1px;
|
||||
margin-bottom: 6px;
|
||||
border-bottom: 0px;
|
||||
}
|
||||
}
|
||||
.page-comment {
|
||||
@ -42,11 +37,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
.comment-actions.has-border {
|
||||
.comment-actions {
|
||||
border-bottom: 1px solid #DDD;
|
||||
}
|
||||
|
||||
.comment-actions.has-border:last-child {
|
||||
.comment-actions:last-child {
|
||||
border-bottom: 0px;
|
||||
}
|
||||
|
||||
|
||||
@ -4,13 +4,13 @@
|
||||
<script type="text/ng-template" id="comment-reply.html">
|
||||
@include('comments/comment-reply', ['pageId' => $pageId])
|
||||
</script>
|
||||
<div ng-controller="CommentListController as vm" ng-init="pageId = <?= $page->id ?>" class="comments-list" ng-cloak>
|
||||
<div ng-controller="CommentListController as vm" ng-init="pageId = <?= $page->id ?>" class="comments-list" ng-cloak>
|
||||
<h3>@{{vm.totalCommentsStr}}</h3>
|
||||
<hr>
|
||||
<div class="comment-box" ng-repeat="comment in vm.comments track by comment.id">
|
||||
<hr>
|
||||
<div class="comment-box" ng-repeat="comment in vm.comments track by comment.id">
|
||||
<div ng-include src="'comment-list-item.html'">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@include('comments/comment-reply', ['pageId' => $pageId])
|
||||
@include('comments/comment-reply', ['pageId' => $pageId])
|
||||
</div>
|
||||
@ -1,28 +1,24 @@
|
||||
<div class='page-comment' id="comment-@{{::pageId}}-@{{::comment.id}}">
|
||||
<div class="user-image">
|
||||
<img ng-src="@{{::defaultAvatar}}" alt="user avatar">
|
||||
<img ng-src="@{{::comment.created_by.avatar_url}}" alt="user avatar">
|
||||
</div>
|
||||
<div class="comment-container">
|
||||
<div class="comment-header">
|
||||
@{{ ::comment.created_by_name }}
|
||||
<a href="@{{::comment.created_by.profile_url}}">@{{ ::comment.created_by.name }}</a>
|
||||
</div>
|
||||
<div ng-bind-html="comment.html" class="comment-body">
|
||||
|
||||
</div>
|
||||
<div class="comment-actions" ng-class="{'has-border': comment.cnt_sub_comments === 0 || comment.is_loaded}">
|
||||
<div class="comment-actions">
|
||||
<ul>
|
||||
<li ng-if="level < 3"><a href="#" comment-reply-link no-comment-reply-dupe="true" comment="comment" is-reply="true">Reply</a></li>
|
||||
<li><a href="#" comment-reply-link no-comment-reply-dupe="true" comment="comment">Edit</a></li>
|
||||
<li>Created <a title="@{{::comment.created.day_time_str}}" href="#comment-@{{::comment.id}}-@{{::pageId}}">@{{::comment.created.diff}}</a></li>
|
||||
<li ng-if="comment.updated"><span title="@{{::comment.updated.day_time_str}}">Updated @{{::comment.updated.diff}}</span></li>
|
||||
<li ng-if="comment.updated"><span title="@{{comment.updated.day_time_str}}">Updated @{{comment.updated.diff}} by
|
||||
<a href="@{{comment.updated_by.profile_url}}">@{{comment.updated_by.name}}</a></span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="load-more-comments" ng-if="comment.cnt_sub_comments > 0 && !comment.is_loaded">
|
||||
<a href="#" ng-click="vm.loadSubComments($event, comment, $index)">
|
||||
Load @{{::comment.cnt_sub_comments}} more comment(s)
|
||||
</a>
|
||||
</div>
|
||||
<div class="comment-box" ng-repeat="comment in comments = comment.comments track by comment.id" ng-init="level = level + 1">
|
||||
<div class="comment-box" ng-repeat="comment in comments = comment.sub_comments track by comment.id" ng-init="level = level + 1">
|
||||
<div ng-include src="'comment-list-item.html'">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -123,8 +123,7 @@ Route::group(['middleware' => 'auth'], function () {
|
||||
Route::post('/ajax/page/{pageId}/comment/', 'CommentController@save');
|
||||
Route::put('/ajax/page/{pageId}/comment/{commentId}', 'CommentController@save');
|
||||
Route::delete('/ajax/comment/{id}', 'CommentController@destroy');
|
||||
Route::get('/ajax/page/{pageId}/comments/{commentId}/sub-comments', 'CommentController@getCommentThread');
|
||||
Route::get('/ajax/page/{pageId}/comments/', 'CommentController@getCommentThread');
|
||||
Route::get('/ajax/page/{pageId}/comments/', 'CommentController@getPageComments');
|
||||
|
||||
// Links
|
||||
Route::get('/link/{id}', 'PageController@redirectFromLink');
|
||||
|
||||
Loading…
Reference in New Issue
Block a user