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:
@ -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>
|
||||
|
Reference in New Issue
Block a user