tango-app-ui-analyse-trax 3.9.2 → 3.9.3

package/src/lib/components/create-task/create-task.component.ts

@@ -0,0 +1,614 @@
+import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { AbstractControl, FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { Answer, AnswerForm, AnswerType, HeaderFilter, ITask, Question, QuestionForm, Section, SectionForm, TaskForm, ValidationType } from './create-task.interface';
+import { TraxService } from '../../services/trax.service';
+import { EMPTY, Subject, catchError, exhaustMap, fromEvent, map, merge, takeUntil } from "rxjs";
+import { GlobalStateService, PageInfoService } from 'tango-app-ui-global';
+import { date_question_template, descriptive_question_template, descriptiveImage_question_template, dropdown_question_template, image_question_template, image_video_question_template, linearscale_question_template, multiplechoice_answer_template, multiplechoicemultiple_question_template, multiplechoicesingle_question_template, multipleImage_question_template, time_question_template, video_question_template, yesorno_question_template } from './create-task.data';
+import { ToastService } from 'tango-app-ui-shared';
+import { ActivatedRoute, Router } from '@angular/router';
+import { noWhitespaceValidator } from './validators/whitespace-validator';
+import { rangeValidator } from './validators/ascending-validator';
+import { TraxpopupComponent } from '../traxpopup/traxpopup.component';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { uniqueStringValidator } from './validators/unique-string-validator';
+
+
+@Component({
+  selector: 'lib-create-task',
+  templateUrl: './create-task.component.html',
+  styleUrl: './create-task.component.scss'
+})
+export class CreateTaskComponent implements OnInit, OnDestroy {
+
+  destroy$ = new Subject();
+  taskForm: FormGroup<TaskForm>
+  taskDetails: ITask
+  headerData: HeaderFilter | null | undefined;
+  selectedQuestion: FormGroup<QuestionForm> | undefined
+  answerTypes: { label: string, value: AnswerType }[] = [
+    { label: 'Descriptive Answer', value: 'descriptive' },
+    { label: 'A/B Question', value: 'yes/no' },
+    { label: 'Multiple Choice Question - Single Answer', value: 'multiplechoicesingle' },
+    { label: 'Multiple Choice Question - Multiple Answer', value: 'multiplechoicemultiple' },
+    { label: 'Capture Image with Description', value: 'descriptiveImage' },
+    { label: 'Capture Image as answer', value: 'image' },
+    { label: 'Capture video as answer', value: 'video' },
+    { label: 'Capture Multiple Image', value: 'multipleImage' },
+    { label: 'Date - DD/MM/YYYY', value: 'date' },
+    { label: 'Linear Scale', value: 'linearscale' },
+    { label: 'Time', value: 'time' },
+    { label: 'Capture Image/Video as Answer', value: 'image/video' },
+    { label: 'Dropdown as an answer', value: 'dropdown' }]
+  validationTypes: { label: string, value: ValidationType }[] = [
+    { label: 'Capture Image', value: 'Capture Image' },
+    { label: 'Descriptive Answer', value: 'Descriptive Answer' },
+    { label: 'Capture Video', value: 'Capture Video' }]
+  currentTaskId: string
+  @ViewChild('configureBtn') configureBtn: ElementRef
+  @ViewChild('saveBtn') saveBtn: ElementRef
+  environment:any;
+  userType: any;
+
+  constructor(private fb: FormBuilder, private traxService: TraxService, private toastService: ToastService,
+    private route: ActivatedRoute, private router: Router, private pageInfo: PageInfoService, private dialog: NgbModal, private gs:GlobalStateService) {
+    this.headerData = JSON.parse(localStorage.getItem('header-filters') as string)
+    this.createForm()
+  }
+
+  ngOnInit(): void {
+    const userInfo = JSON.parse(localStorage.getItem('user-info') || '{}')
+    if (userInfo.userType) {
+      this.userType = userInfo.userType
+    }
+    this.setPageData()
+    this.route.queryParams
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((params) => {
+        if (params?.id) {
+          this.currentTaskId = params.id
+          this.getTask(this.currentTaskId)
+        } else {
+          this.addSectionForm()
+          this.addQuestionForm(descriptive_question_template as Question, 0)
+          this.addAnswerForm(descriptive_question_template.answers[0] as Answer, 0, 0)
+          this.updateIndexNumbers()
+          this.selectedQuestion = this.getQuestions(0).at(0)
+        }
+      });
+      this.gs.environment.pipe(takeUntil(this.destroy$)).subscribe((env: any) => {
+      if (env) {
+        this.environment = env;
+      }
+    });
+  }
+  detach(detach: any): any {
+    throw new Error('Method not implemented.');
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next(true);
+    this.destroy$.complete();
+  }
+
+
+  onSubmit(event: any) {
+    this.taskForm.markAllAsTouched();
+    if (this.taskForm.invalid) {
+      return;
+    }
+    this.updateIndexNumbers();
+    const formData = this.removeInvalidCharacters(this.taskForm.value)
+    const payload = {
+      ...formData,
+      clientId: this.headerData?.client,
+      submitType: event.target === this.configureBtn.nativeElement ? 'configure' : 'save',
+      ...(this?.currentTaskId ? { _id: this.currentTaskId } : {})
+    };
+
+    if (payload.submitType === 'save') {
+      const dialogRef = this.dialog.open(TraxpopupComponent, { centered: true, size: 'md' });
+      dialogRef.componentInstance.data = {
+        imagesrc: `<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56" fill="none"><rect x="4" y="4" width="48" height="48" rx="24" fill="#FEF0C7"/><path d="M27.9998 24.0012V28.0012M27.9998 32.0012H28.0098M26.2898 18.8612L17.8198 33.0012C17.6451 33.3036 17.5527 33.6465 17.5518 33.9957C17.5508 34.3449 17.6413 34.6883 17.8142 34.9917C17.9871 35.2951 18.2365 35.5479 18.5375 35.725C18.8385 35.9021 19.1806 35.9973 19.5298 36.0012H36.4698C36.819 35.9973 37.1611 35.9021 37.4621 35.725C37.7631 35.5479 38.0124 35.2951 38.1854 34.9917C38.3583 34.6883 38.4488 34.3449 38.4478 33.9957C38.4468 33.6465 38.3544 33.3036 38.1798 33.0012L29.7098 18.8612C29.5315 18.5673 29.2805 18.3243 28.981 18.1557C28.6814 17.987 28.3435 17.8984 27.9998 17.8984C27.656 17.8984 27.3181 17.987 27.0186 18.1557C26.7191 18.3243 26.468 18.5673 26.2898 18.8612Z" stroke="#DC6803" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><rect x="4" y="4" width="48" height="48" rx="24" stroke="#FFFAEB" stroke-width="8"/></svg>`,
+        title: `Unsaved changes`,
+        content: `Do you want to save as draft?`,
+        buttontype: 'draft'
+      }
+      dialogRef.result.then((res) => {
+        if (res === 'confirm') {
+          this.traxService.createTask(payload).subscribe({
+            next: (response: any) => {
+              this.toastService.getSuccessToast(response?.data?.message)
+              this.router.navigate(['manage/trax/checklist/managetask'])
+
+            },
+            error: (error: any) => {
+              this.toastService.getErrorToast(error?.error?.error?.message || 'Something went wrong')
+            }
+          });
+        }
+
+      });
+    } else if (payload.submitType === 'configure') {
+      this.traxService.createTask(payload).subscribe({
+        next: (response: any) => {
+          this.toastService.getSuccessToast(response?.data?.message)
+          this.router.navigate(['manage/trax/task-configure'], { queryParams: { taskId: response.data.checklistId } })
+        },
+        error: (error: any) => {
+          this.toastService.getErrorToast(error?.error?.error?.message || 'Something went wrong')
+        }
+      });
+
+    }
+
+  }
+
+  setPageData() {
+    this.pageInfo.setTitle("Tasks");
+    this.pageInfo.setDescription("");
+    this.pageInfo.setBreadcrumbs([
+      { title: "Tango Trax", path: "/manage/trax/dashboard", isActive: false, isSeparator: false },
+      { title: "Tango Trax", path: "/manage/trax/dashboard", isActive: false, isSeparator: true }
+    ]);
+  }
+
+  createForm() {
+    this.taskForm = this.fb.group({
+      checklistName: ['', [Validators.required, noWhitespaceValidator()]],
+      checklistDescription: [''],
+      sections: this.fb.array<FormGroup<SectionForm>>([])
+    })
+  }
+
+  updateForm() {
+    this.taskForm.patchValue({
+      checklistName: this.taskDetails.checkListName ?? '',
+      checklistDescription: this.taskDetails.checkListDescription ?? '',
+    })
+    for (let i = 0; i < this.taskDetails?.sections?.length; i++) {
+      this.addSectionForm(this.taskDetails.sections[i]);
+      for (let j = 0; j < this.taskDetails.sections[i]?.questions?.length; j++) {
+        this.addQuestionForm(this.taskDetails.sections[i]?.questions[j], i);
+        for (let k = 0; k < this.taskDetails.sections[i]?.questions[j]?.answers?.length; k++) {
+          this.addAnswerForm(this.taskDetails.sections[i]?.questions[j]?.answers[k], i, j);
+        }
+      }
+    }
+    this.updateIndexNumbers()
+    this.selectedQuestion = this.getQuestions(0).at(0)
+  }
+
+  updateIndexNumbers() {
+    for (let i = 0; i < this.taskForm.controls.sections?.length; i++) {
+      for (let j = 0; j < this.taskForm.controls.sections.at(i)?.controls.questions?.length; j++) {
+        this.getQuestions(i).at(j).get('qno')?.setValue(j + 1)
+        for (let k = 0; k < this.taskForm.controls.sections.at(i)?.controls.questions?.at(j)?.controls.answers?.length; k++) {
+          this.getAnswers(i, j).at(k).get('answeroptionNumber')?.setValue(k + 1)
+          this.getAnswers(i, j).at(k).get('index')?.setValue(k)
+        }
+      }
+    }
+  }
+
+  removeInvalidCharacters(formData: any) {
+
+    const formValues: ITask & { checklistName: string, checklistDescription: string } = JSON.parse(JSON.stringify(formData))
+    formValues.checklistName = trimString(formValues.checklistName)
+    formValues.checklistDescription = trimString(formValues.checklistDescription)
+    for (let i = 0; i < formValues?.sections?.length; i++) {
+      for (let j = 0; j < formValues.sections[i]?.questions?.length; j++) {
+        formValues.sections[i].questions[j].qname = trimString(formValues.sections[i]?.questions[j].qname)
+        if (formValues.sections[i].questions[j].answerType === 'dropdown') {
+          const allowMultipleControl = this.getQuestions(i).at(j).get('allowMultiple')
+          formValues.sections[i].questions[j].allowMultiple = allowMultipleControl?.value ?? false
+        }
+        for (let k = 0; k < formValues.sections[i]?.questions[j]?.answers?.length; k++) {
+          formValues.sections[i].questions[j].answers[k].answer = trimString(formValues.sections[i].questions[j].answers[k].answer)
+          if (formValues.sections[i].questions[j].answerType === 'image/video') {
+            const limit = formValues.sections[i].questions[j].answers[k].limit
+            if (!limit) {
+              formValues.sections[i].questions[j].answers[k].imageLimit = 0
+              formValues.sections[i].questions[j].answers[k].videoLimit = 0
+            }
+          }
+        }
+      }
+    }
+    return formValues
+
+    function trimString(input: string) {
+      if (typeof input !== 'string') {
+        return input
+      }
+      return input.replace(/^\s+|\s+$/g, '');
+    }
+
+
+  }
+
+  addSectionForm(section?: Section) {
+    const sectionFormData: FormGroup<SectionForm> = this.fb.group({
+      id: [section?.id ?? ''],
+      name: [section?.name ?? ''],
+      ...(this.currentTaskId) ? {oldName: [section?.name ?? '']} : {},
+      questions: this.fb.array<FormGroup<QuestionForm>>([])
+    });
+    (this.taskForm.get('sections') as FormArray<FormGroup<SectionForm>>).push(sectionFormData)
+  }
+
+  addQuestionForm(question: Question, sectionIndex: number, insertIndex?: number) {
+    const questionFormData: FormGroup<QuestionForm> = this.fb.group({
+      qno: [question?.qno ?? (this.getQuestions(sectionIndex)?.length ? this.getQuestions(sectionIndex).length + 1 : 1), [Validators.required]],
+      qname: [question?.qname ?? '', [Validators.required, noWhitespaceValidator()]],
+      ...(this.currentTaskId) ? {oldQname: [question?.qname ?? '']} : {},
+      answerType: [question?.answerType ?? 'descriptive', [Validators.required]],
+      runAI: [question?.runAI ?? false],
+      runAIDescription: [question?.runAIDescription ?? ''],
+      allowUploadfromGallery: [question?.allowUploadfromGallery ?? false],
+      linkType: [question?.linkType ?? false],
+      questionReferenceImage: [[...question?.questionReferenceImage ?? '']],
+      answers: this.fb.array<FormGroup<AnswerForm>>([])
+    });
+
+    if (question.answerType === 'descriptive' || question.answerType === 'multipleImage') {
+      questionFormData.addControl('descriptivetype', new FormControl(question?.descriptivetype ?? 'text'))
+    }
+
+    if (question.answerType === 'dropdown') {
+      questionFormData.addControl('allowMultiple', new FormControl(question?.allowMultiple ?? false))
+    }
+
+    if (question.answerType === 'yes/no' || question.answerType === 'multiplechoicesingle' || question.answerType === 'multiplechoicemultiple' || question.answerType === 'dropdown') {
+      questionFormData.get('answers')?.addValidators(uniqueStringValidator())
+    }
+
+    if (insertIndex !== undefined) {
+      ((this.taskForm.get('sections') as FormArray<FormGroup<SectionForm>>)
+        .at(sectionIndex).get('questions') as FormArray<FormGroup<QuestionForm>>).insert(insertIndex, questionFormData)
+      return
+    }
+
+    ((this.taskForm.get('sections') as FormArray<FormGroup<SectionForm>>)
+      .at(sectionIndex).get('questions') as FormArray<FormGroup<QuestionForm>>).push(questionFormData)
+      
+  }
+
+  addAnswerForm(answer: Answer, sectionIndex: number, questionIndex: number, insertIndex?: number) {
+    const answerFormData: FormGroup<AnswerForm> = this.fb.group({
+      answer: [answer?.answer ?? ''],
+      answeroptionNumber: [answer?.answeroptionNumber ?? (this.getAnswers(sectionIndex, questionIndex)?.length ? this.getAnswers(sectionIndex, questionIndex).length + 1 : 1), [Validators.required]],
+      sopFlag: [answer?.sopFlag ?? false],
+      validation: [answer?.validation ?? false],
+      validationType: [answer?.validationType ?? ''],
+      referenceImage: [[...answer?.referenceImage ?? '']],
+      showLinked: [answer?.showLinked ?? false],
+      linkedQuestion: [answer?.linkedQuestion ?? 0],
+      nestedQuestion: [answer?.nestedQuestion ?? []],
+      index: [answer?.index ?? this.getAnswers(sectionIndex, questionIndex)?.length - 1, [Validators.required]],
+    });
+
+    const answerType: AnswerType = ((this.taskForm?.get('sections') as FormArray).at(sectionIndex)?.get('questions') as FormArray).at(questionIndex)?.get('answerType')?.value;
+
+    if (answerType === 'descriptive' || answerType === 'descriptiveImage' || answerType === 'image' || answerType === 'multipleImage' || answerType === 'date' || answerType === 'linearscale' || answerType === 'time') {
+      answerFormData.addControl('validationAnswer', new FormControl(answer?.validationAnswer ?? ''))
+    }
+
+    if (answerType === 'yes/no' || answerType === 'multiplechoicesingle' || answerType === 'multiplechoicemultiple' || answerType === 'dropdown') {
+      answerFormData.addControl('allowUploadfromGallery', new FormControl(answer?.allowUploadfromGallery ?? false));
+      answerFormData.addControl('runAI', new FormControl(answer?.runAI ?? false));
+      answerFormData.get('answer')?.addValidators([Validators.required, noWhitespaceValidator()])
+    }
+
+    if (answerType === 'image/video') {
+      answerFormData.addControl('allowUploadfromGallery', new FormControl(answer?.allowUploadfromGallery ?? false));
+      answerFormData.addControl('limit', new FormControl(answer?.limit ?? false));
+      answerFormData.addControl('imageLimit', new FormControl(answer?.imageLimit ?? 1));
+      answerFormData.addControl('videoLimit', new FormControl(answer?.videoLimit ?? 1));
+    }
+
+    if (answerType === 'linearscale') {
+      const linearType = answer?.linearType ?? 'degree';
+      const defaults: Record<string, { rangeStart: number; rangeEnd: number }> = {
+        percentage: { rangeStart: 0, rangeEnd: 100 },
+        number: { rangeStart: 0, rangeEnd: 100 },
+        degree: { rangeStart: 0, rangeEnd: 100 }, // default 0; user can enter down to -273.15
+      };
+      const { rangeStart, rangeEnd } = defaults[linearType] ?? defaults.number;
+      answerFormData.addControl('rangeStart', new FormControl(answer?.rangeStart ?? rangeStart));
+      answerFormData.addControl('rangeEnd', new FormControl(answer?.rangeEnd ?? rangeEnd));
+      answerFormData.addControl('linearType', new FormControl(linearType));
+      answerFormData.addValidators(rangeValidator())
+    }
+
+    if (answerType === 'date') {
+      answerFormData.addControl('historicDate', new FormControl(answer?.historicDate ?? false));
+    }
+
+    if (answerType === 'yes/no' || answerType === 'multiplechoicesingle' || answerType === 'multiplechoicemultiple' || answerType === 'dropdown' || answerType === 'multipleImage') {
+      answerFormData.addControl('descriptivetype', new FormControl(answer?.descriptivetype ?? 'text'));
+    }
+
+    if (insertIndex !== undefined) {
+      (((this.taskForm.get('sections') as FormArray<FormGroup<SectionForm>>)
+        .at(sectionIndex).get('questions') as FormArray<FormGroup<QuestionForm>>)
+        .at(questionIndex).get('answers') as FormArray<FormGroup<AnswerForm>>).insert(insertIndex, answerFormData)
+      return
+    }
+
+    (((this.taskForm.get('sections') as FormArray<FormGroup<SectionForm>>)
+      .at(sectionIndex).get('questions') as FormArray<FormGroup<QuestionForm>>)
+      .at(questionIndex).get('answers') as FormArray<FormGroup<AnswerForm>>).push(answerFormData)
+  }
+
+  get getSections() {
+    return (this.taskForm?.get('sections') as FormArray<FormGroup<SectionForm>>)
+  }
+
+  getQuestions(sectionIndex: number) {
+    return ((this.taskForm?.get('sections') as FormArray<FormGroup<SectionForm>>).at(sectionIndex)?.get('questions') as FormArray<FormGroup<QuestionForm>>)
+  }
+
+  getAnswers(sectionIndex: number, questionIndex: number) {
+    return (((this.taskForm.get('sections') as FormArray<FormGroup<SectionForm>>).at(sectionIndex).get('questions') as FormArray<FormGroup<QuestionForm>>).at(questionIndex).get('answers') as FormArray<FormGroup<AnswerForm>>)
+  }
+
+  uploadFile(event: any, sectionIndex: number, questionIndex: number, answerIndex: number =-1,imgIndex?:number) {
+    if (event.target.files != undefined && event.target.files.length) {
+      const formData = new FormData();
+      const file: File = event.target.files[0];
+      formData.append('file', file, file.name);
+      formData.append('clientId', this.headerData?.client as string)
+      this.traxService.imageupload(formData).pipe(takeUntil(this.destroy$)).subscribe({
+        next: (res: any) => {
+          if (res.data.imgUrl) {
+            let input = event.target as HTMLInputElement;
+            input.value='';
+            if (answerIndex == -1) {
+              console.log(imgIndex);
+              if(imgIndex != undefined) {
+                const questions = this.getQuestions(sectionIndex);
+                const questionGroup = questions.at(questionIndex) as FormGroup;
+                const imageArrayControl = questionGroup.get(
+                  "questionReferenceImage"
+                );
+
+                if (imageArrayControl) {
+                  const imageArray = imageArrayControl.value as string[];
+                  imageArray[imgIndex] = res.data.imgUrl;
+                  imageArrayControl.setValue([...imageArray]);
+                }
+              }
+              else {
+                this.getQuestions(sectionIndex).at(questionIndex).get('questionReferenceImage')
+                ?.setValue(this.getQuestions(sectionIndex).at(questionIndex).get('questionReferenceImage')?.value?.concat(res.data.imgUrl)!)
+              }
+            } else {
+              if(imgIndex != undefined) {
+                let imageControl = this.getAnswers(sectionIndex, questionIndex).at(answerIndex).get('referenceImage');
+                if(imageControl) {
+                  const imageArray = imageControl.value as string[];
+                  imageArray[imgIndex] = res.data.imgUrl;
+                  imageControl.setValue([...imageArray]);
+                }
+              }
+              else {
+                this.getAnswers(sectionIndex, questionIndex).at(answerIndex).get('referenceImage')
+                  ?.setValue(this.getAnswers(sectionIndex, questionIndex).at(answerIndex).get('referenceImage')?.value?.concat(res.data.imgUrl)!)
+              }
+            }
+          }
+        },
+        error: (err: any) => {
+          this.toastService.getErrorToast(err?.error?.error?.message || 'Something went wrong')
+        }
+      })
+    }
+  }
+
+  onQuestionClone(sectionIndex: number, questionIndex: number, question: FormGroup<QuestionForm>) {
+    const cloneControl = (control: AbstractControl): AbstractControl => {
+      if (control instanceof FormGroup) {
+        const clonedGroup = new FormGroup(
+          Object.keys(control.controls).reduce((acc, key) => {
+            acc[key] = cloneControl(control.controls[key]);
+            return acc;
+          }, {} as { [key: string]: AbstractControl })
+        );
+        return clonedGroup;
+      } else if (control instanceof FormArray) {
+        const clonedArray = new FormArray(control.controls.map(cloneControl));
+        return clonedArray;
+      } else if (control instanceof FormControl) {
+        return new FormControl(control.value, control.validator, control.asyncValidator);
+      } else {
+        throw new Error('Unsupported control type');
+      }
+    };
+
+    const clonedQuestion = cloneControl(question) as FormGroup<QuestionForm>;
+    this.getQuestions(sectionIndex).insert(questionIndex + 1, clonedQuestion)
+    this.updateIndexNumbers()
+    this.toastService.getSuccessToast('Question cloned successfully')
+  }
+
+  onQuestionDelete(sectionIndex: number, questionIndex: number) {
+
+    const dialogRef = this.dialog.open(TraxpopupComponent,{centered: true, size: 'md'});
+    dialogRef.componentInstance.data = {
+      imagesrc: `<span><svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56" fill="none"><rect x="4" y="4" width="48" height="48" rx="24" fill="#FEE4E2"/><path d="M28 24V28M28 32H28.01M38 28C38 33.5228 33.5228 38 28 38C22.4772 38 18 33.5228 18 28C18 22.4772 22.4772 18 28 18C33.5228 18 38 22.4772 38 28Z" stroke="#D92D20" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><rect x="4" y="4" width="48" height="48" rx="24" stroke="#FEF3F2" stroke-width="8"/></svg></span>`,
+      title: `Delete 'Question ${questionIndex + 1}'?`,
+      content: `Are you sure you want to delete <b>'Question ${questionIndex + 1}'</b>? This action cannot be undone.`,
+      buttontype: 'delete'
+    }
+    dialogRef.result.then((res) => {
+      if (res == 'delete') {
+        this.getQuestions(sectionIndex).removeAt(questionIndex)
+        this.updateIndexNumbers()
+        this.toastService.getSuccessToast('Question deleted successfully')
+      }
+    });
+  }
+
+  onDeleteQuestionReferenceImage(sectionIndex: number, questionIndex: number, imageIndex: number) {
+    this.getQuestions(sectionIndex).at(questionIndex).get('questionReferenceImage')
+      ?.setValue(this.getQuestions(sectionIndex).at(questionIndex).get('questionReferenceImage')!.value!.filter((_, index) => index !== imageIndex))
+  }
+
+  onDeleteAnswerReferenceImage(sectionIndex: number, questionIndex: number, answerIndex: number, imageIndex: number) {
+    this.getAnswers(sectionIndex, questionIndex).at(answerIndex).get('referenceImage')
+      ?.setValue(this.getAnswers(sectionIndex, questionIndex).at(answerIndex).get('referenceImage')!.value!.filter((_, index) => index !== imageIndex))
+  }
+
+
+  onValidateResponseChange(event: any, sectionIndex: number, questionIndex: number, answerIndex: number) {
+    if (event.target.checked) {
+      this.getAnswers(sectionIndex, questionIndex).at(answerIndex).get('showLinked')?.setValue(false)
+    }
+  }
+
+  onAnswerDelete(sectionIndex: number, questionIndex: number, answerIndex: number) {
+    this.getAnswers(sectionIndex, questionIndex).removeAt(answerIndex)
+    this.updateIndexNumbers()
+    this.toastService.getSuccessToast('Answer deleted successfully')
+
+  }
+
+  addNewAnswer(sectionIndex: number, questionIndex: number, type: AnswerType) {
+    if (type === 'multiplechoicesingle' || type === 'multiplechoicemultiple' || type === 'dropdown') {
+      this.addAnswerForm(multiplechoice_answer_template as Answer, sectionIndex, questionIndex)
+      this.updateIndexNumbers()
+      this.toastService.getSuccessToast('Answer added successfully')
+    }
+  }
+
+  addNewQuestion(sectionIndex: number, questionIndex: number) {
+    this.addQuestionForm(descriptive_question_template as Question, sectionIndex)
+    if (descriptive_question_template?.answers.length) {
+      descriptive_question_template.answers.forEach((element, idx) => {
+        this.addAnswerForm(element as Answer, sectionIndex, questionIndex + 1, idx)
+      });
+    }
+    this.updateIndexNumbers()
+    this.toastService.getSuccessToast('Question added successfully')
+  }
+
+  onQuestionChange(event: any, sectionIndex: number, questionIndex: number) {
+    let question
+    const answerType: AnswerType = event.target.value
+    switch (answerType) {
+      case 'descriptive': question = descriptive_question_template
+        break;
+      case 'yes/no': question = yesorno_question_template
+        break;
+      case 'multiplechoicesingle': question = multiplechoicesingle_question_template
+        break;
+      case 'multiplechoicemultiple': question = multiplechoicemultiple_question_template
+        break;
+      case 'descriptiveImage': question = descriptiveImage_question_template
+        break;
+      case 'image': question = image_question_template
+        break;
+      case 'video': question = video_question_template
+        break;
+      case 'image/video': question = image_video_question_template
+        break;
+      case 'multipleImage': question = multipleImage_question_template
+        break;
+      case 'date': question = date_question_template
+        break;
+      case 'linearscale': question = linearscale_question_template
+        break;
+      case 'time': question = time_question_template
+        break;
+      case 'dropdown': question = dropdown_question_template
+        break;
+      default: question = descriptive_question_template
+        break;
+    }
+
+    const questionName = this.getQuestions(sectionIndex).at(questionIndex).get('qname')?.value || '';
+    const questionOldName = this.getQuestions(sectionIndex).at(questionIndex).get('oldQname')?.value || ''
+
+    this.getQuestions(sectionIndex).removeAt(questionIndex)
+
+    this.addQuestionForm(question as Question, sectionIndex, questionIndex)
+
+    this.getQuestions(sectionIndex).at(questionIndex).get('qname')?.setValue(questionName)
+    if(questionOldName) {
+      this.getQuestions(sectionIndex).at(questionIndex).get('oldQname')?.setValue(questionOldName)
+    }
+
+    if (question?.answers.length) {
+      question.answers.forEach((element, idx) => {
+        this.addAnswerForm(element as Answer, sectionIndex, questionIndex, idx)
+      });
+    }
+
+    this.updateIndexNumbers()
+  }
+
+  updateLinearTypeRange(event: any, sectionIndex: number, questionIndex: number) {
+    const linearType = event?.target?.value as 'percentage' | 'number' | 'degree';
+    const answers = this.getAnswers(sectionIndex, questionIndex).at(0);
+    if (!answers) return;
+
+    const defaults: Record<string, { rangeStart: number; rangeEnd: number }> = {
+      percentage: { rangeStart: 0, rangeEnd: 100 },
+      number: { rangeStart: 0, rangeEnd: 100 },
+      degree: { rangeStart: 0, rangeEnd: 100 }, // default 0; user can enter down to -273.15
+    };
+    const { rangeStart, rangeEnd } = defaults[linearType] ?? defaults.number;
+
+    answers.get('rangeStart')?.setValue(rangeStart);
+    answers.get('rangeEnd')?.setValue(rangeEnd);
+  }
+
+  selectQuestion(sectionIndex: number, questionIndex: number, question: FormGroup<QuestionForm>) {
+    this.selectedQuestion = question
+    const elementId = `question-${sectionIndex}${questionIndex}`;
+    const element = document.getElementById(elementId);
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    } else {
+      console.warn(`Element with ID ${elementId} not found`);
+    }
+  }
+
+  getTask(id: string) {
+    this.traxService.getTaskconfig(id, this.headerData?.client!).pipe(takeUntil(this.destroy$)).subscribe({
+      next: (res: any) => {
+        if (res.code === 200) {
+          this.taskDetails = res.data.checkListDetails
+          // if(this.taskDetails.publish){
+          //   this.router.navigate(['manage/trax/task-configure'], { queryParams: {taskId:this.taskDetails._id} })
+          // }
+          this.updateForm()
+        }
+      },
+      error: (err: any) => {
+        this.toastService.getErrorToast(err?.error?.error?.message || 'Something went wrong')
+      }
+    })
+  }
+
+  onHover(question: FormGroup<QuestionForm>) {
+    this.selectedQuestion = question
+  }
+
+  onPopup(image:string){
+    let imageRef = this.dialog.open(TraxpopupComponent, { centered: true, size: "md" });
+    imageRef.componentInstance.data = {type:'image',image:this.environment.TraxAnswerCDN+image};
+    imageRef.result.then(() => {});
+  }
+  
+  onDownload() {
+    console.log('download icon clicked');
+  }
+   
+  onDelete() {
+    console.log('Delete icon clicked');
+  }
+
+}
+