Merge branch 'fix-toggle-icons' into 'master'

Fix toggle icons

See merge request swtp-2019/arsnova-lite!21

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

@@ -59,25 +59,19 @@ export class CommentListComponent implements OnInit {
       c.creationTimestamp = payload.timestamp;
       this.comments = this.comments.concat(c);
     } else if (msg.type === 'CommentPatched') {
-      const c = this.comments.find((comment: Comment) => comment.id === payload.id);
-      if (c) {
-        const index = this.comments.indexOf(c);
-        console.log(index);
-        const newList = this.comments.slice(0);
-        const changes = payload.changes;
-        // ToDo: there must be a better way to update the model
-        for (const change of changes) {
-          console.log(change);
-          if (change.read) {
-            c.read = change.read;
-          } else if (change.favorite) {
-            c.favorite = change.favorite;
-          } else if (change.correct) {
-            c.correct = change.correct;
+        for (let i = 0; i < this.comments.length; i++) {
+          if (payload.id === this.comments[i].id) {
+            for (const [key, value] of Object.entries(payload.changes)) {
+              switch (key) {
+                case 'read':       this.comments[i].read = <boolean>value;
+                                   break;
+                case 'correct' :   this.comments[i].correct = <boolean>value;
+                                   break;
+                case 'favorite' :  this.comments[i].favorite = <boolean>value;
+                                   break;
+              }
+            }
           }
-        }
-        newList[index] = c;
-        this.comments = newList;
       }
     }
   }

src/app/components/shared/comment/comment.component.html

 <mat-card class="card-container">
   <div fxLayout="row" fxLayoutAlign="center center">
-    <mat-card-title>{{comment.subject}}</mat-card-title>
+    <mat-card-content>
+      <p>{{comment.body}}</p>
+    </mat-card-content>
     <span class="fill-remaining-space"></span>
     <button mat-icon-button [disabled]="isCreator" (click)="setCorrect(comment)" [matTooltip]="comment.correct ? 'Unmark as correct' : 'Mark as correct'">
       <mat-icon [ngClass]="{'correct-icon' : comment.correct === true}">check_circle</mat-icon>
@@ -12,8 +14,4 @@
       <mat-icon [ngClass]="{'read-icon' : comment.read === true}">visibility</mat-icon>
     </button>
   </div>
-  <mat-divider></mat-divider>
-  <mat-card-content>
-    <p>{{comment.body}}</p>
-  </mat-card-content>
 </mat-card>

src/app/components/shared/comment/comment.component.ts

@@ -38,17 +38,14 @@ export class CommentComponent implements OnInit {
 
   setRead(comment: Comment): void {
     this.comment = this.wsCommentService.toggleRead(comment);
-    // this.commentService.updateComment(comment).subscribe();
   }
 
   setCorrect(comment: Comment): void {
     this.comment = this.wsCommentService.toggleCorrect(comment);
-    // this.commentService.updateComment(comment).subscribe();
   }
 
   setFavorite(comment: Comment): void {
     this.comment = this.wsCommentService.toggleFavorite(comment);
-    // this.commentService.updateComment(comment).subscribe();
   }
 
   delete(comment: Comment): void {