carriera-intern 0.0.0

package/projects/carriera-intern-components/src/app/components/input-datetime-picker/components/cai-custom-datetime-pickers/cai-custom-datetime-pickers.component.ts

@@ -0,0 +1,331 @@
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  ViewChild,
+  ViewContainerRef,
+  OnDestroy,
+  AfterViewInit,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+// moment
+import moment from 'moment';
+
+// services
+import { CalendarDateTimePickerService } from './services/calendar-datetime-picker.service';
+
+// components
+import { CaCustomDateTimePickersDateCalendarsComponent } from './components/cai-custom-datetime-pickers-date-calendars/cai-custom-datetime-pickers-date-calendars.component';
+
+// constants
+import { CustomDatetimePickersConstants } from './utils/constants/custom-datetime-pickers.constants';
+
+// models
+import { ScrollType } from './models/scroll-type.model';
+
+// enums
+import { CalendarTypeStringEnum } from './enums/calendar-type-string.enum';
+import { CalendarListPreviewStringEnum } from './enums/calendar-list-preview-string.enum';
+import { CalendarScrollTypeStringEnum } from './enums/calendar-scroll-type-string.enum';
+import { ICaInput } from './config';
+import { InputConfigNameStringEnum } from './enums/config.enum';
+
+@Component({
+  selector: 'cai-custom-datetime-pickers',
+  templateUrl: './cai-custom-datetime-pickers.component.html',
+  styleUrls: ['./cai-custom-datetime-pickers.component.scss'],
+  imports: [
+    CommonModule,
+    FormsModule,
+    CaCustomDateTimePickersDateCalendarsComponent,
+  ],
+})
+export class CaCustomDatetimePickersComponent
+  implements OnInit, OnDestroy, AfterViewInit
+{
+  private _dateTime!: Date;
+  @Input()
+  set dateTime(value: Date) {
+    this._dateTime = value;
+    // Update time value when dateTime changes
+    if (this.hourScroll && this.minutesScroll && this.pmAmScroll) {
+      this.setTimeValue();
+    }
+  }
+  get dateTime(): Date {
+    return this._dateTime;
+  }
+
+  @ViewChild('ref', { read: ViewContainerRef }) ref!: ViewContainerRef;
+  public _inputConfig!: ICaInput;
+  @Input() set inputConfig(config: ICaInput) {
+    this._inputConfig = config;
+    if (
+      this._inputConfig.name === InputConfigNameStringEnum.DATE_PICKER_BANK_CARD
+    )
+      this.listPreview = CalendarListPreviewStringEnum.MONTH_LIST;
+
+    if (this._inputConfig.minutesGapFive)
+      this.timeMinutes = CustomDatetimePickersConstants.timeMinutesGapFive;
+    else this.timeMinutes = CustomDatetimePickersConstants.timeMinutes;
+  }
+
+  @Output() closePopover: EventEmitter<Date> = new EventEmitter();
+
+  @ViewChild(CaCustomDateTimePickersDateCalendarsComponent)
+  dateCalendar!: CaCustomDateTimePickersDateCalendarsComponent;
+  @ViewChild('pmAmScroll') pmAmScroll!: ElementRef;
+  @ViewChild('minutesScroll') minutesScroll!: ElementRef;
+  @ViewChild('hourScroll') hourScroll!: ElementRef;
+
+  public selectedDateTime!: string;
+  public calendarMainType!: string;
+  public outputType!: (string | number)[];
+  public currentYear: number = new Date().getFullYear();
+  public currentMonth: number = new Date().getMonth();
+  public currentDay: number = new Date().getDate();
+  public listPreview: string = CalendarListPreviewStringEnum.FULL_LIST;
+  public timeMinutes!: string[];
+  public monthArray: number[] = new Array(12)
+    .fill(0)
+    .map((_, indx) => indx + 1);
+  public monthDayList: number[] = new Array(31)
+    .fill(0)
+    .map((_, indx) => indx + 1);
+  public yearsList: (string | number)[] = new Array(100)
+    .fill(0)
+    .map((_, idx) => (idx < 10 ? '0' + idx : idx));
+  public scrollTimer!: ReturnType<typeof setTimeout> | number;
+  public hoveredItem!: string | null;
+  public isInputFocus!: boolean;
+  public monthNames: string[] = CustomDatetimePickersConstants.monthNames;
+  public hourTimes: number[] = CustomDatetimePickersConstants.hourTimes;
+  public scrollTypes: ScrollType =
+    CustomDatetimePickersConstants.defaultScrollTypes;
+  public selectedTime: string =
+    CustomDatetimePickersConstants.defaultSelectedTime;
+  public timeOfDay: string[] = CustomDatetimePickersConstants.timeOfDay;
+
+  public previousRangeSide!: boolean;
+
+  constructor(private calendarService: CalendarDateTimePickerService) {}
+
+  @Input()
+  set calendarType(calendarType: string) {
+    this.calendarMainType = calendarType;
+    if (calendarType === CalendarTypeStringEnum.TIME)
+      this.outputType = CustomDatetimePickersConstants.defaultOutputTypeTime;
+    else this.outputType = CustomDatetimePickersConstants.defaultOutputTypeDate;
+  }
+
+  @Input()
+  set placeholder(placeholder: string) {
+    this.selectedDateTime = placeholder;
+  }
+
+  @Output() onRefocusInput: EventEmitter<Event> = new EventEmitter();
+
+  ngOnInit(): void {
+    this.initDateChangedListener();
+  }
+
+  ngAfterViewInit(): void {
+    this.setTimeValue();
+    this.changeOpened();
+  }
+
+  public initDateChangedListener(): void {
+    this.calendarService.dateChanged.subscribe((date) => {
+      if (this.calendarMainType !== CalendarTypeStringEnum.TIME) {
+        this.outputType[0] = date[0];
+        this.outputType[2] = date[1];
+        this.outputType[4] = date[2];
+        this.selectedDateTime = this.createStringFromOutput();
+      }
+    });
+  }
+
+  public setTimeValue() {
+    const dateInputArray = moment(this.dateTime).format('h/mm/A').split('/');
+
+    // console.log(dateInputArray, 'this.inputConfig');
+
+    setTimeout(() => {
+      this.scrollTypes.hourScroll = this.hourTimes.indexOf(
+        parseInt(dateInputArray[0]),
+      );
+      this.scrollTypes.minutesScroll = this.timeMinutes.indexOf(
+        dateInputArray[1],
+      );
+
+      this.scrollTypes.pmAmScroll = dateInputArray[2] === 'AM' ? 0 : 1;
+
+      // Update scroll positions if elements exist
+      if (this.hourScroll) {
+        this.hourScroll.nativeElement.scrollTop =
+          this.scrollTypes.hourScroll * 22;
+      }
+      if (this.minutesScroll) {
+        this.minutesScroll.nativeElement.scrollTop =
+          this.scrollTypes.minutesScroll * 22;
+      }
+      if (this.pmAmScroll) {
+        this.pmAmScroll.nativeElement.scrollTop =
+          this.scrollTypes.pmAmScroll * 22;
+      }
+
+      // Update the selectedTime display
+      this.checkForScrolledType('hourScroll');
+    });
+  }
+
+  public setListPreview(value: string): void {
+    this.listPreview = value;
+  }
+
+  public inputInFocus(): void {
+    this.isInputFocus = true;
+  }
+
+  public inputBlur(): void {
+    this.isInputFocus = false;
+  }
+
+  public refocusInput(event: Event): void {
+    event?.stopPropagation();
+    event?.preventDefault();
+    this.onRefocusInput.emit(event);
+  }
+
+  public changeOpened(): void {
+    // this.isInputFocus = e;
+    // if (e) {
+    if (this.calendarMainType === CalendarTypeStringEnum.TIME) {
+      setTimeout(() => {
+        this.hourScroll.nativeElement.scrollTop =
+          this.scrollTypes.hourScroll * 22;
+        this.minutesScroll.nativeElement.scrollTop =
+          this.scrollTypes.minutesScroll * 22;
+        this.pmAmScroll.nativeElement.scrollTop =
+          this.scrollTypes.pmAmScroll * 22;
+      });
+    } else {
+      let test = `${
+        this.dateTime.getMonth() + 1
+      }/${this.dateTime.getDate()}/${this.dateTime.getFullYear()}`;
+
+      this.calendarService.scrollToDate.next(
+        `${
+          this.dateTime.getMonth() + 1
+        }/${this.dateTime.getDate()}/${this.dateTime.getFullYear()}`,
+      );
+    }
+  }
+
+  public setTime(event: Event): void {
+    event?.stopPropagation();
+    this.outputType[0] = this.hourTimes[this.scrollTypes.hourScroll];
+    this.outputType[2] = this.timeMinutes[this.scrollTypes.minutesScroll];
+    this.outputType[4] = this.timeOfDay[this.scrollTypes.pmAmScroll];
+
+    this.selectedDateTime = this.createStringFromOutput();
+
+    let currentDate = moment().format('MM/DD/YYYY');
+
+    // this.calendarService.dateChanged.next(
+    //     new Date(currentDate + ' ' + this.selectedDateTime)
+    // );
+
+    this.closePopover.emit(new Date(currentDate + ' ' + this.selectedDateTime));
+  }
+
+  public setDefaultTime(event: Event): void {
+    event?.stopPropagation();
+    let currentDate = moment().format('MM/DD/YYYY');
+    //this.calendarService.dateChanged.next(new Date(currentDate + ' 08:00'));
+
+    this.closePopover.emit(new Date(currentDate + ' 08:00'));
+  }
+
+  public closePopup(event: Event): void {
+    event?.stopPropagation();
+    this.closePopover.emit();
+  }
+
+  public createStringFromOutput(): string {
+    return this.outputType.join('');
+  }
+
+  public onScroll(
+    event: Event,
+    type: keyof ScrollType,
+    index: number | null = null,
+  ): void {
+    const scrolFromTop = Math.floor((event.target as HTMLElement).scrollTop);
+    const scrollIndex = index === null ? Math.floor(scrolFromTop / 22) : index;
+    const scrollRemaining = scrolFromTop % 22;
+    clearInterval(this.scrollTimer);
+    this.scrollTimer = setTimeout(() => {
+      if (scrollRemaining < 11 && index === null) {
+        (event.target as HTMLElement).scrollTop = scrollIndex * 22;
+        this.scrollTypes[type] = scrollIndex;
+      } else if (index !== null) {
+        (<HTMLElement>(<HTMLElement>event.target).parentNode).scrollTop =
+          scrollIndex * 22;
+        this.scrollTypes[type] = scrollIndex;
+      } else {
+        (event.target as HTMLElement).scrollTop = (scrollIndex + 1) * 22;
+        this.scrollTypes[type] = scrollIndex + 1;
+      }
+
+      this.checkForScrolledType(type);
+    }, 200);
+  }
+
+  public checkForScrolledType(type: string): void {
+    if (type === CalendarScrollTypeStringEnum.HOURS_SCROLL && this.pmAmScroll) {
+      if (this.scrollTypes[type] >= 12) {
+        this.pmAmScroll.nativeElement.scrollTop = 22;
+        this.scrollTypes.pmAmScroll = 1;
+      } else {
+        this.pmAmScroll.nativeElement.scrollTop = 0;
+        this.scrollTypes.pmAmScroll = 0;
+      }
+    }
+
+    if (type === CalendarScrollTypeStringEnum.PM_AM_SCROLL && this.hourScroll) {
+      if (this.scrollTypes[type] === 0) {
+        if (this.scrollTypes.hourScroll >= 12) {
+          this.hourScroll.nativeElement.scrollTop =
+            (this.scrollTypes.hourScroll - 12) * 22;
+          this.scrollTypes.hourScroll = Math.floor(
+            this.scrollTypes.hourScroll - 12,
+          );
+        }
+      } else {
+        if (this.scrollTypes.hourScroll < 12) {
+          this.hourScroll.nativeElement.scrollTop =
+            (this.scrollTypes.hourScroll + 12) * 22;
+          this.scrollTypes.hourScroll = Math.floor(
+            this.scrollTypes.hourScroll + 12,
+          );
+        }
+      }
+    }
+
+    this.selectedTime = this.timeMinutes[this.scrollTypes.minutesScroll]
+      ? `${this.hourTimes[this.scrollTypes.hourScroll]}:${
+          this.timeMinutes[this.scrollTypes.minutesScroll]
+        } ${this.timeOfDay[this.scrollTypes.pmAmScroll]}`
+      : '';
+  }
+
+  ngOnDestroy() {
+    this.listPreview = CalendarListPreviewStringEnum.FULL_LIST;
+  }
+}

package/projects/carriera-intern-components/src/app/components/input-datetime-picker/components/cai-custom-datetime-pickers/components/cai-custom-datetime-pickers-calendar-dates-main/cai-custom-datetime-pickers-calendar-dates-main.component.html

@@ -0,0 +1,190 @@
+<div (mouseover)="mouseOverSetItem()">
+  <cdk-virtual-scroll-viewport
+    #monthsScrollRef
+    [tabindex]="-1"
+    (scrolledIndexChange)="onMonthChange($event)"
+    style="height: 200px; width: 100%; margin: 0"
+  >
+    <ng-container
+      *cdkVirtualFor="
+        let month of months;
+        let indx = index;
+        templateCacheSize: 10
+      "
+    >
+      <div
+        class="calendar_indicator ta-font-bold"
+        [class.full_calendar]="_listPreview === 'full_list'"
+        [class.current_year]="
+          isMonthAndYearOnly
+            ? selectedYearFromInput === month.getFullYear()
+            : selectedYearFromInput === month.getFullYear() &&
+              selMonth === month.getMonth()
+        "
+        [tabindex]="-1"
+      >
+        @if (_listPreview === "full_list") {
+          <span>{{ getMonth(month.getMonth()) }} </span>
+        }
+        {{ month.getFullYear() }}
+      </div>
+      @if (_listPreview === "full_list") {
+        <div>
+          <cai-custom-datetime-picker-calendar-days
+            (selectDay)="selectDay($event)"
+            [index]="indx"
+            [month]="month"
+            [selectedMonth]="month.getMonth().toString()"
+            [year]="selectedYear"
+            [dateTime]="dateTime"
+            [activeMonth]="
+              selectedYearFromInput === month.getFullYear() &&
+              selMonth === month.getMonth()
+            "
+          ></cai-custom-datetime-picker-calendar-days>
+        </div>
+      }
+      @if (_listPreview === "month_list") {
+        <div>
+          <div
+            class="month_list"
+            [class.current_year]="selectedYearFromInput === month.getFullYear()"
+          >
+            <div
+              class="month_list_item ta-font-medium"
+              (click)="setCalendarListPreview(0, indx, $event)"
+              [ngClass]="{
+                'current_month ta-font-bold':
+                  selectedYearFromInput === month.getFullYear() &&
+                  0 === selMonth,
+              }"
+            >
+              JAN
+            </div>
+            <div
+              class="month_list_item ta-font-medium"
+              (click)="setCalendarListPreview(1, indx, $event)"
+              [ngClass]="{
+                'current_month ta-font-bold':
+                  selectedYearFromInput === month.getFullYear() &&
+                  1 === selMonth,
+              }"
+            >
+              FEB
+            </div>
+            <div
+              class="month_list_item ta-font-medium"
+              (click)="setCalendarListPreview(2, indx, $event)"
+              [ngClass]="{
+                'current_month ta-font-bold':
+                  selectedYearFromInput === month.getFullYear() &&
+                  2 === selMonth,
+              }"
+            >
+              MAR
+            </div>
+            <div
+              class="month_list_item ta-font-medium"
+              (click)="setCalendarListPreview(3, indx, $event)"
+              [ngClass]="{
+                'current_month ta-font-bold':
+                  selectedYearFromInput === month.getFullYear() &&
+                  3 === selMonth,
+              }"
+            >
+              APR
+            </div>
+            <div
+              class="month_list_item ta-font-medium"
+              (click)="setCalendarListPreview(4, indx, $event)"
+              [ngClass]="{
+                'current_month ta-font-bold':
+                  selectedYearFromInput === month.getFullYear() &&
+                  4 === selMonth,
+              }"
+            >
+              MAY
+            </div>
+            <div
+              class="month_list_item ta-font-medium"
+              (click)="setCalendarListPreview(5, indx, $event)"
+              [ngClass]="{
+                'current_month ta-font-bold':
+                  selectedYearFromInput === month.getFullYear() &&
+                  5 === selMonth,
+              }"
+            >
+              JUN
+            </div>
+            <div
+              class="month_list_item ta-font-medium"
+              (click)="setCalendarListPreview(6, indx, $event)"
+              [ngClass]="{
+                'current_month ta-font-bold':
+                  selectedYearFromInput === month.getFullYear() &&
+                  6 === selMonth,
+              }"
+            >
+              JUL
+            </div>
+            <div
+              class="month_list_item ta-font-medium"
+              (click)="setCalendarListPreview(7, indx, $event)"
+              [ngClass]="{
+                'current_month ta-font-bold':
+                  selectedYearFromInput === month.getFullYear() &&
+                  7 === selMonth,
+              }"
+            >
+              AUG
+            </div>
+            <div
+              class="month_list_item ta-font-medium"
+              (click)="setCalendarListPreview(8, indx, $event)"
+              [ngClass]="{
+                'current_month ta-font-bold':
+                  selectedYearFromInput === month.getFullYear() &&
+                  8 === selMonth,
+              }"
+            >
+              SEP
+            </div>
+            <div
+              class="month_list_item ta-font-medium"
+              (click)="setCalendarListPreview(9, indx, $event)"
+              [ngClass]="{
+                'current_month ta-font-bold':
+                  selectedYearFromInput === month.getFullYear() &&
+                  9 === selMonth,
+              }"
+            >
+              OCT
+            </div>
+            <div
+              class="month_list_item ta-font-medium"
+              (click)="setCalendarListPreview(10, indx, $event)"
+              [ngClass]="{
+                'current_month ta-font-bold':
+                  selectedYearFromInput === month.getFullYear() &&
+                  10 === selMonth,
+              }"
+            >
+              NOV
+            </div>
+            <div
+              class="month_list_item ta-font-medium"
+              (click)="setCalendarListPreview(11, indx, $event)"
+              [ngClass]="{
+                'current_month ta-font-bold':
+                  selectedYearFromInput === month.getFullYear() &&
+                  11 === selMonth,
+              }"
+            >
+              DEC
+            </div>
+          </div>
+        </div>
+      }
+    </ng-container>
+  </cdk-virtual-scroll-viewport>
+</div>

package/projects/carriera-intern-components/src/app/components/input-datetime-picker/components/cai-custom-datetime-pickers/components/cai-custom-datetime-pickers-calendar-dates-main/cai-custom-datetime-pickers-calendar-dates-main.component.spec.ts

@@ -0,0 +1,26 @@
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CaCustomDateTimePickerCalendarDatesMainComponent } from './cai-custom-datetime-pickers-calendar-dates-main.component';
+
+describe('TaCustomDateTimePickerCalendarDatesMainComponent', () => {
+    let component: CaCustomDateTimePickerCalendarDatesMainComponent;
+    let fixture: ComponentFixture<CaCustomDateTimePickerCalendarDatesMainComponent>;
+
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            declarations: [CaCustomDateTimePickerCalendarDatesMainComponent],
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(
+            CaCustomDateTimePickerCalendarDatesMainComponent
+        );
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});