update comments

This commit is contained in:
_Bastler 2021-10-04 14:14:03 +02:00
parent 0cabe9b0a5
commit 1f427fd67e
11 changed files with 129 additions and 84 deletions

View File

@ -5,10 +5,8 @@
<p class="text">{{entry.text}}</p>
<ui-commentform [target]="entry.id" [change]="boundReplyCallback"></ui-commentform>
<ui-commentform [target]="entry.id" (replyCommentEvent)="replyCallback($event)"></ui-commentform>
<ng-container *ngIf="entry.metadata.comments">
<ui-comments [target]="entry.id"></ui-comments>
</ng-container>
<ui-comments #comments [target]="entry.id"></ui-comments>
</ng-container>
</div>

View File

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

View File

@ -1,45 +1,46 @@
<div mat-line>
<small>
<ng-container *ngIf="comment.metadata && !comment.metadata.unvote">
<a href="javascript:" (click)="voteUp(comment.id)" matTooltip="{{'vote.up' | i18n}}">
<mat-icon inline="true">thumb_up</mat-icon>
</a>
<span>&nbsp;</span>
<a href="javascript:" (click)="voteDown(comment.id)" matTooltip="{{'vote.down' | i18n}}">
<mat-icon inline="true">thumb_down</mat-icon>
</a>
<span>&nbsp;</span>
</ng-container>
<span class="voted" *ngIf="comment.metadata && comment.metadata.unvote">
<mat-icon *ngIf="comment.metadata && comment.metadata.upvoted" inline="true" >thumb_up</mat-icon>
<mat-icon *ngIf="comment.metadata && comment.metadata.downvoted" inline="true">thumb_down</mat-icon>
<span>&nbsp;</span>
</span>
<a routerLink="/c/{{comment.id}}" matTooltip="{{comment.created | datef:'LLLL'}}">{{comment.created
| datef}}</a>
{{'comment.author' | i18n}}<a routerLink="/u/{{comment.author}}">{{comment.author}}</a>
<span *ngIf="comment.metadata && comment.metadata.unvote"> | </span>
<a *ngIf="comment.metadata.unvote" href="javascript:" (click)="unvote()">{{'comment.unvote' | i18n}}</a>
</small>
</div>
<div mat-line class="text"
[style.opacity]="comment.metadata && comment.metadata.points && comment.metadata.points < 0 ? 1 + (comment.metadata.points / 10) : '1.0'">
{{comment.text}}
<div class="comment">
<div mat-line>
<small>
<ng-container *ngIf="comment.metadata && !comment.metadata.unvote">
<a href="javascript:" (click)="voteUp(comment.id)" matTooltip="{{'vote.up' | i18n}}">
<mat-icon inline="true">thumb_up</mat-icon>
</a>
<span>&nbsp;</span>
<a href="javascript:" (click)="voteDown(comment.id)" matTooltip="{{'vote.down' | i18n}}">
<mat-icon inline="true">thumb_down</mat-icon>
</a>
<span>&nbsp;</span>
</ng-container>
<span class="voted" *ngIf="comment.metadata && comment.metadata.unvote">
<mat-icon *ngIf="comment.metadata && comment.metadata.upvoted" inline="true">thumb_up</mat-icon>
<mat-icon *ngIf="comment.metadata && comment.metadata.downvoted" inline="true">thumb_down</mat-icon>
<span>&nbsp;</span>
</span>
<a routerLink="/c/{{comment.id}}" matTooltip="{{comment.created | datef:'LLLL'}}">{{comment.created
| datef}}</a>
{{'comment.author' | i18n}}<a routerLink="/u/{{comment.author}}">{{comment.author}}</a>
<span *ngIf="comment.metadata && comment.metadata.unvote"> | </span>
<a *ngIf="comment.metadata.unvote" href="javascript:" (click)="unvote()">{{'comment.unvote' | i18n}}</a>
</small>
</div>
<div mat-line class="text"
[style.opacity]="comment.metadata && comment.metadata.points && comment.metadata.points < 0 ? 1 + (comment.metadata.points / 10) : '1.0'">
{{comment.text}}
</div>
<div mat-line>
<small>
<a href="javascript:" (click)="comment.metadata.reply=!comment.metadata.reply">{{(comment.metadata.reply ?
'comment.replyHide' : 'comment.reply') | i18n}}</a>
<span *ngIf="moderator"> | </span>
<a *ngIf="moderator" href="javascript:" (click)="deleteComment(comment)">{{'comment.delete' | i18n}}</a>
</small>
</div>
<div mat-line>
<ui-commentform *ngIf="comment.metadata.reply" [target]="comment.target" [parent]="comment.id"
(replyCommentEvent)="replyCallback($event)"></ui-commentform>
</div>
</div>
<div mat-line>
<small>
<a href="javascript:" (click)="comment.metadata.reply=!comment.metadata.reply">{{(comment.metadata.reply ? 'comment.replyHide' : 'comment.reply') | i18n}}</a>
<span *ngIf="moderator"> | </span>
<a *ngIf="moderator" href="javascript:" (click)="deleteComment(comment)">{{'comment.delete' | i18n}}</a>
</small>
</div>
<div mat-line>
<ui-commentform *ngIf="comment.metadata.reply" [target]="comment.target" [parent]="comment.id"
[change]="boundReplyCallback"></ui-commentform>
</div>
<ng-container *ngIf="comment.metadata.comments">
<ui-comments [target]="comment.target" [parent]="comment.id"></ui-comments>
</ng-container>
<ui-comments #subcomments [target]="comment.target" [parent]="comment.id"></ui-comments>

View File

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

View File

@ -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 '<a href="/u/' + author + '">' + author + '</a>';
}
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) {

View File

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

View File

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

View File

@ -1,6 +1,10 @@
<div *ngIf="comments" fxLayout="column" fxFlexFill class="comments">
<ng-container *ngFor="let comment of comments.content; let i = index">
<mat-divider class="divider" *ngIf="i > 0"></mat-divider>
<ui-comment [comment]="comment" [change]="boundRefresh"></ui-comment>
<ui-comment class="comment" [comment]="comment" [change]="boundRefresh"></ui-comment>
</ng-container>
<small *ngIf="comments.totalElements > comments.content.length">
<a mat-stroked-button color="primary" (click)="showMore()">{{ (parent ? 'comments.subcomments.showMore' : 'comments.showMore') | i18n}}</a>
</small>
</div>

View File

@ -1,7 +1,7 @@
.comments {
padding-left: 15px;
padding-left: 20px;
}
.divider {
margin: 10px 0px;
.comments > small {
margin-bottom: 15px;
}

View File

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

View File

@ -19,9 +19,7 @@
<span fxFlexOffset="auto"></span>
<div>
<mat-paginator *ngIf="entries.totalElements > 0" [pageSizeOptions]="pageSizeOptions" [pageIndex]="entries.number"
[length]="entries.totalElements" [pageSize]="entries.size" (page)="update && update($event)" showFirstLastButtons>
</mat-paginator>
</div>
<mat-paginator *ngIf="entries.totalElements > 0" [pageSizeOptions]="pageSizeOptions" [pageIndex]="entries.number"
[length]="entries.totalElements" [pageSize]="entries.size" (page)="update && update($event)" showFirstLastButtons>
</mat-paginator>
</div>