carriera-intern 0.0.0

package/projects/carriera-intern-components/src/app/components/input-datetime-picker/cai-input-datetime-picker.stories.ts

@@ -0,0 +1,507 @@
+import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
+import {
+  FormControl,
+  FormGroup,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms';
+
+// modules
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+
+// components
+import { CaiInputDatetimePickerComponent } from './cai-input-datetime-picker.component';
+
+const meta: Meta<CaiInputDatetimePickerComponent> = {
+  title: 'Components/DateTimePicker',
+  component: CaiInputDatetimePickerComponent,
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      imports: [
+        // Module
+        ReactiveFormsModule,
+        NgbModule,
+      ],
+    }),
+  ],
+  argTypes: {
+    inputConfig: {
+      control: { type: 'object' },
+    },
+  },
+  args: {
+    inputConfig: {
+      name: 'datepicker',
+      isDisabled: false,
+      type: 'text',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<CaiInputDatetimePickerComponent>;
+
+const DateTimePickerTemplate: string = `
+  <form style='width: 400px' [formGroup]="form">
+    <cai-input-datetime-picker
+      formControlName="datetimepicker"
+      [inputConfig]="config"
+    >
+    </cai-input-datetime-picker>
+    <pre style="margin-top: 12px;">{{ form.value | json }}</pre>
+  </form>
+`;
+
+export const DatePicker: Story = {
+  render: (args) => {
+    return {
+      props: {
+        ...args,
+        config: {
+          name: 'datepicker',
+          label: 'Date',
+          placeholderIcon: 'date',
+        },
+        form: new FormGroup({
+          datetimepicker: new FormControl('', [Validators.required]),
+        }),
+      },
+      template: DateTimePickerTemplate,
+    };
+  },
+};
+
+export const TableDatePicker: Story = {
+  render: (args) => {
+    return {
+      props: {
+        ...args,
+        config: {
+          name: 'datepicker',
+          label: 'Date In Table',
+          placeholderIcon: 'date',
+          inTable: true,
+          isIconHidden: true,
+        },
+        form: new FormGroup({
+          datetimepicker: new FormControl('', [Validators.required]),
+        }),
+      },
+      template: DateTimePickerTemplate,
+    };
+  },
+};
+
+export const InverseDatePicker: Story = {
+  globals: {
+    backgrounds: { value: 'dark' },
+  },
+  render: (args) => {
+    return {
+      props: {
+        ...args,
+        config: {
+          name: 'datepicker',
+          label: 'Date Inverse',
+          placeholderIcon: 'date',
+          inverse: true,
+        },
+        form: new FormGroup({
+          datetimepicker: new FormControl('', [Validators.required]),
+        }),
+      },
+      template: DateTimePickerTemplate,
+    };
+  },
+};
+
+export const BillingDatePicker: Story = {
+  render: (args) => {
+    return {
+      props: {
+        ...args,
+        config: {
+          name: 'datepicker',
+          label: 'Date Billing',
+          placeholderIcon: 'date',
+          isBilling: true,
+          inTable: true,
+        },
+        form: new FormGroup({
+          datetimepicker: new FormControl('', [Validators.required]),
+        }),
+      },
+      template: DateTimePickerTemplate,
+    };
+  },
+};
+
+export const TimePicker: Story = {
+  render: (args) => {
+    return {
+      props: {
+        ...args,
+        config: {
+          name: 'timepicker',
+          label: 'Time',
+          placeholderIcon: 'time',
+        },
+        form: new FormGroup({
+          datetimepicker: new FormControl('07:30', [Validators.required]),
+        }),
+      },
+      template: DateTimePickerTemplate,
+    };
+  },
+};
+
+export const TableTimePicker: Story = {
+  render: (args) => {
+    return {
+      props: {
+        ...args,
+        config: {
+          name: 'timepicker',
+          label: 'Time In Table',
+          placeholderIcon: 'time',
+          inTable: true,
+        },
+        form: new FormGroup({
+          datetimepicker: new FormControl('', [Validators.required]),
+        }),
+      },
+      template: DateTimePickerTemplate,
+    };
+  },
+};
+
+export const InverseTimePicker: Story = {
+  globals: {
+    backgrounds: { value: 'dark' },
+  },
+  render: (args) => {
+    return {
+      props: {
+        ...args,
+        config: {
+          name: 'timepicker',
+          label: 'Time Inverse',
+          placeholderIcon: 'time',
+          inverse: true,
+        },
+        form: new FormGroup({
+          datetimepicker: new FormControl('', [Validators.required]),
+        }),
+      },
+      template: DateTimePickerTemplate,
+    };
+  },
+};
+
+// OLD STORIES
+/**
+const formGroup = new FormGroup({
+  date: new FormControl(
+    { value: '2025-05-16T12:27:57.076783', disabled: true },
+    [Validators.required],
+  ),
+  date2: new FormControl(undefined, [Validators.required]),
+  time: new FormControl('9:15 AM', [Validators.required]),
+  time2: new FormControl(undefined, [Validators.required]),
+  dispatchHistory: new FormControl('07/10/25'),
+});
+
+const formTemplate: string = `
+  <form style='width: 400px' [formGroup]="form">
+    <cai-input-datetime-picker
+      formControlName="date"
+      [inputConfig]="config"
+    >
+    </cai-input-datetime-picker>
+    <pre>{{ form.value | json }}</pre>
+  </form>
+`;
+
+export const DatetimePicker: Story = {
+  render: (args) => ({
+    props: {
+      ...args,
+      config: {
+        ...args.inputConfig,
+        name: 'datepicker',
+        type: 'text',
+        label: 'DOB',
+        isDropdown: true,
+        placeholderIcon: 'date',
+        isRequired: true,
+        customClass: 'datetimeclass',
+      },
+      form: formGroup,
+    },
+    template: formTemplate,
+  }),
+};
+
+const formDateTemplate: string = `
+  <form style='width: 400px' [formGroup]="form">
+    <cai-input-datetime-picker
+      formControlName="date2"
+      [inputConfig]="config"
+    >
+    </cai-input-datetime-picker>
+    <pre>{{ form.value | json }}</pre>
+  </form>
+`;
+
+export const DateDtimePicker: Story = {
+  render: (args) => ({
+    props: {
+      ...args,
+      config: {
+        ...args.inputConfig,
+        name: 'datepicker',
+        type: 'text',
+        label: 'DOB',
+        isDropdown: true,
+        placeholderIcon: 'date',
+        isRequired: true,
+        customClass: 'datetimeclass',
+      },
+      form: formGroup,
+    },
+    template: formDateTemplate,
+  }),
+};
+
+const time2Template: string = `
+  <form style='width: 400px' [formGroup]="form">
+    <cai-input-datetime-picker
+      [formFormat]="'HH:mm'"
+      formControlName="time2"
+      [inputConfig]="config"
+    >
+    </cai-input-datetime-picker>
+    <pre>{{ form.value | json }}</pre>
+  </form>`;
+
+export const FirstTimePicker: Story = {
+  render: (args) => {
+    setTimeout(() => {
+      formGroup.get('time2')?.setValue('10:15 PM' as never); // ✅ Simulates user input
+    }, 5000);
+    return {
+      props: {
+        ...args,
+        config: {
+          ...args.inputConfig,
+          name: 'timepicker',
+          type: 'text',
+          label: 'From',
+          placeholderIcon: 'time',
+          isDropdown: true,
+          isRequired: true,
+          customClass: 'datetimeclass',
+        },
+        form: formGroup,
+      },
+      template: time2Template,
+    };
+  },
+};
+
+const timeTemplate: string = `
+  <form style='width: 400px' [formGroup]="form">
+  {{form.get('time').value}}
+    <cai-input-datetime-picker
+      [formFormat]="'HH:mm'"
+      formControlName="time"
+      [inputConfig]="config"
+    >
+    </cai-input-datetime-picker>
+    <pre>{{ form.value | json }}</pre>
+  </form>`;
+
+export const TimePickerMinutesGapFive: Story = {
+  render: (args) => ({
+    props: {
+      ...args,
+      config: {
+        ...args.inputConfig,
+        name: 'timepicker',
+        type: 'text',
+        label: 'From',
+        placeholderIcon: 'time',
+        isDropdown: true,
+        customClass: 'datetimeclass',
+        minutesGapFive: true,
+      },
+      form: formGroup,
+    },
+    template: timeTemplate,
+  }),
+};
+
+const dispatchHistoryTemplate: string = `
+  <form style='width: 400px' [formGroup]="form">
+    <cai-input-datetime-picker
+      formControlName="dispatchHistory"
+      [inputConfig]="config"
+    >
+    </cai-input-datetime-picker>
+    <pre>{{ form.value | json }}</pre>
+  </form>
+`;
+
+export const DispatchboardHistoryPicker: Story = {
+  render: (args) => {
+    setTimeout(() => {
+      console.log('SET AS INVALID');
+      formGroup.get('dispatchHistory')?.setErrors({ invalid: true }); // ✅ Simulates user input
+    }, 10000);
+
+    return {
+      props: {
+        ...args,
+        config: {
+          name: 'datepicker',
+          type: 'text',
+          isDropdown: true,
+          isIconHidden: true,
+          transparentInput: true,
+          hideClear: true,
+          hideErrorMessage: true,
+        },
+        form: formGroup,
+      },
+      template: dispatchHistoryTemplate,
+    };
+  },
+};
+
+const maxDateTemplate: string = `
+  <form style='width: 400px' [formGroup]="form">
+    <cai-input-datetime-picker
+      formControlName="maxDate"
+      [inputConfig]="config"
+    >
+    </cai-input-datetime-picker>
+    <div style="margin-top: 10px; font-size: 12px; color: #666;">
+      Cannot select dates after January 1st, 2026
+    </div>
+    <pre>{{ form.value | json }}</pre>
+  </form>
+`;
+
+export const MaxDateRestriction: Story = {
+  render: (args) => {
+    // Create a form control with custom validator
+    const maxDateForm = new FormGroup({
+      maxDate: new FormControl('12/15/25', [
+        Validators.required,
+        (control) => {
+          if (!control.value) return null;
+
+          const selectedDate = new Date(control.value);
+          const maxAllowedDate = new Date('2026-01-01');
+
+          if (selectedDate > maxAllowedDate) {
+            return { maxDateExceeded: true };
+          }
+
+          return null;
+        },
+      ]),
+    });
+
+    return {
+      props: {
+        ...args,
+        config: {
+          name: 'datepicker',
+          type: 'text',
+          label: 'Select Date',
+          isDropdown: true,
+          placeholderIcon: 'date',
+          isRequired: true,
+          customClass: 'datetimeclass',
+          isFutureDateDisabled: false, // We'll handle the restriction with custom validator
+        },
+        form: maxDateForm,
+      },
+      template: maxDateTemplate,
+    };
+  },
+};
+
+const customMaxDateTemplate: string = `
+  <form style='width: 400px' [formGroup]="form">
+    <cai-input-datetime-picker
+      formControlName="customMaxDate"
+      [inputConfig]="config"
+    >
+    </cai-input-datetime-picker>
+    <div style="margin-top: 10px; font-size: 12px; color: #666;">
+      Custom restriction: Cannot select dates after January 1st, 2026
+    </div>
+    <div style="margin-top: 5px; font-size: 11px; color: #999;">
+      This example shows how to extend the inputConfig with custom maxDate property
+    </div>
+    <pre>{{ form.value | json }}</pre>
+  </form>
+`;
+
+export const CustomMaxDateRestriction: Story = {
+  render: (args) => {
+    // Create a form control with custom validator that uses a custom maxDate property
+    const customMaxDateForm = new FormGroup({
+      customMaxDate: new FormControl('11/20/25', [
+        Validators.required,
+        (control) => {
+          if (!control.value) return null;
+
+          const selectedDate = new Date(control.value);
+          // This would come from the inputConfig.maxDate property
+          const maxAllowedDate = new Date('2026-01-01');
+
+          if (selectedDate > maxAllowedDate) {
+            return {
+              maxDateExceeded: {
+                maxDate: '2026-01-01',
+                selectedDate: control.value,
+              },
+            };
+          }
+
+          return null;
+        },
+      ]),
+    });
+
+    // Extended config with custom maxDate property
+    const extendedConfig = {
+      name: 'datepicker',
+      type: 'text',
+      label: 'Select Date (Max: 2026-01-01)',
+      isDropdown: true,
+      placeholderIcon: 'date',
+      isRequired: true,
+      customClass: 'datetimeclass',
+      isFutureDateDisabled: false,
+      // Custom property for max date restriction
+      maxDate: '2026-01-01',
+      // Custom property to enable max date validation
+      enableMaxDateValidation: true,
+    };
+
+    return {
+      props: {
+        ...args,
+        config: extendedConfig,
+        form: customMaxDateForm,
+      },
+      template: customMaxDateTemplate,
+    };
+  },
+};
+ */

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

@@ -0,0 +1,134 @@
+<div class="temp_inp_holder" (pointerdown)="refocusInput($event)">
+  <div>
+    <div class="pickers_holder dark_picker">
+      @if (calendarMainType === "date") {
+        <div class="date_picker">
+          <cai-custom-datetime-pickers-date-calendars
+            [listPreview]="listPreview"
+            [dateTime]="dateTime"
+            [isMonthAndYearOnly]="_inputConfig.name === 'datepickerBankCard'"
+            (setListPreviewValue)="setListPreview($event)"
+            (onRefocusInput)="refocusInput($event)"
+          ></cai-custom-datetime-pickers-date-calendars>
+        </div>
+      }
+      @if (calendarMainType === "time") {
+        <div class="time_picker">
+          <div class="time_picker_head d-flex">
+            <div class="selected_time ta-font-bold">
+              {{ selectedTime || (dateTime | date: "hh:mm aa") }}
+            </div>
+            <div class="sel_now ta-font-bold" (click)="setDefaultTime($event)">
+              Default
+            </div>
+          </div>
+          <div class="time_picker_body">
+            <div class="picker_body_head">
+              <div
+                class="ta-font-bold"
+                [class.active]="hoveredItem === 'hours'"
+              >
+                Hour
+              </div>
+              <div
+                class="ta-font-bold"
+                [class.active]="hoveredItem === 'minutes'"
+              >
+                Minute
+              </div>
+              <div
+                class="ta-font-bold"
+                [class.active]="hoveredItem === 'times'"
+              >
+                AM/PM
+              </div>
+            </div>
+            <div class="picker_body">
+              <div
+                #hourScroll
+                (mouseout)="hoveredItem = null"
+                (mouseover)="hoveredItem = 'hours'"
+                (scroll)="onScroll($event, 'hourScroll')"
+                class="scroll_pickers"
+                [tabindex]="-1"
+              >
+                @for (hour of hourTimes; let indx = $index; track indx) {
+                  <div
+                    class="scroll_item ta-font-medium"
+                    [ngClass]="{
+                      'active_item ta-font-bold':
+                        scrollTypes.hourScroll === indx,
+                    }"
+                    (click)="onScroll($event, 'hourScroll', indx)"
+                  >
+                    {{ hour }}
+                  </div>
+                }
+              </div>
+              <div
+                #minutesScroll
+                (mouseout)="hoveredItem = null"
+                (mouseover)="hoveredItem = 'minutes'"
+                (scroll)="onScroll($event, 'minutesScroll')"
+                class="scroll_pickers"
+                [tabindex]="-1"
+              >
+                @for (minutes of timeMinutes; let indx = $index; track indx) {
+                  <div
+                    class="scroll_item ta-font-medium"
+                    [ngClass]="{
+                      'active_item ta-font-bold':
+                        scrollTypes.minutesScroll === indx,
+                    }"
+                    (click)="onScroll($event, 'minutesScroll', indx)"
+                  >
+                    {{ minutes }}
+                  </div>
+                }
+              </div>
+              <div
+                #pmAmScroll
+                (mouseout)="hoveredItem = null"
+                (mouseover)="hoveredItem = 'times'"
+                (scroll)="onScroll($event, 'pmAmScroll')"
+                class="scroll_pickers"
+                [tabindex]="-1"
+              >
+                @for (when of timeOfDay; let indx = $index; track indx) {
+                  <div
+                    class="scroll_item ta-font-medium"
+                    [ngClass]="{
+                      'active_item ta-font-bold':
+                        scrollTypes.pmAmScroll === indx,
+                    }"
+                    (click)="onScroll($event, 'pmAmScroll', indx)"
+                  >
+                    {{ when }}
+                  </div>
+                }
+              </div>
+              <div class="picker_line">
+                <span class="border_line"></span>
+                <span class="border_line line_2"></span>
+              </div>
+            </div>
+            <div class="picker_buttons">
+              <div
+                (click)="closePopup($event)"
+                class="pick_button ta-font-bold"
+              >
+                Cancel
+              </div>
+              <div
+                (click)="setTime($event)"
+                class="pick_button set_button ta-font-bold"
+              >
+                Set
+              </div>
+            </div>
+          </div>
+        </div>
+      }
+    </div>
+  </div>
+</div>

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

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