@annalib/anna-core 7.2.2 → 7.2.4

package/src/lib/anna-dropdown-lib/components/anna-week-calendar-filter/anna-week-calendar-filter.component.ts

@@ -0,0 +1,414 @@
+// Angular import statements
+import { DatePipe } from "@angular/common";
+import { AfterViewInit, Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from "@angular/core";
+
+// Third party import statements
+import { NgbCalendar, NgbDate, NgbDatepickerConfig, NgbDateStruct, NgbInputDatepicker } from "@ng-bootstrap/ng-bootstrap";
+import dayjs from "dayjs";
+import { WeekObject } from '../../../anna-core-shared-lib/models/anna-generic-data-type.model';
+import { IWeekCalendar } from '../../../anna-core-shared-lib/models/anna-global-dropdown-config.model';
+import { AnnaDateTimeFormatService } from '../../../anna-core-shared-lib/services/anna-date-time-format.service';
+import { AnnaGlobalConfigService } from '../../../anna-core-shared-lib/services/anna-global-config.service';
+
+// User defined import statements
+
+
+
+@Component({
+  selector: "anna-core-week-calendar-filter-lib",
+  templateUrl: "./anna-week-calendar-filter.component.html",
+  styleUrls: ["./anna-week-calendar-filter.component.scss"],
+})
+export class AnnaWeekCalendarComponent implements OnInit, OnChanges, AfterViewInit {
+  fromDate: NgbDate | null;
+  hoveredDate: NgbDate | null = null;
+  toDate: NgbDate | null = null;
+  today: NgbDate;
+
+  model: NgbDateStruct;
+
+  weekNumbers: string[] = [];
+  pipe: DatePipe;
+  dateToDisplay: string = "";
+  weekObjects: WeekObject[];
+  multiSelectDropdownOpen: boolean = false;
+  datepicker: NgbInputDatepicker;
+  private formatter: any;
+  public formattedStartDate: string;
+  public formattedEndDate: string;
+  private calendarMap = new Map();
+  private flag1: boolean;
+  private flag2: boolean;
+  @Input("from-date") selectedFromDate: NgbDateStruct;
+  @Input("to-date") selectedEndDate: NgbDateStruct;
+  @Input("disabled-dates") disabledDates: NgbDate[] = [];
+  @Input() maxDate: any;
+  @Input() minDate: any;
+
+  disabledFunc: any;
+  state: any;
+
+  //Setting the default values;
+  private _defaultValues: IWeekCalendar;
+
+  @Input("week-calendar-config") config: IWeekCalendar;
+  @Output("apply") applyWeekCalendarChanges = new EventEmitter();
+  @Output("toggle-calendar") calendarToggled = new EventEmitter();
+
+  ngOnChanges(changes: SimpleChanges): void {
+    //if some values are not sent, setting the default values
+    this._defaultValues = this.globalConfigService.defaultWeekCalendarConfig;
+    this.config = { ...this._defaultValues, ...this.config };
+
+    if (this.config.selectCurrentWeek) {
+      this.initializeWeekData();
+      this.fromDate && this.selectWeek(this.fromDate);
+    }
+
+    this.formatter = this.formattedDates();
+
+    if (this.selectedFromDate && this.selectedEndDate && this.config) {
+      // this.selectWeek(this.fromDate);
+      this.fromDate = NgbDate.from(this.selectedFromDate);
+      this.toDate = NgbDate.from(this.selectedEndDate);
+      this.weekNumberGenerator();
+      this.displayToUI();
+      this.setCalendarMap();
+    }
+
+    if (this.disabledDates.length > 0) {
+      this.disabledFunc = (date: NgbDate, current: { month: number }) => {
+        return this.checkIfDateIsDisabled(date);
+      };
+    }
+  }
+
+  constructor(
+    private calendar: NgbCalendar,
+    private datePickerConfig: NgbDatepickerConfig,
+    private annaDateTimeFormatService: AnnaDateTimeFormatService,
+    private globalConfigService: AnnaGlobalConfigService
+  ) { }
+
+
+  getWeekNumber(week: any, firstDayOfWeek: any) {
+    const weekStartDate = dayjs(convertNgbDateToMoment(week[0]), "MM/DD/YYYY");
+    const weekYear = weekStartDate.year();
+    const yearStartDate = dayjs(`01/01/${weekYear}`, "MM/DD/YYYY");
+    const weekDay = yearStartDate.day();
+
+    const noOfDays = weekStartDate.diff(yearStartDate, "d") + 1;
+
+    function convertNgbDateToMoment(ngbDate: NgbDate): string {
+      let formatType = "MM/DD/YYYY";
+      let converted = null;
+      if(ngbDate && ngbDate.month && ngbDate.day && ngbDate.year){
+        converted = ngbDate.month+ "/" +  ngbDate.day + "/" + ngbDate.year;
+        converted = dayjs(converted).format(formatType);
+      }
+      return converted;
+    }
+
+    function checkIfYearIsBroadcastLeapYear() {
+      let isLeapYear = (weekYear % 4 == 0 && weekYear % 100 != 0) || weekYear % 400 == 0;
+      return (isLeapYear && (weekDay == 0 || weekDay == 6)) || (!isLeapYear && weekDay == 0);
+    }
+
+    const isLeapYear = checkIfYearIsBroadcastLeapYear();
+    const divider = isLeapYear ? 53 : 52;
+    const adder = isLeapYear ? 2 : 1;
+
+    let broadcastNumberOfDays = weekDay + noOfDays;
+    let broadcastWeekNumber = broadcastNumberOfDays % 7 > 0 ? broadcastNumberOfDays / 7 + adder : broadcastNumberOfDays / 7;
+
+    if (Math.floor(broadcastWeekNumber % divider) === 0) {
+      return divider;
+    }
+    return Math.floor(broadcastWeekNumber % divider);
+  }
+
+  ngAfterViewInit(): void {
+    // CHANGES@ANNALIB Changed this.
+    // this.calendar["__proto__"].getWeekNumber = this.getWeekNumber;
+    Object.setPrototypeOf(this.calendar, {getWeekNumber: this.getWeekNumber})
+  }
+
+  ngOnInit(): void {
+    // this.selectWeek(this.fromDate);
+    this.setCalendarMap();
+  }
+
+  initializeWeekData() {
+    this.weekObjects = [];
+
+    this.fromDate = this.calendar.getToday();
+    this.today = this.calendar.getToday();
+
+    let backDatedPeriod = JSON.parse(localStorage.getItem("userDetails") || '{}').locking_period_days;
+    if (backDatedPeriod < 0) {
+      let date: NgbDate = this.calendar.getPrev(this.calendar.getToday(), "d", Math.abs(backDatedPeriod));
+      this.today = NgbDate.from(date);
+      this.fromDate = NgbDate.from(date);
+    }
+
+    // Disable months before numberOfMonthsToEnable
+    this.datePickerConfig.markDisabled = (date: NgbDateStruct) => {
+      let previousMonth = this.calendar.getPrev(this.today, "m", this.config.numberOfMonthsToEnableInPast);
+      let previousDay = this.calendar.getPrev(previousMonth, "d", 1);
+      return !NgbDate.from(previousDay).before(date);
+    };
+    this.formatter = this.formattedDates();
+    this.flag1 = false;
+    this.flag2 = false;
+  }
+
+  selectWeek(date: NgbDate): void {
+    const dateObject = new Date(date.year, date.month - 1, date.day);
+    let constructDate = this.buildDate(dateObject);
+
+    if (!this.config.selectMultipleWeeks) {
+      //Single week selection
+      this.fromDate = this.constructStartDate(dateObject)(constructDate);
+      this.toDate = this.constructEndDate(dateObject)(constructDate);
+      this.weekNumberGenerator();
+    } else {
+      if (date.before(this.fromDate)) {
+        this.fromDate = this.constructStartDate(dateObject)(constructDate);
+        if (this.flag1) {
+          this.toDate = this.constructEndDate(dateObject)(constructDate);
+        }
+        this.flag1 = !this.flag1;
+      } else if (date.after(this.toDate)) {
+        if (this.flag2) {
+          this.fromDate = this.constructStartDate(dateObject)(constructDate);
+          //this.toDate = this.constructEndDate(dateObject)(constructDate);
+        }
+        this.flag2 = !this.flag2;
+        this.toDate = this.constructEndDate(dateObject)(constructDate);
+      } else {
+        this.fromDate = this.constructStartDate(dateObject)(constructDate);
+        this.toDate = this.constructEndDate(dateObject)(constructDate);
+      }
+
+      if (this.disabledDates.length > 0) {
+        let dayjsStartDate = dayjs(this.annaDateTimeFormatService.convertNgbDateToMoment(this.fromDate), "MM/DD/YYYY");
+        let dayjsEndDate = dayjs(this.annaDateTimeFormatService.convertNgbDateToMoment(this.toDate), "MM/DD/YYYY");
+        let ngbDate;
+        while (!dayjsStartDate.isSame(dayjsEndDate)) {
+          ngbDate = this.annaDateTimeFormatService.convertToNgbDate(dayjsStartDate, "MM/DD/YYYY");
+          if (this.checkIfDateIsDisabled(ngbDate)) {
+            break;
+          }
+          dayjsStartDate.add(1, "d");
+        }
+        let newDateObject = new Date(ngbDate.year, ngbDate.month - 1, ngbDate.day - 1);
+        let constructDate = this.buildDate(newDateObject);
+        this.toDate = this.constructEndDate(newDateObject)(constructDate);
+      }
+
+      this.weekNumberGenerator();
+    }
+
+    if (!this.config.showAsDropdown) {
+      this.applyChanges();
+    }
+  }
+
+  weekNumberGenerator(): void {
+    let dates = [];
+    let week = [];
+
+    let startDate = NgbDate.from(this.fromDate);
+    let endDate = NgbDate.from(this.toDate);
+
+    week.push(startDate);
+    while (endDate != null && !startDate.equals(endDate)) {
+      let date = this.calendar.getNext(startDate, "d", 1);
+      startDate = date;
+      week.push(date);
+
+      // Collect all days in week to calculate the week number
+      if (week.length == 7) {
+        dates.push(week);
+        week = [];
+      }
+    }
+    if (((this.config.maxWeeksToSelect ?? 0) > 0 && dates.length > (this.config.maxWeeksToSelect ?? 0))) {
+      dates.splice((this.config.maxWeeksToSelect ?? 0), dates.length - (this.config.maxWeeksToSelect ?? 0));
+    }
+    this.selectedDates(dates);
+
+    this.weekNumbers = [];
+    this.weekObjects = [];
+    if (dates.length > 0) {
+      for (let date of dates) {
+        this.weekNumbers.push(" Week " + this.calendar.getWeekNumber(date, this.config.firstDayOfWeek));
+        let dates = this.formatter(date[0], date[6]);
+        let dateObjects = { startDate: dates.formattedStartDate, endDate: dates.formattedEndDate };
+        this.weekObjects.push(dateObjects);
+      }
+    }
+    this.displayToUI();
+  }
+
+  selectedDates(dates: any) {
+    this.fromDate = dates[0][0];
+    this.toDate = dates[dates.length - 1][6];
+  }
+
+  formattedDates() {
+    let pipe = new DatePipe("en-US");
+    let thisObj = this;
+    return function (fromDate: NgbDate, toDate: NgbDate) {
+      let fromDateObject = new Date(fromDate.year, fromDate.month - 1, fromDate.day);
+      let toDateObject = new Date(toDate.year, toDate.month - 1, toDate.day);
+      thisObj.formattedStartDate = pipe.transform(fromDateObject, thisObj.config.dateFormatForRequest);
+      thisObj.formattedEndDate = pipe.transform(toDateObject, thisObj.config.dateFormatForRequest);
+
+      thisObj.dateToDisplay =
+        pipe.transform(fromDateObject, thisObj.config.dateFormatToDisplay) +
+        " to " +
+        pipe.transform(toDateObject, thisObj.config.dateFormatToDisplay);
+      return thisObj;
+    };
+  }
+
+  displayToUI() {
+    if (!this.config.selectMultipleWeeks && this.fromDate && this.toDate) {
+      // Display for only Single Week
+      this.formatter(this.fromDate, this.toDate);
+    } else {
+      // Display for Multiple Weeks
+      if (this.weekNumbers.length > (this.config.maxWeeksToShowWithRemainingCount ?? 0)) {
+        let weekDisplay = [];
+        for (let i = 0; i < (this.config.maxWeeksToShowWithRemainingCount ?? 0); i++) {
+          weekDisplay.push(this.weekNumbers.shift());
+        }
+        let remainingWeeks = this.weekNumbers.length;
+        this.weekNumbers = [];
+        this.weekNumbers.push(weekDisplay + " +" + remainingWeeks);
+      }
+    }
+  }
+
+  constructStartDate(date: Date) {
+    let firstDayOfWeek = this.config.firstDayOfWeek;
+    return function (constructDate: any) {
+      let startDay = date.getDay() != 0 ? (firstDayOfWeek ?? 0) - date.getDay() : -6;
+      return constructDate(startDay);
+    };
+  }
+
+  constructEndDate(date: Date) {
+    let firstDayOfWeek = this.config.firstDayOfWeek;
+    return function (constructDate: any) {
+      let endDay = date.getDay() != 0 ? (firstDayOfWeek ?? 0) + 6 - date.getDay() : 0;
+      return constructDate(endDay);
+    };
+  }
+
+  buildDate(date: Date) {
+    return function (number: number): NgbDate | null {
+      let day = date.getDate() + number;
+      const dateObject = new Date(date.getFullYear(), date.getMonth(), day);
+
+      let ngbDateObject = {} as NgbDate;
+      ngbDateObject.day = day;
+
+      if (ngbDateObject.day > 31 || ngbDateObject.day < 1) {
+        ngbDateObject.day = dateObject.getDate();
+      }
+
+      ngbDateObject.month = dateObject.getMonth() + 1;
+      ngbDateObject.year = dateObject.getFullYear();
+      return NgbDate.from(ngbDateObject);
+    };
+  }
+
+  isHovered(date: NgbDate): boolean | null {
+    return this.fromDate && !this.toDate && this.hoveredDate && date.after(this.fromDate) && date.before(this.hoveredDate);
+  }
+
+  isInside(date: NgbDate): boolean | null {
+    return this.toDate && date.after(this.fromDate) && date.before(this.toDate);
+  }
+
+  isRange(date: NgbDate): boolean | null {
+    return (
+      date.equals(this.fromDate) || (this.toDate && date.equals(this.toDate)) || this.isInside(date) || this.isHovered(date)
+    );
+  }
+
+  previousWeek(): void {
+    if (this.fromDate) {
+      this.toDate = this.calendar.getPrev(this.fromDate, "d", 1);
+      this.fromDate = this.calendar.getPrev(this.fromDate, "d", this.calendar.getDaysPerWeek());
+    }
+    this.weekNumberGenerator();
+    this.applyChanges();
+  }
+
+  nextWeek(): void {
+    if (this.fromDate) {
+      this.fromDate = this.calendar.getNext(this.fromDate, "d", this.calendar.getDaysPerWeek());
+      this.toDate = this.calendar.getNext(this.fromDate, "d", this.calendar.getDaysPerWeek() - 1);
+    }
+    this.weekNumberGenerator();
+    this.applyChanges();
+  }
+
+  setCalendarMap() {
+    let dateObj = { fromDate: this.fromDate, toDate: this.toDate };
+    this.calendarMap.set("oldDates", dateObj);
+  }
+
+  applyChanges() {
+    this.multiSelectDropdownOpen = false;
+    if (!this.config.emitMultipleWeekObjects) {
+      let dates = {} as WeekObject;
+      let formattedDates = this.formatter(this.fromDate, this.toDate);
+      dates.startDate = formattedDates.formattedStartDate;
+      dates.endDate = formattedDates.formattedEndDate;
+      this.applyWeekCalendarChanges.emit(dates);
+    } else {
+      this.applyWeekCalendarChanges.emit(this.weekObjects);
+    }
+    this.setCalendarMap();
+  }
+
+  isFocused(value: any) {
+    this.calendarToggled.emit(value);
+  }
+
+  isDropdownOpenedForCalendar(datepicker: NgbInputDatepicker) {
+    this.datepicker = datepicker;
+    if (this.datepicker.isOpen()) {
+      this.revertDates();
+      this.datepicker.close();
+      this.multiSelectDropdownOpen = false;
+    } else {
+      this.datepicker.open();
+      this.multiSelectDropdownOpen = true;
+    }
+  }
+
+  revertDates() {
+    this.multiSelectDropdownOpen = false;
+    if (this.calendarMap.get("oldDates")) {
+      let dateObj = this.calendarMap.get("oldDates");
+      this.fromDate = dateObj.fromDate;
+      this.toDate = dateObj.toDate;
+      this.weekNumberGenerator();
+      this.displayToUI();
+    }
+  }
+
+  checkIfDateIsDisabled(date: any): boolean {
+    const validatorFunc = (ngbDate: NgbDate) => ngbDate.year === date.year && ngbDate.month === date.month && ngbDate.day === date.day;
+    return this.disabledDates.some(validatorFunc);
+  }
+
+  closeDatepicker(datepickerRef: any) {
+    datepickerRef.close();
+  }
+}