@piserve-tech/form-submission 1.3.317 → 1.3.319

package/src/form-fields/date-time-fields/date-time-fields.component.ts

@@ -1,693 +0,0 @@
-import { DatePipe } from '@angular/common';
-import { Component, EventEmitter, Input, Output, ViewChild, ViewEncapsulation } from '@angular/core';
-import { NavigationEnd, Router } from '@angular/router';
-import {
-  BsDatepickerConfig,
-  BsDatepickerDirective,
-} from 'ngx-bootstrap/datepicker';
-import { NgxMaterialTimepickerComponent } from 'ngx-material-timepicker';
-import { Subscription } from 'rxjs';
-import { ElementTrackerService } from '../../services/element-tracker.service';
-import { ValidationService } from '../../services/validation.service';
-
-@Component({
-  selector: 'lib-date-time-fields',
-  templateUrl: './date-time-fields.component.html',
-  styleUrls: ['./date-time-fields.component.scss'],
-  providers: [DatePipe],
-  encapsulation: ViewEncapsulation.None,
-})
-export class DateTimeFieldsComponent {
-  bsConfig: Partial<BsDatepickerConfig> = {
-    containerClass: 'theme-custom',
-    isAnimated: true,
-    adaptivePosition: true,
-    showWeekNumbers: false,
-  };
-  
-  rangeBsConfig: Partial<BsDatepickerConfig> = {};
-
-  @Input() question: any = {};
-  @Input() inLine: boolean = false;
-  @Input() inCard: boolean = false;
-  @Input() submissionIndex!: number;
-  @Output() answerChange = new EventEmitter<{ answer: any; maxPossibleScore?: number }>();
-
-  required: boolean = false;
-  hint: string = '';
-  count: number = 0;
-  minTime: string = '';
-  maxTime: string = '';
-  dateType: string = '';
-  format: string = '';
-  Dateformat: string = '';
-  timeFormat: string = '';
-  minDateOption: string = '';
-  minDate: Date | undefined;
-  maxDateOption: string = '';
-  maxDate: Date | undefined;
-  todayDate: Date = new Date();
-  selectedDate: Date | null = null;
-  selectedTime: string = '';
-  selectedDateRange: string = '';
-  selectedDateAndTime: Date | null = null;
-  validationFailed!: boolean;
-  timeValidationFailed!: boolean;
-  validationMessage: string = '';
-  maxTimeOption: string = '';
-  minTimeOption: string = '';
-  @Input() disableEdit: boolean = false;
-  private elementId: string='';
-  private timePickerOpened = false;
-  private subscriptions: Subscription[] = [];
-  private timePickersOpened: { [key: string]: boolean } = {};
-
-  @ViewChild('datepickerYMD') datepicker!: BsDatepickerDirective;
-  @ViewChild('daterangepicker') dateRangePicker!: BsDatepickerDirective;
-  @ViewChild('dateAndTimePicker') dateAndTimePicker!: BsDatepickerDirective;
-  @ViewChild('fullTime3') fullTime3!: NgxMaterialTimepickerComponent;
-  @ViewChild('fullTime4') fullTime4!: NgxMaterialTimepickerComponent;
-
-
-  constructor(
-    private datePipe: DatePipe,
-    private router: Router,
-    private validationService: ValidationService,
-    private tracker: ElementTrackerService
-  ) { }
-
-  ngOnInit() {
-    this.valueAssigned();
-    this.setRangeConfig();
-  }
-
-  private setRangeConfig() {
-    this.rangeBsConfig = {
-      containerClass: 'theme-custom',
-      isAnimated: true,
-      adaptivePosition: true,
-      showWeekNumbers: false,
-      dateInputFormat: this.format,
-      rangeInputFormat: this.format,
-      displayOneMonthRange: true,  // ← only one month if start/end in same month
-    };
-  }
-
-  valueAssigned() {
-    this.count = this.question.count;
-    this.required = this.question.required;
-    this.hint = this.question.hint;
-    this.dateType = this.question.formElement.appearance.dateType;
-    this.minDateOption = this.question.formElement.validation.minDateOption;
-    this.Dateformat = this.question.formElement.appearance.format.replace(
-      /DD/g,
-      'dd'
-    ).replace(/YYYY/g, 'yyyy');
-
-    this.minDate = this.getMinDate();
-
-
-    this.maxDateOption = this.question.formElement.validation.maxDateOption;
-    this.maxDate = this.getMaxDate();
-    this.setDateTimeFormat();
-    if (this.question?.answer && (this.question?.answer).length > 0)
-      this.selectedDate = this.question?.answer;
-    this.selectedTime = this.question.answer;
-    if (this.question?.answer && (this.question?.answer).length > 0)
-      this.selectedDateAndTime = new Date(this.question.answer);
-    this.selectedDateRange = this.question.answer;
-    this.minTimeOption = this.question.formElement.validation.minTimeOption;
-    this.maxTimeOption = this.question.formElement.validation.maxTimeOption;
-    if (this.dateType !== 'DATE_AND_TIME') {
-      this.minTime = this.getMinTime().toString();
-      this.maxTime = this.getMaxTime().toString();
-    }
-    if (this.dateType === 'DATE_AND_TIME' && this.question?.answer) {
-      const dateTimeArray = this.question.answer
-        ? this.question.answer.split(',')
-        : []; // Fallback to an empty array if `this.question.answer` is undefined
-
-      if (dateTimeArray.length === 2) {
-        const fetchedDate = dateTimeArray[0].trim();
-        const fetchedTime = dateTimeArray[1].trim();
-        this.selectedDate = fetchedDate;
-        this.selectedTime = fetchedTime;
-      }
-
-      const formattedDate = this.datePipe.transform(
-        this.selectedDateAndTime,
-        this.Dateformat
-      );
-      const formatteminDate = this.datePipe.transform(
-        this.minDate,
-        this.Dateformat
-      );
-      const formattemaxDate = this.datePipe.transform(
-        this.maxDate,
-        this.Dateformat
-      );
-
-      if (formattedDate === formatteminDate) {
-        this.minTime = this.getMinTime().toString();
-        if (this.timeFormat === '12') {
-          this.maxTime = '12:00 pm';
-        } else {
-          this.maxTime = '23:59';
-        }
-      }
-      if (formattedDate === formattemaxDate) {
-        this.maxTime = this.getMaxTime().toString();
-        if (this.timeFormat === '12') {
-          this.minTime = '12:00 am';
-        } else {
-          this.minTime = '00:00';
-        }
-      }
-      if (
-        formattedDate !== formatteminDate &&
-        formattedDate !== formattemaxDate
-      ) {
-        if (this.timeFormat === '12') {
-          this.minTime = '12:00 am';
-          this.maxTime = '12:00 pm';
-        } else {
-          this.minTime = '00:00';
-          this.maxTime = '23:59';
-        }
-      }
-    }
-
-    if (!this.minTime || this.minTime.length === 0) {
-      if (this.timeFormat === '12') {
-        this.minTime = '12:00 am';
-      } else {
-        this.minTime = '00:00';
-      }
-    }
-
-    if (!this.maxTime || this.maxTime.length === 0) {
-      if (this.timeFormat === '12') {
-        this.maxTime = '11:59 pm';
-      } else {
-        this.maxTime = '23:59';
-      }
-    }
-  }
-
-  setDateTimeFormat() {
-    switch (this.dateType) {
-      case 'DATE_ONLY':
-        this.format = this.question.formElement.appearance.format;
-        break;
-      case 'TIME_ONLY':
-        this.timeFormat = this.question.formElement.appearance.timeFormat;
-        break;
-      case 'DATE_AND_TIME':
-        this.format = this.question.formElement.appearance.format;
-        this.timeFormat = this.question.formElement.appearance.timeFormat;
-        break;
-      case 'DATE_RANGE':
-        this.format = this.question.formElement.appearance.format;
-        break;
-      case 'MONTH_YEAR':
-        this.format = this.question.formElement.appearance.format;
-        break
-      default:
-        this.format = 'DD/MM/YYYY';
-    }
-  }
-
-  getMinDate(): Date | undefined {
-    if (this.minDateOption === 'CURRENT_DATE') {
-      return this.todayDate;
-    } else if (this.minDateOption === 'CUSTOM') {
-      return new Date(this.question.formElement.validation.minDate);
-    }
-    else if(this.dateType==='MONTH_YEAR')
-    {
-      const minDateStr = this.question.formElement.validation.minDate;
-      const year = new Date(minDateStr).getFullYear(); 
-      return new Date(year, 0, 1);
-      
-    }
-    return undefined; // Return undefined if no valid option
-  }
-
-  getMaxDate(): Date | undefined {
-    if (this.maxDateOption === 'CURRENT_DATE') {
-      return this.todayDate;
-    } else if (this.maxDateOption === 'CUSTOM') {
-      return new Date(this.question.formElement.validation.maxDate);
-    }
-    else if(this.dateType==='MONTH_YEAR')
-      {
-        const minDateStr = this.question.formElement.validation.maxDate;
-        const year = new Date(minDateStr).getFullYear(); // Extracts the year
-        return new Date(year, 11, 31); 
-        
-      }
-    return undefined;
-  }
-
-  getMinTime() {
-    if (this.minTimeOption) {
-      const format = this.timeFormat === '24' ? 'HH:mm' : 'hh:mm a';
-
-      if (this.minTimeOption === 'CURRENT_TIME') {
-        const now = new Date();
-        return this.datePipe.transform(now, format) || '';
-      } else if (this.minTimeOption === 'CUSTOM') {
-        const customTime = this.question.formElement.validation.minTime;
-        const [hours, minutes] = customTime.split(':'); // Split by colon to get hours and minutes
-
-        // Create a Date object with a fixed date and custom time
-        const customDate = new Date();
-        customDate.setHours(parseInt(hours, 10), parseInt(minutes, 10), 0, 0); // Set hours and minutes
-
-        return this.datePipe.transform(customDate, format) || '';
-      }
-    }
-
-    // Ensure a default return if no condition is met
-    return '';
-  }
-
-  getMaxTime() {
-    if (this.maxTimeOption) {
-      const format = this.timeFormat === '24' ? 'HH:mm' : 'hh:mm a';
-      if (this.maxTimeOption === 'CURRENT_TIME') {
-        const now = new Date();
-        return this.datePipe.transform(now, format) || '';
-      } else if (this.maxTimeOption === 'CUSTOM') {
-        const customTime = this.question.formElement.validation.maxTime;
-        const [hours, minutes] = customTime.split(':'); // Split by colon to get hours and minutes
-
-        // Create a Date object with a fixed date and custom time
-        const customDate = new Date();
-        customDate.setHours(parseInt(hours, 10), parseInt(minutes, 10), 0, 0); // Set hours and minutes
-
-        return this.datePipe.transform(customDate, format) || '';
-      }
-    }
-
-    return '';
-  }
-
-  openDatePicker() {
-    this.datepicker.toggle();
-  }
-
-  openDateRangePicker() {
-    this.dateRangePicker.toggle();
-  }
-
-  openDateAndTimePicker() {
-    this.dateAndTimePicker.toggle();
-  }
-
-  closeDatepicker() {
-    if (this.dateAndTimePicker) {
-      this.dateAndTimePicker.hide(); // Close the datepicker
-    }
-  }
-
-  validateField() {
-    if (this.dateType === 'DATE_ONLY' || this.dateType === 'MONTH_YEAR') {
-      if (this.selectedDate) {
-        this.question.answer = this.formatDate(this.selectedDate.toString());
-      } else {
-        this.question.answer = '';
-      }
-
-      this.validateDateOnly();
-    } else if (this.dateType === 'TIME_ONLY') {
-      this.question.answer = String(this.selectedTime);
-      this.validateTimeOnly();
-    } else if (this.dateType === 'DATE_AND_TIME') {
-      if (this.selectedDateAndTime) {
-        this.question.answer = this.formatDate(
-          this.selectedDateAndTime.toString()
-        );
-      } else {
-        this.question.answer = '';
-      }
-
-      this.validateDateAndTime();
-    } else {
-      this.question.answer = this.formatDate(this.selectedDateRange);
-      this.validateDateRange();
-    }
-    this.answerChange.emit({answer:this.question.answer,maxPossibleScore:0});
-  }
-
-  formatDate(date: string | Date, type: string = 'dateTime'): string {
-    switch (this.dateType) {
-      case 'DATE_ONLY':
-        return this.datePipe.transform(this.selectedDate, this.Dateformat) || '';
-    
-        case 'MONTH_YEAR': 
-        const extracted = this.extractMonthYear(this.selectedDate?.toString());
-    
-        if (!extracted) {
-            console.error("Invalid date format");
-            return '';
-        }
-    
-        // Create a Date object with the extracted month and year
-        this.selectedDate = new Date(extracted.year, extracted.month - 1, 1); // Month is 0-based in JS
-    
-        // Return formatted date
-        return this.datePipe.transform(this.selectedDate, this.Dateformat) || '';
-    
-        
-          // return this.datePipe.transform(this.selectedDate, this.Dateformat) || '';
-      case 'DATE_AND_TIME':
-        const formattedDate = this.datePipe.transform(
-          this.selectedDateAndTime,
-          this.Dateformat
-        );
-        const formatteminDate = this.datePipe.transform(
-          this.minDate,
-          this.Dateformat
-        );
-        const formattemaxDate = this.datePipe.transform(
-          this.maxDate,
-          this.Dateformat
-        );
-
-        if (formattedDate === formatteminDate) {
-          this.minTime = this.getMinTime().toString();
-          this.maxTime = this.timeFormat === '12' ? '11:59 pm' : '23:59';
-        }
-
-        if (formattedDate === formattemaxDate) {
-          this.maxTime = this.getMaxTime().toString();
-          this.minTime = this.timeFormat === '12' ? '12:00 am' : '00:00';
-        }
-
-        if (
-          formattedDate !== formatteminDate &&
-          formattedDate !== formattemaxDate
-        ) {
-          this.minTime = this.timeFormat === '12' ? '12:00 am' : '00:00';
-          this.maxTime = this.timeFormat === '12' ? '11:59 pm' : '23:59';
-        }
-
-        const formattedTime = this.selectedTime || ''; // Ensure selectedTime is handled properly
-        if (formattedDate && formattedTime) {
-          return `${formattedDate}, ${formattedTime}`;
-        }
-        return '';
-      case 'DATE_RANGE':
-        const dates = date as unknown as Date[];
-
-        // Ensure dates is defined and is an array
-        if (Array.isArray(dates) && dates.length === 2) {
-          const start = this.datePipe.transform(dates[0], this.Dateformat);
-          const end = this.datePipe.transform(dates[1], this.Dateformat);
-          return `${start} - ${end}`;
-        }
-
-        return '';
-      default:
-        return this.datePipe.transform(date, this.Dateformat) || '';
-    }
-  }
-
-extractMonthYear(dateInput: string | Date | null | undefined): { month: number, year: number } | null {
-  if (!dateInput) {
-    return null;
-  }
-
-  // Handle string case where date is passed as a stringified Date object
-  if (typeof dateInput === "string") {
-    const parsedDate = new Date(dateInput);
-    if (!isNaN(parsedDate.getTime())) {
-      return { month: parsedDate.getMonth() + 1, year: parsedDate.getFullYear() };
-    }
-
-    // Handle string formats like "MM/YYYY" or "YYYY/MM"
-    const parts = dateInput.split(/[-/]/); // Split by '-' or '/'
-    if (parts.length !== 2) {
-      return null; // Invalid format
-    }
-
-    let year = 0, month = 0;
-
-
-    if (parts[0].length === 4) {
-      // Format: YYYY/MM or YYYY-MM
-      year = parseInt(parts[0], 10);
-      month = parseInt(parts[1], 10);
-    } else {
-      // Format: MM/YYYY or MM-YYYY
-      month = parseInt(parts[0], 10);
-      year = parseInt(parts[1], 10);
-    }
-
-    return { month, year };
-  }
-
-  // Handle actual Date object case
-  if (dateInput instanceof Date && !isNaN(dateInput.getTime())) {
-    return { month: dateInput.getMonth() + 1, year: dateInput.getFullYear() };
-  }
-
-  return null; // Invalid input
-}
-
-
-  
-  validateDateOnly() {
-    this.validationFailed = false;
-    this.validationMessage = '';
-    if (this.required && !this.selectedDate) {
-      this.validationFailed = true;
-      this.validationService.clearInvalid(this.buildElementId());
-      this.validationMessage = 'This is a required question';
-      this.question.validation = false;
-      this.question.validationMessage = 'This is a required question';
-    } else {
-      this.validationService.clearInvalid(this.buildElementId());
-      this.question.validation = true;
-    }
-  }
-  validateTimeOnly() {
-    this.validationFailed = false;
-    this.validationMessage = '';
-    if (this.required && !this.selectedTime) {
-      this.validationService.clearInvalid(this.buildElementId());
-      this.validationFailed = true;
-      this.validationMessage = 'This is a required question';
-      this.question.validation = false;
-      this.question.validationMessage = 'This is a required question';
-    } else {
-      this.validationService.clearInvalid(this.buildElementId());
-      this.question.validation = true;
-    }
-  }
-  validateDateRange() {
-    this.validationService.clearInvalid(this.buildElementId());
-    this.validationFailed = false;
-    this.validationMessage = '';
-    if (this.required && !this.selectedDateRange) {
-      this.validationFailed = true;
-      this.validationMessage = 'This is a required question';
-      this.question.validation = false;
-      this.question.validationMessage = 'This is a required question';
-    } else {
-      this.question.validation = true;
-    }
-  }
-  validateDateAndTime() {
-    this.validationService.clearInvalid(this.buildElementId());
-    this.validationFailed = false;
-    this.timeValidationFailed = false;
-    this.validationMessage = '';
-    if (this.required && !this.selectedDateAndTime) {
-      this.validationFailed = true;
-      this.validationMessage = 'This is a required question';
-      this.question.validation = false;
-      this.question.validationMessage = 'This is a required question';
-    } else if (this.required && !this.selectedTime) {
-      this.timeValidationFailed = true;
-      this.validationMessage = 'This is a required question';
-      this.question.validation = false;
-      this.question.validationMessage = 'This is a required question';
-    } else {
-      this.question.validation = true;
-    }
-  }
-
-  convertToISODate(
-    dateInput: [number, number, number] | string | null | undefined
-  ): Date | null {
-    if (!dateInput) {
-      return null; // Return null if dateInput is null, undefined, or any falsy value
-    }
-
-    let year, month, day;
-
-    if (Array.isArray(dateInput)) {
-      // Extract year, month, and day from array input
-      [year, month, day] = dateInput;
-
-      // Validate the array format
-      if (
-        typeof year !== 'number' ||
-        typeof month !== 'number' ||
-        typeof day !== 'number' ||
-        isNaN(year) ||
-        isNaN(month) ||
-        isNaN(day) ||
-        !Number.isInteger(year) ||
-        !Number.isInteger(month) ||
-        !Number.isInteger(day) ||
-        month < 1 ||
-        month > 12 ||
-        day < 1 ||
-        day > 31
-      ) {
-        return null;
-      }
-    } else if (typeof dateInput === 'string') {
-      // Check if the string matches the YYYY-MM-DD format
-      const dateParts = dateInput.split('-');
-      if (dateParts.length !== 3) return null;
-
-      [year, month, day] = dateParts.map(Number);
-
-      // Validate the parsed parts
-      if (
-        isNaN(year) ||
-        isNaN(month) ||
-        isNaN(day) ||
-        !Number.isInteger(year) ||
-        !Number.isInteger(month) ||
-        !Number.isInteger(day) ||
-        month < 1 ||
-        month > 12 ||
-        day < 1 ||
-        day > 31
-      ) {
-        return null;
-      }
-    } else {
-      return null; // Unsupported input type
-    }
-
-    // Create a Date object (month is 0-based, so subtract 1)
-    const date = new Date(year, month - 1, day);
-
-    // Verify if the Date object matches the provided year, month, and day
-    if (
-      date.getFullYear() !== year ||
-      date.getMonth() !== month - 1 ||
-      date.getDate() !== day
-    ) {
-      return null;
-    }
-
-    return date;
-  }
-
-  ngAfterViewInit(): void {
-    this.initializeTimePickers();
-    if (this.inLine || this.inCard) {
-      this.elementId = `question-${this.submissionIndex}-${this.question.id}`;
-    } else {
-      this.elementId = `question-${this.question.id}`;
-    }
-  
-    this.tracker.registerElement(this.elementId);
-
-    if (this.subscriptions.length === 0) {
-      const routerSub = this.router.events.subscribe((event) => {
-        if (event instanceof NavigationEnd) {
-          this.closeTimepickers();
-        }
-      });
-      this.subscriptions.push(routerSub);
-    }
-  }
-
-  ngAfterViewChecked(): void {
-    // Ensure time picker subscriptions are attached even after conditional rendering
-    this.initializeTimePickers();
-  }
-
-  ngOnDestroy(): void {
-    this.closeTimepickers();
-    if (this.elementId) {
-      this.tracker.unregisterElement(this.elementId);
-    }
-    // Unsubscribe from all subscriptions
-    this.subscriptions.forEach((sub) => {
-      if (sub && typeof sub.unsubscribe === 'function') {
-        sub.unsubscribe();
-      }
-    });
-  }
-
-  /**
-   * Initialize and track time pickers
-   */
-  private initializeTimePickers(): void {
-    // Track fullTime3 if available
-    if (this.fullTime3 && !this.timePickersOpened['fullTime3']) {
-      this.trackTimePicker(this.fullTime3, 'fullTime3');
-    }
-
-    // Track fullTime4 if it exists after conditional rendering
-    if (this.fullTime4 && !this.timePickersOpened['fullTime4']) {
-      this.trackTimePicker(this.fullTime4, 'fullTime4');
-    }
-  }
-
-  private trackTimePicker(picker: NgxMaterialTimepickerComponent, pickerName: string): void {
-    if (picker) {
-      const sub = picker.opened.subscribe(() => {
-        this.timePickersOpened[pickerName] = true; 
-      });
-
-      this.subscriptions.push(sub);
-    }
-  }
-
-  private closeTimepickers(): void {
-    if (this.fullTime3 && this.timePickersOpened['fullTime3'] && typeof this.fullTime3.close === 'function') {
-      this.fullTime3.close();
-      this.timePickersOpened['fullTime3'] = false;
-    }
-
-    // Check for fullTime4 only if it exists
-    if (this.fullTime4 && this.timePickersOpened['fullTime4'] && typeof this.fullTime4.close === 'function') {
-      this.fullTime4.close();
-      this.timePickersOpened['fullTime4'] = false;
-    }
-  }
-
-  handleValidation(isValid: boolean, message: string = 'This field is required') {
-    if (isValid) {
-      this.validationService.clearInvalid(this.buildElementId());
-    } else {
-      // this.validationService.setInvalid(this.question.id, message);
-    }
-  }
-
-  private buildElementId(): string {
-    return (this.inLine || this.inCard)
-      ? `${this.submissionIndex}-${this.question.id}`
-      : `${this.question.id}`;
-  }
-
-  get isInvalid(): boolean {
-    return !!this.validationService.getErrorMessage(this.buildElementId());
-  }
-
-  get errorMessage(): string | null {
-    return this.validationService.getErrorMessage(this.buildElementId());
-  }
-
-
-}