From 7f9d1e7c5a68d0b6157f92264e31d316906242d5 Mon Sep 17 00:00:00 2001
From: Tobias Messner <tobias.messner@deutschebahn.com>
Date: Tue, 6 Aug 2024 16:39:32 +0200
Subject: [PATCH] feat: Make project view searchable and sorted

This sorts the project cards alphabetically and
adds a basic search bar to filter projects.

It partially addresses #402, but I haven't
implemented project favorites yet.
---
 .../project-overview.component.html           | 20 ++++++++++--
 .../project-overview.component.ts             | 32 +++++++++++++++++++
 2 files changed, 49 insertions(+), 3 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
index ff608fe0c..f950f8d69 100644
--- a/frontend/src/app/projects/project-overview/project-overview.component.html
+++ b/frontend/src/app/projects/project-overview/project-overview.component.html
@@ -3,6 +3,20 @@
  ~ SPDX-License-Identifier: Apache-2.0
  -->
 
+<div class="px-2.5">
+  <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>
+</div>
+
 <div class="flex flex-wrap">
   <a routerLink="/projects/create" class="m-2.5">
     <div matRipple class="mat-card-overview new collab-card !m-0">
@@ -15,12 +29,12 @@
     </div>
   </a>
   <app-mat-card-overview-skeleton-loader
-    [loading]="(projectService.projects$ | async) === undefined"
+    [loading]="(filteredProjects$ | async) === undefined"
   ></app-mat-card-overview-skeleton-loader>
-  <ng-container *ngIf="projectService.projects$ | async">
+  <ng-container *ngIf="filteredProjects$ | async">
     <a
       class="m-2.5"
-      *ngFor="let project of (projectService.projects$ | async)!"
+      *ngFor="let project of (filteredProjects$ | async)!"
       [routerLink]="['/project', project.slug]"
     >
       <div
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 ae506022d..9b74d557d 100644
--- a/frontend/src/app/projects/project-overview/project-overview.component.ts
+++ b/frontend/src/app/projects/project-overview/project-overview.component.ts
@@ -5,9 +5,18 @@
 
 import { NgIf, NgFor, NgClass, AsyncPipe } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatRipple } from '@angular/material/core';
+import {
+  MatFormField,
+  MatLabel,
+  MatSuffix,
+} from '@angular/material/form-field';
 import { MatIcon } from '@angular/material/icon';
+import { MatInput } from '@angular/material/input';
 import { RouterLink } from '@angular/router';
+import { map, startWith } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
 import { MatIconComponent } from '../../helpers/mat-icon/mat-icon.component';
 import { MatCardOverviewSkeletonLoaderComponent } from '../../helpers/skeleton-loaders/mat-card-overview-skeleton-loader/mat-card-overview-skeleton-loader.component';
 import { ProjectWrapperService } from '../service/project.service';
@@ -27,9 +36,32 @@ import { ProjectWrapperService } from '../service/project.service';
     NgClass,
     MatIcon,
     AsyncPipe,
+    MatFormField,
+    MatInput,
+    MatLabel,
+    MatSuffix,
+    ReactiveFormsModule,
+    FormsModule,
   ],
 })
 export class ProjectOverviewComponent implements OnInit {
+  searchControl = new FormControl('');
+  public readonly filteredProjects$ = this.searchControl.valueChanges.pipe(
+    startWith(''),
+    switchMap((query) => this.searchAndSortProjects(query!)),
+  );
+
+  searchAndSortProjects(query: string) {
+    return this.projectService.projects$.pipe(
+      map((projects) =>
+        projects?.filter((project) =>
+          project.name.toLocaleLowerCase().includes(query.toLocaleLowerCase()),
+        ),
+      ),
+      map((projects) => projects?.sort((a, b) => a.name.localeCompare(b.name))),
+    );
+  }
+
   constructor(public projectService: ProjectWrapperService) {}
 
   ngOnInit() {