From c794032bfd65ee09786ece321f18c1a09b29e183 Mon Sep 17 00:00:00 2001
From: Phan Huy Tran <p.tran@neusta.de>
Date: Wed, 13 Nov 2024 10:37:29 +0100
Subject: [PATCH] Search

---
 src/app/home/home.component.html |  8 ++++----
 src/app/home/home.component.ts   | 15 ++++++++++++++-
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index 3d862b6..6f4825a 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -1,12 +1,12 @@
 <section class="my-5">
-  <form class="input-group">
-    <input class="form-control" type="text" placeholder="Filter by city"/>
-    <button class="btn btn-primary" type="button">Search</button>
+  <form class="input-group" (ngSubmit)="filterResults(filter.value)">
+    <input class="form-control" type="text" placeholder="Filter by city" #filter/>
+    <button class="btn btn-primary" type="submit">Search</button>
   </form>
 </section>
 
 <div class="row g-4">
-  @for (housingLocation of housingLocationList; track housingLocation.id) {
+  @for (housingLocation of filteredLocationList; track housingLocation.id) {
     <div class="col-12 col-md-6 col-lg-4 col-xl-3">
       <app-housing-location [housingLocation]="housingLocation"></app-housing-location>
     </div>
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index 9bb1a30..a199f51 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -2,12 +2,14 @@ import {Component, inject} from '@angular/core';
 import {HousingLocationComponent} from '../housing-location/housing-location.component';
 import {HousingLocation} from '../housing-location';
 import {HousingService} from '../housing.service';
+import {FormsModule} from '@angular/forms';
 
 @Component({
   selector: 'app-home',
   standalone: true,
   imports: [
-    HousingLocationComponent
+    HousingLocationComponent,
+    FormsModule
   ],
   templateUrl: './home.component.html',
   styleUrl: './home.component.css'
@@ -15,8 +17,19 @@ import {HousingService} from '../housing.service';
 export class HomeComponent {
   housingLocationList: HousingLocation[] = [];
   housingService: HousingService = inject(HousingService);
+  filteredLocationList: HousingLocation[] = [];
 
   constructor() {
     this.housingLocationList = this.housingService.getAllHousingLocations();
+    this.filteredLocationList = this.housingLocationList;
+  }
+
+  filterResults(text: string) {
+    if (!text) {
+      this.filteredLocationList = this.housingLocationList;
+      return;
+    }
+
+    this.filteredLocationList = this.housingLocationList.filter((housingLocation) => housingLocation?.city.toLowerCase().includes(text.toLowerCase()),);
   }
 }