Merge pull request #85 from swoocn/dev

Propagation approved.

frontend/src/app/business/business-settings/business-menu/business-menu.component.html

@@ -1,9 +1,9 @@
 <main class="mb-[100px]">
   <section class="menu-settings__section">
-    <div class="mb-3">Shop name {{ shop.name }}</div>
+    <div class="mb-3">{{ 'BUSINESS.CONFIGURATION.LABELS.SHOP_NAME' | translate }} {{ shop.name }}</div>
     <div class="menu-settings__toggle">
       <label for="menu-toggle" class="menu-settings__label"
-        >Menu <span class="toggle-status">{{ menuStatusLabel }}</span>
+        >{{ 'BUSINESS.CONFIGURATION.LABELS.MENU' | translate }} <span class="toggle-status">{{ menuStatusLabel }}</span>
         <input
           type="checkbox"
           id="menu-toggle"
@@ -16,7 +16,7 @@
     </div>
     <div class="menu-settings__toggle hidden" #orderToggleDiv>
       <label for="order-toggle" class="menu-settings__label"
-        >Accept orders without payment
+        >{{ 'BUSINESS.CONFIGURATION.LABELS.ACCEPT_ORDERS_WITHOUT_PAYMENT_MESSAGE' | translate }}
         <span class="toggle-status">{{ orderStatusLabel }}</span>
         <input
           type="checkbox"
@@ -29,7 +29,7 @@
     </div>
     <div class="menu-settings__toggle hidden" #paymentToggleDiv>
       <label for="payment-toggle" class="menu-settings__label"
-        >Accept Pi Transactions
+        >{{ 'BUSINESS.CONFIGURATION.LABELS.ACCEPT_PI_TRANSACTIONS_MESSAGE' | translate }}
         <span class="toggle-status">{{ paymentStatusLabel }}</span>
         <input
           type="checkbox"
@@ -72,12 +72,12 @@
       </button>
 
       <!-- Modal title -->
-      <h2 class="modal__title">Add Product into your shop</h2>
+      <h2 class="modal__title">{{ 'BUSINESS.CONFIGURATION.ADD_PRODUCT_MENU.LABELS.ADD_PRODUCT_INTO_SHOP_MESSAGE' | translate }}</h2>
 
       <!-- product name-->
       <div class="flex flex-col gap-0 w-full mb-2">
         <label for="item-name" class="modal__label font-bold"
-          >Product name</label
+          >{{ 'BUSINESS.CONFIGURATION.ADD_PRODUCT_MENU.LABELS.PRODUCT_NAME' | translate }}</label
         >
         <input
           type="text"
@@ -89,7 +89,7 @@ <h2 class="modal__title">Add Product into your shop</h2>
       <!-- product images -->
       <div class="flex flex-col gap-1 w-full mb-3">
         <label for="item-name" class="modal__label text-gray-700 font-bold"
-          >Product images</label
+          >{{ 'BUSINESS.CONFIGURATION.ADD_PRODUCT_MENU.LABELS.PRODUCT_IMAGES' | translate }}</label
         >
         <input
           type="file"
@@ -109,7 +109,7 @@ <h2 class="modal__title">Add Product into your shop</h2>
             "
             alt="Add item button"
             class="w-6 h-6 mr-2" />
-          Add Image
+            {{ 'BUSINESS.CONFIGURATION.ADD_PRODUCT_MENU.LABELS.ADD_IMAGE' | translate }}
         </label>
         <div id="image-preview" class="modal__image-preview">
           <img
@@ -129,7 +129,7 @@ <h2 class="modal__title">Add Product into your shop</h2>
       <!-- product price -->
 
       <div class="flex flex-col gap-1 mb-3 w-full">
-        <label for="item-price" class="text-gray-700 font-bold">Price</label>
+        <label for="item-price" class="text-gray-700 font-bold">{{ 'BUSINESS.CONFIGURATION.ADD_PRODUCT_MENU.LABELS.PRICE' | translate }}</label>
         <div class="relative">
           <input
             type="text"
@@ -152,7 +152,7 @@ <h2 class="modal__title">Add Product into your shop</h2>
       <!-- Preparation time input group -->
       <div class="flex gap-0 flex-col mb-3">
         <label for="prep-time" class="modal__label font-bold"
-          >How long to prepare this meal?</label
+          >{{ 'BUSINESS.CONFIGURATION.ADD_PRODUCT_MENU.LABELS.FOOD_SERVICE.TIME_PREPARATION_MESSAGE' | translate }}</label
         >
         <input
           type="text"
@@ -164,7 +164,7 @@ <h2 class="modal__title">Add Product into your shop</h2>
       <!-- Description input group -->
       <div class="modal__description">
         <label for="description" class="modal__label font-bold"
-          >Description</label
+          >{{ 'BUSINESS.CONFIGURATION.ADD_PRODUCT_MENU.LABELS.DESCRIPTION' | translate }}</label
         >
         <textarea
           id="description"
@@ -181,9 +181,9 @@ <h2 class="modal__title">Add Product into your shop</h2>
           class="modal__confirm-btn"
           (click)="addProductToShop()">
           @if (isLoading) {
-            Loading..
+            {{ 'BUSINESS.CONFIGURATION.ADD_PRODUCT_MENU.BUTTONS.LOADING' | translate }}
           } @else {
-            Confirm
+            {{ 'BUSINESS.CONFIGURATION.ADD_PRODUCT_MENU.BUTTONS.CONFIRM' | translate }}
           }
         </button>
       </div>

frontend/src/app/business/business-settings/business-menu/business-menu.component.ts

@@ -2,13 +2,14 @@ import { CommonModule } from '@angular/common';
 import { Component, AfterViewInit, ViewChild, ElementRef, ChangeDetectionStrategy, inject, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
 import { ShopService } from '../../../core/service/shop.service';
 import { SnackService } from '../../../core/service/snack.service';
 
 @Component({
   selector: 'app-business-menu',
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, RouterModule],
+  imports: [CommonModule, ReactiveFormsModule, RouterModule, TranslateModule],
   templateUrl: './business-menu.component.html',
   styleUrl: './business-menu.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,

frontend/src/app/business/business-settings/business-settings.component.html

@@ -64,7 +64,7 @@
             registerShopForm.get('shopImage')?.touched
           ">{{ 'BUSINESS.REGISTRATION.VALIDATIONS.BUSINESS_IMAGES' | translate }}</span>
     </div>
-    <div class="business-registration__field business-registration__field-middle">
+    <!-- <div class="business-registration__field business-registration__field-middle">
       <label for="phone" class="business-registration__label">{{ 'BUSINESS.REGISTRATION.LABELS.BUSINESS_PHONE_NUMBER' |
         translate }}</label>
       <input type="text" id="phone" name="phone" formControlName="shopPhone" class="business-registration__input"
@@ -83,7 +83,7 @@
           registerShopForm.get('shopEmail')?.invalid &&
           registerShopForm.get('shopEmail')?.touched
         ">{{ 'BUSINESS.REGISTRATION.VALIDATIONS.BUSINESS_EMAIL_ADDRESS' | translate }}</span>
-    </div>
+    </div> -->
     <nav class="business-registration__navigation">
       <ul class="business-registration__list">
         <li class="business-registration__item">

frontend/src/app/business/business-settings/business-settings.component.ts

@@ -26,8 +26,10 @@ export class BusinessSettingsComponent {
     shopName: new FormControl('', Validators.required),
     shopType: new FormControl('', Validators.required),
     shopAddress: new FormControl('', Validators.required),
-    shopPhone: new FormControl('', [Validators.required, Validators.minLength(10)]),
-    shopEmail: new FormControl('', [Validators.required, Validators.email]),
+    shopPhone: new FormControl('0000000000'),
+    shopEmail: new FormControl('no-email.xxx'),
+    // shopPhone: new FormControl('', [Validators.required, Validators.minLength(10)]),
+    // shopEmail: new FormControl('', [Validators.required, Validators.email]),
     shopImage: new FormArray([]),
     shopDescription: new FormControl('', Validators.required),
   });
@@ -77,9 +79,10 @@ export class BusinessSettingsComponent {
           this.snackService.showMessage('Business successfully registered');
           this.router.navigate(['business-config', response.newShop._id]);
           // this.router.navigate(['manage-business', response.data._id]);
-          this.snackService.showMessage(` redirecting to ${response.data.name} shop`);
+          this.snackService.showMessage(`Redirecting to ${response.data.name} shop`);
         } else {
-          this.snackService.showError(`Email address is already registered to a business. Please try a different email address.🙏`);
+          // this.snackService.showError(`Email address is already registered to a business. Please try a different email address.🙏`);
+          this.snackService.showError(`Business failed to register`);
           console.log(response);
         }
       });

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

@@ -19,6 +19,15 @@ export class InformationComponent {
   updateItems: { date: string, updates: string[] }[] = [
     {
       date: '3/12/2024',
+      updates: [
+        'Temporary removal of Dark Mode feature.',
+        'Added Translation for Business Configuration Menu.',
+        'Added Translation for Add Products Menu.',
+        'Added Business Search functionality.'
+      ]
+    },
+    {
+      date: '3/11/2024',
       updates: [
         'Added Translation for Business Marker Dialog.',
         'Added Translation for Shopping Order Menu.',
@@ -32,20 +41,6 @@ export class InformationComponent {
         'Added Terms of Service section.'
       ]
     },
-    {
-      date: '3/9/2024',
-      updates: [
-        'Added GPS navigation feature.',
-        'Added Privacy Policy section.'
-      ]
-    },
-    {
-      date: '3/8/2024',
-      updates: [
-        'Added Footer.',
-        'Added Information Popup to share latest updates.'
-      ]
-    }
   ];
   email: string = '[email protected]';
 

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);
+  }
 }

frontend/src/app/shared/header/header.component.html

@@ -28,7 +28,7 @@
     <button mat-icon-button (click)="displayInfoPopup()">
       <mat-icon >update</mat-icon>
     </button>
-    <app-dark-mode-toggler></app-dark-mode-toggler>
+    <!-- TODO -> <app-dark-mode-toggler></app-dark-mode-toggler> -->
     <app-language-switcher></app-language-switcher>
   </div>
 </mat-toolbar>

frontend/src/app/shared/header/header.component.spec.ts

@@ -57,9 +57,9 @@ describe('HeaderComponent', () => {
       expect(languageSwitcher).toBeTruthy();
     });
 
-    it('should contain dark mode toggler component', () => {
-      const darkModeToggler = optionalControls.querySelector('app-dark-mode-toggler');
-      expect(darkModeToggler).toBeTruthy();
-    });
+    // it('should contain dark mode toggler component', () => {
+    //   const darkModeToggler = optionalControls.querySelector('app-dark-mode-toggler');
+    //   expect(darkModeToggler).toBeTruthy();
+    // });
   });
 });