Merge pull request #84 from swoocn/search-feature-impl

Self approved.

frontend/src/app/dialogs/information/information.component.ts

@@ -18,15 +18,16 @@ export class InformationComponent {
 
   updateItems: { date: string, updates: string[] }[] = [
     {
-      date: '3/13/2024',
+      date: '3/12/2024',
       updates: [
         'Temporary removal of Dark Mode feature.',
         'Added Translation for Business Configuration Menu.',
-        'Added Translation for Add Products Menu.'
+        'Added Translation for Add Products Menu.',
+        'Added Business Search functionality.'
       ]
     },
     {
-      date: '3/12/2024',
+      date: '3/11/2024',
       updates: [
         'Added Translation for Business Marker Dialog.',
         'Added Translation for Shopping Order Menu.',

frontend/src/app/home/home.component.html

@@ -1,5 +1,5 @@
 <app-map></app-map>
 
-<app-search-bar></app-search-bar>
+<app-search-bar (searchQuery)="passSearchQueryToMap($event)"></app-search-bar>
 
 <app-action-row></app-action-row>

frontend/src/app/home/home.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy, ViewChild } from '@angular/core';
 import { ActionRowComponent } from './action-row/action-row.component';
 import { SearchBarComponent } from './search-bar/search-bar.component';
 import { MapComponent } from './map/map.component';
@@ -11,4 +11,11 @@ import { MapComponent } from './map/map.component';
   styleUrl: './home.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HomeComponent {}
+export class HomeComponent {
+  @ViewChild(MapComponent) mapComponent!: MapComponent;
+  @ViewChild(SearchBarComponent) searchBarComponent!: SearchBarComponent;
+
+  passSearchQueryToMap(query: string): void {
+    this.mapComponent.filterShops(query);
+  }
+}

frontend/src/app/home/map/map.component.ts

@@ -11,11 +11,12 @@ import { GeolocationService } from '../../core/service/geolocation.service';
 import { ShopService } from '../../core/service/shop.service';
 import { SnackService } from '../../core/service/snack.service';
 import { dummyCoordinates } from '../../core/model/business';
+import { SearchBarComponent } from '../search-bar/search-bar.component';
 
 @Component({
   selector: 'app-map',
   standalone: true,
-  imports: [LeafletModule, RouterModule],
+  imports: [SearchBarComponent, LeafletModule, RouterModule],
   templateUrl: './map.component.html',
   styleUrl: './map.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush
@@ -27,9 +28,11 @@ export class MapComponent implements OnInit {
   id: string = '65e2d67a38e1e60afd74378d';
   navigator: Router = inject(Router);
   showPopup: boolean = false;
+  searchBarQuery: string = '';
   allShops: any[] = [];
+  filteredShops: any[] = [];
   userPositions: any[] = [];
-
+  
   // Translation strings
   distanceMessage!: string;
   onlinePiOrdersAllowedMessage!: string;
@@ -71,6 +74,7 @@ export class MapComponent implements OnInit {
       const shops: any[] = response.data?.data;
 
       this.allShops = shops;
+      this.filteredShops = shops;
 
       // Wait for translation update before adding coordinates to the map
       this.updateTranslatedStrings();
@@ -83,7 +87,6 @@ export class MapComponent implements OnInit {
     } catch (error) {
       console.log(error);
     }
-
     this.track();
   }
 
@@ -97,6 +100,18 @@ export class MapComponent implements OnInit {
     this.track();
   }
 
+  // Filter shops based on search query
+  filterShops(query: string): void {
+    console.log("filterShops called");
+    this.filteredShops = this.allShops.filter(shop =>
+      shop.name.toLowerCase().includes(query.toLowerCase())
+    );
+    console.log("Filtered shops:", this.filteredShops);
+    // Update the map markers to reflect the filtered shops
+    this.removeAllMarkersFromMap();
+    this.addAllCoordinatesToMap(this.filteredShops);
+  }
+
   private updateTranslatedStrings(): void {
     this.distanceMessage = this.translateService.instant('BUSINESS_MARKER_DIALOG.DISTANCE_MESSAGE');
     this.onlinePiOrdersAllowedMessage = this.translateService.instant('BUSINESS_MARKER_DIALOG.DISTANCE_MESSAGE');
@@ -128,8 +143,10 @@ export class MapComponent implements OnInit {
     });
   }
 
-  addAllCoordinatesToMap(): void {
-    this.allShops.forEach((shop: any, index: number) => {
+  addAllCoordinatesToMap(shops?: any[]): void {
+    const shopsToAdd = shops ?? this.allShops;
+
+    shopsToAdd.forEach((shop: any, index: number) => {
       const markerLayer = marker([shop.coordinates[0], shop.coordinates[1]], {
         icon: this.geolocationService.getMarkerIcon(),
       }).bindPopup(this.generatePopupContent(shop))

frontend/src/app/home/search-bar/search-bar.component.html

@@ -3,13 +3,10 @@
     <form>
       <mat-form-field class="w-full">
         <mat-label>{{ 'HOME.SEARCH_BAR_PLACEHOLDER' | translate }}</mat-label>
-        <input type="text" matInput [formControl]="searchBarControl" [matAutocomplete]="auto" />
-        <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
-          @for (option of filteredOptions$ | async; track option) {
-            <mat-option [value]="option">{{ option }}</mat-option>
-          }
-        </mat-autocomplete>
+        <input type="text" matInput [formControl]="searchBarControl" (input)="emitSearchQuery($event)" />
       </mat-form-field>
     </form>
   </div>
 </div>
+
+

frontend/src/app/home/search-bar/search-bar.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
 import { AsyncPipe } from '@angular/common';
 import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
@@ -35,6 +35,8 @@ export class SearchBarComponent implements OnInit {
   options: string[] = ['R', 'Re', 'Res', 'Rest', 'Resta', 'Restau', 'Restaur', 'Restaura', 'Restauran', 'Restaurant'];
   searchBarControl = new FormControl('');
 
+  @Output() searchQuery = new EventEmitter<string>();
+
   constructor(private readonly uiStateService: UiStateService) {
     this.uiStateService.setShowBackButton(false);
   }
@@ -45,4 +47,17 @@ export class SearchBarComponent implements OnInit {
       map((value: string | null) => this.options.filter((option) => option.toLowerCase().includes((value || '').toLowerCase()))),
     );
   }
+
+  submitSearch(): void {
+    const query = this.searchBarControl.value;
+    if (query != null) {
+      this.emitSearchQuery(query);
+    }
+  }  
+
+  emitSearchQuery(event: any): void {
+    const query = event.target.value;
+    console.log('Search query:', query);
+    this.searchQuery.emit(query);
+  }
 }