From d2c22ede04c368db5cb9b052f4b74d240dcdbdd7 Mon Sep 17 00:00:00 2001 From: ki8vi Date: Thu, 29 Aug 2024 23:50:36 +0600 Subject: [PATCH 1/3] fix: search autocomplete and switch active tab --- .../components/filter/filter.component.html | 5 +- .../components/filter/filter.component.ts | 2 + .../components/search/search.component.html | 3 +- .../components/search/search.component.ts | 60 +++++++++++-------- .../home/services/filter/filter.service.ts | 2 +- .../userMessage/constants/user-messages.ts | 3 + 6 files changed, 44 insertions(+), 31 deletions(-) diff --git a/src/app/home/components/filter/filter.component.html b/src/app/home/components/filter/filter.component.html index 353b806..c0f5d8a 100644 --- a/src/app/home/components/filter/filter.component.html +++ b/src/app/home/components/filter/filter.component.html @@ -1,8 +1,9 @@
@let tripPoints = filterService.tripPoints$$(); - @if (tripPoints) { + @let tabsNumber = takeTabsDates().length; + @if (tripPoints && tabsNumber) { From: {{ tripPoints.from }} - To: {{ tripPoints.to }} - + @for (tab of takeTabsDates(); track $index) { diff --git a/src/app/home/components/filter/filter.component.ts b/src/app/home/components/filter/filter.component.ts index d7c4d40..eadd5f6 100644 --- a/src/app/home/components/filter/filter.component.ts +++ b/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; }); } diff --git a/src/app/home/components/search/search.component.html b/src/app/home/components/search/search.component.html index 07a177a..4943d86 100644 --- a/src/app/home/components/search/search.component.html +++ b/src/app/home/components/search/search.component.html @@ -33,13 +33,12 @@
diff --git a/src/app/home/components/search/search.component.ts b/src/app/home/components/search/search.component.ts index a0793d7..0ed3ee6 100644 --- a/src/app/home/components/search/search.component.ts +++ b/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); + } } } } diff --git a/src/app/home/services/filter/filter.service.ts b/src/app/home/services/filter/filter.service.ts index 241dc48..97cfd14 100644 --- a/src/app/home/services/filter/filter.service.ts +++ b/src/app/home/services/filter/filter.service.ts @@ -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]); diff --git a/src/app/shared/services/userMessage/constants/user-messages.ts b/src/app/shared/services/userMessage/constants/user-messages.ts index be7cc62..441233c 100644 --- a/src/app/shared/services/userMessage/constants/user-messages.ts +++ b/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.", }; From 8db0ca2135101124f35d15858f2ec2b480ecf1de Mon Sep 17 00:00:00 2001 From: ki8vi Date: Fri, 30 Aug 2024 00:02:46 +0600 Subject: [PATCH 2/3] fix: tab info after search --- src/app/home/services/filter/filter.service.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/home/services/filter/filter.service.ts b/src/app/home/services/filter/filter.service.ts index 97cfd14..b59af6d 100644 --- a/src/app/home/services/filter/filter.service.ts +++ b/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$$()[new Date(targetDate).toLocaleDateString('en-CA')], this.tripPoints$$()!, ); } From 4c5e45aaf8aaceb269f834439e3352ca5bbec184 Mon Sep 17 00:00:00 2001 From: ki8vi Date: Fri, 30 Aug 2024 00:10:02 +0600 Subject: [PATCH 3/3] refactor: use method for format of date --- src/app/home/services/filter/filter.service.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/home/services/filter/filter.service.ts b/src/app/home/services/filter/filter.service.ts index b59af6d..201cdc5 100644 --- a/src/app/home/services/filter/filter.service.ts +++ b/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$$()[new Date(targetDate).toLocaleDateString('en-CA')], + this.availableRoutesGroup$$()[this.formatDate(new Date(targetDate))], this.tripPoints$$()!, ); }