Merge branch 'sprint-2' into feat/tu-02-19/book-a-seat

src/app/api/models/search.ts

@@ -32,7 +32,7 @@ export interface SearchParams {
   fromLongitude: number;
   toLatitude: number;
   toLongitude: number;
-  time?: string;
+  time?: number;
 }
 
 export interface SearchResponse {

src/app/auth/components/login-form/login-form.component.html

@@ -61,7 +61,13 @@ <h2 class="login-title">Sign In</h2>
       }
     </div>
     <div class="login-button-container">
-      <p-button type="submit" label="Sign in" [disabled]="!loginForm.valid" class="p-mt-2"></p-button>
+      <p-button
+        type="submit"
+        label="Sign in"
+        [disabled]="!loginForm.valid || authService.isSignInLoading$$()"
+        class="p-mt-2"
+        [icon]="authService.isSignInLoading$$() ? 'pi pi-spin pi-spinner' : 'pi pi-sign-in'"
+      ></p-button>
       <p-link pButton routerLink="{{ signUpPath }}" label="Sign Up" class="p-button-text p-mt-2"></p-link>
     </div>
   </form>

src/app/auth/pages/login/login.component.scss

@@ -3,5 +3,5 @@
 .page-wrapper {
   display: flex;
   justify-content: center;
-  height: 100%;
+  height: calc(100% - $offset-xl);
 }

src/app/auth/pages/register/register.component.html

@@ -78,7 +78,13 @@ <h2 class="register-title">Sign Up</h2>
       }
     </div>
     <div class="register-button-container">
-      <p-button type="submit" label="Register" [disabled]="!registrationForm.valid" class="p-mt-2"></p-button>
+      <p-button
+        type="submit"
+        label="Register"
+        [disabled]="!registrationForm.valid || authService.isSignUpLoading$$()"
+        class="p-mt-2"
+        [icon]="authService.isSignUpLoading$$() ? 'pi pi-spin pi-spinner' : 'pi pi-user-plus'"
+      ></p-button>
       <p-link pButton routerLink="{{ signInPath }}" label="Sign In" class="p-button-text p-mt-2"></p-link>
     </div>
   </form>

src/app/auth/pages/register/register.component.scss

@@ -3,7 +3,7 @@
 .register-container {
   display: flex;
   justify-content: center;
-  height: 100%;
+  height: calc(100% - $offset-xl);
 }
 
 .register-form {

src/app/auth/pages/register/register.component.ts

@@ -59,17 +59,20 @@ export class RegisterComponent {
   public signInPath = `/${APP_PATH.SIGN_IN.toLowerCase()}`;
 
   constructor() {
+    this.authService.isSignUpLoading$$.set(false);
     effect(() => {
-      if (!this.authService.isRegistrationSuccess$$()) {
+      const isSuccess = this.authService.isRegistrationSuccess$$();
+      if (isSuccess === false) {
         this.registrationForm.setErrors({ [this.authService.errorMessage$$()]: true });
-      } else {
+      } else if (isSuccess === true) {
         this.registrationForm.reset();
       }
     });
   }
 
   public submitForm(): void {
     if (this.registrationForm.valid) {
+      this.authService.isRegistrationSuccess$$.set(null);
       this.authService.registerUser(this.userData);
     } else {
       Object.values(this.registrationForm.controls).forEach((control) => {

src/app/auth/services/auth-service/auth.service.ts

@@ -34,30 +34,37 @@ export class AuthService implements OnDestroy {
   private localStorageService = inject(LocalStorageService);
   private modalService = inject(ModalService);
 
-  public isRegistrationSuccess$$ = signal(false);
+  public isSignInLoading$$ = signal(false);
+  public isSignUpLoading$$ = signal(false);
+
+  public isRegistrationSuccess$$ = signal<boolean | null>(null);
   public errorMessage$$ = signal<string>('');
   public isLoggedIn$$ = signal(this.localStorageService.getValueByKey(STORE_KEYS.TOKEN) !== null);
   public isAdmin$$ = signal(this.localStorageService.getValueByKey(STORE_KEYS.EMAIL) === ADMIN_CREDENTIALS.email);
 
   private subscription: Subscription | null = null;
 
   public registerUser(user: User): void {
+    this.isSignUpLoading$$.set(true);
     this.subscription = this.signUpService.signUp(user).subscribe({
       next: () => {
         this.isRegistrationSuccess$$.set(true);
         this.errorMessage$$.set('');
         this.router.navigate([APP_ROUTE.SIGN_IN]);
         this.userMessageService.showSuccessMessage(USER_MESSAGE.REGISTRATION_SUCCESSFUL);
+        this.isSignUpLoading$$.set(false);
       },
       error: (err: OverriddenHttpErrorResponse) => {
         this.isRegistrationSuccess$$.set(false);
         this.errorMessage$$.set(err.error.reason);
         this.userMessageService.showErrorMessage(USER_MESSAGE.REGISTRATION_ERROR);
+        this.isSignUpLoading$$.set(false);
       },
     });
   }
 
   public async loginUser(userData: User, loginForm: FormGroup): Promise<void> {
+    this.isSignInLoading$$.set(true);
     try {
       const data: SignInResponse = await firstValueFrom(this.signInService.signIn(userData));
       const { email } = userData;
@@ -70,11 +77,13 @@ export class AuthService implements OnDestroy {
         this.modalService.closeModal();
       }
       this.userMessageService.showSuccessMessage(USER_MESSAGE.LOGIN_SUCCESSFUL);
+      this.isSignInLoading$$.set(false);
     } catch (err: unknown) {
       if (isOverriddenHttpErrorResponse(err)) {
         loginForm.setErrors({ [err.error.reason]: true });
       }
       this.userMessageService.showErrorMessage(USER_MESSAGE.LOGIN_ERROR);
+      this.isSignInLoading$$.set(false);
     }
   }
 
@@ -86,6 +95,7 @@ export class AuthService implements OnDestroy {
   }
 
   public setLogoutSignals(): void {
+    this.isSignInLoading$$.set(false);
     this.isLoggedIn$$.set(false);
     this.isAdmin$$.set(false);
   }

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

@@ -1,7 +1,6 @@
 <div class="filter-container">
   @let tripPoints = filterService.tripPoints$$();
-  @let tabsNumber = takeTabsDates().length;
-  @if (tripPoints && tabsNumber) {
+  @if (tripPoints) {
     <strong class="from-to-title"> From: {{ tripPoints.from }} - To: {{ tripPoints.to }} </strong>
     <p-tabView [scrollable]="true" (onChange)="onTabChange($event)" [(activeIndex)]="activeIndex">
       @for (tab of takeTabsDates(); track $index) {
@@ -26,6 +25,8 @@
           <strong>{{ tab | date: 'MMMM d EEEE' }}</strong>
           <app-result-list></app-result-list>
         </p-tabPanel>
+      } @empty {
+        <div class="no-trips-title">Unfortunately, no rides were found for your search.</div>
       }
     </p-tabView>
   }

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

@@ -29,6 +29,13 @@
   color: $gray-700;
 }
 
+.no-trips-title {
+  font-size: $font-size-ms;
+  font-weight: bold;
+  color: $gray-500;
+  text-align: center;
+}
+
 ::ng-deep .p-tabview .p-tabview-nav li .p-tabview-nav-link {
   &:hover {
     background-color: $gray-100;

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

@@ -42,7 +42,14 @@
         ></p-calendar>
       </div>
 
-      <button pButton type="submit" label="Search" [disabled]="!tripForm.valid" class="submit-btn"></button>
+      <button
+        pButton
+        type="submit"
+        label="Search"
+        [disabled]="!tripForm.valid || filterService.isSearchLoading$$()"
+        class="submit-btn"
+        [icon]="filterService.isSearchLoading$$() ? 'pi pi-spin pi-spinner' : 'pi pi-search'"
+      ></button>
     </form>
   </div>
   <app-filter [tripData]="tripData$$()"></app-filter>

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

@@ -15,6 +15,15 @@
   }
 }
 
+::ng-deep .p-button {
+  display: flex;
+  justify-content: center;
+}
+
+::ng-deep .p-button .p-button-label {
+  flex: none;
+}
+
 @media screen and (width <= 1024px) {
   .search-container {
     max-width: $offset-xxxl * 9;

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

@@ -43,7 +43,7 @@ import { FilterComponent } from '../filter/filter.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SearchComponent implements OnInit {
-  private filterService = inject(FilterService);
+  public filterService = inject(FilterService);
   private citiesService = inject(CitiesService);
   private stationsService = inject(StationsService);
   private fb = inject(FormBuilder);
@@ -119,7 +119,7 @@ export class SearchComponent implements OnInit {
           toLatitude: endCity.latitude,
           fromLongitude: startCity.longitude,
           toLongitude: endCity.longitude,
-          time: this.tripForm.value.tripDate!,
+          time: new Date(this.tripForm.value.tripDate!).getTime(),
         };
         this.filterService.startSearch(searchPrms);
       } else {

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

@@ -19,16 +19,15 @@ export class FilterService implements OnDestroy {
   private userMessageServise = inject(UserMessageService);
   public availableRoutesGroup$$ = signal<GroupedRoutes>({});
   public tripPoints$$ = signal<TripPoints | null>(null);
+  public isSearchLoading$$ = signal(false);
 
   private subscription: Subscription | null = null;
 
   public startSearch(searchPrms: SearchParams): void {
+    this.isSearchLoading$$.set(true);
     const targetDate = new Date(searchPrms.time!).toISOString();
-    const modifiedSearchPrms = {
-      ...searchPrms,
-      time: targetDate,
-    };
-    this.subscription = this.searchService.search(modifiedSearchPrms).subscribe({
+
+    this.subscription = this.searchService.search(searchPrms).subscribe({
       next: (res) => {
         const tripIds = {
           from: res.from.stationId,
@@ -41,9 +40,11 @@ export class FilterService implements OnDestroy {
           date: targetDate,
         });
         this.setCurrentRides(targetDate);
+        this.isSearchLoading$$.set(false);
       },
       error: (err: OverriddenHttpErrorResponse) => {
         this.userMessageServise.showErrorMessage(err.error.message);
+        this.isSearchLoading$$.set(false);
       },
     });
   }
@@ -65,32 +66,27 @@ export class FilterService implements OnDestroy {
         const filteredSchedule = [];
         const { segments, rideId } = schedule[ride];
         const targetSegment = segments[fromStationIdIndex];
-        const nextDay = new Date(targetDate);
-        nextDay.setDate(nextDay.getDate() + 1);
-        nextDay.setHours(0, 0, 0, 0);
-        if (targetSegment.time[0] > targetDate && new Date(targetDate).getTime() < nextDay.getTime()) {
-          const departureDate = this.formatDate(new Date(targetSegment.time[0]));
-          filteredSchedule.push({
-            rideId,
-            segments: segments.map((currSegment) => {
-              const departureLocalDate = new Date(currSegment.time[0]).toString();
-              const arrivalLocalDate = new Date(currSegment.time[1]).toString();
-              return {
-                ...currSegment,
-                time: [departureLocalDate, arrivalLocalDate],
-              };
-            }),
-          });
-          if (!groupedRoutes[departureDate]) {
-            groupedRoutes[departureDate] = [];
-          }
-          groupedRoutes[departureDate].push({
-            routeId,
-            schedule: filteredSchedule,
-            path,
-            carriages,
-          });
+        const departureDate = this.formatDate(new Date(targetSegment.time[0]));
+        filteredSchedule.push({
+          rideId,
+          segments: segments.map((currSegment) => {
+            const departureLocalDate = new Date(currSegment.time[0]).toString();
+            const arrivalLocalDate = new Date(currSegment.time[1]).toString();
+            return {
+              ...currSegment,
+              time: [departureLocalDate, arrivalLocalDate],
+            };
+          }),
+        });
+        if (!groupedRoutes[departureDate]) {
+          groupedRoutes[departureDate] = [];
         }
+        groupedRoutes[departureDate].push({
+          routeId,
+          schedule: filteredSchedule,
+          path,
+          carriages,
+        });
       }
     }
     return this.generateMissingKeyDates(this.filterRoutesByKeyDate(groupedRoutes), targetDate);