fix layout of tasks & file attachment, file service handle 401 eror, percent data update, add directive for scaling

Author: Awakich

projects/social_platform/src/app/core/services/file.service.ts

@@ -33,17 +33,44 @@ export class FileService {
     formData.append("file", file);
 
     return new Observable<{ url: string }>(observer => {
-      fetch(`${environment.apiUrl}${this.FILES_URL}/`, {
-        method: "POST",
-        headers: {
-          Authorization: `Bearer ${this.tokenService.getTokens()?.access}`,
-        },
-        body: formData,
-      })
-        .then(res => res.json())
+      const doFetch = (token: string) =>
+        fetch(`${environment.apiUrl}${this.FILES_URL}/`, {
+          method: "POST",
+          headers: { Authorization: `Bearer ${token}` },
+          body: formData,
+        });
+
+      const token = this.tokenService.getTokens()?.access;
+      if (!token) {
+        observer.error(new Error("No access token"));
+        return;
+      }
+
+      doFetch(token)
+        .then(res => {
+          if (res.status === 401) {
+            this.tokenService.refreshTokens().subscribe({
+              next: newTokens => {
+                this.tokenService.memTokens(newTokens);
+                doFetch(newTokens.access)
+                  .then(r => r.json())
+                  .then(data => {
+                    observer.next(data);
+                    observer.complete();
+                  })
+                  .catch(err => observer.error(err));
+              },
+              error: err => observer.error(err),
+            });
+            return;
+          }
+          return res.json();
+        })
         .then(res => {
-          observer.next(res);
-          observer.complete();
+          if (res) {
+            observer.next(res);
+            observer.complete();
+          }
         })
         .catch(err => observer.error(err));
     });

projects/social_platform/src/app/office/courses/detail/course-detail.routes.ts

@@ -1,13 +1,15 @@
 /** @format */
 
+import type { Routes } from "@angular/router";
 import { TrajectoryInfoComponent } from "./info/info.component";
 import { CourseDetailComponent } from "./course-detail.component";
 import { CoursesDetailResolver } from "./course-detail.resolver";
 
-export const COURSE_DETAIL_ROUTES = [
+export const COURSE_DETAIL_ROUTES: Routes = [
   {
     path: "",
     component: CourseDetailComponent,
+    runGuardsAndResolvers: "always",
     resolve: {
       data: CoursesDetailResolver,
     },

projects/social_platform/src/app/office/courses/detail/info/info.component.ts

@@ -77,8 +77,21 @@ export class TrajectoryInfoComponent implements OnInit, AfterViewInit {
         this.courseStructure.set(courseStructure);
         this.courseDetail.set(courseDetail);
 
-        if (courseStructure.percent === 100) {
+        const completedModuleIds = courseStructure.modules
+          .filter(m => m.progressStatus === "completed")
+          .map(m => m.id);
+
+        const unseenModule = completedModuleIds.find(
+          id =>
+            !localStorage.getItem(`course_${courseStructure.courseId}_module_${id}_complete_seen`)
+        );
+
+        if (unseenModule) {
           this.isCompleteModule.set(true);
+          localStorage.setItem(
+            `course_${courseStructure.courseId}_module_${unseenModule}_complete_seen`,
+            "true"
+          );
         }
       });
   }

projects/social_platform/src/app/office/courses/lesson/complete/complete.component.ts

@@ -34,6 +34,6 @@ export class TaskCompleteComponent implements OnInit {
 
   routeToCourses(): void {
     const id = this.courseId();
-    this.router.navigateByUrl(id ? `/office/courses/${id}` : "/office/courses/all");
+    this.router.navigate(id ? ["/office/courses", id] : ["/office/courses/all"]);
   }
 }

projects/social_platform/src/app/office/courses/lesson/lesson.component.ts

@@ -161,7 +161,7 @@ export class LessonComponent implements OnInit {
 
     const body = this.answerBody();
     const isTextFile = task.answerType === "text_and_files";
-    const answerText = task.answerType === "text" ? body : isTextFile ? body?.text : undefined;
+    const answerText = task.answerType === "text" || isTextFile ? body?.text : undefined;
     const optionIds =
       task.answerType === "single_choice" || task.answerType === "multiple_choice"
         ? body
@@ -183,7 +183,7 @@ export class LessonComponent implements OnInit {
           } else {
             this.hasError.set(true);
             this.success.set(false);
-            this.snackbarService.info("находится на проверке, ожидайте!");
+            this.snackbarService.error("неверный ответ, попробуйте еще раз!");
             setTimeout(() => this.hasError.set(false), 1000);
             return;
           }
@@ -205,7 +205,7 @@ export class LessonComponent implements OnInit {
         error: () => {
           this.loader.set(false);
           this.hasError.set(true);
-          this.snackbarService.error("упс, вышла неточность! попробуйте еще раз");
+          this.snackbarService.error("неверный ответ, попробуйте еще раз!");
         },
       });
   }

projects/social_platform/src/app/office/courses/lesson/shared/exclude-task/exclude-task.component.html

@@ -1,7 +1,7 @@
 <!-- @format -->
 
 <div class="exclude" [class.exclude--hasContent]="hasVideoUrl() || !!data.imageUrl">
-  <div class="exclude__body">
+  <div class="exclude__body" [class.exclude__body--hasContent]="hasVideoUrl() || !!data.imageUrl">
     @if (!hasVideoUrl() && !data.imageUrl) {
     <h2 class="exclude__title text-body-12-bold">{{ data.title | truncate: 110 }}</h2>
     }
@@ -11,14 +11,17 @@ <h2 class="exclude__title text-body-12-bold">{{ data.title | truncate: 110 }}</h
     >
       @if (getSafeVideoUrl(); as videoUrl) {
       <iframe [src]="videoUrl" frameborder="0" allowfullscreen allowtransparency="true"></iframe>
-      } @else {
-      <img alt="exclude-image" [src]="data.imageUrl" class="exclude__image" />
-      <div [innerHTML]="data.bodyText | truncate: 700"></div>
+      } @else if (data.imageUrl) {
+      <img appImagePreview alt="exclude-image" [src]="data.imageUrl" class="exclude__image" />
       }
+      <div [innerHTML]="data.bodyText | truncate: 700"></div>
     </div>
   </div>
 
-  <div class="exclude__content">
+  <div
+    class="exclude__content"
+    [class.exclude__content--hasContent]="hasVideoUrl() || !!data.imageUrl"
+  >
     <p class="exclude__answer text-body-12">ответ</p>
     <ul class="exclude__list">
       <p class="exclude__text text-body-12">{{ data.title | truncate: 110 }}</p>

projects/social_platform/src/app/office/courses/lesson/shared/exclude-task/exclude-task.component.scss

@@ -77,11 +77,11 @@
 
   &__image {
     width: 100%;
-    max-width: 150px;
+    max-width: 300px;
     height: 100%;
-    max-height: 200px;
-    margin: calc(75px - 24px) calc(92px - 24px) 26px calc(92px - 24px);
-    object-fit: contain;
+    max-height: 150px;
+    margin: calc(75px - 24px) 0 26px 0;
+    object-fit: cover;
     border-radius: var(--rounded-lg);
   }
 
@@ -95,8 +95,20 @@
     border-radius: var(--rounded-lg);
   }
 
+  &__body {
+    &--hasContent {
+      max-width: 333px;
+    }
+  }
+
   &__content {
-    min-width: 333px;
+    &--hasContent {
+      min-width: 333px;
+    }
+
+    &:not(&--hasContent) {
+      max-width: 333px;
+    }
   }
 
   :host ::ng-deep &__hint p {

projects/social_platform/src/app/office/courses/lesson/shared/exclude-task/exclude-task.component.ts

@@ -7,6 +7,7 @@ import { CheckboxComponent } from "@ui/components";
 import { TruncatePipe } from "projects/core/src/lib/pipes/truncate.pipe";
 import { Task } from "@office/models/courses.model";
 import { resolveVideoUrlForIframe } from "@utils/video-url-embed";
+import { ImagePreviewDirective } from "../image-preview/image-preview.directive";
 
 /**
  * Компо��ент задачи на исключение лишнего
@@ -31,7 +32,7 @@ import { resolveVideoUrlForIframe } from "@utils/video-url-embed";
 @Component({
   selector: "app-exclude-task",
   standalone: true,
-  imports: [CommonModule, TruncatePipe, CheckboxComponent],
+  imports: [CommonModule, TruncatePipe, CheckboxComponent, ImagePreviewDirective],
   templateUrl: "./exclude-task.component.html",
   styleUrl: "./exclude-task.component.scss",
 })

projects/social_platform/src/app/office/courses/lesson/shared/file-task/file-task.component.html

@@ -3,7 +3,7 @@
 <div class="file-task" [class.file-task--hasVideo]="hasVideoUrl()">
   <div class="file-task__header">
     <p class="text-body-12 file-task__task">задание {{ data.order }}</p>
-    @if (!hasVideoUrl() && !data.imageUrl) {
+    @if ((!data.videoUrl && !data.imageUrl) && data.attachmentUrl) {
     <p class="file-task__text text-body-12-bold">{{ data.title | truncate: 80 }}</p>
     }
     <div
@@ -20,12 +20,35 @@
         allowtransparency="true"
       ></iframe>
       } @if (data.imageUrl) {
-      <img class="file-task__image" [src]="data.imageUrl" />
+      <img appImagePreview class="file-task__image" [src]="data.imageUrl" />
       }
-      <div class="file-task__image-text">
+      <div class="file-task__file-text" [class.file-task__image-text]="data.imageUrl">
+        @if (data.imageUrl) {
         <p class="file-task__text text-body-12-bold">{{ data.title | truncate: 80 }}</p>
-        <div [innerHTML]="data.bodyText | truncateHtml: 700"></div>
+        }
+        <div
+          #descEl
+          class="file-task__desc text-body-12"
+          [class.file-task__desc--expanded]="readFullDescription"
+          [innerHTML]="data.bodyText | truncate: 700"
+        ></div>
+
+        @if (descriptionExpandable) {
+        <div class="read-more text-body-10" (click)="onToggleDescription()">
+          {{ readFullDescription ? "скрыть" : "подробнее" }}
+        </div>
+        }
       </div>
+
+      @if (data.attachmentUrl) {
+      <app-file-item
+        mode="preview"
+        [type]="'file'"
+        name="файл с заданием"
+        [size]="0"
+        [link]="data.attachmentUrl"
+      ></app-file-item>
+      }
     </div>
 
     @if (hint.length) {
@@ -39,7 +62,7 @@
     [class.file-task__content--error]="error"
   >
     <p class="file-task__label text-body-12">ответ</p>
-    <p class="file-task__title text-body-12-bold">{{ data.title | truncate: 80 }}</p>
+    <!-- <p class="file-task__title text-body-12-bold">{{ data.title | truncate: 80 }}</p> -->
 
     <div class="file-task__files">
       <app-upload-file [resetAfterUpload]="true" (uploaded)="onFileUploaded($event)">

projects/social_platform/src/app/office/courses/lesson/shared/file-task/file-task.component.scss

@@ -16,14 +16,15 @@
   &__content {
     flex-grow: 1;
     min-height: 358px;
+    max-height: 393px;
     padding: 24px;
     background: var(--light-white);
     border: 0.5px solid var(--medium-grey-for-outline);
     border-radius: var(--rounded-lg);
   }
 
   &__content {
-    max-width: 333px;
+    min-width: 333px;
     padding: 12px 24px;
 
     ::ng-deep {
@@ -119,7 +120,7 @@
 
   &__image {
     width: 100%;
-    max-width: 110px;
+    max-width: 300px;
     height: 100%;
     max-height: 150px;
     border-radius: var(--rounded-lg);
@@ -135,6 +136,43 @@
     }
   }
 
+  &__desc {
+    overflow: hidden;
+    max-height: 12em;
+    text-align: justify;
+    transition: max-height 0.5s ease-in-out;
+
+    &:not(&--expanded) {
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 8;
+    }
+
+    &--expanded {
+      overflow-y: auto;
+      max-height: 210px;
+    }
+  }
+
+  &__file {
+    &-text {
+      display: flex;
+      flex-direction: column;
+      margin-bottom: 10px;
+    }
+  }
+
+  .read-more {
+    margin-top: 12px;
+    color: var(--accent);
+    cursor: pointer;
+    transition: color 0.2s;
+
+    &:hover {
+      color: var(--accent-dark);
+    }
+  }
+
   :host ::ng-deep &__hint p {
     margin-top: 20px;