1
0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-07-28 17:02:04 +03: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

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