fix filter bug, adjust style

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

@@ -264,7 +264,8 @@
 <app-mat-spinner-overlay *ngIf="isLoading" overlay="true"></app-mat-spinner-overlay>
 
 <div *ngIf="!isLoading">
-  <app-comment *ngFor="let current of (hideCommentsList ? filteredComments : commentsFilteredByTime).slice(page*5,(page*5)+5); let i = index"
+  <app-comment *ngFor="let current of (hideCommentsList ?
+  filteredComments : commentsFilteredByTime).slice(pageIndex*pageSize,(pageIndex*pageSize)+pageSize); let i = index"
                [appScrollIntoView]="current.id === focusCommentId"
                [usesJoyride]="i === 0 && isJoyrideActive"
                [comment]="current"
@@ -279,7 +280,13 @@
                (clickedOnKeyword)="clickedOnKeyword($event)"
                (votedComment)="votedComment($event)">
   </app-comment>
-  <mat-paginator [pageSize]="5" (page)="setPage($event)"
+  <mat-paginator class="mat-paginator"
+                 [pageSize]="5"
+                 (page)="handlePageEvent($event)"
+                 [showFirstLastButtons]="showFirstLastButtons"
+                 [pageSizeOptions]="pageSizeOptions"
+                 [pageIndex]="pageIndex"
+                 [color]="'primary'"
                  [length]="(hideCommentsList ? filteredComments : commentsFilteredByTime).length"></mat-paginator>
   <ars-row [height]="64">
   </ars-row>

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

@@ -275,3 +275,8 @@ h3 {
 h1 {
   color: red;
 }
+
+.mat-paginator{
+  background-color:transparent;
+  color:var(--on-background);
+}

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

@@ -33,6 +33,7 @@ import { WsRoomService } from '../../../services/websockets/ws-room.service';
 import { ActiveUserService } from '../../../services/http/active-user.service';
 import { OnboardingService } from '../../../services/util/onboarding.service';
 import { WorkerDialogComponent } from '../_dialogs/worker-dialog/worker-dialog.component';
+import { PageEvent } from '@angular/material/paginator';
 
 export interface CommentListData {
   currentFilter: CommentFilter;
@@ -109,7 +110,10 @@ export class CommentListComponent implements OnInit, OnDestroy {
   private _subscriptionEventServiceTagConfig = null;
   private _subscriptionEventServiceRoomData = null;
   private _subscriptionRoomService = null;
-  page=0;
+  pageIndex = 0;
+  pageSize = 10;
+  pageSizeOptions = [5, 10, 25];
+  showFirstLastButtons = true;
 
   constructor(
     private commentService: CommentService,
@@ -142,8 +146,9 @@ export class CommentListComponent implements OnInit, OnDestroy {
     });
   }
 
-  setPage(e:any){
-    this.page=e.pageIndex;
+  handlePageEvent(e:PageEvent){
+    this.pageIndex = e.pageIndex;
+    this.pageSize = e.pageSize;
   }
 
   initNavigation() {
@@ -369,6 +374,7 @@ export class CommentListComponent implements OnInit, OnDestroy {
   }
 
   filterComments(type: string, compare?: any): void {
+    this.pageIndex=0;
     this.currentFilter = type;
     this.currentFilterCompare = compare;
     if (type === '') {