Merge pull request #264 from PROCOLLAB-github/switching-between-tasks

add switching between complted tasks from result/other pages

Author: Awakich

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

@@ -11,9 +11,11 @@
       @for (task of tasks(); track task.id) {
       <div
         class="progress__task"
+        (click)="onSelectTask(task)"
         [ngClass]="{
           'progress__task--done': isDone(task),
-          'progress__task--current': isCurrent(task.id)
+          'progress__task--current': isCurrent(task.id),
+          'progress__task--clickable': isDone(task)
         }"
       >
         <p class="text-body-12">{{ task.order }}</p>
@@ -43,6 +45,7 @@
       <app-write-task
         [data]="task"
         [type]="task.answerType === 'text_and_files' ? 'text-file' : 'text'"
+        [disabled]="isViewingCompleted()"
         (update)="onAnswerChange($event)"
       ></app-write-task>
       }
@@ -53,6 +56,7 @@
         [data]="task"
         [success]="success()"
         [error]="hasError()"
+        [disabled]="isViewingCompleted()"
         (update)="onAnswerChange($event)"
       ></app-exclude-task>
       }
@@ -63,6 +67,7 @@
         [data]="task"
         [success]="success()"
         [error]="hasError()"
+        [disabled]="isViewingCompleted()"
         (update)="onAnswerChange([$event.answerId])"
       ></app-radio-select-task>
       }
@@ -73,6 +78,7 @@
         [data]="task"
         [success]="success()"
         [error]="hasError()"
+        [disabled]="isViewingCompleted()"
         (update)="onAnswerChange($event)"
       ></app-file-task>
       }
@@ -82,8 +88,8 @@
 
         <app-button
           [loader]="loader()"
-          [disabled]="isSubmitDisabled()"
-          [style.opacity]="isSubmitDisabled() ? 0.5 : 1"
+          [disabled]="isSubmitDisabled() || isViewingCompleted()"
+          [style.opacity]="isSubmitDisabled() || isViewingCompleted() ? 0.5 : 1"
           size="big"
           customTypographyClass="text-body-12"
           class="action__button"

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

@@ -73,6 +73,10 @@
       border: 0 !important;
     }
 
+    &--clickable {
+      cursor: pointer;
+    }
+
     &--current {
       border: 0.5px solid var(--accent);
     }

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

@@ -157,6 +157,24 @@ export class LessonComponent implements OnInit {
     return task.isCompleted || this.completedTaskIds().has(task.id);
   }
 
+  protected readonly isViewingCompleted = computed(() => {
+    const task = this.currentTask();
+    return task ? this.isDone(task) : false;
+  });
+
+  onSelectTask(task: Task) {
+    if (!this.isDone(task)) return;
+
+    this.currentTaskId.set(task.id);
+    this.answerBody.set(null);
+    this.success.set(false);
+    this.hasError.set(false);
+
+    if (this.isComplete()) {
+      this.router.navigate(["./"], { relativeTo: this.route });
+    }
+  }
+
   onSubmitAnswer() {
     const task = this.currentTask();
     if (!task) return;

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

@@ -48,6 +48,7 @@
         class="exclude__item"
         [class.exclude__item--success]="success && result().includes(op.id)"
         [class.exclude__item--error]="error"
+        [class.exclude__item--disabled]="disabled"
         (click)="onSelect(op.id)"
       >
         <app-checkbox size="10" [checked]="result().includes(op.id)"></app-checkbox>

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

@@ -71,6 +71,11 @@
       }
     }
 
+    &--disabled {
+      pointer-events: none;
+      opacity: 0.6;
+    }
+
     label {
       cursor: pointer;
     }

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

@@ -57,6 +57,7 @@ export class ExcludeTaskComponent implements OnInit {
   @Output() update = new EventEmitter<number[]>(); // Событие обновления выбранных ответов
 
   @Input() success = false; // Флаг успешного выполнения
+  @Input() disabled = false;
 
   @Input()
   set error(value: boolean) {
@@ -104,6 +105,7 @@ export class ExcludeTaskComponent implements OnInit {
    * @param id - ID варианта ответа
    */
   onSelect(id: number) {
+    if (this.disabled) return;
     if (this.result().includes(id)) {
       // Если вариант уже выбран, убираем его из списка
       this.result.set(this.result().filter(i => i !== id));

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

@@ -65,6 +65,7 @@
     <p class="file-task__label text-body-12">ответ</p>
     <p class="file-task__title text-body-12-bold">{{ data.answerTitle | truncate: 80 }}</p>
 
+    @if (!disabled) {
     <div class="file-task__files">
       <app-upload-file [resetAfterUpload]="true" (uploaded)="onFileUploaded($event)">
         <div emptyPlaceholder class="file-task__upload">
@@ -85,5 +86,6 @@
       ></app-file-item>
       }
     </div>
+    }
   </div>
 </div>

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

@@ -48,6 +48,7 @@ export class FileTaskComponent implements OnInit {
   @Input({ required: true }) data!: Task;
   @Input() success = false;
   @Input() hint = "";
+  @Input() disabled = false;
 
   @Input()
   set error(value: boolean) {

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

@@ -55,9 +55,10 @@
         class="radio__item"
         [class.radio__item--success]="success && result().answerId === op.id"
         [class.radio__item--error]="error && result().answerId === op.id"
+        [class.radio__item--disabled]="disabled"
         (click)="onSelect(op.id)"
       >
-        <input type="radio" [id]="op.id" name="radio-group" />
+        <input type="radio" [id]="op.id" name="radio-group" [disabled]="disabled" />
         <label class="text-body-12" [for]="op.id">
           {{ op.text }}
         </label>

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

@@ -108,6 +108,11 @@
         background-color: var(--red);
       }
     }
+
+    &--disabled {
+      pointer-events: none;
+      opacity: 0.6;
+    }
   }
 
   &__body,