fix(profile): fix skills selection & fix specs postion

Author: Awakich

projects/social_platform/src/app/ui/pages/profile/edit/edit.component.html

@@ -169,6 +169,7 @@ <h4 class="text-heading-4">более специальностей</h4>
                   [options]="specsGroup.specializations"
                   [hasOpenGroups]="hasOpenSpecializationsGroups()"
                   [disabled]="isSpecializationGroupDisabled(specsGroup.name)"
+                  [selectedName]="selectedSpecialityName()"
                   (groupToggled)="onSpecializationsGroupToggled($event, specsGroup.name)"
                   (selectOption)="onSelectSpec($event)"
                 ></app-specializations-group>

projects/social_platform/src/app/ui/pages/profile/edit/edit.component.ts

@@ -45,6 +45,7 @@ import { SearchesService } from "@api/searches/searches.service";
 import { EditStep } from "@core/lib/models/edit-step";
 import { GetSpecializationsNestedUseCase } from "@api/specializations/use-cases/get-specializations-nested.use-case";
 import { map } from "rxjs";
+import { toSignal } from "@angular/core/rxjs-interop";
 import { ProfileEditAchievementsInfoService } from "@api/profile/facades/edit/profile-edit-achievements-info.service";
 
 /** Многошаговая форма редактирования профиля пользователя. */
@@ -100,6 +101,11 @@ export class ProfileEditComponent implements OnInit, AfterViewInit {
 
   protected readonly profileForm = this.profileFormService.getForm();
 
+  protected readonly selectedSpecialityName = toSignal(
+    this.profileFormService.getForm().get("speciality")!.valueChanges,
+    { initialValue: this.profileFormService.getForm().get("speciality")!.value as string | null },
+  );
+
   ngOnInit(): void {
     this.profileEditInfoService.initializationEditInfo();
   }

projects/social_platform/src/app/ui/widgets/skills-group/skills-group.component.scss

@@ -6,7 +6,6 @@
   min-height: 32px;
 
   .heading {
-    position: relative;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -58,7 +57,7 @@
 
     &--open {
       position: absolute;
-      top: 0%;
+      top: 3%;
       right: 0%;
       width: 40%;
     }

projects/social_platform/src/app/ui/widgets/specializations-group/specializations-group.component.html

@@ -19,7 +19,11 @@
   @if (contentVisible()) {
     <div class="content" [class.content--open]="hasOpenGroups()">
       @for (opt of options(); track opt.id) {
-        <div class="content__option" [class.content__option--disabled]="disabled()">
+        <div
+          class="content__option"
+          [class.content__option--disabled]="disabled()"
+          [class.content__option--selected]="selectedName() === opt.name"
+        >
           <label class="text-body-12" (click)="onSelectOption(opt)">{{ opt.name }}</label>
         </div>
       }

projects/social_platform/src/app/ui/widgets/specializations-group/specializations-group.component.scss

@@ -79,6 +79,15 @@
         background-color: var(--light-gray);
       }
 
+      &--selected {
+        background-color: var(--light-gray);
+
+        label {
+          color: var(--accent);
+          font-weight: 600;
+        }
+      }
+
       &--disabled {
         pointer-events: none;
         cursor: not-allowed;

projects/social_platform/src/app/ui/widgets/specializations-group/specializations-group.component.ts

@@ -18,6 +18,7 @@ export class SpecializationsGroupComponent {
   readonly options = input.required<Specialization[]>();
   readonly hasOpenGroups = input<boolean>(false);
   readonly disabled = input<boolean>(false);
+  readonly selectedName = input<string | null>(null);
 
   readonly selectOption = output<Specialization>();
   readonly groupToggled = output<boolean>();