carriera-intern 0.0.0 → 1.1.76

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

@@ -1,331 +0,0 @@
-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

@@ -1,190 +0,0 @@
-<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

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