carriera-intern 0.0.0

package/projects/carriera-intern-components/src/app/components/input/stories/modal.stories.ts

@@ -0,0 +1,162 @@
+// Storybook
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
+
+// Component
+import { InputComponent } from '../input.component';
+
+// Models
+import { CaiInputConfig } from '../models';
+
+// Options
+import { dropdownOptions } from './dropdown-options';
+
+const meta: Meta<InputComponent> = {
+  title: 'Components/Input/Modal',
+  component: InputComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [ReactiveFormsModule],
+    }),
+  ],
+  globals: {
+    backgrounds: { value: 'table' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<InputComponent>;
+
+const options = {
+  ...dropdownOptions,
+  company: [
+    { id: 1, name: 'Jovan Logistics Inc.' },
+    { id: 2, name: 'Kostic Trucking, LLC' },
+  ],
+};
+
+const configs: { [key: string]: { config: CaiInputConfig } } = {
+  dispatcher: {
+    config: {
+      type: 'text',
+      name: 'Dispatcher',
+      dropdown: 'dispatcher',
+      search: true,
+      required: true,
+    },
+  },
+  company: {
+    config: {
+      type: 'text',
+      name: 'Company',
+      dropdown: true,
+      search: true,
+      required: true,
+      optionLabel: 'name',
+    },
+  },
+  referenceNo: {
+    config: {
+      type: 'text',
+      name: 'Reference No.',
+      required: true,
+    },
+  },
+  broker: {
+    config: {
+      type: 'text',
+      name: 'Broker',
+      required: true,
+      dropdown: 'broker',
+      search: true,
+      add: true,
+    },
+  },
+  contact: {
+    config: {
+      type: 'text',
+      name: 'Contact',
+      search: true,
+      dropdown: 'contact',
+      add: true,
+    },
+  },
+  commodity: {
+    config: {
+      type: 'text',
+      name: 'Commodity',
+      dropdown: true,
+      search: true,
+      optionLabel: 'name',
+    },
+  },
+  weight: {
+    config: {
+      type: 'number',
+      name: 'Weight',
+      icon: 'cai-weight',
+      step: 100,
+    },
+  },
+  dispatch: {
+    config: {
+      type: 'text',
+      name: 'Dispatch',
+      dropdown: 'ftl-dispatch',
+      search: true,
+    },
+  },
+};
+
+// --- Stories ---
+
+export const LoadModal: Story = {
+  args: {},
+  render: (args) => ({
+    props: {
+      ...args,
+      configs: configs,
+      options: options,
+      form: new FormGroup({
+        dispatcher: new FormControl(),
+        company: new FormControl(),
+        referenceNo: new FormControl(),
+        broker: new FormControl(),
+        contact: new FormControl(),
+        commodity: new FormControl(),
+        weight: new FormControl(),
+        dispatch: new FormControl(),
+      }),
+    },
+    template: `
+      <form [formGroup]="form" style="width: 640px; padding: 8px 6px; background-color: white; box-shadow: 0 0 16px 0 #00000080; border-radius: 6px; display: flex; flex-direction: column; gap: 4px;">
+        <div style="font-size: 18px; font-weight: 800; padding: 2px 6px;">Create Load</div>
+        <div style="height: 0px; margin: 8px 6px; border-bottom: 1px solid #DADADA;"></div>
+        <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 14px 6px;">
+          <cai-input [config]="configs.dispatcher.config" formControlName="dispatcher" [options]="options.dispatcher"></cai-input>
+          <cai-input [config]="configs.company.config" formControlName="company" [options]="options.company"></cai-input>
+        </div>
+
+        <div style="display: grid; grid-template-columns: 172px 432px; gap: 12px; padding: 14px 6px;">
+          <cai-input [config]="configs.referenceNo.config" formControlName="referenceNo"></cai-input>
+          <cai-input [config]="configs.broker.config" formControlName="broker" [options]="options.broker"></cai-input>
+        </div>
+
+        <div style="display: grid; grid-template-columns: 332px 150px 110px; gap: 12px; padding: 14px 6px;">
+          <cai-input [config]="configs.contact.config" formControlName="contact" [options]="options.contact"></cai-input>
+          <cai-input [config]="configs.commodity.config" formControlName="commodity" [options]="options.commodity"></cai-input>
+          <cai-input [config]="configs.weight.config" formControlName="weight"></cai-input>
+        </div>
+
+        <div style="padding: 14px 6px;">
+          <cai-input [config]="configs.dispatch.config" formControlName="dispatch" [options]="options.dispatchNoBoard"></cai-input>
+        </div>
+      </form>
+      <div
+        style="margin-top: 20px; padding: 16px; background-color: #e3f2fd; border-radius: 4px; border-left: 4px solid #2196f3;"
+      >
+        <pre style="margin: 0; padding: 0;">{{ form.value | json }}</pre>
+      </div>
+    `,
+  }),
+};

package/projects/carriera-intern-components/src/app/components/input/utilities/constants/cast.constants.ts

@@ -0,0 +1,91 @@
+import {
+  Bank,
+  Broker,
+  ColorOption,
+  Contact,
+  Dispatch,
+  DispatchBoard,
+  Dispatcher,
+  DropdownOption,
+  Franchise,
+  FuelCard,
+  FuelStopStore,
+  Hazardous,
+  MakeOption,
+  Owner,
+  PMOption,
+  Provider,
+  Shipper,
+  SplitDriver,
+  SplitDriverBoard,
+  SplitTrailer,
+  SplitTrailerBoard,
+  SplitTruck,
+  SplitTruckBoard,
+  State,
+  TollOption,
+  TollTransponderOption,
+  TrailerType,
+  TruckType,
+} from '../../models';
+
+export type CastableType =
+  | 'dispatch'
+  | 'dispatchBoard'
+  | 'broker'
+  | 'contact'
+  | 'shipper'
+  | 'bank'
+  | 'dispatcher'
+  | 'dropdownOption'
+  | 'truckOption'
+  | 'trailerOption'
+  | 'hazardous'
+  | 'state'
+  | 'owner'
+  | 'fuelCard'
+  | 'pmOption'
+  | 'colorOption'
+  | 'make'
+  | 'tollOption'
+  | 'tollTransponderOption'
+  | 'fuelStopStore'
+  | 'franchise'
+  | 'provider'
+  | 'splitDriver'
+  | 'splitTruck'
+  | 'splitTrailer'
+  | 'splitDriverBoard'
+  | 'splitTruckBoard'
+  | 'splitTrailerBoard';
+
+export type CastableTypeMap = {
+  dispatch: Dispatch;
+  dispatchBoard: DispatchBoard;
+  broker: Broker;
+  contact: Contact;
+  shipper: Shipper;
+  bank: Bank;
+  dispatcher: Dispatcher;
+  dropdownOption: DropdownOption;
+  truckOption: TruckType;
+  trailerOption: TrailerType;
+  hazardous: Hazardous;
+  state: State;
+  owner: Owner;
+  fuelCard: FuelCard;
+  pmOption: PMOption;
+  colorOption: ColorOption;
+  make: MakeOption;
+  tollOption: TollOption;
+  tollTransponderOption: TollTransponderOption;
+  fuelStopStore: FuelStopStore;
+  franchise: Franchise;
+  provider: Provider;
+  splitDriver: SplitDriver;
+  splitTruck: SplitTruck;
+  splitTrailer: SplitTrailer;
+  splitDriverBoard: SplitDriverBoard;
+  splitTruckBoard: SplitTruckBoard;
+  splitTrailerBoard: SplitTrailerBoard;
+};

package/projects/carriera-intern-components/src/app/components/input/utilities/constants/index.ts

@@ -0,0 +1 @@
+export * from './cast.constants';

package/projects/carriera-intern-components/src/app/components/input/utilities/helpers/index.ts

@@ -0,0 +1,2 @@
+export * from './input.helper';
+export * from './keyboard-navigation.helper';