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

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

@@ -0,0 +1,569 @@
+import { ChangeDetectorRef, Component, ElementRef, HostListener, Input, 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-task',
+  templateUrl: './add-task.component.html',
+  styleUrl: './add-task.component.scss'
+})
+export class AddTaskComponent implements OnInit {
+  taskForm: FormGroup<TaskForm>;
+  @Input() type: any
+  @Input() sourceCheckList_id: any
+
+  submitted:boolean =  false
+  headerData: HeaderFilter | null | 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: 'Dropdown', value: 'dropdown' },
+    { label: 'Image/Video', value: 'image/video' },
+  ]
+  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() taskDetails: any
+  @Input() inputData: any
+  @Input() checklistInfo: any
+  @Input() storeProfile: any
+  @Input() sectionInfo: any
+  @Input() operationtype: any
+  @Input() userAnswerItem: any
+
+  get displayedUserAnswers(): any[] {
+    if (this.userAnswerItem) {
+      return [this.userAnswerItem];
+    }
+    return this.inputData?.userAnswer ?? [];
+  }
+    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" }
+  ]
+  userType:any;
+
+
+  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() {
+    const userInfo = JSON.parse(localStorage.getItem("user-info") || "{}");
+    if (userInfo.userType) {
+      this.userType = userInfo.userType;
+    }
+    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);
+        }
+      }
+    }
+
+
+  }
+
+  cancel() {
+    this.activeModal.close('close')
+    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') {
+      const answerIndex = this.userAnswerItem && Array.isArray(this.inputData?.userAnswer)
+        ? this.inputData.userAnswer.indexOf(this.userAnswerItem)
+        : -1;
+      let input: any = {
+        "clientId": this.storeProfile.client_id,
+        "payload": {
+          "_id": this.checklistInfo.checklistId,
+          "section_id":this.sectionInfo.section_id,
+          "sectionName":this.sectionInfo.sectionName,
+          "qno": response[0].questions[0].qno,
+          "uniqueNo": this.inputData.uniqueNo?this.inputData.uniqueNo:"",
+          "checklistDescription":this.taskForm.value.checklistDescription,
+          "parentQuestion":this.inputData.parentQuestion?this.inputData.parentQuestion:this.inputData.qno,
+        },
+        "upsert": {
+          "redoStatus": true,
+          "redo": true
+        }
+      }
+      if (answerIndex >= 0) {
+        input.payload.answerIndex = answerIndex;
+        input.payload.answerName = this.userAnswerItem?.answer;
+      }
+
+
+      if(this.operationtype == 'task'){
+        this.traxService.redoTask(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.redoTaskchecklist(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,
+        "processedChecklistId": this.checklistInfo?.checklistId,
+        "checkListId":this.sourceCheckList_id,
+        "sectionId":this.sectionInfo.section_id,
+        "sectionName":this.sectionInfo.sectionName,
+        "qno": this.inputData.qno,
+        "uniqueNo": this.inputData.uniqueNo?this.inputData.uniqueNo:"",
+        "parentQuestion":this.inputData.parentQuestion?this.inputData.parentQuestion:this.inputData.qno,
+        "question": [
+          {
+            "qno":1,
+            "qname": 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,
+            "allowMultiple": response[0].questions[0].allowMultiple
+          }
+        ],
+        "scheduleDate": dayjs(this.selectedDate.startDate,"DD-MM-YYYY").format("YYYY-MM-DD"),
+        "scheduleEndTime": time.format("hh:mm A"),
+        "userEmail": this.checklistInfo?.userEmail,
+        "userName": this.checklistInfo?.submittedBy,
+        "storeName": this.storeProfile?.storeName?this.storeProfile?.storeName:"",
+        "clientId": this.storeProfile?.client_id,
+        "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
+            });   
+          })
+         
+        }
+      }
+
+
+      this.traxService.CreatechecklistTask(payload).pipe(takeUntil(this.destroy$)).subscribe({
+        next: (res: any) => {
+          if (res.code === 200) {
+            this.toastService.getSuccessToast(res?.message)
+            this.activeModal.close('submit');
+          }
+        }
+      })
+    }
+
+
+  }
+  
+
+  createForm() {
+    this.taskForm = this.fb.group({
+      checklistName: ['', [Validators.required,noWhitespaceValidator()]],
+      checklistDescription: ['',[Validators.required,]],
+      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>>([]),
+      allowMultiple:[question?.allowMultiple ?? false]
+    });
+
+    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' || 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) {
+    console.log(answer?.referenceImage)
+    let answerLength = this.getAnswers(sectionIndex, questionIndex)?.length;
+    const answerFormData: FormGroup<AnswerForm> = this.fb.group({
+      answer: [answer?.answer ?? ''],
+      answeroptionNumber: [answer?.answeroptionNumber ?? (answerLength ? answerLength + 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 ?? answerLength ? answerLength - 1 : 0, [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 === '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.imgUrl) {
+            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')
+        }
+      })
+    }
+  }
+  @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)
+  }
+
+  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-task/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;
+  };
+}