1
0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-10-30 07:32:39 +01:00

#47 - Changes the way we are handling fetching of data for the comment section.

This commit is contained in:
Abijeet 2017-05-30 09:02:47 +05:30
parent 9a97995f18
commit 860d4d4be5
9 changed files with 119 additions and 74 deletions

View File

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

View File

@ -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']]);
}
}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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');