Merge pull request #173 from Kleostro/fix/tu-02-49/search-autocomplete

fix(tu-02-49): search autocomplete

src/app/home/components/filter/filter.component.html

@@ -1,8 +1,9 @@
 <div class="filter-container">
   @let tripPoints = filterService.tripPoints$$();
-  @if (tripPoints) {
+  @let tabsNumber = takeTabsDates().length;
+  @if (tripPoints && tabsNumber) {
     <strong class="from-to-title"> From: {{ tripPoints.from }} - To: {{ tripPoints.to }} </strong>
-    <p-tabView [scrollable]="true" (onChange)="onTabChange($event)">
+    <p-tabView [scrollable]="true" (onChange)="onTabChange($event)" [(activeIndex)]="activeIndex">
       @for (tab of takeTabsDates(); track $index) {
         <p-tabPanel>
           <ng-template pTemplate="header">

src/app/home/components/filter/filter.component.ts

@@ -21,11 +21,13 @@ export class FilterComponent {
   @Input() public tripData!: TripData | null;
 
   public groupRoutes!: GroupedRoutes;
+  public activeIndex = 0;
 
   constructor() {
     effect(() => {
       this.groupRoutes = this.filterService.availableRoutesGroup$$();
       this.takeTabsDates();
+      this.activeIndex = 0;
     });
   }
 

src/app/home/components/search/search.component.html

@@ -33,13 +33,12 @@
         <p-calendar
           formControlName="tripDate"
           [minDate]="minDate"
-          [showTime]="timeSelected"
+          [showTime]="true"
           placeholder="Date/Time"
           dateFormat="D MM d"
           [iconDisplay]="'input'"
           [showIcon]="true"
           inputId="icondisplay"
-          (onSelect)="onDateSelect($event)"
         ></p-calendar>
       </div>
 

src/app/home/components/search/search.component.ts

@@ -14,6 +14,7 @@ import { firstValueFrom } from 'rxjs';
 import { Station } from '@/app/api/models/stations';
 import { StationsService } from '@/app/api/stationsService/stations.service';
 import { AutocompleteIconDirective } from '@/app/shared/directives/autocompleteIcon/autocomplete-icon.directive';
+import { USER_MESSAGE } from '@/app/shared/services/userMessage/constants/user-messages';
 import { UserMessageService } from '@/app/shared/services/userMessage/user-message.service';
 
 import { TripData } from '../../models/tripData';
@@ -49,7 +50,7 @@ export class SearchComponent implements OnInit {
   private userMessageService = inject(UserMessageService);
   public stations: Station[] = [];
   public filteredCities: string[] = [];
-
+  private fakeCities: Station[] = [];
   public minDate: Date = new Date();
   public timeSelected = false;
 
@@ -77,45 +78,52 @@ export class SearchComponent implements OnInit {
       this.tripForm.controls.tripDate.markAsTouched();
     }
     try {
-      const stations = await firstValueFrom(this.stationsService.getStations());
-      const newCities = await firstValueFrom(this.citiesService.getCities());
-      this.stations = [...stations, ...newCities];
+      this.stations = await firstValueFrom(this.stationsService.getStations());
+      this.fakeCities = await firstValueFrom(this.citiesService.getCities());
     } catch {
-      this.userMessageService.showErrorMessage('Connection is lost!');
+      this.userMessageService.showErrorMessage(USER_MESSAGE.CONNECTION_LOST_ERROR);
     }
   }
 
   public filterCity(event: AutoCompleteCompleteEvent): void {
     const query = event.query.toLowerCase();
-    this.filteredCities = this.stations
-      .filter(({ city }) => city.toLowerCase().includes(query))
-      .map(({ city }) => city);
-  }
+    const filteredCitiesSet = new Set(
+      this.stations.filter(({ city }) => city.toLowerCase().includes(query)).map(({ city }) => city),
+    );
 
-  public onDateSelect(event: Date): void {
-    this.timeSelected = !!event;
+    const fakeCities = this.fakeCities.filter(({ city }) => city.toLowerCase().includes(query));
+    if (fakeCities.length) {
+      const fakeCityNames = fakeCities.map(({ city }) => city);
+      fakeCityNames.forEach((city) => filteredCitiesSet.add(city));
+      this.stations = [...this.stations, ...fakeCities];
+    }
+
+    this.filteredCities = Array.from(filteredCitiesSet);
   }
 
   public onSubmit(): void {
     if (this.tripForm.valid) {
       const startCityData = this.stations.find((station) => station.city === this.tripForm.value.startCity)!;
       const endCityData = this.stations.find((station) => station.city === this.tripForm.value.endCity)!;
-      const tripData: TripData = {
-        startCity: startCityData,
-        endCity: endCityData,
-        tripDate: new Date(this.tripForm.controls['tripDate'].value ?? ''),
-      };
-
-      this.tripData$$.set(tripData);
-      const searchPrms = {
-        fromLatitude: startCityData.latitude,
-        toLatitude: endCityData.latitude,
-        fromLongitude: startCityData.longitude,
-        toLongitude: endCityData.longitude,
-        time: this.tripForm.value.tripDate!,
-      };
+      if (startCityData && endCityData) {
+        const tripData: TripData = {
+          startCity: startCityData,
+          endCity: endCityData,
+          tripDate: new Date(this.tripForm.controls['tripDate'].value ?? ''),
+        };
 
-      this.filterService.startSearch(searchPrms);
+        this.tripData$$.set(tripData);
+        const searchPrms = {
+          fromLatitude: startCityData.latitude,
+          toLatitude: endCityData.latitude,
+          fromLongitude: startCityData.longitude,
+          toLongitude: endCityData.longitude,
+          time: this.tripForm.value.tripDate!,
+        };
+        this.filterService.startSearch(searchPrms);
+      } else {
+        this.userMessageService.showErrorMessage(USER_MESSAGE.NO_STATIONS_FOUND_ERROR);
+      }
     }
   }
 }

src/app/home/services/filter/filter.service.ts

@@ -50,7 +50,7 @@ export class FilterService implements OnDestroy {
 
   public setCurrentRides(targetDate: string): void {
     this.resultListService.createCurrentRides(
-      this.availableRoutesGroup$$()[targetDate.split('T')[0]],
+      this.availableRoutesGroup$$()[this.formatDate(new Date(targetDate))],
       this.tripPoints$$()!,
     );
   }
@@ -98,7 +98,7 @@ export class FilterService implements OnDestroy {
 
   private generateMissingKeyDates(groupedRoutes: GroupedRoutes, targetDate: string): GroupedRoutes {
     const updatedGroupedRoutes = { ...groupedRoutes };
-    const dateKeys = Object.keys(updatedGroupedRoutes).sort();
+    const dateKeys = Object.keys(updatedGroupedRoutes).sort((a, b) => a.localeCompare(b));
     const startDate = new Date(targetDate);
     const endDate = new Date(dateKeys[dateKeys.length - 1]);
 

src/app/shared/services/userMessage/constants/user-messages.ts

@@ -25,4 +25,7 @@ export const USER_MESSAGE = {
   RIDE_PRICE_UPDATED_SUCCESSFULLY: 'Ride price updated successfully!',
   RIDE_CREATED_SUCCESSFULLY: 'Ride created successfully!',
   RIDE_DELETED_SUCCESSFULLY: 'Ride deleted successfully!',
+  CONNECTION_LOST_ERROR: 'Connection is lost! Please check your internet connection and try again.',
+  NO_STATIONS_FOUND_ERROR:
+    "Sorry, we couldn't find any stations in the cities you're looking for. Please try searching for another city.",
 };