From 61397de9e58d22eb0d0937cf50f8158bd845b279 Mon Sep 17 00:00:00 2001
From: sanchezvem <mathys.sanchezvende@gmail.com>
Date: Tue, 4 Nov 2025 11:39:53 +0100
Subject: [PATCH] step 13

---
 first-app/src/app/details/details.ts | 14 +++++++-------
 first-app/src/app/home/home.html     |  8 +++-----
 first-app/src/app/home/home.ts       | 11 +++++++++++
 3 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/first-app/src/app/details/details.ts b/first-app/src/app/details/details.ts
index fb08f3c..ec45021 100644
--- a/first-app/src/app/details/details.ts
+++ b/first-app/src/app/details/details.ts
@@ -9,10 +9,10 @@ import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
     template: `
         <article>
             <img
-                    class="listing-photo"
-                    [src]="housingLocation?.photo"
-                    alt="Exterior photo of {{ housingLocation?.name }}"
-                    crossorigin
+                class="listing-photo"
+                [src]="housingLocation?.photo"
+                alt="Exterior photo of {{ housingLocation?.name }}"
+                crossorigin
             />
             <section class="listing-description">
                 <h2 class="listing-heading">{{ housingLocation?.name }}</h2>
@@ -30,11 +30,11 @@ import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
                 <h2 class="section-heading">Apply now to live here</h2>
                 <form [formGroup]="applyForm" (submit)="submitApplication()">
                     <label for="first-name">First Name</label>
-                    <input id="first-name" type="text" formControlName="firstName" />
+                    <input id="first-name" type="text" formControlName="firstName"/>
                     <label for="last-name">Last Name</label>
-                    <input id="last-name" type="text" formControlName="lastName" />
+                    <input id="last-name" type="text" formControlName="lastName"/>
                     <label for="email">Email</label>
-                    <input id="email" type="email" formControlName="email" />
+                    <input id="email" type="email" formControlName="email"/>
                     <button type="submit" class="primary">Apply now</button>
                 </form>
             </section>
diff --git a/first-app/src/app/home/home.html b/first-app/src/app/home/home.html
index 8e66c3f..17ae9dd 100644
--- a/first-app/src/app/home/home.html
+++ b/first-app/src/app/home/home.html
@@ -1,12 +1,10 @@
 <section>
-    <form>
-        <input type="text" placeholder="Filter by city" />
-        <button class="primary" type="button">Search</button>
+    <form><input type="text" placeholder="Filter by city" #filter/>
+        <button class="primary" type="button" (click)="filterResults(filter.value)">Search</button>
     </form>
 </section>
-
 <section class="results">
-    @for(housingLocation of housingLocationList; track $index) {
+    @for (housingLocation of filteredLocationList; track $index) {
         <app-housing-location [housingLocation]="housingLocation"></app-housing-location>
     }
 </section>
\ No newline at end of file
diff --git a/first-app/src/app/home/home.ts b/first-app/src/app/home/home.ts
index d457009..bfa75bc 100644
--- a/first-app/src/app/home/home.ts
+++ b/first-app/src/app/home/home.ts
@@ -15,7 +15,18 @@ import {HousingService} from '../housing'; // Importation d'un service
 export class Home {
     housingLocationList: HousingLocationInfo[] = [];
     housingService: HousingService = inject(HousingService);
+    filteredLocationList: HousingLocationInfo[] = [];
+
     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()),);
     }
 }
\ No newline at end of file