Merge branch '83-see-read-comments' into 'master'

Resolve "See read comments"

Closes #83

See merge request swtp-block-ws17/arsnova-angular-frontend!72

src/app/comment-list/comment-list.component.html

-<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="10">
-  <div *ngFor="let comment of comments">
-    <mat-card>
-      <mat-card-content>
-        <div class="comment-body">
-          <h3>{{comment.subject}}</h3><br>
+<div fxLayout="row" fxLayoutAlign="center">
+  <div fxLayout="column" fxLayoutGap="20px">
+      <div *ngFor="let comment of comments">
+        <mat-card>
+          <mat-card-content>
+            <h3>{{comment.subject}}</h3>
 
-          {{comment.body}}
+            {{comment.body}}
 
-          <div class="trash-icon">
-            <i class="material-icons" (click)="delete(comment)">delete</i>
-          </div>
-        </div>
-      </mat-card-content>
-      <mat-card-footer>
-        <div class="date">
-          <i> Submitted on {{comment.creationTimestamp | date:'dd-MM-yyyy HH:mm:ss' : format}} </i>
-        </div>
-      </mat-card-footer>
-    </mat-card><br>
+            <div class="body-buttons" fxLayout="Column" fxLayoutGap="5px" fxLayoutAlign="end">
+              <button *ngIf="!comment.read" mat-fab color="warn" matTooltip="Is not read" (click)="setRead(comment)">
+                <mat-icon>clear</mat-icon>
+              </button>
+              <button *ngIf="comment.read" mat-fab color="primary" matTooltip="Is read" (click)="setRead(comment)">
+                <mat-icon>check</mat-icon>
+              </button>
+              <button class="trash-icon" mat-fab color="primary" matTooltip="Delete" (click)="delete(comment)">
+                <mat-icon>delete</mat-icon>
+              </button>
+            </div>
+          </mat-card-content>
+          <mat-card-footer>
+            <div class="date">
+              <i> Submitted on {{comment.creationTimestamp | date:'dd-MM-yyyy HH:mm:ss' : format}} </i>
+            </div>
+          </mat-card-footer>
+        </mat-card><br>
+      </div>
+
+    <button class="back-button" mat-raised-button color="primary" (click)="goBack()">Back</button>
   </div>
 </div>
-
-<button mat-raised-button color="primary" (click)="goBack()">Back</button>

src/app/comment-list/comment-list.component.scss

-.trash-icon {
+mat-card {
+  min-width: 800px;
+  justify-content: center;
+}
+
+mat-card-content {
+  min-height: 100px;
+}
+
+mat-card:hover {
+  box-shadow: 0 6px 6px 6px rgba(0,0,0,.2), 0 6px 6px 0 rgba(0,0,0,.14), 0 6px 6px 0 rgba(0,0,0,.12) !important;
+  transition: background .4s cubic-bezier(.25,.8,.25,1),box-shadow 300ms cubic-bezier(.3,0,.2,1);
+}
+
+.trash-icon:hover {
+  background: #F44336;
+}
+
+.back-button {
+  min-width: 800px;
+}
+
+.body-buttons {
   position: absolute;
-  top: 50%;
-  left: 98%;
+  top: 10%;
+  left: 92%;
 }
 
 .date {
   text-align: right;
   font-size: 80%;
   margin-right: 10px;
+  margin-bottom: 3px;
 }

src/app/comment-list/comment-list.component.ts

-import { Component, Input, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Location } from '@angular/common';
 import { Comment } from '../comment';
-import { CommentService} from '../comment.service';
+import { CommentService } from '../comment.service';
 import { RoomService } from '../room.service';
 import { NotificationService } from '../notification.service';
 
@@ -30,15 +30,20 @@ export class CommentListComponent implements OnInit {
   getRoom(id: string): void {
     this.roomService.getRoom(id).subscribe(
       params => {
-        this.getComments(params['id'], params['name']);
+        this.getComments(params['id']);
       });
   }
 
-  getComments(roomId: string, roomName: string): void {
+  getComments(roomId: string): void {
     this.commentService.getComments(roomId)
       .subscribe(comments => this.comments = comments);
   }
 
+  setRead(comment: Comment): void {
+    this.comments.find( c => c.id === comment.id).read = !comment.read;
+    this.commentService.updateComment(comment).subscribe();
+  }
+
   delete(comment: Comment): void {
     this.comments = this.comments.filter(c => c !== comment);
     this.commentService.deleteComment(comment).subscribe(room => {

src/app/comment.service.ts

@@ -39,4 +39,11 @@ export class CommentService extends ErrorHandlingService {
       catchError(this.handleError<Comment[]>('getComments', []))
     );
   }
+
+  updateComment(comment: Comment): Observable<any> {
+    return this.http.put(this.commentsUrl, comment, httpOptions).pipe(
+      tap(_ => ''),
+      catchError(this.handleError<any>('updateComment'))
+    );
+  }
 }