SWTP Comment Project

This MR introduces the new comment feature with voting.

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

@@ -7,7 +7,7 @@
   <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>
@@ -16,39 +16,42 @@
     <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>
+  <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 id="outer-card" *ngIf="!hideCommentsList">
+<mat-card *ngIf="!hideCommentsList">
   <app-comment *ngFor="let current of comments | orderBy: 'timestamp'" [comment]="current"> </app-comment>
 </mat-card>