valtech-components 2.0.687 → 2.0.689

package/src/lib/components/molecules/ticket-grid/ticket-grid.stories.ts

@@ -0,0 +1,436 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { TicketGridComponent } from './ticket-grid.component';
+import { TicketGridMetadata } from './types';
+
+const createTicketGridProps = (overrides: Partial<TicketGridMetadata> = {}): TicketGridMetadata => ({
+  totalTickets: 100,
+  startNumber: 1,
+  selectionMode: 'multiple',
+  columns: 10,
+  ticketSize: 'medium',
+  showLegend: true,
+  ...overrides,
+});
+
+// Generate some random sold tickets
+const generateSoldTickets = (total: number, count: number): number[] => {
+  const sold: number[] = [];
+  while (sold.length < count) {
+    const num = Math.floor(Math.random() * total) + 1;
+    if (!sold.includes(num)) sold.push(num);
+  }
+  return sold.sort((a, b) => a - b);
+};
+
+const meta: Meta<TicketGridComponent> = {
+  title: 'Molecules/TicketGrid',
+  component: TicketGridComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, TicketGridComponent],
+    }),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'Ticket grid configuration object',
+      control: 'object',
+      table: {
+        type: {
+          summary: 'TicketGridMetadata',
+          detail: `{
+  totalTickets: number;
+  startNumber?: number;
+  soldTickets?: number[];
+  reservedTickets?: number[];
+  selectedTickets?: number[];
+  disabledTickets?: number[];
+  selectionMode?: 'single' | 'multiple' | 'none';
+  maxSelection?: number;
+  columns?: number;
+  gap?: number;
+  showLegend?: boolean;
+  legendPosition?: 'top' | 'bottom';
+  showSearch?: boolean;
+  showRandomSelect?: boolean;
+  randomSelectCount?: number;
+  ticketSize?: 'small' | 'medium' | 'large';
+  numberPadding?: number;
+  color?: Color;
+}`,
+        },
+      },
+    },
+    selectionChange: {
+      action: 'selectionChange',
+      description: 'Event emitted when selection changes',
+    },
+    ticketClick: {
+      action: 'ticketClick',
+      description: 'Event emitted when a ticket is clicked',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## val-ticket-grid
+
+A visual grid for selecting raffle ticket numbers. Supports multiple states: available, sold, reserved, selected, and disabled.
+
+### Features
+
+- **Selection modes**: single, multiple, or view-only (none)
+- **Search**: Filter/highlight tickets by number
+- **Random selection**: Randomly pick available tickets
+- **Legend**: Shows status colors and counts
+- **Max selection**: Limit how many tickets can be selected
+
+### Ticket States
+
+- **available**: Can be selected
+- **sold**: Already purchased
+- **reserved**: Temporarily held
+- **selected**: Currently selected by user
+- **disabled**: Cannot be selected
+
+### Usage
+
+\`\`\`html
+<val-ticket-grid
+  [props]="{
+    totalTickets: 500,
+    soldTickets: [1, 5, 12, 23, 45],
+    reservedTickets: [100, 101, 102],
+    selectionMode: 'multiple',
+    maxSelection: 10,
+    showLegend: true,
+    showSearch: true,
+    showRandomSelect: true
+  }"
+  (selectionChange)="onSelectionChange($event)"
+></val-ticket-grid>
+\`\`\`
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<TicketGridComponent>;
+
+export const Default: Story = {
+  args: {
+    props: createTicketGridProps(),
+  },
+};
+
+export const WithSoldTickets: Story = {
+  args: {
+    props: createTicketGridProps({
+      totalTickets: 100,
+      soldTickets: [3, 7, 15, 22, 33, 41, 55, 67, 78, 89],
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Shows sold tickets in a different color (cannot be selected).',
+      },
+    },
+  },
+};
+
+export const WithReservedTickets: Story = {
+  args: {
+    props: createTicketGridProps({
+      totalTickets: 100,
+      soldTickets: [5, 10, 15, 20, 25],
+      reservedTickets: [30, 31, 32, 33, 34],
+    }),
+  },
+};
+
+export const SingleSelection: Story = {
+  args: {
+    props: createTicketGridProps({
+      selectionMode: 'single',
+      totalTickets: 50,
+      columns: 10,
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Only one ticket can be selected at a time.',
+      },
+    },
+  },
+};
+
+export const WithMaxSelection: Story = {
+  args: {
+    props: createTicketGridProps({
+      selectionMode: 'multiple',
+      maxSelection: 5,
+      showSummary: true,
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Limits selection to 5 tickets.',
+      },
+    },
+  },
+};
+
+export const WithSearch: Story = {
+  args: {
+    props: createTicketGridProps({
+      showSearch: true,
+      totalTickets: 200,
+      columns: 20,
+    }),
+  },
+};
+
+export const WithRandomSelect: Story = {
+  args: {
+    props: createTicketGridProps({
+      showRandomSelect: true,
+      randomSelectCount: 5,
+      maxSelection: 10,
+      soldTickets: generateSoldTickets(100, 20),
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Button to randomly select 5 available tickets.',
+      },
+    },
+  },
+};
+
+export const WithSearchAndRandom: Story = {
+  args: {
+    props: createTicketGridProps({
+      showSearch: true,
+      showRandomSelect: true,
+      randomSelectCount: 3,
+      maxSelection: 10,
+      totalTickets: 100,
+      soldTickets: generateSoldTickets(100, 15),
+    }),
+  },
+};
+
+export const SizeSmall: Story = {
+  args: {
+    props: createTicketGridProps({
+      ticketSize: 'small',
+      totalTickets: 200,
+      columns: 20,
+      gap: 2,
+    }),
+  },
+};
+
+export const SizeLarge: Story = {
+  args: {
+    props: createTicketGridProps({
+      ticketSize: 'large',
+      totalTickets: 50,
+      columns: 10,
+    }),
+  },
+};
+
+export const FiveColumns: Story = {
+  args: {
+    props: createTicketGridProps({
+      totalTickets: 50,
+      columns: 5,
+    }),
+  },
+};
+
+export const TwentyColumns: Story = {
+  args: {
+    props: createTicketGridProps({
+      totalTickets: 200,
+      columns: 20,
+      ticketSize: 'small',
+    }),
+  },
+};
+
+export const WithNumberPadding: Story = {
+  args: {
+    props: createTicketGridProps({
+      totalTickets: 100,
+      numberPadding: 3,
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Ticket numbers are padded with zeros (e.g., 001, 042).',
+      },
+    },
+  },
+};
+
+export const LegendBottom: Story = {
+  args: {
+    props: createTicketGridProps({
+      showLegend: true,
+      legendPosition: 'bottom',
+      soldTickets: [5, 10, 15],
+      reservedTickets: [20, 21],
+    }),
+  },
+};
+
+export const StartFromZero: Story = {
+  args: {
+    props: createTicketGridProps({
+      startNumber: 0,
+      totalTickets: 100,
+      numberPadding: 2,
+    }),
+  },
+};
+
+export const PreselectedTickets: Story = {
+  args: {
+    props: createTicketGridProps({
+      selectedTickets: [12, 25, 37, 48, 63],
+      soldTickets: [5, 10, 15, 20],
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Some tickets are pre-selected on load.',
+      },
+    },
+  },
+};
+
+export const ViewOnly: Story = {
+  args: {
+    props: createTicketGridProps({
+      selectionMode: 'none',
+      soldTickets: generateSoldTickets(100, 30),
+      reservedTickets: [50, 51, 52, 53, 54],
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'View-only mode - no selection allowed.',
+      },
+    },
+  },
+};
+
+export const ColorSuccess: Story = {
+  args: {
+    props: createTicketGridProps({
+      color: 'success',
+      soldTickets: [10, 20, 30],
+    }),
+  },
+};
+
+export const ColorWarning: Story = {
+  args: {
+    props: createTicketGridProps({
+      color: 'warning',
+      soldTickets: [10, 20, 30],
+    }),
+  },
+};
+
+export const LargeRaffle: Story = {
+  args: {
+    props: createTicketGridProps({
+      totalTickets: 500,
+      columns: 25,
+      ticketSize: 'small',
+      gap: 2,
+      soldTickets: generateSoldTickets(500, 100),
+      reservedTickets: generateSoldTickets(500, 20).filter(n => !generateSoldTickets(500, 100).includes(n)),
+      showSearch: true,
+      showRandomSelect: true,
+      randomSelectCount: 5,
+      maxSelection: 20,
+      numberPadding: 3,
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Large raffle with 500 tickets.',
+      },
+    },
+  },
+};
+
+export const Showcase: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 40px;">
+        <div>
+          <h3 style="margin: 0 0 16px; font-family: system-ui;">Basic Grid (100 tickets)</h3>
+          <val-ticket-grid [props]="basic"></val-ticket-grid>
+        </div>
+
+        <div>
+          <h3 style="margin: 0 0 16px; font-family: system-ui;">With Search & Random Select</h3>
+          <val-ticket-grid [props]="withControls"></val-ticket-grid>
+        </div>
+
+        <div>
+          <h3 style="margin: 0 0 16px; font-family: system-ui;">Small Size (200 tickets)</h3>
+          <val-ticket-grid [props]="smallSize"></val-ticket-grid>
+        </div>
+
+        <div>
+          <h3 style="margin: 0 0 16px; font-family: system-ui;">Large Size (50 tickets)</h3>
+          <val-ticket-grid [props]="largeSize"></val-ticket-grid>
+        </div>
+      </div>
+    `,
+    props: {
+      basic: createTicketGridProps({
+        soldTickets: [5, 12, 23, 34, 45, 56, 67, 78, 89, 95],
+      }),
+      withControls: createTicketGridProps({
+        showSearch: true,
+        showRandomSelect: true,
+        randomSelectCount: 5,
+        maxSelection: 10,
+        soldTickets: generateSoldTickets(100, 20),
+        reservedTickets: [50, 51, 52],
+      }),
+      smallSize: createTicketGridProps({
+        totalTickets: 200,
+        columns: 20,
+        ticketSize: 'small',
+        soldTickets: generateSoldTickets(200, 40),
+      }),
+      largeSize: createTicketGridProps({
+        totalTickets: 50,
+        columns: 10,
+        ticketSize: 'large',
+        soldTickets: [5, 15, 25, 35, 45],
+      }),
+    },
+  }),
+};

package/src/lib/components/molecules/ticket-grid/types.ts

@@ -0,0 +1,145 @@
+import { Color } from '@ionic/core';
+
+/**
+ * Ticket status in the grid.
+ */
+export type TicketStatus = 'available' | 'sold' | 'reserved' | 'selected' | 'disabled';
+
+/**
+ * Individual ticket data.
+ */
+export interface TicketData {
+  /** Ticket number */
+  number: number;
+  /** Ticket status */
+  status: TicketStatus;
+  /** Optional owner name (for sold tickets) */
+  owner?: string;
+  /** Optional custom label */
+  label?: string;
+}
+
+/**
+ * Legend item for ticket grid.
+ */
+export interface TicketGridLegendItem {
+  /** Status this legend represents */
+  status: TicketStatus;
+  /** Display label */
+  label: string;
+  /** Optional count */
+  count?: number;
+}
+
+/**
+ * Metadata for the ticket grid component.
+ */
+export interface TicketGridMetadata {
+  /** Total number of tickets */
+  totalTickets: number;
+  /** Starting ticket number (default: 1) */
+  startNumber?: number;
+  /** Numbers of sold tickets */
+  soldTickets?: number[];
+  /** Numbers of reserved tickets */
+  reservedTickets?: number[];
+  /** Numbers of disabled tickets */
+  disabledTickets?: number[];
+  /** Currently selected tickets */
+  selectedTickets?: number[];
+  /** Custom ticket data (overrides computed status) */
+  ticketData?: TicketData[];
+
+  // === Selection ===
+  /** Selection mode */
+  selectionMode?: 'single' | 'multiple' | 'none';
+  /** Maximum tickets that can be selected */
+  maxSelection?: number;
+  /** Minimum tickets required */
+  minSelection?: number;
+  /** Allow selecting sold/reserved tickets (for admin) */
+  allowSelectSold?: boolean;
+
+  // === Display ===
+  /** Number of columns */
+  columns?: number;
+  /** Show legend */
+  showLegend?: boolean;
+  /** Legend position */
+  legendPosition?: 'top' | 'bottom';
+  /** Custom legend items */
+  legendItems?: TicketGridLegendItem[];
+  /** Show ticket count summary */
+  showSummary?: boolean;
+  /** Show search/filter input */
+  showSearch?: boolean;
+  /** Search placeholder */
+  searchPlaceholder?: string;
+  /** Ticket number padding (e.g., 3 = "001") */
+  numberPadding?: number;
+
+  // === Styling ===
+  /** Component color for selected state */
+  color?: Color;
+  /** Ticket size */
+  ticketSize?: 'small' | 'medium' | 'large';
+  /** Grid gap */
+  gap?: number;
+  /** Custom CSS class */
+  cssClass?: string;
+
+  // === Quick select ===
+  /** Show random selection button */
+  showRandomSelect?: boolean;
+  /** Random selection count */
+  randomSelectCount?: number;
+  /** Random select button label */
+  randomSelectLabel?: string;
+
+  // === Reactive content ===
+  /** Content key for search placeholder */
+  searchPlaceholderContentKey?: string;
+  /** Content key for random select label */
+  randomSelectLabelContentKey?: string;
+  /** Content class for reactive content */
+  contentClass?: string;
+}
+
+/**
+ * Event emitted when selection changes.
+ */
+export interface TicketGridSelectionEvent {
+  /** Currently selected ticket numbers */
+  selectedTickets: number[];
+  /** Last changed ticket number */
+  changedTicket: number;
+  /** Whether the ticket was selected or deselected */
+  action: 'select' | 'deselect';
+  /** Total count of selected tickets */
+  count: number;
+  /** Whether max selection reached */
+  maxReached: boolean;
+}
+
+/**
+ * Event emitted when a ticket is clicked (regardless of selection).
+ */
+export interface TicketGridClickEvent {
+  /** Ticket number */
+  number: number;
+  /** Ticket status */
+  status: TicketStatus;
+  /** Whether it was selected/deselected (null if not selectable) */
+  selected: boolean | null;
+}
+
+/**
+ * Default legend labels in Spanish.
+ */
+export const DEFAULT_LEGEND_LABELS: Record<TicketStatus, string> = {
+  available: 'Disponible',
+  sold: 'Vendido',
+  reserved: 'Reservado',
+  selected: 'Seleccionado',
+  disabled: 'No disponible',
+};