@piserve-tech/form-submission 1.3.314 → 1.3.316

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

@@ -0,0 +1,693 @@
+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());
+  }
+
+
+}