_Bastler/bstlboard-front
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update comments

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/pages/entry/entry.page.html
View File

@ -5,10 +5,8 @@
<p class="text">{{entry.text}}</p> <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 #comments [target]="entry.id"></ui-comments>
<ui-comments [target]="entry.id"></ui-comments>
</ng-container>
</ng-container> </ng-container>
</div> </div>

15
src/app/pages/entry/entry.page.ts
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 { ActivatedRoute } from '@angular/router';
import { EntriesService } from '../../services/entries.service'; import { EntriesService } from '../../services/entries.service';
import { CommentService } from '../../services/comment.service'; import { CommentService } from '../../services/comment.service';
import { UiComments } from '../../ui/comments/comments.ui';
@Component({ @Component({
selector: 'page-entry', selector: 'page-entry',
@ -16,7 +17,7 @@ export class PageEntry implements OnInit {
entry: any; entry: any;
notfound: boolean = false; notfound: boolean = false;
boundRefresh: Function; boundRefresh: Function;
boundReplyCallback: Function; @ViewChild('comments') comments: UiComments;
constructor(private commentService: CommentService, private entriesService: EntriesService, constructor(private commentService: CommentService, private entriesService: EntriesService,
private route: ActivatedRoute) { } private route: ActivatedRoute) { }
@ -24,7 +25,6 @@ export class PageEntry implements OnInit {
ngOnInit(): void { ngOnInit(): void {
this.id = +this.route.snapshot.paramMap.get('id'); this.id = +this.route.snapshot.paramMap.get('id');
this.boundRefresh = this.refresh.bind(this); this.boundRefresh = this.refresh.bind(this);
this.boundReplyCallback = this.replyCallback.bind(this);
this.refresh(); this.refresh();
} }
@ -38,12 +38,9 @@ export class PageEntry implements OnInit {
}) })
} }
replyCallback(): void { replyCallback(comment): void {
this.entry.metadata.reply = false; this.comments.addComment(comment);
this.entry.metadata.comments = 0; this.entry.metadata.comments = (this.entry.metadata.comments || 0) + 1;
this.commentService.count(this.entry.id).subscribe((data) => {
this.entry.metadata.comments = +data;
});
} }
} }

87
src/app/ui/comment/comment.ui.html
View File

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

7
src/app/ui/comment/comment.ui.scss
View File

@ -9,11 +9,14 @@ small a:hover {
} }
.text { .text {
max-width: 100%;
white-space: break-spaces; white-space: break-spaces;
word-break: break-all; word-break: break-word;
} }
span.voted { span.voted {
opacity: 0.5; opacity: 0.5;
}
.comment {
margin: 15px 0;
} }

16
src/app/ui/comment/comment.ui.ts
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 { MatDialog } from '@angular/material/dialog';
import { AuthService } from '../../services/auth.service'; import { AuthService } from '../../services/auth.service';
@ -6,6 +6,7 @@ import { VoteService } from '../../services/vote.service';
import { CommentService } from '../../services/comment.service'; import { CommentService } from '../../services/comment.service';
import { ModerationService } from '../../services/moderarion.service'; import { ModerationService } from '../../services/moderarion.service';
import { ConfirmDialog } from '../../ui/confirm/confirm.component'; import { ConfirmDialog } from '../../ui/confirm/confirm.component';
import { UiComments } from '../comments/comments.ui';
@Component({ @Component({
selector: 'ui-comment', selector: 'ui-comment',
@ -17,8 +18,7 @@ export class UiComment implements OnInit {
moderator: boolean = false; moderator: boolean = false;
@Input() comment: any; @Input() comment: any;
@Input() change: Function; @Input() change: Function;
@ViewChild('subcomments') subcomments: UiComments;
boundReplyCallback: Function;
constructor(private authService: AuthService, private commentService: CommentService, private voteService: VoteService, constructor(private authService: AuthService, private commentService: CommentService, private voteService: VoteService,
private moderationService: ModerationService, public dialog: MatDialog) { } 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.commentService.countParent(this.comment.target, this.comment.id).subscribe((data) => {
this.comment.metadata.comments = +data; this.comment.metadata.comments = +data;
}); });
this.boundReplyCallback = this.replyCallback.bind(this);
} }
voteUp() { voteUp() {
@ -69,12 +67,10 @@ export class UiComment implements OnInit {
return '<a href="/u/' + author + '">' + author + '</a>'; return '<a href="/u/' + author + '">' + author + '</a>';
} }
replyCallback(): void { replyCallback(comment): void {
this.subcomments.addComment(comment);
this.comment.metadata.reply = false; this.comment.metadata.reply = false;
this.comment.metadata.comments = 0; this.comment.metadata.comments = (this.comment.metadata.comments || 0) + 1;
this.commentService.countParent(this.comment.target, this.comment.id).subscribe((data) => {
this.comment.metadata.comments = +data;
});
} }
deleteComment(comment: any) { deleteComment(comment: any) {

13
src/app/ui/commentform/commentform.ui.scss
View File

@ -4,7 +4,18 @@ mat-form-field {
form { form {
max-width: 400px;
margin-left: 15px; margin-left: 15px;
margin-bottom: 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%;
}
} }

5
src/app/ui/commentform/commentform.ui.ts
View File

@ -1,6 +1,7 @@
import { Component, OnInit, ViewChild, Input } from '@angular/core'; import { Component, OnInit, ViewChild, Input } from '@angular/core';
import { CommentService } from '../../services/comment.service'; import { CommentService } from '../../services/comment.service';
import { FormBuilder, FormGroup, Validators, NgForm } from '@angular/forms'; import { FormBuilder, FormGroup, Validators, NgForm } from '@angular/forms';
import { Output, EventEmitter } from '@angular/core';
@Component({ @Component({
selector: 'ui-commentform', selector: 'ui-commentform',
@ -11,7 +12,7 @@ export class UiCommentForm implements OnInit {
@Input() target: number; @Input() target: number;
@Input() parent: number; @Input() parent: number;
@Input() change: Function; @Output() replyCommentEvent = new EventEmitter<any>();
working: boolean = false; working: boolean = false;
form: FormGroup; form: FormGroup;
@ViewChild('formDirective') private formDirective: NgForm; @ViewChild('formDirective') private formDirective: NgForm;
@ -37,7 +38,7 @@ export class UiCommentForm implements OnInit {
this.commentService.create(comment).subscribe((data) => { this.commentService.create(comment).subscribe((data) => {
this.formDirective.resetForm(); this.formDirective.resetForm();
this.change && this.change(); this.replyCommentEvent.emit(data);
}); });
} }
} }

6
src/app/ui/comments/comments.ui.html
View File

@ -1,6 +1,10 @@
<div *ngIf="comments" fxLayout="column" fxFlexFill class="comments"> <div *ngIf="comments" fxLayout="column" fxFlexFill class="comments">
<ng-container *ngFor="let comment of comments.content; let i = index"> <ng-container *ngFor="let comment of comments.content; let i = index">
<mat-divider class="divider" *ngIf="i > 0"></mat-divider> <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> </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> </div>

8
src/app/ui/comments/comments.ui.scss
View File

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

42
src/app/ui/comments/comments.ui.ts
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'; import { CommentService } from '../../services/comment.service';
@ -23,14 +24,49 @@ export class UiComments implements OnInit {
refresh(): void { refresh(): void {
if (this.parent) { 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; this.comments = data;
}) })
} else { } else {
this.commentService.get(this.target).subscribe((data) => { this.commentService.getPages(this.target, 0, 2).subscribe((data) => {
this.comments = 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;
})
}
}
} }

8
src/app/ui/entries/entries.ui.html
View File

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