#25: add sorting and filter functionalities

src/app/features/dashboard/catalogs/add-edit-catalog-dialog/add-edit-catalog-dialog.component.html

@@ -81,7 +81,7 @@
           }
         </mat-form-field>
 
-        <mat-checkbox formControlName="selfPublish">
+        <mat-checkbox formControlName="selfPublish" color="primary">
           Self publish?
         </mat-checkbox>
       </div>

src/app/features/dashboard/catalogs/catalogs.component.html

@@ -11,19 +11,32 @@
       ></gp-breadcrumb-navigation>
     </div>
   </section>
-  <div class="add-catalog">
+  <div class="controls-container">
+    <mat-form-field>
+      <mat-label>Filter</mat-label>
+      <input
+        matInput
+        (keyup)="applyFilter($event)"
+        placeholder="Ex. Mia"
+        #input
+      />
+    </mat-form-field>
     <button mat-raised-button color="primary" (click)="onClickAddNewCatalog()">
       Add new catalog
     </button>
   </div>
-  <div class="filter">
-    <span>Filter</span>
-  </div>
   <div class="table-container">
-    <table mat-table [dataSource]="catalogs">
+    <table
+      mat-table
+      [dataSource]="dataSource"
+      matSort
+      matSortActive="name"
+      matSortDisableClear
+      matSortDirection="asc"
+    >
       <!-- Name Column -->
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef>Catalog name</th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Catalog name</th>
         <td mat-cell *matCellDef="let element">
           {{ element.name }}
         </td>
@@ -31,7 +44,7 @@
 
       <!-- Type Column -->
       <ng-container matColumnDef="type">
-        <th mat-header-cell *matHeaderCellDef>Catalog type</th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Catalog type</th>
         <td mat-cell *matCellDef="let element" class="font-weight500">
           {{ element.type }}
         </td>
@@ -39,7 +52,9 @@
 
       <!-- Published Column -->
       <ng-container matColumnDef="publisher">
-        <th mat-header-cell *matHeaderCellDef>Publisher name</th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>
+          Publisher name
+        </th>
         <td mat-cell *matCellDef="let element" class="font-weight500">
           {{ element.publisher }}
         </td>
@@ -47,7 +62,7 @@
 
       <!-- Self Pub Column -->
       <ng-container matColumnDef="selfPublish">
-        <th mat-header-cell *matHeaderCellDef>Self-PUB</th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Self-PUB</th>
         <td mat-cell *matCellDef="let element" class="font-weight500">
           {{ element.selfPublish ? "Yes" : "No" }}
         </td>
@@ -55,7 +70,7 @@
 
       <!-- Access type Column -->
       <ng-container matColumnDef="accessTypeCode">
-        <th mat-header-cell *matHeaderCellDef>Access type</th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Access type</th>
         <td mat-cell *matCellDef="let element">
           {{ element.accessTypeCode === "PB" ? "Public" : "Restricted" }}
         </td>
@@ -63,7 +78,7 @@
 
       <!-- Total models Column -->
       <ng-container matColumnDef="solutionCount">
-        <th mat-header-cell *matHeaderCellDef>Total models</th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Total models</th>
         <td mat-cell *matCellDef="let element">
           {{ element.solutionCount }}
         </td>
@@ -71,7 +86,7 @@
 
       <!-- Created date Column -->
       <ng-container matColumnDef="created">
-        <th mat-header-cell *matHeaderCellDef>Created date</th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Created date</th>
         <td mat-cell *matCellDef="let element">
           {{ element.created | date: "dd/MM/yyyy" }}
         </td>
@@ -98,15 +113,18 @@
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+      <tr class="mat-row" *matNoDataRow>
+        <td class="mat-cell" colspan="4">
+          No data matching the filter "{{ input.value }}"
+        </td>
+      </tr>
     </table>
   </div>
   <div class="pagination-container">
     <div class="pagination-text">
       <mat-paginator
-        [length]="totalItems"
-        [pageSize]="pageSize"
         [pageSizeOptions]="pageSizeOptions"
-        (page)="onPageChange($event)"
+        paginator
         aria-label="Select page"
         aria-label="Select page"
       >

src/app/features/dashboard/catalogs/catalogs.component.scss

@@ -127,11 +127,6 @@ mat-sidenav-content {
   flex-grow: 2 !important;
 }
 
-.add-catalog {
-  display: flex;
-  justify-content: flex-end;
-}
-
 .filter {
   display: flex;
   justify-content: flex-end;
@@ -158,3 +153,10 @@ mat-sidenav-content {
   cursor: not-allowed;
   background: #efefef;
 }
+
+.controls-container {
+  display: flex;
+  gap: 20px;
+  justify-content: space-between;
+  align-items: center;
+}

src/app/features/dashboard/catalogs/catalogs.component.ts

@@ -6,21 +6,21 @@ import { PrivateCatalogsService } from 'src/app/core/services/private-catalogs.s
 import { BrowserStorageService } from 'src/app/core/services/storage/browser-storage.service';
 import { Router } from '@angular/router';
 import { HeadlineComponent } from 'src/app/shared/components/headline/headline.component';
-import { MatSidenavModule } from '@angular/material/sidenav';
-import { MatTableModule } from '@angular/material/table';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import {
   MatPaginator,
   MatPaginatorIntl,
   MatPaginatorModule,
-  PageEvent,
 } from '@angular/material/paginator';
 import { Catalog } from 'src/app/shared/models';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { AddEditCatalogDialogComponent } from './add-edit-catalog-dialog/add-edit-catalog-dialog.component';
 import { MatIconModule } from '@angular/material/icon';
-import { ConfirmActionComponent } from 'src/app/shared/components/confirm-action/confirm-action.component';
 import { DeleteUserDialogConfirmationActionComponent } from 'src/app/shared/components/delete-user-dialog-confirmation-action/delete-user-dialog-confirmation-action.component';
+import { MatInputModule } from '@angular/material/input';
+import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatFormFieldModule } from '@angular/material/form-field';
 
 @Component({
   selector: 'gp-catalogs',
@@ -33,11 +33,17 @@ import { DeleteUserDialogConfirmationActionComponent } from 'src/app/shared/comp
     MatPaginatorModule,
     MatButtonModule,
     MatIconModule,
+    MatInputModule,
+    MatSortModule,
+    MatFormFieldModule,
   ],
   templateUrl: './catalogs.component.html',
   styleUrl: './catalogs.component.scss',
 })
 export class CatalogsComponent implements OnInit {
+  @ViewChild(MatSort) sort!: MatSort;
+  @ViewChild(MatPaginator) paginator!: MatPaginator;
+
   userId$: Observable<string | undefined>;
   displayedColumns: string[] = [
     'name',
@@ -51,29 +57,32 @@ export class CatalogsComponent implements OnInit {
   ];
   catalogs!: Catalog[];
   pageSizeOptions = [10, 25, 50, 100];
-  pageSize = 10;
-  pageIndex = 0;
-  totalItems = 0;
   siteInstanceName!: string;
   selectedCatalog!: Catalog;
+  dataSource = new MatTableDataSource<Catalog>([]);
 
   constructor(
     private privateCatalogsService: PrivateCatalogsService,
     private router: Router,
     private browserStorageService: BrowserStorageService,
-    private paginator: MatPaginatorIntl,
+    private paginatorInt: MatPaginatorIntl,
     public dialog: MatDialog,
   ) {
     this.userId$ = this.browserStorageService
       .getUserDetails()
       .pipe(map((details) => details?.userId));
-    paginator.itemsPerPageLabel = 'Showing';
+    paginatorInt.itemsPerPageLabel = 'Showing';
   }
   ngOnInit(): void {
     this.loadData();
     this.getInstanceName();
   }
 
+  ngAfterViewInit() {
+    this.dataSource.sort = this.sort;
+    this.dataSource.paginator = this.paginator;
+  }
+
   onHomeClick() {
     this.userId$.subscribe((userId) => {
       if (userId) {
@@ -87,11 +96,10 @@ export class CatalogsComponent implements OnInit {
   loadData() {
     this.privateCatalogsService.loadTotalCatalog().subscribe({
       next: (res) => {
-        this.totalItems = res;
-        this.privateCatalogsService.loadCatalogs(0, this.totalItems).subscribe({
+        this.privateCatalogsService.loadCatalogs(0, res).subscribe({
           next: (res) => {
             this.catalogs = res.response_body.content;
-            this.totalItems = res.response_body.totalElements;
+            this.dataSource.data = res.response_body.content;
           },
           error: (error) => {},
         });
@@ -114,12 +122,6 @@ export class CatalogsComponent implements OnInit {
     });
   }
 
-  onPageChange(event: PageEvent): void {
-    this.pageSize = event.pageSize;
-    this.pageIndex = event.pageIndex;
-    this.loadData();
-  }
-
   addNewCatalog(newCatalog: Catalog) {
     const catalog: Catalog = {
       ...newCatalog,
@@ -196,4 +198,12 @@ export class CatalogsComponent implements OnInit {
       this.loadData();
     });
   }
+
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+  }
 }