UI Filter panel binding user inputs and outputs to home

AlperMulayim · Sep 13, 2023 · 6b87f15 · 6b87f15
1 parent a2b2fa1
commit 6b87f15
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 12 deletions.
diff --git a/leasesoft-ui/src/app/app.module.ts b/leasesoft-ui/src/app/app.module.ts
@@ -15,6 +15,7 @@ import { BuildingsSectionComponent } from './buildings-section/buildings-section
 import { BuildingCardComponent } from './building-card/building-card.component';
 import { MapLeasesoftComponent } from './map-leasesoft/map-leasesoft.component';
 import { BuildingFilterPanelComponent } from './filter-panels/building-filter-panel/building-filter-panel.component';
+import { FormsModule } from '@angular/forms';
 
 
 @NgModule({
@@ -36,7 +37,8 @@ import { BuildingFilterPanelComponent } from './filter-panels/building-filter-pa
   imports: [
     BrowserModule,
     HttpClientModule,
-    AppRoutingModule
+    AppRoutingModule,
+    FormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

diff --git a/...esoft-ui/src/app/filter-panels/building-filter-panel/building-filter-panel.component.html b/...esoft-ui/src/app/filter-panels/building-filter-panel/building-filter-panel.component.html
@@ -3,34 +3,33 @@
     What are you looking for
   </div>
   <div class="city">
-    <input id="city" type="text" placeholder="City">
+    <input  id="city" type="text" placeholder="City" [(ngModel)]= "filterModel.city">
   </div>
   <div class="baths-and-beds">
     <div class="beds">
-      <input id="beds" type="number" placeholder="Beds">
+      <input id="beds" type="number" placeholder="Beds" [(ngModel)]= "filterModel.beds" >
     </div>
     <div class="baths">
-      <input id="baths" type="number" placeholder="Baths">
+      <input id="baths" type="number" placeholder="Baths" [(ngModel)]= "filterModel.baths">
     </div>
   </div>
   <div class="price">
     <div class="price-from">
-      <input id="priceFrom" type="number" placeholder="priceFrom">
+      <input id="priceFrom" type="number" placeholder="priceFrom" [(ngModel)]= "filterModel.priceFrom">
     </div>
     <div class="price-to">
-      <input id="priceTo" type="number" placeholder="priceTo">
+      <input id="priceTo" type="number" placeholder="priceTo" [(ngModel)]= "filterModel.priceTo">
     </div>
   </div>
   <div class="size">
     <div class="size-from">
-      <input id="sizeFrom" type="number" placeholder="sizeFrom">
+      <input id="sizeFrom" type="number" placeholder="sizeFrom" [(ngModel)]= "filterModel.sizeFrom">
     </div>
     <div class="size-to">
-      <input id="sizeTo" type="number" placeholder="sizeTo">
+      <input id="sizeTo" type="number" placeholder="sizeTo" [(ngModel)]= "filterModel.sizeTo">
     </div>
   </div>
-  <div class="search-button">
+  <div class="search-button" (click)="filter()">
     Search
   </div>
-
 </div>
diff --git a/leasesoft-ui/src/app/filter-panels/building-filter-panel/building-filter-panel.component.ts b/leasesoft-ui/src/app/filter-panels/building-filter-panel/building-filter-panel.component.ts
@@ -1,4 +1,5 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { BuildingFilter } from 'src/app/modals/BuildingFilter';
 
 @Component({
   selector: 'app-building-filter-panel',
@@ -7,9 +8,19 @@ import { Component, OnInit } from '@angular/core';
 })
 export class BuildingFilterPanelComponent implements OnInit {
 
+  public filterModel: BuildingFilter = new BuildingFilter();
+
+  @Output()
+  public searchFilter: EventEmitter<BuildingFilter> = new EventEmitter<BuildingFilter>()
+
   constructor() { }
 
   ngOnInit() {
   }
 
+  public filter(): void{
+      console.log("click filter");
+      console.log(this.filterModel);
+      this.searchFilter.emit(this.filterModel);
+  }
 }
diff --git a/leasesoft-ui/src/app/modals/BuildingFilter.ts b/leasesoft-ui/src/app/modals/BuildingFilter.ts
@@ -0,0 +1,9 @@
+export class BuildingFilter {
+    city: string;
+    priceFrom: number;
+    beds: number;
+    baths: number;
+    priceTo: number;
+    sizeTo: number;
+    sizeFrom:number;
+}
diff --git a/leasesoft-ui/src/app/pages/homepage/homepage.component.html b/leasesoft-ui/src/app/pages/homepage/homepage.component.html
@@ -1,7 +1,7 @@
 <div class="home-page-container">
   <div class="buildings-section">
     <div class="building-filter-panel">
-      <app-building-filter-panel></app-building-filter-panel>
+      <app-building-filter-panel (searchFilter)="searchFilter($event)"></app-building-filter-panel>
     </div>
     <div class="buildings" *ngIf="buildings">
       <app-buildings-section [buildingList]="buildings"></app-buildings-section>

diff --git a/leasesoft-ui/src/app/pages/homepage/homepage.component.ts b/leasesoft-ui/src/app/pages/homepage/homepage.component.ts
@@ -1,6 +1,7 @@
 import { HttpClient } from '@angular/common/http';
 import { AfterViewInit, Component, OnInit } from '@angular/core';
 import { Observable, catchError, map, of } from 'rxjs';
+import { BuildingFilter } from 'src/app/modals/BuildingFilter';
 import { Building } from 'src/app/modals/building';
 import { BuildingService } from 'src/app/services/building.service';
 declare var google: any;
@@ -23,5 +24,9 @@ export class HomePageComponent implements OnInit{
       console.log(building);
     });
   }
+
+  public searchFilter(filter: BuildingFilter){
+    console.log("home", filter);
+  }
 
 }