carriera-intern 0.0.0

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

@@ -0,0 +1,376 @@
+// 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/All Dropdowns',
+  component: InputComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [ReactiveFormsModule],
+    }),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<InputComponent>;
+
+const baseConfig: CaiInputConfig = {
+  type: 'text',
+  name: 'Dropdown',
+  search: true,
+  dropdown: true,
+  optionLabel: 'name',
+};
+
+const render = (args: any, width: string = '280px') => ({
+  props: {
+    ...args,
+    form: new FormGroup({
+      input: new FormControl(),
+    }),
+  },
+  template: `
+    <div style="display: flex; gap: 12px; box-sizing: border-box;">
+      <form [formGroup]="form" style="width: ${width};">
+        <cai-input [config]="config" formControlName="input" [options]="options"></cai-input>
+      </form>
+      <pre style="margin-top: 12px">{{ form.value | json }}</pre>
+    </div>
+  `,
+  parameters: {
+    layout: 'fullscreen',
+  },
+});
+
+// --- Stories ---
+
+// Single Option
+
+export const Default: Story = {
+  args: {
+    config: baseConfig,
+    options: dropdownOptions.basic,
+  },
+  render: (args) => render(args, '280px'),
+};
+
+export const Broker: Story = {
+  args: {
+    config: {
+      ...baseConfig,
+      dropdown: 'broker',
+      name: 'Broker',
+    },
+    options: dropdownOptions.broker,
+  },
+  render: (args) => render(args, '612px'),
+};
+
+export const Shipper: Story = {
+  args: {
+    config: {
+      ...baseConfig,
+      dropdown: 'shipper',
+    },
+    options: dropdownOptions.shipper,
+  },
+  render: (args) => render(args, '612px'),
+};
+
+export const Contact: Story = {
+  args: {
+    config: {
+      ...baseConfig,
+      dropdown: 'contact',
+      name: 'Contact',
+    },
+    options: dropdownOptions.contact,
+  },
+  render: (args) => render(args, '280px'),
+};
+
+export const Bank: Story = {
+  args: {
+    config: {
+      ...baseConfig,
+      dropdown: 'bank',
+      name: 'Bank',
+      add: true,
+      writeAddValue: true,
+    },
+    options: dropdownOptions.bank,
+  },
+  render: (args) => render(args, '280px'),
+};
+
+export const Dispatcher: Story = {
+  args: {
+    config: {
+      ...baseConfig,
+      dropdown: 'dispatcher',
+      name: 'Dispatcher',
+    },
+    options: dropdownOptions.dispatcher,
+  },
+  render: (args) => render(args, '280px'),
+};
+
+export const Truck: Story = {
+  args: {
+    config: {
+      ...baseConfig,
+      dropdown: 'truck',
+      name: 'Truck',
+    },
+    options: dropdownOptions.truck,
+  },
+  render: (args) => render(args, '280px'),
+};
+
+export const Trailer: Story = {
+  args: {
+    config: {
+      ...baseConfig,
+      dropdown: 'trailer',
+      name: 'Trailer',
+    },
+    options: dropdownOptions.trailer,
+  },
+  render: (args) => render(args, '280px'),
+};
+
+export const Hazardous: Story = {
+  args: {
+    config: {
+      ...baseConfig,
+      dropdown: 'hazardous',
+      name: 'Hazardous',
+    },
+    options: dropdownOptions.hazardous,
+  },
+  render: (args) => render(args, '280px'),
+};
+
+export const State: Story = {
+  args: {
+    config: {
+      ...baseConfig,
+      dropdown: 'state',
+      name: 'State',
+      fullState: true,
+    },
+    options: dropdownOptions.state,
+  },
+  render: (args) => render(args, '280px'),
+};
+
+export const Owner: Story = {
+  args: {
+    config: {
+      ...baseConfig,
+      dropdown: 'owner',
+      name: 'Owner',
+    },
+    options: dropdownOptions.owner,
+  },
+  render: (args) => render(args, '612px'),
+};
+
+export const Fuelcard: Story = {
+  args: {
+    config: {
+      ...baseConfig,
+      dropdown: 'fuelcard',
+      name: 'Fuelcard',
+    },
+    options: dropdownOptions.fuelcard,
+  },
+  render: (args) => render(args, '612px'),
+};
+
+export const PM: Story = {
+  args: {
+    config: {
+      ...baseConfig,
+      dropdown: 'pm',
+      name: 'PM',
+    },
+    options: dropdownOptions.pm,
+  },
+  render: (args) => render(args, '280px'),
+};
+
+export const Color: Story = {
+  args: {
+    config: {
+      ...baseConfig,
+      dropdown: 'color',
+      name: 'Color',
+    },
+    options: dropdownOptions.color,
+  },
+  render: (args) => render(args, '280px'),
+};
+
+export const Make: Story = {
+  args: {
+    config: {
+      ...baseConfig,
+      dropdown: 'make',
+      name: 'Make',
+    },
+    options: dropdownOptions.truckMake,
+  },
+  render: (args) => render(args, '280px'),
+};
+
+export const Provider: Story = {
+  args: {
+    config: {
+      ...baseConfig,
+      dropdown: 'provider',
+      name: 'Provider',
+    },
+    options: dropdownOptions.provider,
+  },
+  render: (args) => render(args, '280px'),
+};
+
+// Grouped
+
+export const Toll: Story = {
+  args: {
+    config: {
+      ...baseConfig,
+      dropdown: 'toll',
+      name: 'Toll',
+    },
+    options: dropdownOptions.toll,
+  },
+  render: (args) => render(args, '280px'),
+};
+
+export const FuelStopTransaction: Story = {
+  args: {
+    config: {
+      ...baseConfig,
+      dropdown: 'fuel-stop-transaction',
+      name: 'Fuel Stop',
+      add: true,
+    },
+    options: dropdownOptions.fuelStopTransaction,
+  },
+  render: (args) => render(args, '612px'),
+};
+
+export const Dispatch: Story = {
+  args: {
+    config: {
+      ...baseConfig,
+      dropdown: 'dispatch',
+      name: 'Dispatch',
+    },
+    options: dropdownOptions.dispatch,
+  },
+  render: (args) => render(args, '612px'),
+};
+
+export const DispatchFTL: Story = {
+  args: {
+    config: {
+      ...baseConfig,
+      dropdown: 'ftl-dispatch',
+      name: 'FTL Dispatch',
+    },
+    options: dropdownOptions.dispatch,
+  },
+  render: (args) => render(args, '612px'),
+};
+
+export const DispatchNoBoard: Story = {
+  args: {
+    config: {
+      ...baseConfig,
+      dropdown: 'dispatch',
+      name: 'Dispatch No Board',
+    },
+    options: dropdownOptions.dispatchNoBoard,
+  },
+  render: (args) => render(args, '612px'),
+};
+
+// Load Split
+export const SplitDriver: Story = {
+  args: {
+    config: {
+      ...baseConfig,
+      dropdown: 'split-driver',
+      name: 'Split Driver',
+    },
+    options: dropdownOptions.splitDriver,
+  },
+  render: (args) => render(args, '280px'),
+};
+
+export const SplitTruck: Story = {
+  args: {
+    config: {
+      ...baseConfig,
+      dropdown: 'split-truck',
+      name: 'Split Truck',
+    },
+    options: dropdownOptions.splitTruck,
+  },
+  render: (args) => render(args, '280px'),
+};
+
+export const SplitTrailer: Story = {
+  args: {
+    config: {
+      ...baseConfig,
+      dropdown: 'split-trailer',
+      name: 'Split Trailer',
+    },
+    options: dropdownOptions.splitTrailer,
+  },
+  render: (args) => render(args, '280px'),
+};
+
+// Other
+
+export const Multiple: Story = {
+  args: {
+    config: {
+      ...baseConfig,
+      dropdown: 'multiple',
+      name: 'Multiple',
+    },
+    options: dropdownOptions.basic,
+  },
+  render: (args) => render(args, '612px'),
+};
+
+export const Subcontent: Story = {
+  args: {
+    config: {
+      ...baseConfig,
+      type: 'number',
+      dropdown: 'subcontent',
+      name: 'Subcontent',
+      search: false,
+    },
+    preselectedUnit: null,
+    options: dropdownOptions.subcontent,
+  },
+  render: (args) => render(args, '280px'),
+};