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

package/src/lib/components/add-multitask/add-multitask.component.ts

@@ -0,0 +1,611 @@
+import { ChangeDetectorRef, Component, ElementRef, HostListener, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { GlobalStateService } from 'tango-app-ui-global';
+import { TraxService } from '../../services/trax.service';
+import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { Router } from '@angular/router';
+import { Answer, AnswerForm, AnswerType, HeaderFilter, ITask, Question, QuestionForm, Section, SectionForm, TaskForm, ValidationType } from './create-task.interface';
+import { date_question_template, descriptive_question_template, descriptiveImage_question_template, image_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, image_video_question_template, dropdown_question_template  } from './create-task.data';
+import { Subject, debounceTime, distinctUntilChanged, filter, takeUntil } from "rxjs";
+import { ToastService } from 'tango-app-ui-shared';
+import dayjs from "dayjs";
+import utc from 'dayjs/plugin/utc';
+import { noWhitespaceValidator } from './whitespace-validator';
+import { uniqueStringValidator } from './unique-string-validator';
+import { TimePeriod } from 'ngx-daterangepicker-material/daterangepicker.component';
+import { rangeValidator } from './ascending-validator';
+
+dayjs.extend(utc);
+
+@Component({
+  selector: 'lib-add-multitask',
+  templateUrl: './add-multitask.component.html',
+  styleUrl: './add-multitask.component.scss'
+})
+export class AddMultitaskComponent implements OnDestroy, OnInit {
+  taskForm: FormGroup<TaskForm>;
+  @Input() type: any
+  @Input() sourceCheckList_id: any
+  @Input() filtertype: any
+  @Input() showcomment: any
+  @Input() excelData: any
+  currentIndex: number = 0;
+  intervalId: any;
+  allowedStoreLocation: boolean = false
+  restrictAttendance: boolean = false
+  submitted: boolean = false
+  headerData: HeaderFilter | null | undefined;
+  selectedlistselectControl: FormControl;
+  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' }]
+  environment: any;
+  taskContainer: HTMLElement | null;
+  private destroy$ = new Subject();
+  @Input() payload: any
+  @Input() taskDetails: any
+  @Input() checklistInfo: any
+  selectedStores:any=[]
+  selectedUsers:any=[]
+  priorityTypeList: any = [{ value: 'low', label: 'Low' },
+  { value: 'medium', label: 'Medium' },
+  { value: 'high', label: 'High' }
+  ]
+  clientId: any
+  timeDetails: any = [{ id: '00:00', text: "00:00" }, { id: '00:30', text: "00:30" }, { id: '01:00', text: "01:00" }, { id: '01:30', text: "01:30" }, { id: '02:00', text: "02:00" }, { id: '02:30', text: "02:30" }, { id: '03:00', text: "03:00" }, { id: '03:30', text: "03:30" }, { id: '04:00', text: "04:00" }, { id: '04:30', text: "04:30" }, { id: '05:00', text: "05:00" }, { id: '05:30', text: "05:30" }, { id: '06:00', text: "06:00" }, { id: '06:30', text: "06:30" }, { id: '07:00', text: "07:00" }, { id: '07:30', text: "07:30" }, { id: '08:00', text: "08:00" }, { id: '08:30', text: "08:30" }, { id: '09:00', text: "09:00" }, { id: '09:30', text: "09:30" }, { id: '10:00', text: "10:00" }, { id: '10:30', text: "10:30" },
+  { id: '11:00', text: "11:00" }, { id: '11:30', text: "11:30" }, { id: '12:00', text: "12:00" }, { id: '12:30', text: "12:30" }, { id: '13:00', text: "13:00" }, { id: '13:30', text: "13:30" }, { id: '14:00', text: "14:00" }, { id: '14:30', text: "14:30" }, { id: '15:00', text: "15:00" }, { id: '15:30', text: "15:30" }, { id: '16:00', text: "16:00" }, { id: '16:30', text: "16:30" }, { id: '17:00', text: "17:00" }, { id: '17:30', text: "17:30" }, { id: '18:00', text: "18:00" }, { id: '18:30', text: "18:30" }, { id: '19:00', text: "19:00" }, { id: '19:30', text: "19:30" }, { id: '20:00', text: "20:00" }, { id: '20:30', text: "20:30" }, { id: '21:00', text: "21:00" }, { id: '21:30', text: "21:30" }, { id: '22:00', text: "22:00" }, { id: '22:30', text: "22:30" }, { id: '23:00', text: "23:00" }, { id: '23:30', text: "23:30" }, { id: '24:00', text: "24:00" }
+  ]
+
+
+  constructor(private fb: FormBuilder, private activeModal: NgbActiveModal, private gs: GlobalStateService, private traxService: TraxService, private cd: ChangeDetectorRef, private modalService: NgbModal, private router: Router, private toastService: ToastService,
+  ) {
+    this.headerData = JSON.parse(localStorage.getItem('header-filters') as string)
+  }
+
+  ngOnInit() {
+    this.selectedStores = Array.from(new Map(this.payload.selectedStores.map((obj:any) => [obj.storeName, obj])).values());
+    this.selectedUsers = Array.from(new Map(this.payload.selectedUsers.map((obj:any) => [obj.userEmail, obj])).values());
+    console.log(this.selectedStores,this.selectedUsers)
+    console.log(this.payload)
+    this.selectedlistselectControl = new FormControl('high');
+    this.gs.environment.pipe(takeUntil(this.destroy$)).subscribe((env) => {
+      if (env) {
+        this.environment = env
+      }
+    })
+    if (this.headerData?.client) {
+      this.clientId = this.headerData?.client
+    } else {
+      let userinfo = JSON.parse(localStorage.getItem("user-info") || "")
+      if (userinfo && userinfo?.clientId) {
+        this.clientId = userinfo?.clientId
+      }
+    }
+    this.createForm();
+    this.selectedDate.startDate = this.dayjs().utc().format("DD-MM-YYYY");
+    this.updateCurrentTime()
+  }
+  tasks: number[] = [1]; // List of task IDs
+  taskCounter: number = 1; // Counter to generate unique task IDs
+
+
+  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);
+        }
+      }
+    }
+
+
+  }
+  filterChange(event: any) {
+    this.selectedlistselectControl.setValue(event);
+
+  }
+  prevSlide() {
+    if (this.currentIndex > 0) {
+      this.currentIndex--;
+    }
+  }
+
+  nextSlide() {
+    if (this.currentIndex < this.payload.refImage.length - 1) {
+      this.currentIndex++;
+    }
+  }
+
+  goToSlide(index: number) {
+    if (index >= 0 && index < this.payload.refImage.length) {
+      this.currentIndex = index;
+    }
+  }
+  cancel() {
+    this.activeModal.close('submit')
+    const triggerButton = document.querySelector('#triggerButtonId') as HTMLElement;
+    triggerButton?.focus();
+  }
+
+
+  onSubmit() {
+    this.submitted = true
+    let response: any = this.taskForm.value.sections
+
+    const time = dayjs(this.selectedItem, "HH:mm")
+    if (this.type === 'redo') {
+      let input = {
+        "clientId": this.clientId,
+        "payload": {
+          "coverage": this.payload.coverage,
+          "userEmail": this.payload.selectedUsers,
+          "storeName": this.payload.selectedStores,
+          "section_id": this.payload.sectionInfo.section_id,
+          "sectionName": this.payload.sectionInfo.sectionName,
+          "qno": response[0].questions[0].qno,
+          "showcomment": this.showcomment,
+          "excelData": this.excelData,
+          "checklistDescription": this.taskForm.value.checklistDescription,
+          "parentQuestion": this.payload.inputData.parentQuestion ? this.payload.inputData.parentQuestion : this.payload.inputData.qno,
+        },
+        "upsert": {
+          "redoStatus": true,
+          "redo": true
+        }
+      }
+      if (this.payload.operationtype == 'task') {
+        this.traxService.redomultiTask(input).pipe(takeUntil(this.destroy$)).subscribe({
+          next: (res: any) => {
+            if (res && res?.code === 200) {
+              this.toastService.getSuccessToast(res?.message)
+              this.activeModal.close('submit');
+            }
+          }
+        })
+      } else {
+        this.traxService.redoTaskmultichecklist(input).pipe(takeUntil(this.destroy$)).subscribe({
+          next: (res: any) => {
+            if (res && res?.code === 200) {
+              this.toastService.getSuccessToast(res?.message)
+              this.activeModal.close('submit');
+            }
+          }
+        })
+      }
+
+    } else {
+      let payload = {
+        "checkListName": this.taskForm.value.checklistName,
+        "checkListDescription": this.taskForm.value.checklistDescription,
+        "checkListId": this.sourceCheckList_id,
+        "sectionId": this.payload.sectionInfo.section_id,
+        "sectionName": this.payload.sectionInfo.sectionName,
+        "qno": this.payload.inputData.qno,
+        "coverage": this.payload.coverage,
+        "showcomment": this.showcomment,
+        "excelData": this.excelData,
+        "parentQuestion": this.payload.inputData.parentQuestion ? this.payload.inputData.parentQuestion : this.payload.inputData.qno,
+        "question": [
+          {
+            "qno": 1,
+            "qname": this.payload.inputData.qname,
+            "qcomment": this.taskForm.value.checklistDescription,
+            "answerType": response[0].questions[0].answerType,
+            "runAI": false,
+            "runAIDescription": "",
+            "allowUploadfromGallery": response[0].questions[0].allowUploadfromGallery,
+            "linkType": false,
+            "questionReferenceImage": this.uploadedFiles && this.uploadedFiles.length > 0 ? this.uploadedFiles : response[0].questions[0].questionReferenceImage,
+            "descriptivetype": response[0].questions[0].descriptivetype,
+            "answers": response[0].questions[0].answers
+          }
+        ],
+        "scheduleDate": dayjs(this.selectedDate.startDate, "DD-MM-YYYY").format("YYYY-MM-DD"),
+        "scheduleEndTime": time.format("hh:mm A"),
+        "userEmail": this.payload.selectedUsers,
+        "storeName": this.payload.selectedStores,
+        "clientId": this.clientId,
+        "allowedStoreLocation": this.allowedStoreLocation,
+        "restrictAttendance": this.restrictAttendance,
+        "priorityType": this.selectedlistselectControl.value,
+        "checkListType": "checklistTask"  // ['checklistTask','cctv]
+      }
+
+      if (response[0].questions[0].answerType === 'image' || response[0].questions[0].answerType === 'descriptiveImage' || response[0].questions[0].answerType === 'multipleImage') {
+        if (this.uploadedFiles && this.uploadedFiles.length > 0) {
+          payload.question.forEach((data: any) => {
+            data?.answers.forEach((ans: any) => {
+              ans.referenceImage = this.uploadedFiles
+            });
+          })
+
+        }
+      }
+
+      // console.log(payload)
+      // return
+      try {
+
+        this.traxService.CreatechecklistMultiTask(payload).subscribe({
+          next: (res: any) => {
+            if (res?.code === 200) {
+              console.log("------------------")
+              this.toastService.getSuccessToast(res?.message)
+              this.activeModal.close('submit');
+            }
+          }, error: (err) => {
+            console.error('Request Failed:', err);
+          }
+        })
+      } catch (err) {
+        console.log("88888", err)
+
+      }
+    }
+
+
+  }
+
+  preventEnter(event: any) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+  createForm() {
+    this.taskForm = this.fb.group({
+      checklistName: ['', [Validators.required, noWhitespaceValidator()]],
+      checklistDescription: [''],
+      sections: this.fb.array<FormGroup<SectionForm>>([])
+    })
+    this.updateForm()
+
+  }
+  addSectionForm(section?: Section) {
+
+    const sectionFormData: FormGroup<SectionForm> = this.fb.group({
+      id: [section?.id ?? ''],
+      name: [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()]],
+      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 === 'yes/no' || question.answerType === 'multiplechoicesingle' || question.answerType === 'multiplechoicemultiple') {
+      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) {
+    console.log(answer?.referenceImage)
+    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') {
+      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 === '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>>)
+  }
+  isInvalidAnswer(secIdx: number, qnIdx: number) {
+    let answer = this.getAnswers(secIdx, qnIdx);
+    if (answer.value.length > 2) {
+      return true;
+    }
+    else {
+      return false;
+    }
+  }
+  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) {
+    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.clientId as string)
+      this.traxService.taskImageupload(formData).pipe(takeUntil(this.destroy$)).subscribe({
+        next: (res: any) => {
+          if (res.data.path) {
+            this.selectedFile = file;
+            this.previewUrl = URL.createObjectURL(file);
+            this.uploadedFiles.push(res.data.path)
+            if (this.fileInput) {
+              this.fileInput.nativeElement.value = '';
+            }
+
+          }
+        },
+        error: (err: any) => {
+          this.toastService.getErrorToast(err?.error?.error?.message || 'Something went wrong')
+        }
+      })
+    }
+  }
+  togglegeofencing(evt: any) {
+    this.allowedStoreLocation = evt.target.checked;
+  }
+  toggleAttendance(evt: any) {
+    this.restrictAttendance = evt.target.checked;
+  }
+  @HostListener('document:click', ['$event'])
+  closeDropdown(event: MouseEvent): void {
+    this.dropDown = false;
+  }
+  openDropdown(event: MouseEvent) {
+    event.stopPropagation();
+    this.dropDown = !this.dropDown;
+
+  }
+
+  selectedItem: any = '00:00';
+  dropDown: boolean = false;
+  currentTime: string = '';
+
+  updateCurrentTime(): void {
+    const now = new Date();
+    const nextHour = new Date();
+    nextHour.setHours(now.getHours() + 1);
+
+    const hours = String(now.getHours()).padStart(2, '0');
+    const minutes = String(Math.floor(now.getMinutes() / 30) * 30).padStart(2, '0');
+    this.currentTime = `${hours}:${minutes}`;
+
+    const nextHourStr = `${String(nextHour.getHours()).padStart(2, '0')}:00`;
+    this.selectedItem = this.timeDetails[this.timeDetails.length - 2].id;
+  }
+
+  isDisabled(time: string): boolean {
+    const now = new Date();
+    console.log(dayjs(now).format('YYYY-MM-DD'), dayjs(this.selectedDate.startDate, "DD-MM-YYYY").format("YYYY-MM-DD"))
+    if (dayjs(now).format('YYYY-MM-DD') === dayjs(this.selectedDate.startDate, "DD-MM-YYYY").format("YYYY-MM-DD")) {
+      now.setHours(now.getHours() + 1);
+      const disabledThreshold = `${String(now.getHours()).padStart(2, '0')}:00`;
+      console.log(disabledThreshold)
+      return time < disabledThreshold;
+    } else {
+      return false
+    }
+  }
+
+  selectItem(value: any) {
+    this.selectedItem = value;
+    this.dropDown = false;
+  }
+
+  onAnswerDelete(sectionIndex: number, questionIndex: number, answerIndex: number) {
+    this.getAnswers(sectionIndex, questionIndex).removeAt(answerIndex)
+    this.toastService.getSuccessToast('Answer deleted successfully')
+
+  }
+
+  onValidateResponseChange(event: any, sectionIndex: number, questionIndex: number, answerIndex: number) {
+    if (event.target.checked) {
+      this.getAnswers(sectionIndex, questionIndex).at(answerIndex).get('showLinked')?.setValue(false)
+    }
+  }
+  addNewAnswer(sectionIndex: number, questionIndex: number, type: AnswerType) {
+    if (type === 'multiplechoicesingle' || type === 'multiplechoicemultiple') {
+      this.addAnswerForm(multiplechoice_answer_template as Answer, sectionIndex, questionIndex)
+      this.toastService.getSuccessToast('Answer 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 '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 'image/video': question = image_video_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 || ''
+
+    this.getQuestions(sectionIndex).removeAt(questionIndex)
+
+    this.addQuestionForm(question as Question, sectionIndex, questionIndex)
+
+    this.getQuestions(sectionIndex).at(questionIndex).get('qname')?.setValue(questionName)
+
+    if (question?.answers.length) {
+      question.answers.forEach((element, idx) => {
+        this.addAnswerForm(element as Answer, sectionIndex, questionIndex, idx)
+      });
+    }
+  }
+  selectedDate: any = {};
+  dayjs = dayjs;
+  isCustomDate = (m: dayjs.Dayjs) => {
+    const isValidDate = m > this.dayjs();
+    return isValidDate ? 'invalid-date' : false;
+  }
+  onStartDateChange(event: any) {
+    if (this.dayjs(event.startDate).isValid()) {
+      this.isCustomDate = (m: dayjs.Dayjs) => {
+        return m.isBefore(this.dayjs(), 'day') ? 'invalid-date' : false;
+      };
+    }
+  }
+
+  datechange(event: TimePeriod) {
+    if (!event.endDate || !event.startDate) {
+      return
+    }
+  }
+
+
+  uploadedFiles: File[] = [];
+
+
+  selectedFile?: File;
+  previewUrl?: any;
+  @ViewChild('fileInput') fileInput!: ElementRef;
+
+  removeImage(index: any): void {
+    this.selectedFile = undefined;
+    this.previewUrl = undefined;
+    if (this.fileInput) {
+      this.fileInput.nativeElement.value = '';
+    }
+    this.uploadedFiles.splice(index, 1)
+  }
+  ngOnDestroy(): void {
+
+    this.destroy$.next(true);
+    this.destroy$.complete();
+  }
+
+  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);
+  }
+
+}

package/src/lib/components/add-multitask/ascending-validator.ts

@@ -0,0 +1,13 @@
+import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
+
+export function rangeValidator(): ValidatorFn {
+  return (control: AbstractControl): ValidationErrors | null => {
+    const rangeStart = control.get('rangeStart')?.value;
+    const rangeEnd = control.get('rangeEnd')?.value;
+
+    if (rangeStart != null && rangeEnd != null && rangeStart >= rangeEnd) {
+      return { invalidRange: true };
+    }
+    return null;
+  };
+}