@open-dcp/grid 0.0.0-stage → 0.2.17

package/dist/services/__tests__/FormattingService.test.js

@@ -0,0 +1,122 @@
+import { GridService } from '../../GridService';
+describe('FormattingService', () => {
+    let gridService;
+    let formattingService;
+    let mockColumns;
+    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 = {
+                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 = {
+                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 = { id: { raw: '42', value: '42' } };
+            const column = { key: 'id', label: 'ID', type: 'integer' };
+            const result = formattingService.formatCellValue(row, column);
+            expect(result).toBe(42);
+        });
+        it('should transform number values', () => {
+            const row = { price: { raw: '19.99', value: '19.99' } };
+            const 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 = { created: { raw: '2024-01-15', value: '2024-01-15' } };
+            const 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 = { name: { raw: 'Test', value: 'Test' } };
+            const 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 = { id: { raw: 42, value: 42 } };
+            const 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 = { created: { raw: '2024-01-15', value: new Date('2024-01-15').getTime() } };
+            const 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 = { updated: { raw: '2024-01-15T14:30:00Z', value: new Date('2024-01-15T14:30:00Z').getTime() } };
+            const 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 = { duration: { raw: 3661, value: 3661 } };
+            const 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 = { name: { raw: null, value: null } };
+            const 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 = { created: { raw: '2024-01-15T12:00:00Z', value: new Date('2024-01-15T12:00:00Z').getTime() } };
+            const 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 = { created: { raw: '2024-01-15', value: new Date('2024-01-15').getTime() } };
+            const column = { key: 'created', label: 'Created', type: 'date' };
+            gridService.updateDisplayFormat({ dateFormat: 'dd/MM/yyyy' });
+            const result = formattingService.formatCellDisplay(row, column);
+            expect(result.display).toContain('/');
+        });
+    });
+});

package/dist/types/grid.d.ts

@@ -0,0 +1,71 @@
+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;
+    displayAsHtml?: boolean;
+    component?: any;
+    componentPropsMapper?: (cellValue: CellValue, row: Row) => Record<string, any>;
+    globalSearchText?: (cellValue: CellValue | null, row: Row, mode: GlobalSearchMode) => string | number | boolean | null | undefined;
+    transformer?: (rawValue: any) => string | number | boolean;
+    filterOptions?: FilterOption[];
+}
+export interface Row {
+    [key: string]: CellValue;
+}
+export interface RenderRow {
+    globaIndex: number;
+    data: Row;
+}
+export interface CellValue {
+    raw: any;
+    value: any;
+    display?: string | null;
+    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/dist/types/grid.js

@@ -0,0 +1 @@
+export {};

package/dist/types/sorting.d.ts

@@ -0,0 +1,8 @@
+export interface SortingCondition {
+    columnKey: string | number;
+    direction: 'asc' | 'desc';
+}
+export interface ApiModeConfig {
+    clientSideSort?: boolean;
+    clientSideFilter?: boolean;
+}

package/dist/types/sorting.js

@@ -0,0 +1 @@
+export {};

package/jest.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+    transform: {
+        '^.+\\.tsx?$': 'ts-jest',
+        '^.+\\.jsx?$': 'ts-jest',
+    },
+    testMatch: [
+        "**/__tests__/**/*.test.ts"
+    ],
+    moduleNameMapper: {
+        '^@/(.*)$': '<rootDir>/src/$1',
+        '^lodash-es$': 'lodash'
+    },
+    transformIgnorePatterns: [
+        'node_modules/(?!@open-dcp)',
+    ],
+};

package/package.json

@@ -1,6 +1,45 @@
 {
   "name": "@open-dcp/grid",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.17",
+  "description": "",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "start": "npm run dev",
+    "dev": "tsc --watch",
+    "build": "tsc",
+    "test": "jest"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "peerDependencies": {
+    "rxjs": ">=7.8.2"
+  },
+  "dependencies": {
+    "@open-dcp/filter": ">=0.1.6",
+    "@open-dcp/utilities": ">=1.1.1",
+    "@types/lodash-es": ">=4.17.12",
+    "date-fns": ">=4.1.0",
+    "date-fns-tz": ">=3.2.0",
+    "lodash-es": ">=4.17.21",
+    "tslib": ">=2.8.1"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.5.11",
+    "@types/lodash": "^4.17.23",
+    "jest": "^29.7.0",
+    "jest-junit": "^17.0.0",
+    "lodash": "^4.17.21",
+    "rxjs": "^7.8.2",
+    "ts-jest": "^29.4.4",
+    "typescript": "^5.7.3"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Roche/dcp-pkg-fe-ts-grid.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/reports/junit.xml

@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<testsuites name="jest tests" tests="0" failures="0" errors="0" time="6.762">
+</testsuites>