From c5dbf6106cca210e1a619b562edbbb7b4aa92804 Mon Sep 17 00:00:00 2001
From: kaw67872 <kawtar.laariche@iais.fraunhofer.de>
Date: Fri, 2 Aug 2024 09:53:07 +0200
Subject: [PATCH] #25: add sorting and filter functionalities
---
.../add-edit-catalog-dialog.component.html | 2 +-
.../catalogs/catalogs.component.html | 48 +++++++++++++------
.../catalogs/catalogs.component.scss | 12 +++--
.../dashboard/catalogs/catalogs.component.ts | 46 +++++++++++-------
4 files changed, 69 insertions(+), 39 deletions(-)
diff --git a/src/app/features/dashboard/catalogs/add-edit-catalog-dialog/add-edit-catalog-dialog.component.html b/src/app/features/dashboard/catalogs/add-edit-catalog-dialog/add-edit-catalog-dialog.component.html
index cdd49c4..eeb2c48 100644
--- a/src/app/features/dashboard/catalogs/add-edit-catalog-dialog/add-edit-catalog-dialog.component.html
+++ b/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>
diff --git a/src/app/features/dashboard/catalogs/catalogs.component.html b/src/app/features/dashboard/catalogs/catalogs.component.html
index 5842056..1a3cfdc 100644
--- a/src/app/features/dashboard/catalogs/catalogs.component.html
+++ b/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"
>
diff --git a/src/app/features/dashboard/catalogs/catalogs.component.scss b/src/app/features/dashboard/catalogs/catalogs.component.scss
index 21ce949..f893baa 100644
--- a/src/app/features/dashboard/catalogs/catalogs.component.scss
+++ b/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;
+}
diff --git a/src/app/features/dashboard/catalogs/catalogs.component.ts b/src/app/features/dashboard/catalogs/catalogs.component.ts
index 6a3e6cc..ac3d27d 100644
--- a/src/app/features/dashboard/catalogs/catalogs.component.ts
+++ b/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();
+ }
+ }
}
--
GitLab