Merge branch 'refactor-comment-list' into 'master'

Refactor comment list

Closes #253

See merge request arsnova/arsnova-lite!207

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

-<div fxLayout="row" id="search-container" *ngIf="!isLoading">
+<div fxLayout="row" id="search-container">
   <mat-label fxLayoutAlign="center center">
     <mat-icon class="search-icon">search</mat-icon>
   </mat-label>
@@ -29,45 +29,47 @@
   </div>
 
   <mat-menu #sortMenu="matMenu" xPosition="before">
-      <button mat-icon-button (focus)="hideCommentsList=false" (click)="sort(votedesc)">
+      <button mat-icon-button (focus)="hideCommentsList=false" (click)="sortComments(votedesc)">
         <mat-icon>arrow_upwards</mat-icon>
       </button>
 
-      <button mat-icon-button (focus)="hideCommentsList=false" (click)="sort(voteasc)">
+      <button mat-icon-button (focus)="hideCommentsList=false" (click)="sortComments(voteasc)">
         <mat-icon>arrow_downwards</mat-icon>
       </button>
 
-      <button mat-icon-button (focus)="hideCommentsList=false" (click)="sort(currentSort === timedesc ? timeasc : timedesc)">
+      <button mat-icon-button (focus)="hideCommentsList=false" (click)="sortComments(currentSort === timedesc ? timeasc : timedesc)">
         <mat-icon>access_time</mat-icon>
       </button>
   </mat-menu>
 
   <mat-menu #filterMenu="matMenu" xPosition="before">
     <div>
-      <button mat-icon-button (focus)="hideCommentsList=true" (click)="filter(correct)">
+      <button mat-icon-button (focus)="hideCommentsList=true" (click)="filterComments(correct)">
         <mat-icon [ngClass]="{correct: 'correct-icon'}[currentFilter]">check_circle</mat-icon>
       </button>
 
-      <button mat-icon-button (focus)="hideCommentsList=true" (click)="filter(favorite)">
+      <button mat-icon-button (focus)="hideCommentsList=true" (click)="filterComments(favorite)">
         <mat-icon [ngClass]="{favorite: 'favorite-icon'}[currentFilter]">favorite</mat-icon>
       </button>
 
-      <button mat-icon-button (focus)="hideCommentsList=true" (click)="filter(read)">
+      <button mat-icon-button (focus)="hideCommentsList=true" (click)="filterComments(read)">
         <mat-icon [ngClass]="{read: 'read-icon'}[currentFilter]">visibility</mat-icon>
       </button>
 
-      <button mat-icon-button (focus)="hideCommentsList=true" (click)="filter(unread)">
+      <button mat-icon-button (focus)="hideCommentsList=true" (click)="filterComments(unread)">
         <mat-icon [ngClass]="{unread: 'unread-icon'}[currentFilter]">visibility_off</mat-icon>
       </button>
 
-      <button mat-icon-button (focus)="hideCommentsList=false" (click)="sort(currentSort)">
+      <button mat-icon-button (focus)="hideCommentsList=false" (click)="sortComments(currentSort)">
         <mat-icon>close</mat-icon>
       </button>
     </div>
   </mat-menu>
 </div>
 
-<app-comment *ngFor="let current of showComments()" [comment]="current" [parseVote]="getVote(current)"></app-comment>
+<div *ngIf="!isLoading">
+<app-comment *ngFor="let current of hideCommentsList ? filteredComments : comments" [comment]="current" [parseVote]="getVote(current)"></app-comment>
+</div>
 
 <div *ngIf="comments.length < 1" fxLayout="row" fxLayoutAlign="center center" class="no-comments">
   <h4>{{ 'comment-page.no-comments' | translate }}</h4>

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

@@ -10,7 +10,6 @@ import { WsCommentServiceService } from '../../../services/websockets/ws-comment
 import { User } from '../../../models/user';
 import { Vote } from '../../../models/vote';
 import { UserRole } from '../../../models/user-roles.enum';
-import { AuthenticationService } from '../../../services/http/authentication.service';
 import { Room } from '../../../models/room';
 import { RoomService } from '../../../services/http/room.service';
 import { VoteService } from '../../../services/http/vote.service';
@@ -23,7 +22,7 @@ import { VoteService } from '../../../services/http/vote.service';
 export class CommentListComponent implements OnInit {
   @Input() user: User;
   @Input() roomId: string;
-  @Input() comments: Comment[];
+  comments: Comment[];
   room: Room;
   hideCommentsList = false;
   filteredComments: Comment[];
@@ -46,7 +45,6 @@ export class CommentListComponent implements OnInit {
               private translateService: TranslateService,
               public dialog: MatDialog,
               protected langService: LanguageService,
-              private authenticationService: AuthenticationService,
               private wsCommentService: WsCommentServiceService,
               protected roomService: RoomService,
               protected voteService: VoteService
@@ -56,20 +54,27 @@ export class CommentListComponent implements OnInit {
 
   ngOnInit() {
     this.roomId = localStorage.getItem(`roomId`);
-    const userId = this.authenticationService.getUser().id;
-    this.voteService.getByRoomIdAndUserID(this.roomId, userId).subscribe(votes => {
-      for (const v of votes) {
-        this.commentVoteMap.set(v.commentId, v);
-      }
-    });
+    const userId = this.user.id;
+    this.userRole = this.user.role;
     this.roomService.getRoom(this.roomId).subscribe( room => this.room = room);
     this.hideCommentsList = false;
     this.wsCommentService.getCommentStream(this.roomId).subscribe((message: Message) => {
       this.parseIncomingMessage(message);
     });
     this.translateService.use(localStorage.getItem('currentLang'));
-    this.userRole = this.authenticationService.getRole();
     this.deviceType = localStorage.getItem('deviceType');
+    if (this.userRole === 0) {
+      this.voteService.getByRoomIdAndUserID(this.roomId, userId).subscribe(votes => {
+        for (const v of votes) {
+          this.commentVoteMap.set(v.commentId, v);
+        }
+      });
+    }
+    this.commentService.getComments(this.roomId)
+      .subscribe(comments => {
+        this.comments = comments;
+        this.getComments();
+      });
   }
 
   searchComments(term: string): void {
@@ -81,29 +86,24 @@ export class CommentListComponent implements OnInit {
     }
   }
 
-  showComments(): Comment[] {
+  getComments(): void {
     this.isLoading = false;
     let commentThreshold = -10;
     if (this.room.extensions && this.room.extensions['comments']) {
       commentThreshold = this.room.extensions['comments'].commentThreshold;
       if (this.hideCommentsList) {
-        return this.filteredComments.filter( x => x.score >= commentThreshold );
-      } else {
-        this.sort(this.currentSort);
-        return this.comments.filter( x => x.score >= commentThreshold );
-      }
-    } else {
-      if (this.hideCommentsList) {
-        return this.filteredComments;
+        this.filteredComments = this.filteredComments.filter( x => x.score >= commentThreshold );
       } else {
-        this.sort(this.currentSort);
-        return this.comments;
+        this.comments = this.comments.filter( x => x.score >= commentThreshold );
       }
     }
+    this.sortComments(this.currentSort);
   }
 
   getVote(comment: Comment): Vote {
-    return this.commentVoteMap.get(comment.id);
+    if (this.userRole === 0) {
+      return this.commentVoteMap.get(comment.id);
+    }
   }
 
   parseIncomingMessage(message: Message) {
@@ -157,7 +157,8 @@ export class CommentListComponent implements OnInit {
         }
         break;
     }
-    this.filter(this.currentFilter);
+    this.filterComments(this.currentFilter);
+    this.sortComments(this.currentSort);
   }
 
   openCreateDialog(): void {
@@ -180,64 +181,29 @@ export class CommentListComponent implements OnInit {
     this.wsCommentService.add(comment);
   }
 
-  filterFavorite(): void {
-    this.filteredComments = this.comments.filter(c => c.favorite);
-  }
-
-  filterRead(): void {
-    this.filteredComments = this.comments.filter(c => c.read);
-  }
-
-  filterUnread(): void {
-    this.filteredComments = this.comments.filter(c => !c.read);
-  }
-
-  filterCorrect(): void {
-    this.filteredComments = this.comments.filter(c => c.correct);
-  }
-
-  filter(type: string): void {
+  filterComments(type: string): void {
     this.currentFilter = type;
-    switch (type) {
-      case this.correct:
-        this.filterCorrect();
-        break;
-      case this.favorite:
-        this.filterFavorite();
-        break;
-      case this.read:
-        this.filterRead();
-        break;
-      case this.unread:
-        this.filterUnread();
-    }
-  }
-
-  sort(type: string): void {
-    this.currentSort = type;
-    if (type === this.voteasc) {
-      this.sortVote();
-    } else if (type === this.votedesc) {
-      this.sortVoteDesc();
-    } else {
-      this.sortTime(type);
-    }
-  }
-
-  sortVote(): void {
-    this.comments.sort((a, b) => {
-      return a.score - b.score;
-    });
-  }
-
-  sortVoteDesc(): void {
-    this.comments.sort((a, b) => {
-      return b.score - a.score;
+    this.filteredComments = this.comments.filter(c => {
+      switch (type) {
+        case this.correct:
+          return c.correct;
+        case this.favorite:
+          return c.favorite;
+        case this.read:
+          return c.read;
+        case this.unread:
+          return !c.read;
+      }
     });
   }
 
-  sortTime(type: string): void {
+  sortComments(type: string): void {
     this.comments.sort((a, b) => {
+      if (type === this.voteasc) {
+        return a.score - b.score;
+      } else if (type === this.votedesc) {
+        return b.score - a.score;
+      }
       const dateA = new Date(a.timestamp), dateB = new Date(b.timestamp);
       if (type === this.timedesc) {
         return +dateA - +dateB;
@@ -245,5 +211,6 @@ export class CommentListComponent implements OnInit {
         return +dateB - +dateA;
       }
     });
+    this.currentSort = type;
   }
 }

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

-<div *ngIf="isLoading" fxLayout="column" fxLayoutAlign="center" fxFill>
-  <div fxLayout="row" fxLayoutAlign="center">
-    <mat-progress-spinner color="primary" mode="indeterminate"></mat-progress-spinner>
-  </div>
-</div>
-
 <div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px">
   <div fxLayout="row" fxLayoutAlign="center">
-    <app-comment-list [user]="user" [roomId]="roomId" [comments]="comments"></app-comment-list>
+    <app-comment-list [user]="user" [roomId]="roomId" comments></app-comment-list>
   </div>
 </div>
 

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

@@ -3,8 +3,6 @@ import { ActivatedRoute } from '@angular/router';
 import { User } from '../../../models/user';
 import { NotificationService } from '../../../services/util/notification.service';
 import { AuthenticationService } from '../../../services/http/authentication.service';
-import { CommentService } from '../../../services/http/comment.service';
-import { Comment } from '../../../models/comment';
 
 @Component({
   selector: 'app-comment-page',
@@ -14,25 +12,14 @@ import { Comment } from '../../../models/comment';
 export class CommentPageComponent implements OnInit {
   roomId: string;
   user: User;
-  isLoading = true;
-  comments: Comment[];
 
   constructor(private route: ActivatedRoute,
               private notification: NotificationService,
-              private authenticationService: AuthenticationService,
-              private commentService: CommentService) { }
+              private authenticationService: AuthenticationService) { }
 
   ngOnInit(): void {
     this.roomId = localStorage.getItem('roomId');
     this.user = this.authenticationService.getUser();
-    this.getComments();
   }
 
-  getComments(): void {
-    this.commentService.getComments(this.roomId)
-      .subscribe(comments => {
-        this.comments = comments;
-        this.isLoading = false;
-      });
-  }
 }

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

@@ -13,15 +13,15 @@
       </div>
       <button mat-icon-button [disabled]="isStudent" (click)="setCorrect(comment)"
               matTooltip="{{ 'comment-page.correct' | translate }}">
-        <mat-icon [ngClass]="{true : 'correct-icon', false: 'not-marked'}[comment.correct]">check_circle</mat-icon>
+        <mat-icon [ngClass]="{'correct-icon' : comment.correct, 'not-marked' : !comment.correct}">check_circle</mat-icon>
       </button>
       <button mat-icon-button [disabled]="isStudent" (click)="setFavorite(comment)"
               matTooltip="{{ 'comment-page.favorite' | translate }}">
-        <mat-icon [ngClass]="{true: 'favorite-icon', false: 'not-marked'}[comment.favorite]">favorite</mat-icon>
+        <mat-icon [ngClass]="{'favorite-icon' : comment.favorite, 'not-marked' : !comment.favorite}">favorite</mat-icon>
       </button>
       <button mat-icon-button [disabled]="isStudent" (click)="setRead(comment)"
               matTooltip="{{ 'comment-page.read' | translate }}">
-        <mat-icon class="icon" [ngClass]="{'read-icon': comment.read, 'not-marked' : !comment.read}">visibility
+        <mat-icon [ngClass]="{'read-icon': comment.read, 'not-marked' : !comment.read}">visibility
         </mat-icon>
       </button>
     </div>

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

@@ -41,7 +41,6 @@ export const rubberBand = [
 export class CommentComponent implements OnInit {
   @Input() comment: Comment;
   isStudent = false;
-  isLoading = true;
   hasVoted = 0;
   language: string;
   animationState: string;
@@ -77,7 +76,9 @@ export class CommentComponent implements OnInit {
 
   @Input()
   set parseVote(vote: Vote) {
-    this.hasVoted = vote.vote;
+    if (this.isStudent) {
+      this.hasVoted = vote.vote;
+    }
   }
 
   resetAnimationState(): void {