update comments
This commit is contained in:
parent
0cabe9b0a5
commit
1f427fd67e
@ -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>
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -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> </span>
|
||||
<a href="javascript:" (click)="voteDown(comment.id)" matTooltip="{{'vote.down' | i18n}}">
|
||||
<mat-icon inline="true">thumb_down</mat-icon>
|
||||
</a>
|
||||
<span> </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> </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> </span>
|
||||
<a href="javascript:" (click)="voteDown(comment.id)" matTooltip="{{'vote.down' | i18n}}">
|
||||
<mat-icon inline="true">thumb_down</mat-icon>
|
||||
</a>
|
||||
<span> </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> </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>
|
@ -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;
|
||||
}
|
@ -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) {
|
||||
|
@ -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%;
|
||||
}
|
||||
}
|
@ -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);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
@ -1,7 +1,7 @@
|
||||
.comments {
|
||||
padding-left: 15px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: 10px 0px;
|
||||
}
|
||||
.comments > small {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
@ -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;
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -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>
|
Loading…
Reference in New Issue
Block a user