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
-
+
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()),