fix current lesson & meta text, move logic from components to services facade

Author: Awakich

projects/social_platform/src/app/api/courses/facades/lesson-info.service.ts

@@ -5,6 +5,7 @@ import { ActivatedRoute, NavigationEnd, Router } from "@angular/router";
 import { filter, map, Subject, takeUntil } from "rxjs";
 import { CourseLesson, Task } from "@domain/courses/courses.model";
 import { LessonUIInfoService } from "./ui/lesson-ui-info.service";
+import { CourseDetailUIInfoService } from "./ui/course-detail-ui-info.service";
 import { SubmitTaskAnswerUseCase } from "../use-cases/submit-task-answer.use-case";
 import { SnackbarService } from "@ui/services/snackbar/snackbar.service";
 import { failure, loading, success } from "@domain/shared/async-state";
@@ -16,6 +17,7 @@ export class LessonInfoService {
   private readonly submitTaskAnswerUseCase = inject(SubmitTaskAnswerUseCase);
   private readonly snackbarService = inject(SnackbarService);
   private readonly lessonUIInfoService = inject(LessonUIInfoService);
+  private readonly courseDetailUIInfoService = inject(CourseDetailUIInfoService);
 
   private readonly destroy$ = new Subject<void>();
 
@@ -25,6 +27,7 @@ export class LessonInfoService {
   }
 
   destroy(): void {
+    this.courseDetailUIInfoService.currentLesson.set(undefined);
     this.destroy$.next();
     this.destroy$.complete();
   }
@@ -127,6 +130,7 @@ export class LessonInfoService {
         next: lessonInfo => {
           this.lessonUIInfoService.loading.set(true);
           this.lessonUIInfoService.lesson$.set(success(lessonInfo));
+          this.courseDetailUIInfoService.currentLesson.set(lessonInfo);
 
           if (lessonInfo.progressStatus === "completed") {
             setTimeout(() => {

projects/social_platform/src/app/api/courses/facades/ui/course-detail-ui-info.service.ts

@@ -1,7 +1,7 @@
 /** @format */
 
 import { computed, inject, Injectable, signal } from "@angular/core";
-import { CourseDetail, CourseStructure } from "@domain/courses/courses.model";
+import { CourseDetail, CourseLesson, CourseStructure } from "@domain/courses/courses.model";
 import { AsyncState, initial, isLoading, isSuccess } from "@domain/shared/async-state";
 import { SeenModulesStoragePort } from "@domain/courses/ports/seen-modules-storage.port";
 
@@ -12,6 +12,20 @@ export class CourseDetailUIInfoService {
   readonly courseDetail$ = signal<AsyncState<CourseDetail>>(initial());
   readonly courseStructure$ = signal<AsyncState<CourseStructure>>(initial());
 
+  readonly currentLesson = signal<CourseLesson | undefined>(undefined);
+
+  readonly currentLessonOrder = computed<number | null>(() => {
+    const lesson = this.currentLesson();
+    const structure = this.courseStructure();
+    if (!lesson || !structure) return null;
+
+    for (const mod of structure.modules) {
+      const found = mod.lessons.find(l => l.id === lesson.id);
+      if (found) return found.order;
+    }
+    return null;
+  });
+
   readonly loading = computed(() => {
     const detail = this.courseDetail$();
     const structure = this.courseStructure$();

projects/social_platform/src/app/api/program/facades/detail/ui/program-detail-main-ui-info.service.ts

@@ -1,6 +1,6 @@
 /** @format */
 
-import { Injectable, signal } from "@angular/core";
+import { computed, Injectable, signal } from "@angular/core";
 import { ApiPagination } from "@domain/other/api-pagination.model";
 import { Program } from "@domain/program/program.model";
 import { FeedNews } from "@domain/project/project-news.model";
@@ -10,6 +10,14 @@ export class ProgramDetailMainUIInfoService {
   readonly program = signal<Program | undefined>(undefined);
   readonly programId = signal<number | undefined>(undefined);
 
+  readonly contactLinks = computed<{ label: string; url: string }[]>(() =>
+    (this.program()?.links ?? []).map(link => ({ label: link, url: link }))
+  );
+
+  readonly materialLinks = computed<{ label: string; url: string }[]>(() =>
+    (this.program()?.materials ?? []).map(m => ({ label: m.title, url: m.url }))
+  );
+
   readonly totalNewsCount = signal(0);
 
   // Сигналы для работы с модальными окнами с текстом

projects/social_platform/src/app/ui/pages/courses/detail/course-detail.component.html

@@ -35,12 +35,12 @@ <h1 class="info__title text-body-12">
             назад
           </app-button>
 
-          <!-- <div class="task__meta">
-            @if (lessonInfo()) {
-            <p class="text-body-14">модуль {{ lessonInfo()!.moduleOrder }}</p>
-            <p class="task__lesson text-body-12">урок {{ lessonOrder() }}</p>
-            }
-          </div> -->
+          @if (currentLesson()) {
+          <div class="task__meta">
+            <p class="text-body-14">модуль {{ currentLesson()!.moduleOrder }}</p>
+            <p class="task__lesson text-body-12">урок {{ currentLessonOrder() }}</p>
+          </div>
+          }
 
           <app-button
             size="small"

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

@@ -9,9 +9,7 @@ import { LoaderComponent } from "@ui/primitives/loader/loader.component";
 import { CourseDetailInfoService } from "@api/courses/facades/course-detail-info.service";
 import { CourseDetailUIInfoService } from "@api/courses/facades/ui/course-detail-ui-info.service";
 import { CourseAboutComponent } from "@ui/widgets/course-about/course-about.component";
-import { LessonUIInfoService } from "@api/courses/facades/ui/lesson-ui-info.service";
 import { ModalComponent } from "@ui/primitives/modal/modal.component";
-import { LessonInfoService } from "@api/courses/facades/lesson-info.service";
 
 @Component({
   selector: "app-course-detail",
@@ -38,6 +36,8 @@ export class CourseDetailComponent implements OnInit, OnDestroy {
   protected readonly courseModules = this.courseDetailUIInfoService.courseModules;
   protected readonly isDisabled = this.courseDetailUIInfoService.isDisabled;
   protected readonly isTaskDetail = this.courseDetailUIInfoService.isTaskDetail;
+  protected readonly currentLesson = this.courseDetailUIInfoService.currentLesson;
+  protected readonly currentLessonOrder = this.courseDetailUIInfoService.currentLessonOrder;
 
   isAboutModalOpen = false;
 

projects/social_platform/src/app/ui/pages/courses/lesson/lesson.component.html

@@ -92,6 +92,7 @@
         <app-button
           [loader]="loader()"
           [disabled]="isSubmitDisabled() || isViewingCompleted()"
+          [style.opacity]="isSubmitDisabled() || isViewingCompleted() ? 0.5 : 1"
           size="big"
           customTypographyClass="text-body-12"
           class="action__button"

projects/social_platform/src/app/ui/pages/program/detail/main/main.component.html

@@ -73,15 +73,15 @@ <h3 class="text-body-12 about__title">о программе</h3>
           <app-program-links
             title="контакты"
             icon="phone"
-            [links]="contactLinks"
+            [links]="contactLinks()"
           ></app-program-links>
         </aside>
         } @if (program()!.isUserMember && program()!.materials?.length) {
         <aside class="program__aside program__section">
           <app-program-links
             title="материалы"
             icon="book"
-            [links]="materialLinks"
+            [links]="materialLinks()"
           ></app-program-links>
         </aside>
         }

projects/social_platform/src/app/ui/pages/program/detail/main/main.component.ts

@@ -88,13 +88,8 @@ export class ProgramDetailMainComponent implements OnInit, OnDestroy {
   protected readonly registeredProgramModal =
     this.programDetailMainUIInfoService.registeredProgramModal;
 
-  get contactLinks(): { label: string; url: string }[] {
-    return (this.program()?.links ?? []).map(link => ({ label: link, url: link }));
-  }
-
-  get materialLinks(): { label: string; url: string }[] {
-    return (this.program()?.materials ?? []).map(m => ({ label: m.title, url: m.url }));
-  }
+  protected readonly contactLinks = this.programDetailMainUIInfoService.contactLinks;
+  protected readonly materialLinks = this.programDetailMainUIInfoService.materialLinks;
 
   protected appWidth = window.innerWidth;
 

projects/social_platform/src/app/ui/widgets/detail/detail.component.html

@@ -101,20 +101,20 @@
             [disabled]="!info().links?.length"
             class="info__contacts"
             customTypographyClass="text-body-12"
-            (click)="isContactsModalOpen = true"
+            (click)="isContactsModalOpen.set(true)"
           >
             <i appIcon icon="phone" appSquare="12"></i>
           </app-button>
 
           <app-modal
-            [open]="isContactsModalOpen"
-            (openChange)="isContactsModalOpen = !isContactsModalOpen"
+            [open]="isContactsModalOpen()"
+            (openChange)="isContactsModalOpen.set(!isContactsModalOpen())"
             bodyClass="modal__body--no-flex"
           >
             <app-program-links
               title="контакты"
               icon="phone"
-              [links]="contactLinks"
+              [links]="contactLinks()"
             ></app-program-links>
           </app-modal>
           } @else {
@@ -213,7 +213,7 @@
             [disabled]="!info().links?.length"
             class="info__contacts"
             customTypographyClass="text-body-12"
-            (click)="isContactsModalOpen = true"
+            (click)="isContactsModalOpen.set(true)"
           >
             <i appIcon icon="phone" appSquare="12"></i>
           </app-button>
@@ -258,7 +258,7 @@
             class="info__materials"
             [class.info__materials--full]="isUserManager() || isUserExpert()"
             customTypographyClass="text-body-12"
-            (click)="isMaterialsModalOpen = true"
+            (click)="isMaterialsModalOpen.set(true)"
           >
             материалы
           </app-button>
@@ -330,26 +330,26 @@
           </app-modal>
 
           <app-modal
-            [open]="isContactsModalOpen"
-            (openChange)="isContactsModalOpen = !isContactsModalOpen"
+            [open]="isContactsModalOpen()"
+            (openChange)="isContactsModalOpen.set(!isContactsModalOpen())"
             bodyClass="modal__body--no-flex"
           >
             <app-program-links
               title="контакты"
               icon="phone"
-              [links]="contactLinks"
+              [links]="contactLinks()"
             ></app-program-links>
           </app-modal>
 
           <app-modal
-            [open]="isMaterialsModalOpen"
-            (openChange)="isMaterialsModalOpen = !isMaterialsModalOpen"
+            [open]="isMaterialsModalOpen()"
+            (openChange)="isMaterialsModalOpen.set(!isMaterialsModalOpen())"
             bodyClass="modal__body--no-flex"
           >
             <app-program-links
               title="материалы"
               icon="book"
-              [links]="materialLinks"
+              [links]="materialLinks()"
             ></app-program-links>
           </app-modal>
           } }

projects/social_platform/src/app/ui/widgets/detail/detail.component.ts

@@ -168,19 +168,10 @@ export class DeatilComponent implements OnInit, OnDestroy {
 
   protected readonly errorMessage = ErrorMessage;
 
-  isContactsModalOpen = false;
-  isMaterialsModalOpen = false;
-
-  get contactLinks(): { label: string; url: string }[] {
-    return (this.info()?.links ?? []).map((link: string) => ({ label: link, url: link }));
-  }
-
-  get materialLinks(): { label: string; url: string }[] {
-    return (this.info()?.materials ?? []).map((m: { title: string; url: string }) => ({
-      label: m.title,
-      url: m.url,
-    }));
-  }
+  protected readonly isContactsModalOpen = this.detailInfoService.isContactsModalOpen;
+  protected readonly isMaterialsModalOpen = this.detailInfoService.isMaterialsModalOpen;
+  protected readonly contactLinks = this.detailInfoService.contactLinks;
+  protected readonly materialLinks = this.detailInfoService.materialLinks;
 
   protected appWidth = window.innerWidth;