@open-dcp/grid 0.0.0-stage → 0.2.17

package/dist/GridService.js

@@ -0,0 +1,410 @@
+import { BehaviorSubject, skip, combineLatest, map } from 'rxjs';
+import { isEqual } from 'lodash-es';
+import { distinctUntilChanged } from 'rxjs/operators';
+import { logger } from '@open-dcp/utilities';
+import { RowHeightService } from './services/RowHeightService';
+import { SortingService } from './services/SortingService';
+import { FormattingService } from './services/FormattingService';
+import { FilteringService } from './services/FilteringService';
+import { SelectionService } from './services/SelectionService';
+const DEFAULT_DISPLAY_FORMAT = {
+    timeZone: "UTC",
+    dateFormat: "yyyy-MM-dd",
+    timeFormat: "HH:mm:ss",
+};
+export class GridService {
+    constructor(rows, columns, gridOptions = {}, sorts = [], filterTree = null, selections = new Set()) {
+        var _a, _b;
+        this.container = null; // Reference to the scrolling container
+        this.startIndex = 0;
+        this.firstRowHeight = 0;
+        this.lastRowHeight = 0;
+        this.apiMode = false;
+        this.clientSideSort = false;
+        this.clientSideFilter = false;
+        this.indexMapping = new Map();
+        this.gridOptions = gridOptions;
+        this.filterSortSubject = new BehaviorSubject({ filterTree, sorts, globalSearch: null });
+        this.filterSort$ = this.filterSortSubject.asObservable();
+        this.displayFormatSubject = new BehaviorSubject(Object.assign(Object.assign({}, DEFAULT_DISPLAY_FORMAT), gridOptions.displayFormat));
+        this.displayFormat$ = this.displayFormatSubject.asObservable();
+        // Data independend services
+        this.formattingService = new FormattingService(this);
+        this.rowHeightService = new RowHeightService(this);
+        // Set Column
+        this.columnsSubject = new BehaviorSubject(columns);
+        this.columns$ = this.columnsSubject.asObservable();
+        // Format Rows
+        let initalRows = rows.map(row => this.formattingService.applyFormattingToRow(row));
+        this.rowsSubject = new BehaviorSubject(initalRows);
+        this.rows$ = this.rowsSubject.asObservable();
+        this.indexMapping = new Map([...Array(initalRows.length).keys()].map(i => [i, i]));
+        // Row Count Observable
+        this.rowCount$ = combineLatest([
+            this.rows$,
+            this.filterSort$,
+            this.columns$
+        ]).pipe(map(() => this.rowCount()), distinctUntilChanged());
+        // Init Data Services
+        this.filteringService = new FilteringService(this, filterTree);
+        this.sortingService = new SortingService(this, sorts);
+        this.selectionService = new SelectionService(selections, (_a = gridOptions.multiSelect) !== null && _a !== void 0 ? _a : true);
+        this.elementHeight = (_b = gridOptions.elementHeight) !== null && _b !== void 0 ? _b : 42;
+        this.stateSubject = new BehaviorSubject({
+            startIndex: 0,
+            step: 1,
+            firstRowHeight: 0,
+            lastRowHeight: 0,
+            renderRows: []
+        });
+        this.rows$.pipe(skip(1), distinctUntilChanged((prev, curr) => isEqual(curr, prev))).subscribe(() => {
+            if (this.apiMode) {
+                return;
+            }
+            this.updateRenderedRows();
+            this.rowHeightService.initRowHeights(this.rowCount());
+        });
+        this.columns$.pipe(distinctUntilChanged((prev, curr) => isEqual(curr, prev))).subscribe(() => {
+            if (this.getRows().length > 0) {
+                this.setRows(this.rowsSubject.getValue());
+            }
+        });
+        this.displayFormat$.subscribe(() => {
+            this.updateRenderedRows();
+        });
+    }
+    // API Support
+    notifyFilterSortUpdate() {
+        const filterTree = this.filteringService.getFilterTree();
+        const sorts = this.sortingService.getSorts();
+        const globalSearch = this.filteringService.getGlobalSearch();
+        // Always emit to observable
+        this.filterSortSubject.next({
+            filterTree,
+            sorts,
+            globalSearch,
+        });
+        if (this.apiMode && !this.clientSideSort && !this.clientSideFilter) {
+            // In API mode or with client-side operations, do not update locally
+            return;
+        }
+        this.updateRenderedRows();
+    }
+    enableApiMode(config = {}) {
+        var _a, _b;
+        logger.log('DcpGrid: api mode active');
+        this.apiMode = true;
+        this.clientSideSort = (_a = config.clientSideSort) !== null && _a !== void 0 ? _a : false;
+        this.clientSideFilter = (_b = config.clientSideFilter) !== null && _b !== void 0 ? _b : false;
+    }
+    disableApiMode() {
+        this.apiMode = false;
+        this.clientSideSort = false;
+        this.clientSideFilter = false;
+    }
+    shouldApplyClientSideFiltering() {
+        return !this.apiMode || this.clientSideFilter;
+    }
+    setRowsFromApi(rows) {
+        if (!this.apiMode) {
+            logger.warn('DcpGrid: setRowsFromApi should only be called in API mode');
+            return;
+        }
+        // Format the rows first!
+        const formattedRows = rows.map(row => this.formattingService.applyFormattingToRow(row));
+        // Set the formatted rows
+        this.rowsSubject.next(formattedRows);
+        // Reset index mapping - it will be recalculated based on client-side operations
+        this.indexMapping = new Map([...Array(formattedRows.length).keys()].map(i => [i, i]));
+        this.rowHeightService.initRowHeights(formattedRows.length);
+        this.updateRenderedRows();
+    }
+    // Index Mapping
+    clearIndexMap() {
+        this.indexMapping.clear();
+    }
+    setIndexMapping(newMap) {
+        this.indexMapping = newMap;
+    }
+    setIndexMappingValue(newIndex, originalIndex) {
+        this.indexMapping.set(newIndex, originalIndex);
+    }
+    getOriginalIndex(index) {
+        const originalIndex = this.indexMapping.get(index);
+        if (originalIndex === undefined) {
+            throw new Error(`Original index in rows not found for: ${index}`);
+        }
+        return originalIndex;
+    }
+    getIndexMapping() {
+        return this.indexMapping;
+    }
+    // Others
+    updateDisplayFormat(newFormat) {
+        var _a;
+        this.displayFormatSubject.next(Object.assign(Object.assign({}, this.displayFormatSubject.getValue()), newFormat));
+        const globalSearch = this.filteringService.getGlobalSearch();
+        if (((_a = globalSearch === null || globalSearch === void 0 ? void 0 : globalSearch.options) === null || _a === void 0 ? void 0 : _a.searchMode) === 'display') {
+            this.filteringService.updateFilterIndexesForUpdatedData();
+        }
+    }
+    attachContainer(container) {
+        this.container = container;
+        this.rowHeightService.recalculateHeights();
+        this.updateRenderedRows();
+    }
+    getContainer() {
+        return this.container;
+    }
+    setStateValue(key, newValue) {
+        this.stateSubject.next(Object.assign(Object.assign({}, this.stateSubject.value), { [key]: newValue }));
+    }
+    getState() {
+        return this.stateSubject.asObservable();
+    }
+    getFirstRowHeight() {
+        return this.firstRowHeight;
+    }
+    getLastRowHeight() {
+        return this.lastRowHeight;
+    }
+    getRenderRows() {
+        return this.stateSubject.getValue().renderRows;
+    }
+    getRows() {
+        return this.rowsSubject.getValue();
+    }
+    getCellDisplayValue(row, columnKey) {
+        const column = this.columnsSubject.getValue().find((col) => col.key === columnKey);
+        if (!column) {
+            return '';
+        }
+        const displayValue = this.formattingService.formatCellDisplay(row, column).display;
+        return displayValue === null || displayValue === undefined ? '' : String(displayValue);
+    }
+    getFilteredRows() {
+        if (this.apiMode && !this.clientSideFilter) {
+            // In API mode without client-side filtering, return rows as-is (already filtered by backend)
+            return this.getRows();
+        }
+        // Apply client-side filtering
+        return this.filteringService.applyFilter(this.getRows());
+    }
+    getFilteredAndSortRows() {
+        const filteredRows = this.getFilteredRows();
+        if (this.apiMode && !this.clientSideSort) {
+            // In API mode without client-side sorting, return rows as-is (already sorted by backend)
+            return filteredRows;
+        }
+        // Apply client-side sorting
+        return this.sortingService.applySorting(filteredRows);
+    }
+    rowCount() {
+        let totalRows = this.rowsSubject.getValue().length;
+        if (this.apiMode && !this.clientSideFilter) {
+            // In API mode without client-side filtering, use total rows
+            return totalRows;
+        }
+        // Use filtered count
+        let filterIndexes = this.filteringService.getFilterIndexes();
+        if (filterIndexes === null) {
+            return totalRows;
+        }
+        return filterIndexes.length;
+    }
+    setRows(rows, shouldFormat = true) {
+        const updatedRows = shouldFormat
+            ? rows.map(row => this.formattingService.applyFormattingToRow(row))
+            : rows;
+        this.indexMapping = new Map([...Array(rows.length).keys()].map(i => [i, i]));
+        this.rowsSubject.next(updatedRows);
+        this.filteringService.updateFilterIndexesForUpdatedData();
+    }
+    getColumns() {
+        return this.columnsSubject.getValue();
+    }
+    setColumns(columns) {
+        this.columnsSubject.next(columns);
+    }
+    // SortingService
+    getSortCondition(columnKey) {
+        let matchingConditions = this.sortingService.getSortCondition(columnKey);
+        if (matchingConditions.length == 0) {
+            return null;
+        }
+        return matchingConditions[0];
+    }
+    toggleSort(columnKey) {
+        this.sortingService.toggleSort(columnKey);
+        this.notifyFilterSortUpdate();
+    }
+    // FilteringService
+    addFilter(filterNode) {
+        this.filteringService.addFilter(filterNode);
+        this.sortingService.resetSorting();
+        this.notifyFilterSortUpdate();
+    }
+    reset() {
+        this.filteringService.resetFilters();
+        this.sortingService.resetSorting();
+        this.notifyFilterSortUpdate();
+    }
+    resetFilter(columnKey) {
+        this.filteringService.resetFilter(columnKey);
+        this.sortingService.resetSorting();
+        this.notifyFilterSortUpdate();
+    }
+    setGlobalSearch(query, options) {
+        this.filteringService.setGlobalSearch(query, options);
+        this.notifyFilterSortUpdate();
+    }
+    clearGlobalSearch() {
+        this.filteringService.clearGlobalSearch();
+        this.notifyFilterSortUpdate();
+    }
+    getGlobalSearch() {
+        return this.filteringService.getGlobalSearch();
+    }
+    getFilterIndexes() {
+        return this.filteringService.getFilterIndexes();
+    }
+    hasFilter(columnKey) {
+        return this.filteringService.hasFilter(columnKey);
+    }
+    // SelectionService
+    getSelected() {
+        return this.selectionService.selected$;
+    }
+    selectRow(index) {
+        this.selectionService.selectRow(index);
+    }
+    deselectRow(index) {
+        this.selectionService.deselectRow(index);
+    }
+    toggleRowSelection(index) {
+        this.selectionService.toggleRowSelection(index);
+    }
+    selectAll() {
+        const rowsOfInterest = this.getRowsOfInterest();
+        const indices = rowsOfInterest.map((_, i) => i);
+        this.selectionService.selectAll(indices);
+    }
+    shiftSelect(startIndex, endIndex) {
+        this.selectionService.shiftSelect(startIndex, endIndex);
+    }
+    isSelected(index) {
+        return this.selectionService.isSelected(index);
+    }
+    deselectAll() {
+        this.selectionService.deselectAll();
+    }
+    clearSelection() {
+        this.selectionService.clearSelection();
+    }
+    getDisplayValue(row, column) {
+        return this.formattingService.formatCellDisplay(row, column);
+    }
+    getRowsOfInterest() {
+        if (this.apiMode) {
+            // API mode: apply only client-side operations
+            if (this.clientSideFilter && this.clientSideSort) {
+                return this.getFilteredAndSortRows();
+            }
+            else if (this.clientSideFilter) {
+                return this.getFilteredRows();
+            }
+            else if (this.clientSideSort) {
+                return this.sortingService.applySorting(this.getRows());
+            }
+            else {
+                // Pure API mode - no client-side operations
+                return this.getRows();
+            }
+        }
+        else {
+            // Normal mode - always apply both
+            return this.getFilteredAndSortRows();
+        }
+    }
+    rebuildIndexMapping(processedRows) {
+        const originalRows = this.getRows();
+        const newMapping = new Map();
+        processedRows.forEach((processedRow, newIdx) => {
+            const originalIdx = originalRows.indexOf(processedRow);
+            if (originalIdx !== -1) {
+                newMapping.set(newIdx, originalIdx);
+            }
+        });
+        this.indexMapping = newMapping;
+    }
+    updateRenderedRows() {
+        var _a;
+        if (!this.container)
+            return;
+        const scrollTop = (_a = this.getScrollHeight()) !== null && _a !== void 0 ? _a : 0;
+        // Get the appropriate rows based on mode and settings
+        const rowsOfInterest = this.getRowsOfInterest();
+        // Rebuild index mapping ONLY if client-side operations were applied in API mode
+        if (this.apiMode && (this.clientSideFilter || this.clientSideSort)) {
+            this.rebuildIndexMapping(rowsOfInterest);
+        }
+        else if (this.apiMode && !this.clientSideFilter && !this.clientSideSort) {
+            // Pure API mode - ensure 1:1 mapping
+            const rows = this.getRows();
+            this.indexMapping = new Map([...Array(rows.length).keys()].map(i => [i, i]));
+        }
+        this.rowHeightService.recalculateHeights();
+        const scrollBottom = scrollTop + this.container.clientHeight;
+        this.startIndex = this.rowHeightService.findStartIndex(scrollTop);
+        const endIndex = this.rowHeightService.findEndIndex(scrollBottom);
+        // Correct firstRowHeight using cumulative heights
+        this.firstRowHeight = this.startIndex > 0 && rowsOfInterest.length > 0 ? this.rowHeightService.getHeightCache()[this.startIndex - 1] : 0;
+        // Calculate the actual visible height
+        const totalHeight = this.rowHeightService.getHeightCache()[this.rowHeightService.getHeightCache().length - 1] || 0;
+        const visibleHeight = this.rowHeightService.getHeightCache()[endIndex] - this.firstRowHeight;
+        // Ensure lastRowHeight is computed dynamically
+        this.lastRowHeight = rowsOfInterest.length > 0 ? Math.max(0, totalHeight - (this.firstRowHeight + visibleHeight)) : 0;
+        // Slice visible rows
+        const visibleRows = rowsOfInterest.slice(this.startIndex, endIndex + 1);
+        // Apply formatting
+        const formattedRenderRows = visibleRows.map((row, index) => {
+            var _a;
+            const currentIndex = this.startIndex + index;
+            // In pure API mode (no client-side operations), use currentIndex directly
+            const originalIndex = (this.apiMode && !this.clientSideFilter && !this.clientSideSort)
+                ? currentIndex
+                : (_a = this.indexMapping.get(currentIndex)) !== null && _a !== void 0 ? _a : currentIndex;
+            const formattedRow = {
+                globaIndex: originalIndex,
+                data: row
+            };
+            this.columnsSubject.getValue().forEach((column) => {
+                const cellValue = formattedRow.data[column.key];
+                if (cellValue && typeof cellValue === 'object' && cellValue.raw !== undefined) {
+                    const displayValue = this.getDisplayValue(row, column);
+                    formattedRow.data[column.key].display = displayValue.display;
+                    formattedRow.data[column.key].renderedElement = displayValue.renderedElement;
+                }
+            });
+            return formattedRow;
+        });
+        // Update state
+        this.stateSubject.next({
+            startIndex: this.startIndex,
+            step: endIndex - this.startIndex,
+            firstRowHeight: this.firstRowHeight,
+            lastRowHeight: this.lastRowHeight,
+            renderRows: formattedRenderRows
+        });
+        requestAnimationFrame(() => this.rowHeightService.updateRowHeights());
+    }
+    handleScroll(event) {
+        if (!this.container)
+            return;
+        this.updateRenderedRows();
+    }
+    getScrollHeight() {
+        var _a;
+        return (_a = this.container) === null || _a === void 0 ? void 0 : _a.scrollTop;
+    }
+}

package/dist/__tests__/GridServices.test.d.ts

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