add disabling for form, checkboxes, file-upload

Author: Awakich

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

@@ -45,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>
       }
@@ -55,6 +56,7 @@
         [data]="task"
         [success]="success()"
         [error]="hasError()"
+        [disabled]="isViewingCompleted()"
         (update)="onAnswerChange($event)"
       ></app-exclude-task>
       }
@@ -65,6 +67,7 @@
         [data]="task"
         [success]="success()"
         [error]="hasError()"
+        [disabled]="isViewingCompleted()"
         (update)="onAnswerChange([$event.answerId])"
       ></app-radio-select-task>
       }
@@ -75,6 +78,7 @@
         [data]="task"
         [success]="success()"
         [error]="hasError()"
+        [disabled]="isViewingCompleted()"
         (update)="onAnswerChange($event)"
       ></app-file-task>
       }

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

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

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

@@ -34,6 +34,7 @@ export class RadioSelectTaskComponent implements OnInit {
   @Input({ required: true }) data!: Task;
   @Input() success = false;
   @Input() hint = "";
+  @Input() disabled = false;
 
   @Input()
   set error(value: boolean) {
@@ -80,6 +81,7 @@ export class RadioSelectTaskComponent implements OnInit {
   }
 
   onSelect(id: number) {
+    if (this.disabled) return;
     this.result.set({ answerId: id });
     this.update.emit({ answerId: id });
   }

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

@@ -58,6 +58,7 @@
         attr.maxlength="{{ maxLength }}"
         (input)="onKeyUp($event)"
         placeholder="ваш ответ"
+        [disabled]="disabled"
       ></textarea>
       <div class="write-task__counter">
         <p class="text-body-10">
@@ -66,7 +67,7 @@
       </div>
     </div>
 
-    @if (type === 'text-file') {
+    @if (type === 'text-file' && !disabled) {
     <div class="write-task__files">
       <app-upload-file [resetAfterUpload]="true" (uploaded)="onFileUploaded($event)">
         <div emptyPlaceholder class="write-task__upload">