Merge pull request #1937 from DSD-DBS/filter-trainings

feat: Add the ability to filter trainings in project view
DSD-DBS · Oct 31, 2024 · a46a5cb · a46a5cb
2 parents 3727209 + 8c3b9c3
commit a46a5cb
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 17 deletions.
diff --git a/frontend/src/app/projects/project-overview/project-overview.component.html b/frontend/src/app/projects/project-overview/project-overview.component.html
@@ -3,17 +3,24 @@
  ~ SPDX-License-Identifier: Apache-2.0
  -->
 
-<mat-form-field id="search" appearance="outline" class="w-full">
-  <mat-label>Search</mat-label>
-  <input
-    autocomplete="off"
-    matInput
-    placeholder="Project Name"
-    type="text"
-    [formControl]="searchControl"
-  />
-  <mat-icon matSuffix>search</mat-icon>
-</mat-form-field>
+<form class="pb-4" [formGroup]="form">
+  <mat-form-field id="search" appearance="outline" class="w-full">
+    <mat-label>Search</mat-label>
+    <input
+      autocomplete="off"
+      matInput
+      placeholder="Project Name"
+      type="text"
+      formControlName="search"
+    />
+    <mat-icon matSuffix>search</mat-icon>
+  </mat-form-field>
+
+  <mat-chip-listbox class="-mt-2" formControlName="projectType">
+    <mat-chip-option value="general">Projects</mat-chip-option>
+    <mat-chip-option value="training">Trainings</mat-chip-option>
+  </mat-chip-listbox>
+</form>
 
 <div class="flex flex-wrap gap-5">
   <a routerLink="/projects/create" class="w-full sm:w-fit">

diff --git a/frontend/src/app/projects/project-overview/project-overview.component.ts b/frontend/src/app/projects/project-overview/project-overview.component.ts
@@ -4,7 +4,13 @@
  */
 import { NgClass, AsyncPipe } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
-import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import {
+  FormControl,
+  FormGroup,
+  FormsModule,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { MatChipsModule } from '@angular/material/chips';
 import { MatRipple } from '@angular/material/core';
 import {
   MatFormField,
@@ -38,17 +44,34 @@ import { ProjectWrapperService } from '../service/project.service';
     MatSuffix,
     ReactiveFormsModule,
     FormsModule,
+    MatChipsModule,
   ],
 })
 export class ProjectOverviewComponent implements OnInit {
-  searchControl = new FormControl('');
-  public readonly filteredProjects$ = this.searchControl.valueChanges.pipe(
-    startWith(''),
-    switchMap((query) => this.searchAndSortProjects(query!)),
+  form = new FormGroup({
+    search: new FormControl<string>(''),
+    projectType: new FormControl<string | null>(null),
+  });
+  public readonly filteredProjects$ = this.form.valueChanges.pipe(
+    startWith(this.form.value),
+    switchMap((query) =>
+      this.searchAndSortProjects(
+        query.search!,
+        query?.projectType ?? undefined,
+      ),
+    ),
   );
 
-  searchAndSortProjects(query: string) {
+  searchAndSortProjects(query: string, projectType?: string) {
     return this.projectService.projects$.pipe(
+      map((projects) =>
+        projects?.filter((project) => {
+          if (projectType) {
+            return project.type === projectType;
+          }
+          return true;
+        }),
+      ),
       map((projects) =>
         projects?.filter((project) =>
           project.name.toLocaleLowerCase().includes(query.toLocaleLowerCase()),