mirror of
https://github.com/BookStackApp/BookStack.git
synced 2025-08-07 23:03:00 +03:00
Comments: Started archive display, created mode for tree node
This commit is contained in:
@@ -137,10 +137,12 @@ export class PageComment extends Component {
|
||||
protected async archive(): Promise<void> {
|
||||
this.showLoading();
|
||||
const isArchived = this.archiveButton.dataset.isArchived === 'true';
|
||||
const action = isArchived ? 'unarchive' : 'archive';
|
||||
|
||||
await window.$http.put(`/comment/${this.commentId}/${isArchived ? 'unarchive' : 'archive'}`);
|
||||
this.$emit('archive');
|
||||
const response = await window.$http.put(`/comment/${this.commentId}/${action}`);
|
||||
this.$emit(action, {new_thread_dom: htmlToDom(response.data as string)});
|
||||
window.$events.success(this.archiveText);
|
||||
this.container.closest('.comment-branch')?.remove();
|
||||
}
|
||||
|
||||
protected showLoading(): HTMLElement {
|
||||
|
@@ -9,6 +9,12 @@ export interface CommentReplyEvent extends Event {
|
||||
}
|
||||
}
|
||||
|
||||
export interface ArchiveEvent extends Event {
|
||||
detail: {
|
||||
new_thread_dom: HTMLElement;
|
||||
}
|
||||
}
|
||||
|
||||
export class PageComments extends Component {
|
||||
|
||||
private elem: HTMLElement;
|
||||
@@ -17,6 +23,7 @@ export class PageComments extends Component {
|
||||
private commentCountBar: HTMLElement;
|
||||
private commentsTitle: HTMLElement;
|
||||
private addButtonContainer: HTMLElement;
|
||||
private archiveContainer: HTMLElement;
|
||||
private replyToRow: HTMLElement;
|
||||
private formContainer: HTMLElement;
|
||||
private form: HTMLFormElement;
|
||||
@@ -43,6 +50,7 @@ export class PageComments extends Component {
|
||||
this.commentCountBar = this.$refs.commentCountBar;
|
||||
this.commentsTitle = this.$refs.commentsTitle;
|
||||
this.addButtonContainer = this.$refs.addButtonContainer;
|
||||
this.archiveContainer = this.$refs.archiveContainer;
|
||||
this.replyToRow = this.$refs.replyToRow;
|
||||
this.formContainer = this.$refs.formContainer;
|
||||
this.form = this.$refs.form as HTMLFormElement;
|
||||
@@ -75,6 +83,14 @@ export class PageComments extends Component {
|
||||
this.setReply(event.detail.id, event.detail.element);
|
||||
});
|
||||
|
||||
this.elem.addEventListener('page-comment-archive', (event: ArchiveEvent) => {
|
||||
this.archiveContainer.append(event.detail.new_thread_dom);
|
||||
});
|
||||
|
||||
this.elem.addEventListener('page-comment-unarchive', (event: ArchiveEvent) => {
|
||||
this.container.append(event.detail.new_thread_dom)
|
||||
});
|
||||
|
||||
if (this.form) {
|
||||
this.removeReplyToButton.addEventListener('click', this.removeReplyTo.bind(this));
|
||||
this.hideFormButton.addEventListener('click', this.hideForm.bind(this));
|
||||
|
@@ -1,13 +1,16 @@
|
||||
{{--
|
||||
$branch CommentTreeNode
|
||||
--}}
|
||||
<div class="comment-branch">
|
||||
<div>
|
||||
@include('comments.comment', ['comment' => $branch['comment']])
|
||||
@include('comments.comment', ['comment' => $branch->comment])
|
||||
</div>
|
||||
<div class="flex-container-row">
|
||||
<div class="comment-thread-indicator-parent">
|
||||
<div class="comment-thread-indicator"></div>
|
||||
</div>
|
||||
<div class="comment-branch-children flex">
|
||||
@foreach($branch['children'] as $childBranch)
|
||||
@foreach($branch->children as $childBranch)
|
||||
@include('comments.comment-branch', ['branch' => $childBranch])
|
||||
@endforeach
|
||||
</div>
|
||||
|
@@ -38,7 +38,7 @@
|
||||
@if(userCan('comment-create-all'))
|
||||
<button refs="page-comment@reply-button" type="button" class="text-button text-muted hover-underline text-small p-xs">@icon('reply') {{ trans('common.reply') }}</button>
|
||||
@endif
|
||||
@if(userCan('comment-update', $comment) || userCan('comment-delete', $comment))
|
||||
@if(!$comment->parent_id && (userCan('comment-update', $comment) || userCan('comment-delete', $comment)))
|
||||
<button refs="page-comment@archive-button"
|
||||
type="button"
|
||||
data-is-archived="{{ $comment->archived ? 'true' : 'false' }}"
|
||||
|
@@ -18,8 +18,8 @@
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div refs="page-comments@commentContainer" class="comment-container">
|
||||
@foreach($commentTree->get() as $branch)
|
||||
<div refs="page-comments@comment-container" class="comment-container">
|
||||
@foreach($commentTree->getActive() as $branch)
|
||||
@include('comments.comment-branch', ['branch' => $branch, 'readOnly' => false])
|
||||
@endforeach
|
||||
</div>
|
||||
@@ -27,14 +27,25 @@
|
||||
@if(userCan('comment-create-all'))
|
||||
@include('comments.create')
|
||||
@if (!$commentTree->empty())
|
||||
<div refs="page-comments@addButtonContainer" class="text-right">
|
||||
<div refs="page-comments@addButtonContainer" class="flex-container-row">
|
||||
|
||||
<button type="button"
|
||||
refs="page-comments@show-archived-button"
|
||||
class="text-button hover-underline">{{ trans_choice('entities.comment_archived', count($commentTree->getArchived())) }}</button>
|
||||
|
||||
<button type="button"
|
||||
refs="page-comments@add-comment-button"
|
||||
class="button outline">{{ trans('entities.comment_add') }}</button>
|
||||
class="button outline ml-auto">{{ trans('entities.comment_add') }}</button>
|
||||
</div>
|
||||
@endif
|
||||
@endif
|
||||
|
||||
<div refs="page-comments@archive-container" class="comment-container">
|
||||
@foreach($commentTree->getArchived() as $branch)
|
||||
@include('comments.comment-branch', ['branch' => $branch, 'readOnly' => false])
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
@if(userCan('comment-create-all') || $commentTree->canUpdateAny())
|
||||
@push('body-end')
|
||||
<script src="{{ versioned_asset('libs/tinymce/tinymce.min.js') }}" nonce="{{ $cspNonce }}" defer></script>
|
||||
|
Reference in New Issue
Block a user