Merge branch 'filterCommentList' into 'master'

Filter comment list

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

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

@@ -4,20 +4,54 @@
   </mat-label>
   <input #searchBox placeholder="{{ 'comment-list-page.search-box-placeholder-text' | translate }}"
     (input)="searchComments(searchBox.value)">
-  <button mat-button *ngIf="searchBox.value" (click)="hideCommentsList=false; searchBox.value=''">
+  <button mat-button *ngIf="searchBox.value || isIconHide" (click)="hideCommentsList=false; searchBox.value=''; isIconHide=false">
     <mat-icon>close</mat-icon>
   </button>
-  <button mat-button *ngIf="!searchBox.value && userRole == '1' && comments.length > 0"
+  <button mat-button *ngIf="!searchBox.value && userRole === '1' && comments.length > 0"
     [matTooltip]="'Export comments'" (click)="export(true)">
     <mat-icon class="add-icon" id="export-icon">cloud_download</mat-icon>
   </button>
-  <button mat-button *ngIf="!searchBox.value" color="accent" (click)="openSubmitDialog()">
+
+  <button mat-button *ngIf="!searchBox.value && !isIconHide" color="accent" (click)="openSubmitDialog()">
     <mat-icon class="add-icon">add_circle</mat-icon>
   </button>
+
+  <mat-icon mat-icon-button *ngIf="!searchBox.value" class="add-filterIcon" color="accent" [matMenuTriggerFor]="filterMenu">
+    filter_list
+  </mat-icon>
+
+  <mat-menu #filterMenu="matMenu" xPosition="before">
+    <div id="filterIcon">
+      <button mat-icon-button (focus)="hideCommentsList=true" (click)="filterMarkAsCorrect(); isIconHide=true">
+        <mat-icon>check_circle</mat-icon>
+      </button>
+
+      <button mat-icon-button (focus)="hideCommentsList=true" (click)="filterFavorite(); isIconHide=true">
+        <mat-icon>star</mat-icon>
+      </button>
+
+      <button mat-icon-button (focus)="hideCommentsList=true" (click)="filterMarkAsRead(); isIconHide=true">
+        <mat-icon>visibility</mat-icon>
+      </button>
+
+      <button mat-icon-button (focus)="hideCommentsList=false" (click)="sortVoteDesc()">
+        <mat-icon>keyboard_arrow_up</mat-icon>
+      </button>
+
+      <button mat-icon-button (focus)="hideCommentsList=false" (click)="sortVote()">
+        <mat-icon>keyboard_arrow_down</mat-icon>
+      </button>
+
+      <button mat-icon-button (focus)="hideCommentsList=false" (click)="sortTimeStamp()">
+        <mat-icon>remove</mat-icon>
+      </button>
+    </div>
+  </mat-menu>
 </div>
+
 <mat-card id="outer-card" *ngIf="hideCommentsList">
   <app-comment *ngFor="let current of filteredComments" [comment]="current"> </app-comment>
 </mat-card>
 <mat-card *ngIf="!hideCommentsList">
-  <app-comment *ngFor="let current of comments | orderBy: 'score'" [comment]="current"> </app-comment>
+  <app-comment *ngFor="let current of comments | orderBy: 'timestamp'" [comment]="current"> </app-comment>
 </mat-card>

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

@@ -46,3 +46,17 @@ input {
 #export-icon {
   color: rgba(30,136,229,0.7)
 }
+
+.add-filterIcon {
+  font-size: 45px;
+  height: 50px;
+  width: 50px;
+  line-height: 100%!important;
+  padding-right: 15px;
+  padding-top: 8px;
+}
+
+.mat-form-field {
+  float: left;
+  padding-left: 10px;
+}

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

@@ -22,6 +22,7 @@ export class CommentListComponent implements OnInit {
   comments: Comment[];
   isLoading = true;
   hideCommentsList: boolean;
+  isIconHide: boolean;
   filteredComments: Comment[];
   userRole: UserRole;
 
@@ -123,4 +124,35 @@ export class CommentListComponent implements OnInit {
   export(clicked: boolean): void {
     this.commentService.exportButtonClicked(clicked);
   }
+
+  filterFavorite(): void {
+    this.filteredComments = this.comments.filter(c => c.favorite);
+  }
+
+  filterMarkAsRead(): void {
+    this.filteredComments = this.comments.filter(c => c.read);
+  }
+
+  filterMarkAsCorrect(): void {
+    this.filteredComments = this.comments.filter(c => c.correct);
+  }
+
+  sortVote(): void {
+    this.comments.sort((a, b) => {
+        return a.score - b.score;
+    });
+  }
+
+  sortVoteDesc(): void {
+    this.comments.sort((a, b) => {
+        return b.score - a.score;
+    });
+  }
+
+  sortTimeStamp(): void {
+    this.comments.sort((a, b) => {
+      const dateA = new Date(a.timestamp), dateB = new Date(b.timestamp);
+      return +dateB - +dateA;
+    });
+  }
 }

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

@@ -82,3 +82,9 @@ h2 {
   opacity: 0.4;
   position: absolute;
 }
+
+.date {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+}