@3ddv/software-division-components 1.1.0 → 1.4.0

package/projects/software-division-components/src/backoffice/table/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/projects/software-division-components/src/backoffice/table/public-api.ts

@@ -0,0 +1,43 @@
+// Export all necessary dependencies from @tanstack/angular-table for table functionality
+export {
+  FlexRenderDirective,
+  // Core table creation and configuration
+  createAngularTable,
+  flexRenderComponent,
+  // Row models
+  getCoreRowModel,
+  getExpandedRowModel,
+  getFilteredRowModel,
+  getGroupedRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  // Additional utility types
+  type AccessorFn,
+  type Cell,
+  // Utility types for cell rendering
+  type CellContext,
+  type Column,
+  // Types
+  type ColumnDef,
+  type ColumnMeta,
+  type ColumnOrderState,
+  type ColumnPinningState,
+  type ColumnSizingState,
+  type ExpandedState,
+  type GroupingState,
+  type Header,
+  type HeaderContext,
+  type PaginationState,
+
+  // Additional utilities that might be needed
+  type Row,
+  type RowData,
+  type RowSelectionState,
+  type SortingState,
+  type Table,
+  // Additional commonly used types
+  type VisibilityState,
+} from '@tanstack/angular-table';
+
+// Export the main table component
+export * from './table.component';

package/projects/software-division-components/src/backoffice/table/story/table.stories.ts

@@ -0,0 +1,364 @@
+import { Component, input, output } from '@angular/core';
+import { Meta, StoryObj } from '@storybook/angular';
+import { flexRenderComponent } from '@tanstack/angular-table';
+import { ButtonComponent } from '../../../generic/button';
+import { TableComponent } from '../table.component';
+
+// Inline action column component for the story
+@Component({
+  selector: 'story-action-column',
+  imports: [ButtonComponent],
+  template: `
+    <sdc-button
+      [styleClass]="['size-sm']"
+      (click)="onActionClick.emit($event)"
+      class="px-3 py-1 bg-blue-500 text-white rounded text-xs hover:bg-blue-600 transition-colors">
+      {{ buttonText() }}
+    </sdc-button>
+  `,
+})
+class StoryActionColumnComponent {
+  public readonly buttonText = input<string>('Details');
+  public readonly onActionClick = output<MouseEvent>();
+}
+
+// Mock data types
+type Transaction = {
+  id: string;
+  accountNumber: string;
+  accountName: string;
+  date: string;
+  event: string;
+  premiumSpace: string;
+  section: string;
+  balance: string;
+  status: 'Completed' | 'Cancelled';
+};
+
+type Seat = {
+  section: string;
+  row: string;
+  seat: string;
+};
+
+const mockSeats: Seat[] = Array.from({ length: 20 }, (_, index) => ({
+  section: 'Section 101',
+  row: 'Row A',
+  seat: `${index + 1}`,
+}));
+
+const minimalTableColumns = [
+  {
+    accessorKey: 'section',
+    id: 'section',
+    header: 'Section',
+  },
+  {
+    accessorKey: 'row',
+    id: 'row',
+    header: 'Row',
+  },
+  {
+    accessorKey: 'seat',
+    id: 'seat',
+    header: 'Seat',
+  },
+];
+
+// Mock data
+const mockTransactions: Transaction[] = [
+  {
+    id: '1',
+    accountNumber: 'ACC001',
+    accountName: 'John Doe',
+    date: 'May 28, 2025',
+    event: 'Mariners vs. Astros / 26G0921',
+    premiumSpace: 'Premium Space A',
+    section: 'Section 101',
+    balance: '$ 1710',
+    status: 'Completed',
+  },
+  {
+    id: '2',
+    accountNumber: 'ACC002',
+    accountName: 'Jane Smith',
+    date: 'May 28, 2025',
+    event: 'Mariners vs. Astros / 26G0921',
+    premiumSpace: 'No',
+    section: 'Section 102',
+    balance: '$ 1710',
+    status: 'Cancelled',
+  },
+  {
+    id: '3',
+    accountNumber: 'ACC003',
+    accountName: 'Bob Johnson',
+    date: 'May 28, 2025',
+    event: 'Mariners vs. Astros / 26G0921',
+    premiumSpace: 'Premium Space B',
+    section: 'Section 103',
+    balance: '$ 1710',
+    status: 'Completed',
+  },
+  {
+    id: '4',
+    accountNumber: 'ACC004',
+    accountName: 'Alice Brown',
+    date: 'May 29, 2025',
+    event: 'Mariners vs. Rangers / 26G0922',
+    premiumSpace: 'Premium Space C',
+    section: 'Section 201',
+    balance: '$ 1850',
+    status: 'Completed',
+  },
+  {
+    id: '5',
+    accountNumber: 'ACC005',
+    accountName: 'Charlie Wilson',
+    date: 'May 29, 2025',
+    event: 'Mariners vs. Rangers / 26G0922',
+    premiumSpace: 'No',
+    section: 'Section 202',
+    balance: '$ 1850',
+    status: 'Cancelled',
+  },
+  {
+    id: '6',
+    accountNumber: 'ACC006',
+    accountName: 'Diana Davis',
+    date: 'May 30, 2025',
+    event: 'Mariners vs. Angels / 26G0923',
+    premiumSpace: 'Premium Space D',
+    section: 'Section 301',
+    balance: '$ 1950',
+    status: 'Completed',
+  },
+  {
+    id: '7',
+    accountNumber: 'ACC007',
+    accountName: 'Edward Miller',
+    date: 'May 30, 2025',
+    event: 'Mariners vs. Angels / 26G0923',
+    premiumSpace: 'Premium Space E',
+    section: 'Section 302',
+    balance: '$ 1950',
+    status: 'Completed',
+  },
+  {
+    id: '8',
+    accountNumber: 'ACC008',
+    accountName: 'Fiona Garcia',
+    date: 'May 31, 2025',
+    event: 'Mariners vs. Athletics / 26G0924',
+    premiumSpace: 'No',
+    section: 'Section 401',
+    balance: '$ 1650',
+    status: 'Cancelled',
+  },
+];
+
+// Column definitions
+const fullTableColumns = [
+  {
+    accessorKey: 'status',
+    id: 'status',
+    header: 'Status',
+    cell: (info: any) => {
+      const status = info.getValue();
+      const statusClass = status === 'Completed' ? 'text-green-600' : 'text-red-600';
+      return `<span class="capitalize ${statusClass}">${status}</span>`;
+    },
+  },
+  {
+    accessorKey: 'accountNumber',
+    id: 'accountNumber',
+    header: 'Account #',
+    cell: (info: any) => info.getValue(),
+  },
+  {
+    accessorKey: 'date',
+    id: 'date',
+    header: 'Date',
+    cell: (info: any) => info.getValue(),
+  },
+  {
+    accessorKey: 'event',
+    id: 'event',
+    header: 'Event',
+    cell: (info: any) => info.getValue(),
+  },
+  {
+    accessorKey: 'premiumSpace',
+    id: 'premiumSpace',
+    header: 'Premium Space',
+    cell: (info: any) => info.getValue(),
+  },
+  {
+    accessorKey: 'section',
+    id: 'section',
+    header: 'Section',
+    cell: (info: any) => info.getValue(),
+  },
+  {
+    accessorKey: 'balance',
+    id: 'balance',
+    header: 'Balance',
+    cell: (info: any) => info.getValue(),
+  },
+  // Action column
+  {
+    id: 'action',
+    header: '',
+    cell: (context: any) =>
+      flexRenderComponent(StoryActionColumnComponent, {
+        inputs: {
+          buttonText: 'Details',
+        },
+        outputs: {
+          onActionClick: (event: MouseEvent) => {
+            console.log('Action button clicked:', event);
+            alert(`Details button clicked: ${JSON.stringify(context.row.original, null, 2)}`);
+          },
+        },
+      }),
+  },
+];
+
+const meta: Meta<TableComponent<Transaction>> = {
+  title: 'Backoffice/Table',
+  component: TableComponent,
+  id: 'Table',
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: 'A comprehensive data table component with sorting, selection, pagination, and action columns.',
+      },
+    },
+  },
+  argTypes: {
+    data: {
+      control: 'object',
+      description: 'Array of transaction data to display in the table',
+    },
+    columns: {
+      control: 'object',
+      description: 'Column definitions for the table',
+    },
+    showSelection: {
+      control: 'boolean',
+      description: 'Show row selection checkboxes',
+    },
+    enableSort: {
+      control: 'object',
+      description: 'Enable sorting for specific columns or all columns',
+    },
+    pageSize: {
+      control: 'number',
+      description: 'Number of rows to display per page',
+    },
+    initialPageIndex: {
+      control: 'number',
+      description: 'Initial page index to start on (0-based)',
+    },
+    maxVisiblePages: {
+      control: 'number',
+      description: 'Maximum number of visible pagination pages',
+    },
+    showFirstLastButtons: {
+      control: 'boolean',
+      description: 'Show first/last pagination buttons',
+    },
+    theme: {
+      control: 'select',
+      options: ['theme-sdc'],
+      description: 'Theme class to apply to the table component',
+    },
+    styleClass: {
+      control: 'object',
+      description: 'Array of style classes to apply. Allowed values: full-table, minimal-table',
+    },
+    pinningHeaders: {
+      control: 'boolean',
+      description: 'Whether to pin/freeze table headers during vertical scrolling',
+    },
+    showPagination: {
+      control: 'boolean',
+      description: 'Whether to show pagination controls at the bottom of the table',
+    },
+  },
+};
+
+export default meta;
+
+// Single comprehensive story for full-table
+export const FullTable: StoryObj<TableComponent<Transaction>> = {
+  args: {
+    data: mockTransactions,
+    columns: fullTableColumns,
+    showSelection: true,
+    enableSort: ['accountNumber', 'date', 'status'],
+    pageSize: 3,
+    initialPageIndex: 1,
+    maxVisiblePages: 2,
+    showFirstLastButtons: true,
+    theme: 'theme-sdc',
+    styleClass: ['full-table'] as any, // Use full-table style
+    pinningHeaders: true, // Enable pinned headers for testing
+    showPagination: true, // Enable pagination for testing
+  },
+  render: args => ({
+    props: {
+      ...args,
+      // Export button callback
+      exportClick: (exportData: { selectedRows: any[]; allRows: any[] }) => {
+        console.log('Export button clicked!', exportData);
+
+        if (exportData.selectedRows.length > 0) {
+          alert(`Exporting selected transactions: ${JSON.stringify(exportData.selectedRows, null, 2)}`);
+          console.log('Selected rows to export:', exportData.selectedRows);
+        } else {
+          alert('No rows selected. Exporting all transactions.');
+          console.log('All rows to export:', exportData.allRows);
+        }
+      },
+      // Sorting callback
+      sortingChange: (sortingState: any) => {
+        console.log('Sorting changed:', sortingState);
+        alert(`Sorting changed! New state: ${JSON.stringify(sortingState)}`);
+      },
+      // Selection callback
+      selectionChange: (selectionState: any) => {
+        console.log('Selection changed:', selectionState);
+        console.log(
+          'Selected rows:',
+          Object.keys(selectionState).filter(key => selectionState[key])
+        );
+      },
+      // Pagination callback
+      paginationChange: (paginationState: any) => {
+        console.log('Pagination changed:', paginationState);
+        console.log(`Page: ${paginationState.pageIndex + 1}, Page Size: ${paginationState.pageSize}`);
+        console.log(`Total rows: ${paginationState.pageSize * paginationState.pageIndex + paginationState.pageSize}`);
+      },
+    },
+  }),
+};
+
+// Single comprehensive story for minimal-table
+export const MinimalTable: StoryObj<TableComponent<Seat>> = {
+  args: {
+    data: mockSeats,
+    columns: minimalTableColumns,
+    showSelection: false,
+    theme: 'theme-sdc',
+    styleClass: ['minimal-table'] as any, // Use minimal-table style
+    pinningHeaders: true, // Enable pinned headers for testing
+    showPagination: false, // Disable pagination to show all rows
+  },
+  render: args => ({
+    props: {
+      ...args,
+    },
+  }),
+};

package/projects/software-division-components/src/backoffice/table/table.component.css

@@ -0,0 +1,172 @@
+/* SDC Table full-table styles */
+.sdc-table.full-table {
+  /* Component-specific CSS variables using SDC theme variables */
+  --sdc-table-vertical-scroll: hidden;
+  --sdc-table-background: var(--color-pure-white);
+  --sdc-table-foreground: var(--color-neutral-600);
+  --sdc-table-radius: var(--radius-lg);
+  --sdc-table-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  --sdc-table-border-top-color: var(--color-neutral-300);
+  --sdc-table-border-right-color: var(--color-neutral-300);
+  --sdc-table-border-bottom-color: var(--color-neutral-300);
+  --sdc-table-border-left-color: var(--color-neutral-300);
+  --sdc-table-border-top-width: var(--border-default);
+  --sdc-table-border-right-width: var(--border-default);
+  --sdc-table-border-bottom-width: var(--border-default);
+  --sdc-table-border-left-width: var(--border-default);
+  --sdc-table-padding: var(--space-3) var(--space-4);
+  --sdc-table-font-size: var(--text-sm);
+  --sdc-table-line-height: var(--leading-normal);
+  --sdc-table-font-weight: var(--font-semibold);
+  --sdc-table-header-background: var(--color-pure-white);
+  --sdc-table-header-foreground: var(--color-neutral-400);
+  --sdc-table-header-border-top-color: transparent;
+  --sdc-table-header-border-right-color: transparent;
+  --sdc-table-header-border-bottom-color: transparent;
+  --sdc-table-header-border-left-color: transparent;
+  --sdc-table-header-border-top-width: var(--border-0);
+  --sdc-table-header-border-right-width: var(--border-0);
+  --sdc-table-header-border-bottom-width: var(--border-0);
+  --sdc-table-header-border-left-width: var(--border-0);
+  --sdc-table-header-padding: var(--space-6) var(--space-4);
+  --sdc-table-header-font-size: var(--text-sm);
+  --sdc-table-header-font-weight: var(--font-semibold);
+  --sdc-table-row-hover: var(--color-neutral-50);
+}
+
+/* SDC Table minimal-table styles */
+.sdc-table.minimal-table {
+  /* Component-specific CSS variables using SDC theme variables */
+  --sdc-table-vertical-scroll: auto;
+  --sdc-table-background: var(--color-neutral-100);
+  --sdc-table-foreground: var(--color-secondary);
+  --sdc-table-radius: var(--radius-lg);
+  --sdc-table-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  --sdc-table-border-top-color: var(--color-neutral-300);
+  --sdc-table-border-right-color: var(--color-neutral-300);
+  --sdc-table-border-bottom-color: var(--color-neutral-300);
+  --sdc-table-border-left-color: var(--color-neutral-300);
+  --sdc-table-border-top-width: var(--border-default);
+  --sdc-table-border-right-width: var(--border-default);
+  --sdc-table-border-bottom-width: var(--border-default);
+  --sdc-table-border-left-width: var(--border-default);
+  --sdc-table-padding: var(--space-4) var(--space-5);
+  --sdc-table-font-size: var(--text-sm);
+  --sdc-table-line-height: var(--leading-relaxed);
+  --sdc-table-font-weight: var(--font-bold);
+  --sdc-table-header-background: var(--color-neutral-100);
+  --sdc-table-header-foreground: var(--color-neutral-800);
+  --sdc-table-header-border-top-color: transparent;
+  --sdc-table-header-border-right-color: transparent;
+  --sdc-table-header-border-bottom-color: var(--color-neutral-600);
+  --sdc-table-header-border-left-color: transparent;
+  --sdc-table-header-border-top-width: var(--border-0);
+  --sdc-table-header-border-right-width: var(--border-0);
+  --sdc-table-header-border-bottom-width: var(--border-2);
+  --sdc-table-header-border-left-width: var(--border-0);
+  --sdc-table-header-padding: var(--space-5) var(--space-5);
+  --sdc-table-header-font-size: var(--text-sm);
+  --sdc-table-header-font-weight: var(--font-bold);
+  --sdc-table-row-hover: var(--color-neutral-25);
+}
+
+/* Base component styles */
+.sdc-table {
+  width: 100%;
+  overflow: hidden;
+}
+
+/* Table container with fixed height and scroll */
+.table-container {
+  background: hsl(var(--sdc-table-background));
+  border-top: var(--sdc-table-border-top-width) solid hsl(var(--sdc-table-border-top-color));
+  border-right: var(--sdc-table-border-right-width) solid hsl(var(--sdc-table-border-right-color));
+  border-bottom: var(--sdc-table-border-bottom-width) solid hsl(var(--sdc-table-border-bottom-color));
+  border-left: var(--sdc-table-border-left-width) solid hsl(var(--sdc-table-border-left-color));
+  border-radius: var(--sdc-table-radius);
+  box-shadow: var(--sdc-table-shadow);
+  overflow-x: auto;
+  overflow-y: var(--sdc-table-vertical-scroll);
+}
+
+/* Enhanced scrolling behavior for pinned headers */
+.sdc-table.pinning-headers .table-container {
+  max-height: 70vh; /* Limit height to enable scrolling */
+  overflow-y: auto;
+}
+
+/* Table base styles */
+.sdc-table table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--sdc-table-font-size);
+  line-height: var(--sdc-table-line-height);
+}
+
+/* Header styles */
+.sdc-table-header {
+  background: hsl(var(--sdc-table-header-background));
+  z-index: 10;
+}
+
+/* Pinned headers - only apply sticky positioning when enabled */
+.sdc-table.pinning-headers .sdc-table-header {
+  position: sticky;
+  top: 0;
+}
+
+.sdc-table-header th {
+  padding: var(--sdc-table-header-padding);
+  font-weight: var(--sdc-table-header-font-weight);
+  color: hsl(var(--sdc-table-header-foreground));
+  text-align: left;
+  font-size: var(--sdc-table-header-font-size);
+  text-transform: capitalize;
+  letter-spacing: 0.05em;
+  border-bottom: var(--sdc-table-border-bottom-width) solid hsl(var(--sdc-table-border-bottom-color));
+}
+
+/* Body styles */
+.sdc-table-body {
+  background: hsl(var(--sdc-table-background));
+}
+
+.sdc-table-body tr {
+  border-bottom: var(--sdc-table-border-bottom-width) solid hsl(var(--sdc-table-border-bottom-color));
+  transition: background-color 0.15s ease-in-out;
+}
+
+.sdc-table-body tr:hover {
+  background: hsl(var(--sdc-table-row-hover));
+}
+
+.sdc-table.minimal-table .sdc-table-body tr {
+  border-bottom: none;
+}
+
+.sdc-table.minimal-table .sdc-table-header th {
+  border-bottom: var(--sdc-table-header-border-bottom-width) solid hsl(var(--sdc-table-header-border-bottom-color));
+}
+
+.sdc-table-body td {
+  padding: var(--sdc-table-padding);
+  color: hsl(var(--sdc-table-foreground));
+  font-weight: var(--sdc-table-font-weight);
+  white-space: nowrap;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .table-container {
+    height: auto;
+  }
+
+  .sdc-table-body td {
+    padding: var(--space-2) var(--space-3);
+    font-size: var(--text-xs);
+  }
+
+  .sdc-table-header th {
+    padding: var(--space-3) var(--space-3);
+  }
+}

package/projects/software-division-components/src/backoffice/table/table.component.html

@@ -0,0 +1,53 @@
+<div [class]="computedClass()">
+  <div class="table-container">
+    <!-- we defer the loading of the table, because tanstack manipulates the DOM with flexRender which can cause errors during SSR -->
+    @defer {
+      <table hlmTable>
+        <thead hlmTHead class="sdc-table-header">
+          @for (headerGroup of tableForPagination.getHeaderGroups(); track headerGroup.id) {
+            <tr hlmTr>
+              @for (header of headerGroup.headers; track header.id) {
+                <th hlmTh [attr.colSpan]="header.colSpan">
+                  @if (!header.isPlaceholder) {
+                    <ng-container
+                      *flexRender="header.column.columnDef.header; props: header.getContext(); let headerText">
+                      <div [innerHTML]="headerText"></div>
+                    </ng-container>
+                  }
+                </th>
+              }
+            </tr>
+          }
+        </thead>
+        <tbody hlmTBody class="sdc-table-body w-full">
+          @for (row of paginatedRows; track row.id) {
+            <tr hlmTr [attr.key]="row.id" [attr.data-state]="row.getIsSelected() && 'selected'">
+              @for (cell of row.getVisibleCells(); track $index) {
+                <td hlmTd>
+                  <ng-container *flexRender="cell.column.columnDef.cell; props: cell.getContext(); let cell">
+                    <div [innerHTML]="cell"></div>
+                  </ng-container>
+                </td>
+              }
+            </tr>
+          } @empty {
+            <tr hlmTr>
+              <td hlmTd class="h-24 text-center" [attr.colspan]="_processColumns().length">No results.</td>
+            </tr>
+          }
+        </tbody>
+      </table>
+    }
+  </div>
+</div>
+
+<!-- Pagination Component -->
+@if (showPagination()) {
+  <sdc-pagination
+    [theme]="theme()"
+    [table]="tableForPagination"
+    [maxVisiblePages]="maxVisiblePages()"
+    [showFirstLastButtons]="showFirstLastButtons()"
+    [exportButtonText]="exportButtonText()"
+    (exportClick)="exportClick.emit($event)"></sdc-pagination>
+}