refactor(rating-card): extract business logic to RatingCardService

- Create RatingCardService with computed signals and rating flow methods
- Move service to services/ folder within rating-card
- Replace all getter proxies with protected readonly field aliases
- Remove unused fields (_currentIndex, _projects)
- Consolidate ExpandService usage across 5 components
- Remove dead expand code from CourseInfoComponent
- All injects changed to private readonly
- Templates no longer access services directly

Author: Awakich

projects/social_platform/src/app/ui/pages/courses/detail/info/info.component.ts

@@ -1,19 +1,9 @@
 /** @format */
 
-import {
-  AfterViewInit,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  HostListener,
-  inject,
-  OnInit,
-  ViewChild,
-} from "@angular/core";
+import { Component, HostListener, inject } from "@angular/core";
 import { RouterModule } from "@angular/router";
 import { ParseBreaksPipe, ParseLinksPipe } from "@corelib";
 import { IconComponent } from "@uilib";
-import { expandElement } from "@utils/expand-element";
 import { CommonModule } from "@angular/common";
 import { ModalComponent } from "@ui/primitives/modal/modal.component";
 import { ButtonComponent } from "@ui/primitives";
@@ -27,10 +17,7 @@ import { CourseAboutComponent } from "@ui/widgets/course-about/course-about.comp
   selector: "app-detail",
   standalone: true,
   imports: [
-    IconComponent,
     RouterModule,
-    ParseBreaksPipe,
-    ParseLinksPipe,
     CommonModule,
     SoonCardComponent,
     ModalComponent,
@@ -41,38 +28,19 @@ import { CourseAboutComponent } from "@ui/widgets/course-about/course-about.comp
   templateUrl: "./info.component.html",
   styleUrl: "./info.component.scss",
 })
-export class CourseInfoComponent implements OnInit, AfterViewInit {
-  @ViewChild("descEl") descEl?: ElementRef;
-
+export class CourseInfoComponent {
   protected appWidth = window.innerWidth;
 
   @HostListener("window:resize")
   onResize() {
     this.appWidth = window.innerWidth;
   }
 
-  private readonly cdRef = inject(ChangeDetectorRef);
   private readonly courseDetailUIInfoService = inject(CourseDetailUIInfoService);
 
   protected readonly courseStructure = this.courseDetailUIInfoService.courseStructure;
   protected readonly courseDetail = this.courseDetailUIInfoService.course;
   protected readonly courseModules = this.courseDetailUIInfoService.courseModules;
   protected readonly isCompleteModule = this.courseDetailUIInfoService.isCompleteModule;
   protected readonly isCourseCompleted = this.courseDetailUIInfoService.isCourseCompleted;
-
-  protected descriptionExpandable?: boolean;
-  protected readFullDescription!: boolean;
-
-  ngOnInit(): void {}
-
-  ngAfterViewInit(): void {
-    const descElement = this.descEl?.nativeElement;
-    this.descriptionExpandable = descElement?.clientHeight < descElement?.scrollHeight;
-    this.cdRef.detectChanges();
-  }
-
-  onExpandDescription(elem: HTMLElement, expandedClass: string, isExpanded: boolean): void {
-    expandElement(elem, expandedClass, isExpanded);
-    this.readFullDescription = !isExpanded;
-  }
 }

projects/social_platform/src/app/ui/pages/feed/open-vacancy/open-vacancy.component.html

@@ -21,7 +21,7 @@
         {{ project.name | truncate: 30 }}
       </p>
 
-      @if (industryRepository.getOne(project.industry); as industry) {
+      @if (industryRepositoryGetOne(project.industry); as industry) {
       <app-tag class="card__industry" color="complete">
         {{ industry.name }}
       </app-tag>
@@ -59,7 +59,7 @@ <h3 class="text-body-10 lists__title">
           }
         </div>
         } @if (skillsLength > 8) {
-        <div class="read-more text-body-10" (click)="readFullSkills = !readFullSkills">
+        <div class="read-more text-body-10" (click)="toggleSkills()">
           {{ readFullSkills ? "cкрыть" : "подробнее" }}
         </div>
         } }
@@ -73,12 +73,9 @@ <h3 class="text-body-10 lists__title">
             #descEl
             [innerHTML]="vacancy.description | parseLinks | parseBreaks"
           ></p>
-          @if (descriptionExpandable) {
-          <div
-            class="read-more text-body-10"
-            (click)="onExpandDescription(descEl, 'expanded', readFullDescription)"
-          >
-            {{ readFullDescription ? "скрыть" : "подробнее" }}
+          @if (descriptionExpandable()) {
+          <div class="read-more text-body-10" (click)="onExpandDescription(descEl)">
+            {{ readFullDescription() ? "скрыть" : "подробнее" }}
           </div>
           }
         </div>

projects/social_platform/src/app/ui/pages/feed/open-vacancy/open-vacancy.component.ts

@@ -3,9 +3,9 @@
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
-  ChangeDetectorRef,
   Component,
   ElementRef,
+  inject,
   Input,
   ViewChild,
 } from "@angular/core";
@@ -14,11 +14,11 @@ import { ButtonComponent } from "@ui/primitives";
 import { Router, RouterLink } from "@angular/router";
 import { TagComponent } from "@ui/primitives/tag/tag.component";
 import { Vacancy } from "@domain/vacancy/vacancy.model";
-import { expandElement } from "@utils/expand-element";
 import { AvatarComponent } from "@ui/primitives/avatar/avatar.component";
 import { TruncatePipe, DayjsPipe, ParseBreaksPipe, ParseLinksPipe } from "@corelib";
 import { AppRoutes } from "@api/paths/app-routes";
 import { IndustryRepositoryPort } from "@domain/industry/ports/industry.repository.port";
+import { ExpandService } from "@api/expand/expand.service";
 
 /** Карточка вакансии в ленте с поддержкой разворачивания контента. */
 @Component({
@@ -38,48 +38,40 @@ import { IndustryRepositoryPort } from "@domain/industry/ports/industry.reposito
   templateUrl: "./open-vacancy.component.html",
   styleUrl: "./open-vacancy.component.scss",
   changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [ExpandService],
 })
 export class OpenVacancyComponent implements AfterViewInit {
   @Input() feedItem!: Vacancy;
-  protected readonly AppRoutes = AppRoutes;
 
-  @ViewChild("skillsEl") skillsEl?: ElementRef;
-  @ViewChild("descEl") descEl?: ElementRef;
+  private readonly expandService = inject(ExpandService);
+  protected readonly AppRoutes = AppRoutes;
+  private readonly industryRepository = inject(IndustryRepositoryPort);
 
-  constructor(
-    public readonly router: Router,
-    private readonly cdRef: ChangeDetectorRef,
-    public readonly industryRepository: IndustryRepositoryPort
-  ) {}
+  @ViewChild("skillsEl") private skillsEl?: ElementRef;
+  @ViewChild("descEl") private descEl?: ElementRef;
 
-  ngAfterViewInit(): void {
-    // Проверяем, превышает ли описание доступную высоту
-    const descElement = this.descEl?.nativeElement;
-    this.descriptionExpandable = descElement?.clientHeight < descElement?.scrollHeight;
+  readFullSkills = false;
 
-    // Проверяем, превышает ли список навыков доступную высоту
-    const skillsElement = this.skillsEl?.nativeElement;
-    this.skillsExpandable = skillsElement?.clientHeight < skillsElement?.scrollHeight;
+  protected readonly descriptionExpandable = this.expandService.descriptionExpandable;
+  protected readonly readFullDescription = this.expandService.readFullDescription;
+  protected readonly industryRepositoryGetOne = (id: number) => this.industryRepository.getOne(id);
 
-    // Обновляем UI после изменения флагов
-    this.cdRef.detectChanges();
+  ngAfterViewInit(): void {
+    setTimeout(() => {
+      this.expandService.checkExpandable("description", true, this.descEl);
+    });
   }
 
-  // Флаги для определения возможности развертывания контента
-  descriptionExpandable!: boolean; // Можно ли развернуть описание
-  skillsExpandable!: boolean; // Можно ли развернуть список навыков
-
-  // Состояние развертывания контента
-  readFullDescription = false; // Развернуто ли описание
-  readFullSkills = false; // Развернут ли список навыков
-
-  onExpandDescription(elem: HTMLElement, expandedClass: string, isExpanded: boolean): void {
-    expandElement(elem, expandedClass, isExpanded);
-    this.readFullDescription = !isExpanded;
+  protected onExpandDescription(elem: HTMLElement): void {
+    this.expandService.onExpand(
+      "description",
+      elem,
+      "expanded",
+      this.expandService.readFullDescription()
+    );
   }
 
-  onExpandSkills(elem: HTMLElement, expandedClass: string, isExpanded: boolean): void {
-    expandElement(elem, expandedClass, isExpanded);
-    this.readFullSkills = !isExpanded;
+  protected toggleSkills(): void {
+    this.readFullSkills = !this.readFullSkills;
   }
 }

projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/rating-card.component.html

@@ -17,7 +17,7 @@
             <p class="text-body-12 card__naming--text">{{ project.name | truncate: 15 }}</p>
           </a>
 
-          @if (industryRepository.getOne(project.industry); as industry) {
+          @if (industryRepositoryGetOne(project.industry); as industry) {
           <app-tag class="card__industry" color="complete">
             {{ industry.name }}
           </app-tag>
@@ -49,10 +49,7 @@
       <div class="text-body-10 about__text">
         <p #descEl [innerHTML]="project.description | parseLinks | parseBreaks"></p>
         @if (descriptionExpandable()) {
-        <div
-          class="about__read-full text-body-10"
-          (click)="expandDescription(descEl, 'expanded', readFullDescription())"
-        >
+        <div class="about__read-full text-body-10" (click)="onExpandDescription(descEl)">
           {{ readFullDescription() ? "скрыть" : "подробнее" }}
         </div>
         }
@@ -74,36 +71,36 @@
       </div>
       <app-project-rating
         [criteria]="project.criterias"
-        [formControl]="form"
+        [formControl]="form()"
         [currentUserId]="profile()!.id"
         [disabled]="
-          (projectRated() || projectConfirmed()) && isRatedByCurrentUser && !programDateFinished()
+          (projectRated() || projectConfirmed()) && isRatedByCurrentUser() && !programDateFinished()
         "
       ></app-project-rating>
-      @if (form | controlError: "required"; as error) {
+      @if (form() | controlError: "required"; as error) {
       <div class="text-body-10 error">
         {{ error }}
       </div>
       }
     </div>
 
-    @if (showRatingForm || showRatedStatus || showConfirmedState) {
+    @if (showRatingForm() || showRatedStatus() || showConfirmedState()) {
     <div class="card__rated">
       <app-button
         style="flex-grow: 1"
         customTypographyClass="text-body-12"
         size="big"
         [loader]="submitLoading() || confirmLoading()"
-        [disabled]="isButtonDisabled"
-        [style.opacity]="buttonOpacity"
-        [color]="buttonColor"
-        [title]="buttonTooltip"
+        [disabled]="isButtonDisabled()"
+        [style.opacity]="buttonOpacity()"
+        [color]="buttonColor()"
+        [title]="buttonTooltip()"
         (click)="handleRateButtonClick()"
       >
-        {{ rateButtonText }}
+        {{ rateButtonText() }}
       </app-button>
 
-      @if (showEditButton) {
+      @if (showEditButton()) {
       <app-button
         appearance="outline"
         size="small"
@@ -117,10 +114,7 @@
     </div>
     }
 
-    <app-modal
-      [open]="showConfirmRateModal()"
-      (openChange)="showConfirmRateModal.set(!showConfirmRateModal())"
-    >
+    <app-modal [open]="showConfirmRateModal()" (openChange)="toggleConfirmRateModal()">
       <div class="cancel">
         <div class="cancel__top">
           <p class="cancel__title text-body-14">подтвердите оценку</p>
@@ -135,7 +129,7 @@
           @if (showConfirmRateModal()) {
           <app-project-rating
             [criteria]="project.criterias"
-            [formControl]="form"
+            [formControl]="form()"
             [disabled]="true"
           ></app-project-rating>
           }
@@ -156,7 +150,7 @@
             class="cancel__button"
             appearance="outline"
             customTypographyClass="text-body-12"
-            (click)="showConfirmRateModal.set(false)"
+            (click)="closeConfirmRateModal()"
           >
             изменить оценку
           </app-button>