diff --git a/frontend/src/app/projects/project-overview/project-overview.component.html b/frontend/src/app/projects/project-overview/project-overview.component.html index 4f56de821c..a05ed2d9a0 100644 --- 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 --> - - Search - - search - +
+ + Search + + search + + + + Projects + Trainings + +
diff --git a/frontend/src/app/projects/project-overview/project-overview.component.ts b/frontend/src/app/projects/project-overview/project-overview.component.ts index e95aee3750..45f8fb7298 100644 --- 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(''), + projectType: new FormControl(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()),