update comments

src/app/pages/entry/entry.page.html

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

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

src/app/ui/comment/comment.ui.html

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

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

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 '<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) {

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

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

src/app/ui/comments/comments.ui.html

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

src/app/ui/comments/comments.ui.scss

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

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

src/app/ui/entries/entries.ui.html

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