add skip registration & validators to years & skills trajectory block

Author: Awakich

projects/skills/src/app/profile/home/profile-home.component.html

@@ -7,7 +7,11 @@
   </div> -->
   @if (profileData()) {
   <!-- <app-month-block [months]="profileData()['months']" class="profile__month"></app-month-block> -->
+  @if(type === 'months') {
   <app-month-block [months]="mockMonts" class="profile__month"></app-month-block>
+  } @else {
+  <app-trajectory-block class="profile__month"></app-trajectory-block>
+  }
   <app-skills-block class="profile__skills"></app-skills-block>
   <app-progress-block></app-progress-block>
   }

projects/skills/src/app/profile/home/profile-home.component.ts

@@ -1,26 +1,51 @@
 /** @format */
 
-import { Component, inject } from "@angular/core";
+import { Component, inject, OnDestroy, OnInit } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { MonthBlockComponent } from "../shared/month-block/month-block.component";
 import { SkillsBlockComponent } from "../shared/skills-block/skills-block.component";
 import { ProgressBlockComponent } from "../shared/progress-block/progress-block.component";
 import { ActivatedRoute } from "@angular/router";
 import { toSignal } from "@angular/core/rxjs-interop";
-import { map } from "rxjs";
+import { map, Subscription } from "rxjs";
 import { mockMonthsList } from "projects/core/src/consts/list-mock-months";
+import { ProfileService } from "../services/profile.service";
+import { TrajectoryBlockComponent } from "../shared/trajectory-block/trajectory-block.component";
 
 @Component({
   selector: "app-skills",
   standalone: true,
-  imports: [CommonModule, MonthBlockComponent, SkillsBlockComponent, ProgressBlockComponent],
+  imports: [
+    CommonModule,
+    MonthBlockComponent,
+    SkillsBlockComponent,
+    ProgressBlockComponent,
+    TrajectoryBlockComponent,
+  ],
   templateUrl: "./profile-home.component.html",
   styleUrl: "./profile-home.component.scss",
 })
-export class ProfileHomeComponent {
-  route = inject(ActivatedRoute);
+export class ProfileHomeComponent implements OnInit, OnDestroy {
+  readonly mockMonts = mockMonthsList;
+
+  private readonly route = inject(ActivatedRoute);
+  private readonly profileService = inject(ProfileService);
 
   profileData = toSignal(this.route.data.pipe(map(r => r["data"])));
 
-  readonly mockMonts = mockMonthsList;
+  type: "months" | "trajectory" = "months";
+
+  subscription$: Subscription[] = [];
+
+  ngOnInit(): void {
+    const isSubscribedSub$ = this.profileService.getSubscriptionData().subscribe(r => {
+      this.type = r.isSubscribed ? "trajectory" : "months";
+    });
+
+    isSubscribedSub$ && this.subscription$.push(isSubscribedSub$);
+  }
+
+  ngOnDestroy(): void {
+    this.subscription$.forEach($ => $.unsubscribe());
+  }
 }

projects/skills/src/app/profile/shared/trajectory-block/trajectory-block.component.html

@@ -0,0 +1,24 @@
+<!-- @format -->
+
+<div class="trajectory">
+  <img
+    alt="trajectory image"
+    src="/assets/images/profile/trajectory.png"
+    class="trajectory__image"
+  />
+  <app-button (click)="navigateToTrajectory()" customTypographyClass="text-body-12"
+    >Запустить</app-button
+  >
+</div>
+
+<app-modal [open]="isErrorTrajectoryModalOpen" (openChange)="onOpenErorTrajectoryModalChange()">
+  <div class="cancel">
+    <i (click)="isErrorTrajectoryModalOpen = false" appIcon icon="cross" class="cancel__cross"></i>
+
+    <p class="cancel__title">У вас нет активной траектории!</p>
+    <p class="text-body-14 cancel__text">Выберите нужную вам траекторию!</p>
+    <app-button customTypographyClass="text-body-12" (click)="isErrorTrajectoryModalOpen = false"
+      >Ок</app-button
+    >
+  </div>
+</app-modal>

projects/skills/src/app/profile/shared/trajectory-block/trajectory-block.component.scss

@@ -0,0 +1,104 @@
+@use "styles/typography";
+@use "styles/responsive";
+
+.trajectory {
+  position: relative;
+  width: 100%;
+  height: 130px;
+  overflow: hidden;
+  white-space: nowrap;
+  border-radius: 15px;
+  transition: ease 0.3s;
+  cursor: pointer;
+  // padding: 50px 50px 50px 18px;
+  // background-color: var(--white);
+
+  &:hover {
+    box-shadow: 0 0 6px var(--gray);
+  }
+
+  @include responsive.apply-desktop {
+    height: 100px;
+  }
+
+  &__image {
+    height: 100%;
+    object-fit: cover;
+    
+    @include responsive.apply-desktop {
+      width: 100%;
+      height: auto;
+      object-fit: fill;
+    }
+  }
+
+  ::ng-deep {
+    app-button {
+      position: absolute;
+      width: 30%;
+      top: 17%;
+      right: 0%;
+
+      @include responsive.apply-desktop {
+        top: 30%;
+        right: 3%;
+        width: 20%;
+      }
+    }
+  }
+}
+
+.cancel {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  max-height: calc(100vh - 40px);
+  padding: 20px 0 50px;
+  overflow-y: auto;
+
+  @include responsive.apply-desktop {
+    padding: 20px 0 60px;
+  }
+
+  &__cross {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 32px;
+    height: 32px;
+    cursor: pointer;
+
+    @include responsive.apply-desktop {
+      top: 8px;
+      right: 8px;
+    }
+  }
+
+  &__title {
+    margin-top: 10px;
+    margin-bottom: 5px;
+    color: var(--black);
+    text-align: center;
+    inline-size: 280px;
+
+    @include typography.heading-3;
+
+    @include responsive.apply-desktop {
+      inline-size: 500px;
+    }
+  }
+
+  &__text {
+    margin-bottom: 24px;
+    color: var(--grey-for-text);
+  }
+
+  app-button {
+    width: 70%;
+
+    @include responsive.apply-desktop {
+      width: 40%;
+    }
+  }
+}

projects/skills/src/app/profile/shared/trajectory-block/trajectory-block.component.spec.ts

@@ -0,0 +1,24 @@
+/** @format */
+
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { TrajectoryBlockComponent } from "./trajectory-block.component";
+
+describe("TrajectoryBlockComponent", () => {
+  let component: TrajectoryBlockComponent;
+  let fixture: ComponentFixture<TrajectoryBlockComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TrajectoryBlockComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TrajectoryBlockComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/skills/src/app/profile/shared/trajectory-block/trajectory-block.component.ts

@@ -0,0 +1,36 @@
+/** @format */
+
+import { Component, inject } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { ButtonComponent } from "@ui/components";
+import { IconComponent } from "@uilib";
+import { Router } from "@angular/router";
+import { HttpErrorResponse } from "@angular/common/http";
+import { ModalComponent } from "@ui/components/modal/modal.component";
+
+@Component({
+  selector: "app-trajectory-block",
+  standalone: true,
+  imports: [CommonModule, ButtonComponent, IconComponent, ModalComponent],
+  templateUrl: "./trajectory-block.component.html",
+  styleUrl: "./trajectory-block.component.scss",
+})
+export class TrajectoryBlockComponent {
+  private readonly router = inject(Router);
+
+  isErrorTrajectoryModalOpen = false;
+
+  onOpenErorTrajectoryModalChange = (): void => {
+    this.isErrorTrajectoryModalOpen = !this.isErrorTrajectoryModalOpen;
+  };
+
+  navigateToTrajectory = (): void => {
+    this.router.navigateByUrl("/trackCar/1").catch(err => {
+      if (err instanceof HttpErrorResponse) {
+        if (err.status === 404) {
+          this.isErrorTrajectoryModalOpen = true;
+        }
+      }
+    });
+  };
+}

projects/skills/src/assets/images/profile/trajectory.png

@@ -45,6 +45,9 @@ <h4 class="text-heading-4 content__section-heading content__right-heading">Би
       </div>
     </section>
     <div class="content__actions">
+      <app-button (click)="onSkipRegistration()" color="grey" [loader]="skipSubmitting()"
+        >Закончить регистрацию позже</app-button
+      >
       <app-button type="submit" [loader]="stageSubmitting()" (click)="onSubmit()"
         >Продолжить</app-button
       >

projects/social_platform/src/app/office/onboarding/stage-one/stage-one.component.html

@@ -48,6 +48,21 @@
     grid-column: 1/2;
     order: 3;
     margin-top: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+
+    @include responsive.apply-desktop {
+      flex-direction: row;
+      
+      :first-child {
+        width: 100%;
+      }
+  
+      :last-child {
+        width: 60%;
+      }
+    }
   }
 
   &__specs-groups {

projects/social_platform/src/app/office/onboarding/stage-one/stage-one.component.scss

@@ -1,8 +1,8 @@
 /** @format */
 
-import { Component, OnDestroy, OnInit, signal } from "@angular/core";
+import { ChangeDetectorRef, Component, OnDestroy, OnInit, signal } from "@angular/core";
 import { NonNullableFormBuilder, ReactiveFormsModule, Validators } from "@angular/forms";
-import { map, Observable, Subscription, take } from "rxjs";
+import { concatMap, map, Observable, Subscription, take } from "rxjs";
 import { AuthService } from "@auth/services";
 import { ControlErrorPipe, ValidationService } from "@corelib";
 import { ActivatedRoute, Router } from "@angular/router";
@@ -43,11 +43,12 @@ export class OnboardingStageOneComponent implements OnInit, OnDestroy {
     private readonly validationService: ValidationService,
     private readonly specsService: SpecializationsService,
     private readonly router: Router,
-    private readonly route: ActivatedRoute
+    private readonly route: ActivatedRoute,
+    private readonly cdref: ChangeDetectorRef
   ) {}
 
   stageForm = this.nnFb.group({
-    speciality: ["", Validators.required],
+    speciality: [""],
   });
 
   nestedSpecializations$: Observable<SpecializationsGroup[]> = this.route.data.pipe(
@@ -57,6 +58,7 @@ export class OnboardingStageOneComponent implements OnInit, OnDestroy {
   inlineSpecializations = signal<Specialization[]>([]);
 
   stageSubmitting = signal(false);
+  skipSubmitting = signal(false);
 
   errorMessage = ErrorMessage;
 
@@ -76,22 +78,42 @@ export class OnboardingStageOneComponent implements OnInit, OnDestroy {
     this.subscriptions$().push(formValueState$, formValueChange$);
   }
 
+  ngAfterViewInit(): void {
+    const specialityProfile$ = this.onboardingService.formValue$.subscribe(fv => {
+      this.stageForm.patchValue({ speciality: fv.speciality });
+    });
+
+    this.cdref.detectChanges();
+
+    specialityProfile$ && this.subscriptions$().push(specialityProfile$);
+  }
+
   ngOnDestroy(): void {
     this.subscriptions$().forEach($ => $.unsubscribe());
   }
 
+  onSkipRegistration(): void {
+    if (!this.validationService.getFormValidation(this.stageForm)) {
+      return;
+    }
+
+    this.completeRegistration(null);
+  }
+
   onSubmit(): void {
     if (!this.validationService.getFormValidation(this.stageForm)) {
       return;
     }
 
     this.stageSubmitting.set(true);
 
-    this.authService.saveProfile(this.stageForm.value).subscribe(() => {
-      this.router
-        .navigateByUrl("/office/onboarding/stage-2")
-        .then(() => console.debug("Route changed from OnboardingStageOneComponent"));
-    });
+    this.authService
+      .saveProfile(this.stageForm.value)
+      .pipe(concatMap(() => this.authService.setOnboardingStage(2)))
+      .subscribe({
+        next: () => this.completeRegistration(2),
+        error: () => this.stageSubmitting.set(false),
+      });
   }
 
   onSelectSpec(speciality: Specialization): void {
@@ -106,4 +128,13 @@ export class OnboardingStageOneComponent implements OnInit, OnDestroy {
         this.inlineSpecializations.set(results);
       });
   }
+
+  private completeRegistration(stage: number | null): void {
+    this.skipSubmitting.set(true);
+    this.onboardingService.setFormValue(this.stageForm.value);
+    this.authService.setOnboardingStage(stage).subscribe(() => {
+      this.router.navigateByUrl(stage !== null ? "/office/onboarding/stage-2" : "/office/feed");
+    });
+    this.skipSubmitting.set(false);
+  }
 }