cats-data-grid 0.0.1 → 0.0.5

package/src/lib/common-components/common-calendar/common-calendar.component.ts

@@ -0,0 +1,606 @@
+import { CommonModule, DatePipe } from '@angular/common';
+import {
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges,
+} from '@angular/core';
+import { OutsideClickDirective } from '../../directives/outside-click.directive';
+import {
+  AbstractControl,
+  NG_VALIDATORS,
+  NG_VALUE_ACCESSOR,
+  ValidationErrors,
+} from '@angular/forms';
+import { AdaptivePositionDirective } from "../../directives/adaptive-position.directive";
+
+export interface DateConfig {
+  selectionMode: 'single' | 'range';
+  enableTime?: boolean;
+}
+export interface IRange {
+  value: Date;
+  label: string;
+}
+
+@Component({
+  selector: 'lib-common-calendar',
+
+  imports: [CommonModule, OutsideClickDirective, AdaptivePositionDirective],
+  templateUrl: './common-calendar.component.html',
+  styleUrl: './common-calendar.component.scss',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: CommonCalendarComponent,
+      multi: true,
+    },
+    DatePipe,
+  ],
+})
+export class CommonCalendarComponent implements OnInit, OnChanges {
+  @Output() dateTimeSelected = new EventEmitter<any>();
+  @Input() dateConfig!: DateConfig;
+  @Input() minDate?: string;
+  @Input() maxDate?: string;
+  @Input() preSelectedValue: any;
+  selectedDateTime: any;
+  currentDate = new Date();
+  currentMonth = this.currentDate.getMonth();
+  currentYear = this.currentDate.getFullYear();
+  selectedDate: number | null = null;
+  selectedTime: string | null = null;
+  calendar: number[][] = [];
+  timeSlots: IRange[] = [];
+  rangeStart: number | null = null;
+  rangeEnd: number | null = null;
+  selectedMonth: any;
+  selectedYear: any;
+  control!: AbstractControl<any, any>;
+  disableControl: boolean = false;
+  date: any = '';
+  calendarView: string = 'defaultView';
+  yearRange: number[] = [];
+  daysInMonth: any[] = [];
+  selectedDay: number = 0;
+  selectedStartDate: any;
+  selectedEndDate: any;
+  isOpen: boolean = false;
+  showYearSelector = false;
+  monthRange: any = {
+    '0': 'JAN',
+    '01': 'FEB',
+    '02': 'MAR',
+    '03': 'APR',
+    '04': 'MAY',
+    '05': 'JUN',
+    '06': 'JUL',
+    '07': 'AUG',
+    '08': 'SEP',
+    '09': 'OCT',
+    '10': 'NOV',
+    '11': 'DEC',
+  };
+  constructor(
+    // @Inject(LOCALE_ID) private locale: string,
+    private cd: ChangeDetectorRef,
+    private datePipe: DatePipe
+  ) {}
+  ngOnChanges(_changes: SimpleChanges): void {
+    if (!_changes['selectedDateTime']?.currentValue) {
+      this.selectedDateTime = [];
+    } else {
+      this.writeValue(this.control?.value);
+    }
+  }
+  ngOnInit(): void {
+    this.generateYearRange();
+    // this.generateCalendar();
+    this.generateTimeRanges();
+    if (this.preSelectedValue) {
+      this.initializeCalendar();
+    }
+  }
+
+  private onTouchedCallback: () => void = () => {};
+  private onChangeCallback: (_: any) => void = () => {};
+  writeValue(value: any): void {
+    if (value) {
+      this.selectedDateTime = value;
+      this.onChangeCallback(value);
+      this.cd.markForCheck();
+    }
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChangeCallback = fn;
+  }
+  registerOnTouched(fn: any): void {
+    this.onTouchedCallback = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    if (this.control) {
+      isDisabled ? this.control.disable() : this.control.enable();
+    }
+  }
+  /**
+   * @description Validates date time picker component
+   * @author Shiva Kant
+   * @param control
+   * @returns validate
+   */
+  validate(control: AbstractControl): ValidationErrors | null {
+    this.control = control;
+    const selected = this.date ? new Date(this.date) : null;
+
+    // Check required manually
+    const isRequired =
+      control.validator && control.validator(control)?.['required'];
+
+    if (
+      (isRequired || control.hasError('required')) &&
+      (!this.date || !this.selectedDay)
+    ) {
+      return { required: true };
+    } else if (this.minDate && selected && selected < new Date(this.minDate)) {
+      return { minDate: true };
+    } else if (this.maxDate && selected && selected > new Date(this.maxDate)) {
+      return { maxDate: true };
+    }
+
+    return null;
+  }
+  /**
+   * @description method to toggleCalendar
+   * @author Shiva Kant
+   */
+  toggleCalendar(): void {
+    this.isOpen = !this.isOpen;
+    if (this.date && this.isOpen) {
+      this.currentDate = new Date(this.date);
+      this.selectedDay = this.currentDate.getDate();
+    }
+    this.calendarView = 'defaultView';
+    this.generateCalendar();
+    if (this.isOpen) {
+      let ele = document.getElementsByClassName('calendar-footer');
+      setTimeout(() => {
+        ele[0]?.scrollIntoView();
+      });
+    }
+  }
+
+  /**
+   * @description Closes calendar
+   * @author Shiva Kant
+   */
+  closeCalendar(): void {
+    this.isOpen = false;
+    this.calendarView = 'defaultView';
+  }
+  /**
+   * @description Method to Gets month year
+   * @author Shiva Kant
+   * @returns month year
+   */
+  getMonthYear(): { month: string; year: string } {
+    return {
+      month: this.currentDate.toLocaleString('default', {
+        month: 'long',
+      }),
+      year: this.currentDate.toLocaleString('default', {
+        year: 'numeric',
+      }),
+    };
+  }
+
+  /**
+   * @description Method to Updates current year month
+   * @author Shiva Kant
+   */
+  updateCurrentYearMonth(): void {
+    this.currentYear = this.currentDate.getFullYear();
+    this.currentMonth = this.currentDate.getMonth();
+  }
+
+  /**
+   * @description Method to Selects year
+   * @author Shiva Kant
+   * @param year
+   */
+  selectYear(year: number): void {
+    this.currentDate.setFullYear(year);
+    this.updateCurrentYearMonth();
+    this.showYearSelector = false;
+    this.calendarView = 'defaultView';
+    this.selectedDay = 0;
+    this.generateCalendar();
+  }
+
+  /**
+   * @description Method to Selects month
+   * @author Shiva Kant
+   * @param month
+   */
+  selectMonth(month: any): void {
+    this.currentDate.setMonth(month);
+    this.updateCurrentYearMonth();
+    this.calendarView = 'defaultView';
+    this.selectedDay = 0;
+    this.generateCalendar();
+  }
+
+  /**
+   * @description Method to Previous year range
+   * @author Shiva Kant
+   */
+  previousYearRange(): void {
+    this.yearRange = this.yearRange.map((year) => year - 18);
+  }
+
+  /**
+   * @description Method to Next year range
+   * @author Shiva Kant
+   */
+  nextYearRange(): void {
+    this.yearRange = this.yearRange.map((year) => year + 18);
+  }
+
+  /**
+   * @description Method to Toggles year selector
+   * @author Shiva Kant
+   */
+  toggleYearSelector(): void {
+    this.showYearSelector = !this.showYearSelector;
+    this.generateYearRange();
+  }
+  /**
+   * @description Method to Generates year range
+   * @author Shiva Kant
+   */
+  generateYearRange(): void {
+    const currentYear = this.currentDate.getFullYear();
+    const startYear = currentYear - (currentYear % 20);
+    this.yearRange = Array.from({ length: 18 }, (_, i) => startYear + i);
+  }
+  /**
+   * @description Method to Determines whether date selectable is
+   * @author Shiva Kant
+   * @param date
+   * @returns true if date selectable
+   */
+  isDateSelectable(date: Date): boolean {
+    const min = this.minDate ? new Date(this.minDate) : null;
+    const max = this.maxDate ? new Date(this.maxDate) : null;
+    if (min && date < min) return false;
+    if (max && date > max) return false;
+    return true;
+  }
+  /**
+   * @description Method to Determines whether day disabled is
+   * @author Shiva Kant
+   * @param day
+   * @returns true if day disabled
+   */
+  isDayDisabled(day: number): boolean {
+    const date = new Date(
+      this.currentDate.getFullYear(),
+      this.currentDate.getMonth(),
+      day
+    );
+    return !this.isDateSelectable(date);
+  }
+  /**
+   * @description Method to Generates calendar
+   * @author Shiva Kant
+   */
+  generateCalendar(): void {
+    const year = this.currentDate.getFullYear();
+    const month = this.currentDate.getMonth();
+
+    const firstDayOfMonth = new Date(year, month, 1);
+    const firstWeekDay = (firstDayOfMonth.getDay() + 6) % 7; // Convert Sunday (0) to 6, Monday is 0
+
+    const daysInCurrentMonth = new Date(year, month + 1, 0).getDate();
+    const daysInPreviousMonth = new Date(year, month, 0).getDate();
+
+    const totalCells = 42; // 6 rows of 7 days
+    const calendarDays: { day: number; date: Date; isCurrentMonth: boolean }[] =
+      [];
+
+    // Fill previous month days
+    for (let i = firstWeekDay - 1; i >= 0; i--) {
+      const day = daysInPreviousMonth - i;
+      const date = new Date(year, month - 1, day);
+      calendarDays.push({ day, date, isCurrentMonth: false });
+    }
+
+    // Fill current month days
+    for (let day = 1; day <= daysInCurrentMonth; day++) {
+      const date = new Date(year, month, day);
+      calendarDays.push({ day, date, isCurrentMonth: true });
+    }
+
+    // Fill next month days
+    const remaining = totalCells - calendarDays.length;
+    for (let day = 1; day <= remaining; day++) {
+      const date = new Date(year, month + 1, day);
+      calendarDays.push({ day, date, isCurrentMonth: false });
+    }
+
+    this.daysInMonth = calendarDays;
+  }
+
+  /**
+   * @description Method to Previous month
+   * @author Shiva Kant
+   */
+  previousMonth(): void {
+    this.currentDate.setMonth(this.currentDate.getMonth() - 1);
+    this.updateCurrentYearMonth();
+    this.selectedDay = 0;
+    this.generateCalendar();
+  }
+
+  /**
+   * @description Method to Next month
+   * @author Shiva Kant
+   */
+  nextMonth(): void {
+    this.currentDate.setMonth(this.currentDate.getMonth() + 1);
+    this.updateCurrentYearMonth();
+    this.selectedDay = 0;
+    this.generateCalendar();
+  }
+
+  /**
+   * @description Method to Initializes calendar when preSelectedValue  date
+   * @author Shiva Kant
+   * @returns calendar
+   */
+  initializeCalendar(): void {
+    if (!this.preSelectedValue) return;
+
+    // Case 1: Single date (string or Date)
+    if (
+      typeof this.preSelectedValue === 'string' ||
+      this.preSelectedValue instanceof Date
+    ) {
+      const date = new Date(this.preSelectedValue);
+      this.selectedDate = date.getDate();
+      this.selectedMonth = date.getMonth();
+      this.selectedYear = date.getFullYear();
+      this.selectedTime = this.formatTime(date);
+
+      // Update current view to show the month/year
+      this.currentDate = new Date(
+        this.selectedYear,
+        this.selectedMonth,
+        this.selectedDate
+      );
+      this.generateCalendar();
+    }
+
+    // Case 2: Range of dates
+    else if (this.preSelectedValue.start && this.preSelectedValue.end) {
+      const startDate = new Date(this.preSelectedValue.start);
+      const endDate = new Date(this.preSelectedValue.end);
+
+      // Patch component state
+      this.rangeStart = startDate.getDate();
+      this.rangeEnd = endDate.getDate();
+
+      this.selectedStartDate = startDate;
+      this.selectedEndDate = endDate;
+
+      this.selectedMonth = startDate.getMonth();
+      this.selectedYear = startDate.getFullYear();
+
+      // Set the current calendar view to the start month/year
+      this.currentDate = new Date(this.selectedYear, this.selectedMonth, 1);
+      this.generateCalendar();
+
+      // Optional: If your calendar requires a single selectedTime for range, you could pick start or end
+      this.selectedTime = this.formatTime(startDate);
+
+      // Emit initial range value
+      this.emitDateTime();
+    }
+  }
+
+  /**
+   * @description Method to Selects date
+   * @author Shiva Kant
+   * @param date
+   */
+  selectDate(date: number): void {
+    const selectedFullDate = new Date(
+      this.currentYear,
+      this.currentMonth,
+      date
+    );
+    selectedFullDate.setHours(0, 0, 0, 0);
+
+    this.selectedMonth = this.currentMonth;
+    this.selectedYear = this.currentYear;
+
+    if (this.dateConfig.selectionMode === 'single') {
+      this.selectedDate = date;
+      this.rangeStart = null;
+      this.rangeEnd = null;
+    } else {
+      if (!this.rangeStart || this.rangeEnd) {
+        this.rangeStart = date;
+        this.rangeEnd = null;
+      } else {
+        this.rangeEnd = date < this.rangeStart ? this.rangeStart : date;
+        this.rangeStart = date < this.rangeStart ? date : this.rangeStart;
+      }
+    }
+
+    this.emitDateTime();
+  }
+
+  /**
+   * @description Method to Selects time
+   * @author Shiva Kant
+   * @param time
+   */
+  selectTime(time: string): void {
+    this.selectedTime = time;
+    this.emitDateTime();
+  }
+  /**
+   * @description Method to Determines whether selected date is
+   * @author Shiva Kant
+   * @param date
+   * @returns
+   */
+  isSelectedDate(date: number, month: number, year: number): boolean {
+    if (this.dateConfig.selectionMode === 'single') {
+      // Check if the day, month, and year match
+      return (
+        this.selectedDate === date &&
+        this.selectedMonth === month &&
+        this.selectedYear === year
+      );
+    } else if (this.dateConfig.selectionMode === 'range') {
+      // Range selection checks, ensuring both start and end dates are within the same month and year
+      return !!(
+        (this.rangeStart &&
+          this.rangeStart === date &&
+          this.selectedMonth === month &&
+          this.selectedYear === year) ||
+        (this.rangeEnd &&
+          this.rangeEnd === date &&
+          this.selectedMonth === month &&
+          this.selectedYear === year) ||
+        (this.rangeStart &&
+          this.rangeEnd &&
+          date > this.rangeStart &&
+          date < this.rangeEnd &&
+          this.selectedMonth === month &&
+          this.selectedYear === year)
+      );
+    }
+    return false;
+  }
+
+  /**
+   * @description Method to Generates time ranges
+   * @author Shiva Kant
+   */
+  generateTimeRanges(): void {
+    const startTime = new Date();
+    startTime.setHours(0, 0, 0, 0);
+    this.timeSlots = Array.from({ length: 48 }, (_, i) => {
+      const time = new Date(startTime.getTime() + i * 30 * 60 * 1000);
+      return { value: time, label: this.formatTime(time) };
+    });
+  }
+
+  /**
+   * @description Method to Formats time
+   * @author Shiva Kant
+   * @param date
+   * @returns time
+   */
+  formatTime(date: Date): string {
+    return date.toLocaleTimeString('en-US', {
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: true,
+    });
+  }
+  /**
+   * @description Method to Formats date time
+   * @author Shiva Kant
+   * @param fullDate
+   * @param selectedTime
+   * @returns date time
+   */
+  formatDateTime(fullDate: Date, selectedTime: string | null): string {
+    const date = new Date(fullDate);
+
+    if (!selectedTime) {
+      // Only date formatting when time not required
+      return this.datePipe.transform(date, 'MM/dd/yyyy')!;
+    }
+
+    const [time, period] = selectedTime.split(' ');
+    let [hours, minutes] = time.split(':').map(Number);
+
+    // Convert 12-hour → 24-hour
+    if (period === 'PM' && hours !== 12) hours += 12;
+    if (period === 'AM' && hours === 12) hours = 0;
+
+    date.setHours(hours, minutes, 0, 0);
+
+    return this.datePipe.transform(date, 'yyyy/MM/dd hh:mm a')!;
+  }
+
+  /**
+   * @description Method to Emits date time
+   * @author Shiva Kant
+   * @returns date time
+   */
+  emitDateTime(): void {
+    if (this.dateConfig.enableTime && !this.selectedTime) {
+      return; // wait until user selects time
+    }
+    if (this.dateConfig.selectionMode === 'single') {
+      if (!this.selectedDate) return;
+
+      const fullDate = new Date(
+        this.currentYear,
+        this.currentMonth,
+        this.selectedDate
+      );
+
+      this.selectedDateTime = this.formatDateTime(
+        fullDate || '',
+        this.dateConfig.enableTime ? this.selectedTime : null
+      );
+
+      this.writeValue(this.selectedDateTime);
+      this.date = this.selectedDate;
+      this.dateTimeSelected.emit(this.selectedDateTime);
+      this.closeCalendar();
+      return;
+    }
+    if (this.dateConfig.selectionMode === 'range') {
+      if (!this.rangeStart || !this.rangeEnd) return;
+
+      const startDate = new Date(
+        this.currentYear,
+        this.currentMonth,
+        this.rangeStart
+      );
+      const endDate = new Date(
+        this.currentYear,
+        this.currentMonth,
+        this.rangeEnd
+      );
+
+      const startDateTime = this.formatDateTime(
+        startDate,
+        this.dateConfig.enableTime ? this.selectedTime : null
+      );
+      const endDateTime = this.formatDateTime(
+        endDate,
+        this.dateConfig.enableTime ? this.selectedTime : null
+      );
+
+      const rangeResult = { start: startDateTime, end: endDateTime };
+
+      this.writeValue(rangeResult);
+      this.dateTimeSelected.emit(rangeResult);
+      this.closeCalendar();
+    }
+  }
+}

package/src/lib/common-components/common-input/common-input.component.html

@@ -0,0 +1,36 @@
+<!-- dropdown -->
+@if(elementType === 'dropdown'){
+<div class="text_filter_section">
+  <div class="single_select_dropdown" (click)="toggleDropdown()">
+    <div class="left_details">
+      <span class="placeholderColor textTruncate">
+        {{ selectedLabel }}
+      </span>
+    </div>
+
+    <span class="arrow_icon">
+      <img
+        src="images/chevron-up.svg"
+        [ngClass]="{ 'd-none': !showDropdown }"
+      />
+      <img
+        src="images/chevron-down.svg"
+        [ngClass]="{ 'd-none': showDropdown }"
+      />
+    </span>
+  </div>
+
+  @if (showDropdown) {
+  <div class="dropdown_list" id="table_scroll">
+    <ul>
+      @for (option of options; track option.value) {
+      <li (click)="selectOption(option)">
+        <span class="textTruncate">{{ option.label }}</span>
+      </li>
+      }
+    </ul>
+  </div>
+  }
+</div>
+
+}

package/src/lib/common-components/common-input/common-input.component.scss

@@ -0,0 +1,3 @@
+.d-none {
+  display: none;
+}

package/src/lib/common-components/common-input/common-input.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CommonInputComponent } from './common-input.component';
+
+describe('CommonInputComponent', () => {
+  let component: CommonInputComponent;
+  let fixture: ComponentFixture<CommonInputComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CommonInputComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CommonInputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});