@open-dcp/grid 0.0.1 → 0.2.17

package/src/services/SortingService.ts

@@ -0,0 +1,105 @@
+import type { GridService } from "../GridService";
+import type { Row } from "../types/grid";
+import { SortingCondition } from '../types/sorting';
+
+export class SortingService {
+    private readonly gridService: GridService;
+    private readonly sortConditions: SortingCondition[];
+    private sortedIndexes: number[] | null = null;
+
+    constructor(gridService: GridService, sortConditions: SortingCondition[] = []) {
+        this.gridService = gridService;
+        this.sortConditions = sortConditions;
+    }
+
+    getSorts(): SortingCondition[]
+    {
+        return this.sortConditions;
+    }
+
+    getSortCondition(columnKey: string | number): SortingCondition[] {
+        return this.sortConditions.filter(condition => columnKey === condition.columnKey);
+    }
+
+    toggleSort(columnKey: string | number): void {
+        const existingIndex = this.sortConditions.findIndex(condition => condition.columnKey === columnKey);
+
+        if (existingIndex === -1) {
+            this.sortConditions.push({ columnKey, direction: 'asc' });
+        } else {
+            switch (this.sortConditions[existingIndex].direction) {
+                case 'asc':
+                    this.sortConditions[existingIndex].direction = 'desc'
+                    break;
+                case 'desc':
+                    this.sortConditions.splice(existingIndex, 1)
+                    break;
+            }
+        }
+
+        this.sortedIndexes = null;
+    }
+
+    applySorting(rows: Row[]): Row[] {    
+        if (this.sortConditions.length === 0) {
+            return rows;
+        }
+
+        if (
+            this.sortedIndexes &&
+            this.sortedIndexes.length === rows.length &&
+            this.sortedIndexes.every(index => index >= 0 && index < rows.length)
+        ) {
+            return this.sortedIndexes.map(index => rows[index]); // Apply cached order
+        }
+
+        const indexedRows = rows.map((row, index) => ({ row, index }));
+
+        indexedRows.sort((a, b) => {
+            for (const { columnKey, direction } of this.sortConditions) {
+                const valueA = a.row[columnKey].value;
+                const valueB = b.row[columnKey].value;
+
+                let comparison = 0;
+
+                if (typeof valueA === 'string' && typeof valueB === 'string') {
+                    comparison = valueA.localeCompare(valueB);
+                } else if (typeof valueA === 'number' && typeof valueB === 'number') {
+                    comparison = valueA - valueB;
+                } else if (valueA instanceof Date && valueB instanceof Date) {
+                    comparison = valueA.getTime() - valueB.getTime();
+                } else {
+                    comparison = String(valueA).localeCompare(String(valueB));
+                }
+
+                if (direction === 'desc') {
+                    comparison = -comparison;
+                }
+
+                if (comparison !== 0) {
+                    return comparison;
+                }
+            }
+
+            return 0; // Keep stable sorting
+        });
+
+        const filteredIndexes = this.gridService.getFilterIndexes() ?? this.gridService.getRows().map((_, i) => i);;
+        
+        this.gridService.clearIndexMap(); // Clear the existing mapping
+        indexedRows.forEach((indexedRow, i) => {
+            this.gridService.setIndexMappingValue(i, filteredIndexes[indexedRow.index]); // Map the sorted index to the original index
+        });
+
+        this.sortedIndexes = indexedRows.map(item => item.index);
+        return indexedRows.map(item => item.row); // Return sorted rows
+    }
+
+    getSortedIndexes(): number[] | null {
+        return this.sortedIndexes;
+    }
+
+    resetSorting() {
+        this.sortedIndexes = null;
+    }
+}

package/src/services/__tests__/FilteringService.test.ts

@@ -0,0 +1,173 @@
+import { FilteringService } from '../FilteringService';
+import { GridService } from '../../GridService';
+import { Column, Row } from '../../types/grid';
+import { FilterNode } from '@open-dcp/filter';
+
+describe('FilteringService', () => {
+    let gridService: GridService;
+    let filteringService: FilteringService;
+    let mockRows: Row[];
+    let mockColumns: Column[];
+
+    beforeEach(() => {
+        mockColumns = [
+            { key: 'id', label: 'ID', type: 'integer' },
+            { key: 'name', label: 'Name', type: 'string' },
+            { key: 'age', label: 'Age', type: 'number' },
+            { key: 'status', label: 'Status', type: 'string' },
+        ];
+
+        mockRows = [
+            { id: { raw: 1, value: 1 }, name: { raw: 'Alice', value: 'Alice' }, age: { raw: 30, value: 30 }, status: { raw: 'active', value: 'active' } },
+            { id: { raw: 2, value: 2 }, name: { raw: 'Bob', value: 'Bob' }, age: { raw: 25, value: 25 }, status: { raw: 'inactive', value: 'inactive' } },
+            { id: { raw: 3, value: 3 }, name: { raw: 'Charlie', value: 'Charlie' }, age: { raw: 35, value: 35 }, status: { raw: 'active', value: 'active' } },
+        ];
+
+        gridService = new GridService(mockRows, mockColumns);
+        filteringService = gridService['filteringService'];
+    });
+
+    describe('Basic Operations', () => {
+        it('should initialize with no filter', () => {
+            expect(filteringService.getFilterTree()).toBeNull();
+            expect(filteringService.getFilterIndexes()).toBeNull();
+        });
+
+        it('should filter by equals condition', () => {
+            const filter: FilterNode = {
+                type: 'condition',
+                columnKey: 'name',
+                operator: '=',
+                value: 'Alice'
+            };
+
+            filteringService.setFilterTree(filter);
+            expect(filteringService.getFilterIndexes()).toEqual([0]);
+        });
+
+        it('should filter by greater than condition', () => {
+            const filter: FilterNode = {
+                type: 'condition',
+                columnKey: 'age',
+                operator: '>',
+                value: 30
+            };
+
+            filteringService.setFilterTree(filter);
+            expect(filteringService.getFilterIndexes()).toEqual([2]);
+        });
+    });
+
+    describe('Group Filters', () => {
+        it('should apply AND group filter', () => {
+            const filter: FilterNode = {
+                type: 'group',
+                operator: 'and',
+                filters: [
+                    { type: 'condition', columnKey: 'status', operator: '=', value: 'active' },
+                    { type: 'condition', columnKey: 'age', operator: '>=', value: 30 }
+                ]
+            };
+
+            filteringService.setFilterTree(filter);
+            expect(filteringService.getFilterIndexes()).toEqual([0, 2]);
+        });
+
+        it('should apply OR group filter', () => {
+            const filter: FilterNode = {
+                type: 'group',
+                operator: 'or',
+                filters: [
+                    { type: 'condition', columnKey: 'name', operator: '=', value: 'Alice' },
+                    { type: 'condition', columnKey: 'name', operator: '=', value: 'Bob' }
+                ]
+            };
+
+            filteringService.setFilterTree(filter);
+            expect(filteringService.getFilterIndexes()).toEqual([0, 1]);
+        });
+    });
+
+    describe('Add and Reset Filters', () => {
+        it('should add filter and replace existing for same column', () => {
+            const filter1: FilterNode = { type: 'condition', columnKey: 'age', operator: '>', value: 25 };
+            const filter2: FilterNode = { type: 'condition', columnKey: 'age', operator: '<', value: 35 };
+
+            filteringService.addFilter(filter1);
+            filteringService.addFilter(filter2);
+
+            const tree = filteringService.getFilterTree();
+            expect(tree?.type).toBe('group');
+            if (tree?.type === 'group') {
+                expect(tree.filters.length).toBe(1);
+                expect(tree.filters[0]).toEqual(filter2);
+            }
+        });
+
+        it('should reset all filters', () => {
+            filteringService.setFilterTree({ type: 'condition', columnKey: 'status', operator: '=', value: 'active' });
+            filteringService.resetFilters();
+
+            expect(filteringService.getFilterTree()).toBeNull();
+            expect(filteringService.getFilterIndexes()).toBeNull();
+        });
+
+        it('should reset specific column filter', () => {
+            const filter: FilterNode = {
+                type: 'group',
+                operator: 'and',
+                filters: [
+                    { type: 'condition', columnKey: 'status', operator: '=', value: 'active' },
+                    { type: 'condition', columnKey: 'age', operator: '>', value: 25 }
+                ]
+            };
+
+            filteringService.setFilterTree(filter);
+            filteringService.resetFilter('status');
+
+            const tree = filteringService.getFilterTree();
+            if (tree?.type === 'group') {
+                expect(tree.filters.length).toBe(1);
+                expect((tree.filters[0] as any).columnKey).toBe('age');
+            }
+        });
+    });
+
+    describe('Helper Methods', () => {
+        it('should check if column has filter', () => {
+            filteringService.setFilterTree({ type: 'condition', columnKey: 'status', operator: '=', value: 'active' });
+
+            expect(filteringService.hasFilter('status')).toBe(true);
+            expect(filteringService.hasFilter('age')).toBe(false);
+        });
+
+        it('should apply filter to rows', () => {
+            filteringService.setFilterTree({ type: 'condition', columnKey: 'status', operator: '=', value: 'active' });
+            const filtered = filteringService.applyFilter(mockRows);
+
+            expect(filtered.length).toBe(2);
+            expect(filtered[0].name.value).toBe('Alice');
+            expect(filtered[1].name.value).toBe('Charlie');
+        });
+
+        it('should combine global search with filter tree using AND semantics', () => {
+            filteringService.setFilterTree({ type: 'condition', columnKey: 'status', operator: '=', value: 'active' });
+            filteringService.setGlobalSearch('char', { caseInsensitive: true });
+
+            const filtered = filteringService.applyFilter(mockRows);
+            expect(filtered.length).toBe(1);
+            expect(filtered[0].name.value).toBe('Charlie');
+        });
+
+        it('should use grid case-insensitive option when global search option is not set', () => {
+            const caseInsensitiveGridService = new GridService(mockRows, mockColumns, { caseInsensitiveFiltering: true });
+            const caseInsensitiveFilteringService = caseInsensitiveGridService['filteringService'];
+
+            caseInsensitiveFilteringService.setGlobalSearch('ALICE');
+
+            const filtered = caseInsensitiveFilteringService.applyFilter(mockRows);
+            expect(filtered.length).toBe(1);
+            expect(filtered[0].name.value).toBe('Alice');
+        });
+    });
+});

package/src/services/__tests__/FormattingService.test.ts

@@ -0,0 +1,157 @@
+import { FormattingService } from '../FormattingService';
+import { GridService } from '../../GridService';
+import { Column, Row } from '../../types/grid';
+
+describe('FormattingService', () => {
+    let gridService: GridService;
+    let formattingService: FormattingService;
+    let mockColumns: Column[];
+
+    beforeEach(() => {
+        mockColumns = [
+            { key: 'id', label: 'ID', type: 'integer' },
+            { key: 'name', label: 'Name', type: 'string' },
+            { key: 'price', label: 'Price', type: 'number' },
+            { key: 'created', label: 'Created', type: 'date' },
+            { key: 'updated', label: 'Updated', type: 'datetime' },
+            { key: 'duration', label: 'Duration', type: 'duration' },
+        ];
+
+        gridService = new GridService([], mockColumns);
+        formattingService = gridService['formattingService'];
+    });
+
+    describe('applyFormattingToRow', () => {
+        it('should format a complete row with all column types', () => {
+            const row: Row = {
+                id: { raw: '123', value: '123' },
+                name: { raw: 'Product', value: 'Product' },
+                price: { raw: '99.99', value: '99.99' },
+                created: { raw: '2024-01-15', value: '2024-01-15' },
+                updated: { raw: '2024-01-15T14:30:00Z', value: '2024-01-15T14:30:00Z' },
+                duration: { raw: '3661', value: '3661' },
+            };
+
+            const formatted = formattingService.applyFormattingToRow(row);
+
+            expect(formatted.id.value).toBe(123);
+            expect(formatted.name.value).toBe('Product');
+            expect(formatted.price.value).toBe(99.99);
+            expect(formatted.duration.value).toBe(3661);
+            expect(formatted.created.raw).toBe('2024-01-15');
+            expect(formatted.updated.raw).toBe('2024-01-15T14:30:00Z');
+        });
+
+        it('should handle null values', () => {
+            const row: Row = {
+                id: { raw: null, value: null },
+                name: { raw: null, value: null },
+            };
+
+            const formatted = formattingService.applyFormattingToRow(row);
+
+            expect(formatted.id.value).toBeNull();
+            expect(formatted.name.value).toBeNull();
+        });
+    });
+
+    describe('formatCellValue', () => {
+        it('should transform integer values', () => {
+            const row: Row = { id: { raw: '42', value: '42' } };
+            const column: Column = { key: 'id', label: 'ID', type: 'integer' };
+
+            const result = formattingService.formatCellValue(row, column);
+            expect(result).toBe(42);
+        });
+
+        it('should transform number values', () => {
+            const row: Row = { price: { raw: '19.99', value: '19.99' } };
+            const column: Column = { key: 'price', label: 'Price', type: 'number' };
+
+            const result = formattingService.formatCellValue(row, column);
+            expect(result).toBe(19.99);
+        });
+
+        it('should transform date values to timestamps', () => {
+            const row: Row = { created: { raw: '2024-01-15', value: '2024-01-15' } };
+            const column: Column = { key: 'created', label: 'Created', type: 'date' };
+
+            const result = formattingService.formatCellValue(row, column);
+            expect(typeof result).toBe('number');
+            expect(result).toBeGreaterThan(0);
+        });
+
+        it('should transform string values', () => {
+            const row: Row = { name: { raw: 'Test', value: 'Test' } };
+            const column: Column = { key: 'name', label: 'Name', type: 'string' };
+
+            const result = formattingService.formatCellValue(row, column);
+            expect(result).toBe('Test');
+        });
+    });
+
+    describe('formatCellDisplay', () => {
+        it('should format integer for display', () => {
+            const row: Row = { id: { raw: 42, value: 42 } };
+            const column: Column = { key: 'id', label: 'ID', type: 'integer' };
+
+            const result = formattingService.formatCellDisplay(row, column);
+            expect(result.display).toBe('42');
+        });
+
+        it('should format date for display', () => {
+            const row: Row = { created: { raw: '2024-01-15', value: new Date('2024-01-15').getTime() } };
+            const column: Column = { key: 'created', label: 'Created', type: 'date' };
+
+            const result = formattingService.formatCellDisplay(row, column);
+            expect(result.display).toContain('2024');
+        });
+
+        it('should format datetime for display', () => {
+            const row: Row = { updated: { raw: '2024-01-15T14:30:00Z', value: new Date('2024-01-15T14:30:00Z').getTime() } };
+            const column: Column = { key: 'updated', label: 'Updated', type: 'datetime' };
+
+            const result = formattingService.formatCellDisplay(row, column);
+            expect(result.display).toBeTruthy();
+            expect(result.display).toContain('2024');
+        });
+
+        it('should format duration for display', () => {
+            const row: Row = { duration: { raw: 3661, value: 3661 } };
+            const column: Column = { key: 'duration', label: 'Duration', type: 'duration' };
+
+            const result = formattingService.formatCellDisplay(row, column);
+            expect(result.display).toBe('01:01:01');
+        });
+
+        it('should handle null values in display', () => {
+            const row: Row = { name: { raw: null, value: null } };
+            const column: Column = { key: 'name', label: 'Name', type: 'string' };
+
+            const result = formattingService.formatCellDisplay(row, column);
+            expect(result.display).toBeNull();
+        });
+    });
+
+    describe('Display format changes', () => {
+        it('should respect timezone changes for date formatting', () => {
+            const row: Row = { created: { raw: '2024-01-15T12:00:00Z', value: new Date('2024-01-15T12:00:00Z').getTime() } };
+            const column: Column = { key: 'created', label: 'Created', type: 'datetime' };
+
+            gridService.updateDisplayFormat({ timeZone: 'America/New_York' });
+            const result = formattingService.formatCellDisplay(row, column);
+
+            expect(result.display).toBeTruthy();
+        });
+
+        it('should respect date format changes', () => {
+            const row: Row = { created: { raw: '2024-01-15', value: new Date('2024-01-15').getTime() } };
+            const column: Column = { key: 'created', label: 'Created', type: 'date' };
+
+            gridService.updateDisplayFormat({ dateFormat: 'dd/MM/yyyy' });
+            const result = formattingService.formatCellDisplay(row, column);
+
+            expect(result.display).toContain('/');
+        });
+    });
+});

package/src/types/grid.ts

@@ -0,0 +1,84 @@
+import type { FilterNode } from '@open-dcp/filter';
+import type { SortingCondition } from './sorting';
+
+export type ColumnType = 'string' | 'integer' | 'number' | 'date' | 'datetime' | 'duration' | 'custom' | 'component' | 'enum';
+export type GlobalSearchMode = 'value' | 'raw' | 'display';
+
+export interface FilterOption {
+    label: string;
+    value: string | number | boolean;
+}
+
+export interface Column {
+    label: string;
+    style?: string;
+    key: string | number;
+    type: ColumnType;
+    renderCell?: (cellValue: CellValue, row: Row) => string | HTMLElement;  // Function-based renderer
+    displayAsHtml?: boolean;
+    component?: any; // Placeholder for a component (framework-specific)
+    componentPropsMapper?: (cellValue: CellValue, row: Row) => Record<string, any>; // Function to map cell values to component props
+    globalSearchText?: (cellValue: CellValue | null, row: Row, mode: GlobalSearchMode) => string | number | boolean | null | undefined;
+    transformer?: (rawValue: any) => string | number | boolean;
+    filterOptions?: FilterOption[]; // Options for enum filter type
+}
+
+export interface Row {
+    [key: string]: CellValue;
+}
+
+export interface RenderRow {
+    globaIndex: number;
+    data: Row;
+}
+
+export interface CellValue {
+    raw: any;       // The original unmodified value.
+    value: any; // The transformed value (for sorting, filtering).
+    display?: string | null; // The display value (formatted for rendering).
+    renderedElement?: HTMLElement;
+}
+
+export interface GridState {
+    startIndex: number;
+    step: number;
+    firstRowHeight: number;
+    lastRowHeight: number;
+    renderRows: RenderRow[];
+}
+
+export interface DisplayFormat {
+    timeZone: string;
+    dateFormat: string;
+    timeFormat: string;
+}
+
+export interface DisplayValue {
+    display: string | undefined | null;
+    renderedElement: HTMLElement | undefined;
+}
+
+export interface GlobalSearchOptions {
+    columns?: Array<string | number>;
+    caseInsensitive?: boolean;
+    searchMode?: GlobalSearchMode;
+}
+
+export interface GlobalSearchState {
+    query: string;
+    options?: GlobalSearchOptions;
+}
+
+export interface FilterSortUpdatePayload {
+    filterTree: FilterNode | null;
+    sorts: SortingCondition[];
+    globalSearch?: GlobalSearchState | null;
+}
+
+export interface GridOptions {
+    elementHeight: number;
+    multiSelect: boolean;
+    allSelector: boolean;
+    displayFormat: Partial<DisplayFormat>;
+    caseInsensitiveFiltering: boolean;
+}

package/src/types/sorting.ts

@@ -0,0 +1,9 @@
+export interface SortingCondition {
+    columnKey: string | number;
+    direction: 'asc' | 'desc';
+}
+
+export interface ApiModeConfig {
+    clientSideSort?: boolean;  // If true, sorting happens client-side
+    clientSideFilter?: boolean; // If true, filtering happens client-side
+}

package/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es2017",
+    "module": "esnext",
+    "declaration": true,
+    "outDir": "dist",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "node",
+    "lib": ["es2017", "dom"],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src"]
+}