Add menu for filter comments

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

@@ -4,20 +4,51 @@
   </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"
     [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 *ngIf="!searchBox.value" class="add-filterIcon" color="accent" mat-button [mat-menu-trigger-for]="menu">filter_list</mat-icon>
+    <mat-menu #menu="matMenu" xPosition="before">
+      <div id="filterIcon">
+        <button mat-icon-button (focus)="hideCommentsList=true" (click)="filterMarkAsCorrect(); isIconHide=true" value="over">
+          <mat-icon>check_circle</mat-icon>
+        </button>
+
+        <button mat-icon-button (focus)="hideCommentsList=true" (click)="filterFavorite(); isIconHide=true" value="over">
+          <mat-icon>star</mat-icon>
+        </button>
+
+        <button mat-icon-button (focus)="hideCommentsList=true" (click)="filterMarkAsRead(); isIconHide=true" value="over">
+          <mat-icon>visibility</mat-icon>
+        </button>
+
+        <button mat-icon-button (focus)="hideCommentsList=false; isSortDesc=false" (click)="sortDesc()" value="over">
+          <mat-icon>keyboard_arrow_up</mat-icon>
+        </button>
+
+        <button mat-icon-button (focus)="hideCommentsList=false; isSortDesc=true" (click)="sort()" value="over">
+          <mat-icon>keyboard_arrow_down</mat-icon>
+        </button>
+
+        <button mat-icon-button (focus)="hideCommentsList=false; isSortByTime=false" (click)="sortTimeStamp()" value="over">
+          <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>
+<mat-card id="outer-card" *ngIf="!hideCommentsList">
+  <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,8 +22,11 @@ export class CommentListComponent implements OnInit {
   comments: Comment[];
   isLoading = true;
   hideCommentsList: boolean;
+  isIconHide: boolean;
   filteredComments: Comment[];
   userRole: UserRole;
+  isSortDesc: boolean;
+  isSortByTime: boolean;
 
   constructor(private commentService: CommentService,
     private translateService: TranslateService,
@@ -123,4 +126,40 @@ 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);
+  }
+
+  sort(): void {
+    this.comments.sort((a, b) => {
+     if (a.score > b.score) {
+        return a.score - b.score;
+      }
+    });
+  }
+
+  sortDesc(): void {
+    this.comments.sort((a, b) => {
+      if (a.score < b.score) {
+        return b.score - a.score;
+      }
+    });
+  }
+
+  sortTimeStamp(): void {
+    this.comments.sort((a, b) => {
+      if (a.timestamp > b.timestamp) {
+        return 1;
+      }
+    });
+  }
 }

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