From 1f427fd67eb6db35a4fe09e1adcb162487393d8a Mon Sep 17 00:00:00 2001 From: _Bastler Date: Mon, 4 Oct 2021 14:14:03 +0200 Subject: [PATCH] update comments --- src/app/pages/entry/entry.page.html | 6 +- src/app/pages/entry/entry.page.ts | 15 ++-- src/app/ui/comment/comment.ui.html | 87 +++++++++++----------- src/app/ui/comment/comment.ui.scss | 7 +- src/app/ui/comment/comment.ui.ts | 16 ++-- src/app/ui/commentform/commentform.ui.scss | 13 +++- src/app/ui/commentform/commentform.ui.ts | 5 +- src/app/ui/comments/comments.ui.html | 6 +- src/app/ui/comments/comments.ui.scss | 8 +- src/app/ui/comments/comments.ui.ts | 42 ++++++++++- src/app/ui/entries/entries.ui.html | 8 +- 11 files changed, 129 insertions(+), 84 deletions(-) diff --git a/src/app/pages/entry/entry.page.html b/src/app/pages/entry/entry.page.html index b3e8185..f175988 100644 --- a/src/app/pages/entry/entry.page.html +++ b/src/app/pages/entry/entry.page.html @@ -5,10 +5,8 @@

{{entry.text}}

- + - - - + \ No newline at end of file diff --git a/src/app/pages/entry/entry.page.ts b/src/app/pages/entry/entry.page.ts index 71744dc..642fabc 100644 --- a/src/app/pages/entry/entry.page.ts +++ b/src/app/pages/entry/entry.page.ts @@ -1,9 +1,10 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { EntriesService } from '../../services/entries.service'; import { CommentService } from '../../services/comment.service'; +import { UiComments } from '../../ui/comments/comments.ui'; @Component({ selector: 'page-entry', @@ -16,7 +17,7 @@ export class PageEntry implements OnInit { entry: any; notfound: boolean = false; boundRefresh: Function; - boundReplyCallback: Function; + @ViewChild('comments') comments: UiComments; constructor(private commentService: CommentService, private entriesService: EntriesService, private route: ActivatedRoute) { } @@ -24,7 +25,6 @@ export class PageEntry implements OnInit { ngOnInit(): void { this.id = +this.route.snapshot.paramMap.get('id'); this.boundRefresh = this.refresh.bind(this); - this.boundReplyCallback = this.replyCallback.bind(this); this.refresh(); } @@ -38,12 +38,9 @@ export class PageEntry implements OnInit { }) } - replyCallback(): void { - this.entry.metadata.reply = false; - this.entry.metadata.comments = 0; - this.commentService.count(this.entry.id).subscribe((data) => { - this.entry.metadata.comments = +data; - }); + replyCallback(comment): void { + this.comments.addComment(comment); + this.entry.metadata.comments = (this.entry.metadata.comments || 0) + 1; } } diff --git a/src/app/ui/comment/comment.ui.html b/src/app/ui/comment/comment.ui.html index 3574650..71ddf04 100644 --- a/src/app/ui/comment/comment.ui.html +++ b/src/app/ui/comment/comment.ui.html @@ -1,45 +1,46 @@ -
- - - - thumb_up - -   - - thumb_down - -   - - - thumb_up - thumb_down -   - - {{comment.created - | datef}} - {{'comment.author' | i18n}}{{comment.author}} - | - {{'comment.unvote' | i18n}} - -
-
- {{comment.text}} +
+
+ + + + thumb_up + +   + + thumb_down + +   + + + thumb_up + thumb_down +   + + {{comment.created + | datef}} + {{'comment.author' | i18n}}{{comment.author}} + | + {{'comment.unvote' | i18n}} + +
+
+ {{comment.text}} +
+ +
+ + {{(comment.metadata.reply ? + 'comment.replyHide' : 'comment.reply') | i18n}} + | + {{'comment.delete' | i18n}} + +
+ +
+ +
-
- - {{(comment.metadata.reply ? 'comment.replyHide' : 'comment.reply') | i18n}} - | - {{'comment.delete' | i18n}} - -
- -
- -
- - - - \ No newline at end of file + \ No newline at end of file diff --git a/src/app/ui/comment/comment.ui.scss b/src/app/ui/comment/comment.ui.scss index e6c98f7..56c11dd 100644 --- a/src/app/ui/comment/comment.ui.scss +++ b/src/app/ui/comment/comment.ui.scss @@ -9,11 +9,14 @@ small a:hover { } .text { - max-width: 100%; white-space: break-spaces; - word-break: break-all; + word-break: break-word; } span.voted { opacity: 0.5; +} + +.comment { + margin: 15px 0; } \ No newline at end of file diff --git a/src/app/ui/comment/comment.ui.ts b/src/app/ui/comment/comment.ui.ts index 877688a..5bdff33 100644 --- a/src/app/ui/comment/comment.ui.ts +++ b/src/app/ui/comment/comment.ui.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, Input } from '@angular/core'; +import { Component, OnInit, Input, ViewChild } from '@angular/core'; import { MatDialog } from '@angular/material/dialog'; import { AuthService } from '../../services/auth.service'; @@ -6,6 +6,7 @@ import { VoteService } from '../../services/vote.service'; import { CommentService } from '../../services/comment.service'; import { ModerationService } from '../../services/moderarion.service'; import { ConfirmDialog } from '../../ui/confirm/confirm.component'; +import { UiComments } from '../comments/comments.ui'; @Component({ selector: 'ui-comment', @@ -17,8 +18,7 @@ export class UiComment implements OnInit { moderator: boolean = false; @Input() comment: any; @Input() change: Function; - - boundReplyCallback: Function; + @ViewChild('subcomments') subcomments: UiComments; constructor(private authService: AuthService, private commentService: CommentService, private voteService: VoteService, private moderationService: ModerationService, public dialog: MatDialog) { } @@ -37,8 +37,6 @@ export class UiComment implements OnInit { this.commentService.countParent(this.comment.target, this.comment.id).subscribe((data) => { this.comment.metadata.comments = +data; }); - - this.boundReplyCallback = this.replyCallback.bind(this); } voteUp() { @@ -69,12 +67,10 @@ export class UiComment implements OnInit { return '' + author + ''; } - replyCallback(): void { + replyCallback(comment): void { + this.subcomments.addComment(comment); this.comment.metadata.reply = false; - this.comment.metadata.comments = 0; - this.commentService.countParent(this.comment.target, this.comment.id).subscribe((data) => { - this.comment.metadata.comments = +data; - }); + this.comment.metadata.comments = (this.comment.metadata.comments || 0) + 1; } deleteComment(comment: any) { diff --git a/src/app/ui/commentform/commentform.ui.scss b/src/app/ui/commentform/commentform.ui.scss index 934ada5..9244fa5 100644 --- a/src/app/ui/commentform/commentform.ui.scss +++ b/src/app/ui/commentform/commentform.ui.scss @@ -4,7 +4,18 @@ mat-form-field { form { - max-width: 400px; margin-left: 15px; margin-bottom: 15px; + + @media screen and (min-width: 576px) { + max-width: 100%; + } + + @media screen and (min-width: 768px) { + max-width: 80%; + } + + @media screen and (min-width: 992px) { + max-width: 50%; + } } \ No newline at end of file diff --git a/src/app/ui/commentform/commentform.ui.ts b/src/app/ui/commentform/commentform.ui.ts index dff1062..6c81479 100644 --- a/src/app/ui/commentform/commentform.ui.ts +++ b/src/app/ui/commentform/commentform.ui.ts @@ -1,6 +1,7 @@ import { Component, OnInit, ViewChild, Input } from '@angular/core'; import { CommentService } from '../../services/comment.service'; import { FormBuilder, FormGroup, Validators, NgForm } from '@angular/forms'; +import { Output, EventEmitter } from '@angular/core'; @Component({ selector: 'ui-commentform', @@ -11,7 +12,7 @@ export class UiCommentForm implements OnInit { @Input() target: number; @Input() parent: number; - @Input() change: Function; + @Output() replyCommentEvent = new EventEmitter(); working: boolean = false; form: FormGroup; @ViewChild('formDirective') private formDirective: NgForm; @@ -37,7 +38,7 @@ export class UiCommentForm implements OnInit { this.commentService.create(comment).subscribe((data) => { this.formDirective.resetForm(); - this.change && this.change(); + this.replyCommentEvent.emit(data); }); } } diff --git a/src/app/ui/comments/comments.ui.html b/src/app/ui/comments/comments.ui.html index bc18b5a..387c995 100644 --- a/src/app/ui/comments/comments.ui.html +++ b/src/app/ui/comments/comments.ui.html @@ -1,6 +1,10 @@
- + + + + {{ (parent ? 'comments.subcomments.showMore' : 'comments.showMore') | i18n}} +
\ No newline at end of file diff --git a/src/app/ui/comments/comments.ui.scss b/src/app/ui/comments/comments.ui.scss index ce7688c..b740391 100644 --- a/src/app/ui/comments/comments.ui.scss +++ b/src/app/ui/comments/comments.ui.scss @@ -1,7 +1,7 @@ .comments { - padding-left: 15px; + padding-left: 20px; } -.divider { - margin: 10px 0px; -} \ No newline at end of file +.comments > small { + margin-bottom: 15px; +} diff --git a/src/app/ui/comments/comments.ui.ts b/src/app/ui/comments/comments.ui.ts index 902ffe8..832ed33 100644 --- a/src/app/ui/comments/comments.ui.ts +++ b/src/app/ui/comments/comments.ui.ts @@ -1,4 +1,5 @@ -import { Component, OnInit, Input, Output } from '@angular/core'; +import { Component, OnInit, Input } from '@angular/core'; +import { PageEvent } from '@angular/material/paginator'; import { CommentService } from '../../services/comment.service'; @@ -23,14 +24,49 @@ export class UiComments implements OnInit { refresh(): void { if (this.parent) { - this.commentService.getParent(this.target, this.parent).subscribe((data) => { + this.commentService.getParentPages(this.target, this.parent, 0 , 2).subscribe((data) => { this.comments = data; }) } else { - this.commentService.get(this.target).subscribe((data) => { + this.commentService.getPages(this.target, 0, 2).subscribe((data) => { this.comments = data; }) } } + + addComment(comment: any): void { + if (!this.comments) { + this.comments = { "content": [] }; + } + + if (!this.comments.content) { + this.comments.content = []; + } + + this.comments.content.push(comment); + this.comments.totalElements = (this.comments.totalElements || 0) + 1; + } + + showMore() { + const oldContent: any[] = this.comments.content; + if (this.parent) { + this.commentService.getParentPages(this.target, this.parent, this.comments.number + 1, this.comments.size).subscribe((data) => { + this.comments = data; + for (let comment of this.comments.content) { + oldContent.push(comment); + } + this.comments.content = oldContent; + }) + } else { + this.commentService.getPages(this.target, this.comments.number + 1, this.comments.size).subscribe((data) => { + this.comments = data; + for (let comment of this.comments.content) { + oldContent.push(comment); + } + this.comments.content = oldContent; + }) + } + } + } diff --git a/src/app/ui/entries/entries.ui.html b/src/app/ui/entries/entries.ui.html index 707951c..56f6398 100644 --- a/src/app/ui/entries/entries.ui.html +++ b/src/app/ui/entries/entries.ui.html @@ -19,9 +19,7 @@ -
- - -
+ +
\ No newline at end of file