add fixes of design and modals

Author: Awakich

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

@@ -16,10 +16,9 @@ <h2 class="skills__title">Навыки</h2>
     }}</span>
     <div class="skills_list">
       @for (skill of displayedSkills; track $index) {
-      <app-personal-rating-card
-        [routerLink]="['/skills', skill.skillId]"
-        [personalRatingCardData]="skill"
-      ></app-personal-rating-card>
+      <div (click)="onSkillClick(skill.skillId)">
+        <app-personal-rating-card [personalRatingCardData]="skill"></app-personal-rating-card>
+      </div>
       } @empty {
       <!-- <p class="skills__placeholder-text">
         выберите навыки,которые Вы будете развивать в этом месяце
@@ -72,6 +71,36 @@ <h2 class="skills__title">Навыки</h2>
   </div>
 </app-modal>
 
+<app-modal [open]="nonConfirmerModalOpen()">
+  <div class="confirm">
+    <h4 class="confirm__title text-heading-4">У вас нет активной подписки</h4>
+    <div class="cancel__confirm">
+      <img alt="more image" src="assets\images\trajectories\more.svg" class="confirm__image" />
+      <p class="text-body-12 cancel__subtext">
+        Чтобы получить доступ ко всем возможностям платформы, оформите подписку прямо сейчас!
+      </p>
+
+      <div class="cancel__buttons-group">
+        <app-button
+          customTypographyClass="text-body-12"
+          [color]="'grey'"
+          style="width: 100%"
+          (click)="nonConfirmerModalOpen.set(false)"
+          >Назад</app-button
+        >
+
+        <app-button
+          routerLink="/subscription"
+          style="width: 100%"
+          customTypographyClass="text-body-12"
+          [color]="'primary'"
+          >Купить</app-button
+        >
+      </div>
+    </div>
+  </div>
+</app-modal>
+
 <app-skill-chooser
   [open]="openSkillChoose"
   (openChange)="onOpenSkillsChange($event)"

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

@@ -180,10 +180,6 @@
     }
   }
 
-  &__subtext {
-    color: var(--black);
-  }
-
   &__wave {
     position: absolute;
     bottom: -20%;
@@ -192,4 +188,67 @@
     width: 100%;
     opacity: 0.3;
   }
+
+  &__buttons-group {
+    display: flex;
+    gap: 15px;
+    width: 100%;
+    margin-top: 20px;
+
+    app-button {
+      width: 100%;
+      border-radius: 15px;
+    }
+  }
+
+  &__confirm {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    @include responsive.apply-desktop {
+      align-items: center;
+      text-align: center;
+    }
+  }
+
+  &__subtext {
+    width: 100%;
+    margin-bottom: 24px;
+
+    @include responsive.apply-desktop {
+      width: 80%;
+    }
+  }
 }
+
+
+.confirm {
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  text-align: center;
+
+  @include responsive.apply-desktop {
+    padding: 20px 50px 24px;
+  }
+
+  &__title {
+    margin-bottom: 20px;
+  }
+
+  &__image {
+    width: 130px;
+    height: 125px;
+    margin-top: 24px;
+    margin-bottom: 18px;
+
+    @include responsive.apply-desktop {
+      width: 100%;
+      height: 218px;
+    }
+  }
+}

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

@@ -5,13 +5,14 @@ import { CommonModule, NgOptimizedImage } from "@angular/common";
 import { ButtonComponent } from "@ui/components";
 import { PersonalRatingCardComponent } from "../personal-rating-card/personal-rating-card.component";
 import { IconComponent } from "@uilib";
-import { RouterLink } from "@angular/router";
+import { Router, RouterLink } from "@angular/router";
 import { SkillChooserComponent } from "../skill-chooser/skill-chooser.component";
 import { ProfileService } from "../../services/profile.service";
 import { Profile } from "projects/skills/src/models/profile.model";
 import { ModalComponent } from "@ui/components/modal/modal.component";
 import { PersonalSkillCardComponent } from "../personal-skill-card/personal-skill-card.component";
 import { animate, style, transition, trigger } from "@angular/animations";
+import { SkillService } from "../../../skills/services/skill.service";
 
 @Component({
   selector: "app-skills-block",
@@ -34,8 +35,12 @@ export class SkillsBlockComponent implements OnInit {
   isHintVisible = false;
 
   profileService = inject(ProfileService);
+  skillService = inject(SkillService);
+  router = inject(Router);
+
   skillsList: Profile["skills"] = [];
   displayedSkills: Profile["skills"] = [];
+  nonConfirmerModalOpen = signal(false);
 
   limit = 2;
   offset = 0;
@@ -89,6 +94,15 @@ export class SkillsBlockComponent implements OnInit {
     this.displayedSkills = this.skillsList.slice(this.offset, this.offset + this.limit);
   }
 
+  onSkillClick(skillId: number) {
+    this.skillService.setSkillId(skillId);
+    this.router.navigate(["skills", skillId]).catch(err => {
+      if (err.status === 403) {
+        this.nonConfirmerModalOpen.set(true);
+      }
+    });
+  }
+
   ngOnInit(): void {
     this.profileService.getProfile().subscribe((r: Profile) => {
       this.skillsList = r["skills"];

projects/skills/src/app/skills/list/list.component.ts

@@ -3,7 +3,13 @@
 import { Component, inject, OnDestroy, OnInit, signal } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { BackComponent, IconComponent } from "@uilib";
-import { ActivatedRoute, Router, RouterLink, RouterLinkActive } from "@angular/router";
+import {
+  ActivatedRoute,
+  Router,
+  RouterLink,
+  RouterLinkActive,
+  RouterModule,
+} from "@angular/router";
 import { BarComponent, ButtonComponent } from "@ui/components";
 import { SkillCardComponent } from "../shared/skill-card/skill-card.component";
 import { map, Observable, Subscription } from "rxjs";
@@ -27,6 +33,8 @@ import { ModalComponent } from "@ui/components/modal/modal.component";
     SkillCardComponent,
     BarComponent,
     ReactiveFormsModule,
+    RouterLink,
+    RouterModule,
   ],
   templateUrl: "./list.component.html",
   styleUrl: "./list.component.scss",

projects/skills/src/app/subscription/subscription.component.ts

@@ -46,6 +46,7 @@ export class SubscriptionComponent implements OnInit, OnDestroy {
           } else return [subscription];
         })
       )
+      .pipe(map(subs => subs.sort((a, b) => a.price - b.price)))
       .subscribe(subscriptions => {
         this.subscriptions.set(subscriptions);
       });