@zeedhi/teknisa-components-common 3.1.0 → 3.2.0

package/src/components/tek-grid/grouped-data-manager.ts

@@ -1,448 +0,0 @@
-import { I18n, IDictionary } from '@zeedhi/core';
-import debounce from 'lodash.debounce';
-import { NonInitializedError } from '@zeedhi/common';
-import { isFilledObject, isNil } from '../../utils';
-import {
-	IGroupedDataManager,
-	ITekGrid,
-	ITekGridGroup,
-	ITekGridGroupFooter,
-	ITekGridGroupHeader,
-	ITekGridSummary,
-} from './interfaces';
-import { TekGridColumn } from './tek-grid-column';
-
-export class GroupedDataManager implements IGroupedDataManager {
-	protected grid: ITekGrid;
-
-	public summaryColumns: TekGridColumn[] = [];
-
-	private groups: ITekGridGroup[] = [];
-
-	private summary: IDictionary<ITekGridSummary> = {};
-
-	private groupedData: IDictionary<any>[] = [];
-
-	private groupColumnNames: string[] = [];
-
-	private groupColumns: TekGridColumn[] = [];
-
-	private originalDatasourceLoadAll?: boolean;
-
-	private originalDatasourceLimit?: number;
-
-	private viewUpdateScrollData?: () => void;
-
-	private viewUpdateFixedColumns?: () => void;
-
-	constructor(grid: ITekGrid) {
-		this.grid = grid;
-	}
-
-	setViewUpdateFixedColumns(fn: () => void) {
-		this.viewUpdateFixedColumns = fn;
-	}
-
-	setViewUpdateScrollData(fn: () => void) {
-		this.viewUpdateScrollData = fn;
-	}
-
-	/**
-	 * Tasks that should be finished before loading the grid data
-	 */
-	private tasksBeforeLoad: Promise<any>[] = [];
-
-	public registerTask(task: Promise<any>) {
-		this.tasksBeforeLoad.push(task);
-	}
-
-	private request: () => void = () => {
-		throw new NonInitializedError(this.constructor.name);
-	};
-
-	private debounceUpdateGrouping: (lazyLoad?: boolean) => void = () => {
-		throw new NonInitializedError(this.constructor.name);
-	};
-
-	/**
-	 * Loads grid data after resolving all tasks
-	 */
-	public async loadAfterTasks() {
-		Promise.all(this.tasksBeforeLoad.map((promise) => promise.catch(() => undefined)));
-		this.tasksBeforeLoad = [];
-
-		return this.request();
-	}
-
-	private initializeDebounceFunctions() {
-		this.request = debounce(() => {
-			this.grid.reload();
-		}, 500);
-		this.debounceUpdateGrouping = debounce((lazyLoad = false) => {
-			this.updateGroupedData(lazyLoad);
-		}, 100);
-	}
-
-	/**
-	 * Initializes grid groups, summary columns and registers the grid datasource callback
-	 * @param lazyLoad defines if the grid should automatically load data after updating the datasource
-	 */
-	initializeGrouping(lazyLoad: boolean): void {
-		this.initializeDebounceFunctions();
-
-		this.initGroups();
-		this.initSummaryColumns();
-
-		this.originalDatasourceLoadAll = this.grid.datasource.loadAll;
-		this.originalDatasourceLimit = this.grid.datasource.limit;
-		this.grid.datasource.registerGetCallback((data) => this.onGet(data));
-		this.updateGrouping(lazyLoad);
-	}
-
-	private onGet(data: IDictionary) {
-		if (this.isGrouped()) {
-			this.buildGroupedData();
-		}
-
-		return data;
-	}
-
-	private resetFooterVariables(group: ITekGridGroup) {
-		this.summaryColumns.forEach((column) => {
-			group.footer[column.name] = {
-				count: 0,
-				sum: undefined,
-				avg: undefined,
-				min: undefined,
-				max: undefined,
-			};
-		});
-	}
-
-	private initGroups() {
-		this.groups = [];
-		this.groupColumns.forEach((column) => {
-			const newGroup = {
-				column,
-				name: column.name,
-				label: column.label,
-				lastValue: undefined,
-				initialized: false,
-				footer: {},
-			};
-			this.resetFooterVariables(newGroup);
-
-			this.groups.push(newGroup);
-		});
-	}
-
-	getGroupedData(): IDictionary<any>[] {
-		return this.groupedData;
-	}
-
-	private initSummaryColumns() {
-		this.summaryColumns = this.grid.columns.filter((column) => !!column.aggregation && !column.grouped);
-		this.summary = {};
-	}
-
-	/**
-	 * Calls updateGroupedData with debounce
-	 */
-	public updateGrouping(lazyLoad?: boolean) {
-		this.debounceUpdateGrouping(lazyLoad);
-	}
-
-	/**
-	 * Inits summary columns, updates the grid datasource and, if needed, reloads the grid data
-	 */
-	async updateGroupedData(lazyLoad: boolean): Promise<void> {
-		this.initSummaryColumns();
-		this.updateGridDatasource();
-
-		if (!lazyLoad) {
-			await this.loadAfterTasks();
-		}
-
-		if (this.grid.virtualScroll && this.viewUpdateScrollData) {
-			this.viewUpdateScrollData();
-		}
-		if (this.viewUpdateFixedColumns) {
-			this.viewUpdateFixedColumns();
-		}
-	}
-
-	/**
-	 * When using groups, should update the grid datasource order to reflect the group order
-	 * If the grid is not grouped, should not update the datasource order
-	 */
-	private updateGridDatasource() {
-		this.groupedData = [];
-
-		this.groupColumns = this.grid.columns.filter((column) => column.grouped);
-		this.groupColumnNames = this.groupColumns.map((column) => column.name);
-		if (this.isGrouped()) {
-			if (this.groupColumns.length) {
-				const order = this.getOrder(this.groupColumnNames, this.grid.datasource.order);
-				this.grid.datasource.order = order;
-			}
-
-			this.grid.datasource.loadAll = true;
-			return;
-		}
-
-		this.grid.datasource.loadAll = this.originalDatasourceLoadAll!;
-		this.grid.datasource.limit = this.originalDatasourceLimit!;
-	}
-
-	/**
-	 * Returns the order to be used in the grid datasource based on the group column names and the grid order
-	 */
-	private getOrder(groupColumnNames: string[], gridOrder: string[]): string[] {
-		const groupOrderColumns = groupColumnNames.map((column) => `${column}.asc`);
-		const otherOrderColumns = gridOrder.filter((column) => groupColumnNames.indexOf(column.split('.')[0]) === -1);
-
-		return [...groupOrderColumns, ...otherOrderColumns];
-	}
-
-	/**
-	 * Returns the summary data for the group
-	 */
-	public getSummaryData(group: IDictionary<ITekGridSummary>) {
-		const summaryData: IDictionary = {};
-		this.summaryColumns.forEach((column) => {
-			const { aggregation } = column;
-			const currentGroup = group[column.name];
-
-			if (!currentGroup) {
-				summaryData[column.name] = 0;
-				return;
-			}
-
-			if (aggregation === 'COUNT') {
-				summaryData[column.name] = currentGroup.count;
-			} else if (aggregation === 'SUM') {
-				summaryData[column.name] = currentGroup.sum;
-			} else if (aggregation === 'AVG') {
-				if (currentGroup.avg) {
-					summaryData[column.name] = currentGroup.avg;
-				} else if (typeof currentGroup.sum === 'number') {
-					summaryData[column.name] = currentGroup.sum / currentGroup.count;
-				}
-			} else if (aggregation === 'MIN') {
-				summaryData[column.name] = currentGroup.min;
-			} else {
-				// if (aggregation === 'MAX') {
-				summaryData[column.name] = currentGroup.max;
-			}
-		});
-
-		return summaryData;
-	}
-
-	/**
-	 * Adds group footers to the grouped data
-	 */
-	private addGroupFooters(groupIndex: number) {
-		if (this.summaryColumns.length === 0) {
-			return;
-		}
-
-		for (let i = this.groups.length - 1; i >= groupIndex; i -= 1) {
-			if (this.groups[i].initialized) {
-				const groupFooterRow: ITekGridGroupFooter = {
-					groupFooter: true,
-					groupIndex: i,
-					groupHeaders: [],
-					groupLabel: this.groups[i].lastGroupHeaderRow!.groupLabel,
-					groupValue: this.groups[i].lastGroupHeaderRow!.groupValue,
-					...this.getSummaryData(this.groups[i].footer),
-				};
-
-				// add header for outer groups
-				for (let g = 0; g < i; g += 1) {
-					const { lastGroupHeaderRow } = this.groups[g];
-					if (lastGroupHeaderRow) {
-						groupFooterRow.groupHeaders.push(lastGroupHeaderRow);
-					}
-				}
-
-				this.groupedData.push(groupFooterRow);
-			}
-		}
-	}
-
-	private getGroupValue(group: IDictionary<any>, row: IDictionary<any>) {
-		const groupColumn = this.grid.getColumn(group.column.name);
-		const cellsApplied = this.grid.getAppliedConditions({ row, column: groupColumn });
-		if (!isFilledObject(cellsApplied)) {
-			this.grid.reapplyConditions(row);
-		}
-		const groupValue = groupColumn.formatterByRow(row, cellsApplied);
-		return groupValue;
-	}
-
-	private addGroupHeader(row: IDictionary, group: ITekGridGroup, index: number) {
-		const groupValue = this.getGroupValue(group, row) || group.column.groupLabelForEmptyValue;
-		const groupHeaderRow: ITekGridGroupHeader = {
-			group: true,
-			groupRow: row,
-			groupColumnName: group.column.name,
-			groupHeader: true,
-			groupIndex: index,
-			groupLabel: I18n.translate(group.label),
-			groupValue,
-			groupOpened: group.column.groupOpened || this.grid.groupsOpened,
-			groupHeaders: [],
-			children: [],
-		};
-		// add header for outer groups to the added row
-		for (let i = 0; i < index; i += 1) {
-			groupHeaderRow.groupHeaders.push(this.groups[i].lastGroupHeaderRow!);
-		}
-		group.lastGroupHeaderRow = groupHeaderRow;
-		group.initialized = true;
-		this.groupedData.push(groupHeaderRow);
-	}
-
-	private calcSummaryValues(column: TekGridColumn, summary: ITekGridSummary, row: IDictionary) {
-		const rowValue = row[column.name];
-
-		if (isNil(rowValue)) return;
-
-		summary.count += 1;
-
-		if (this.grid.events.calcSummary) {
-			this.grid.calcSummary(column, summary, row);
-			return;
-		}
-
-		if (summary.min === undefined) summary.min = rowValue;
-		if (summary.max === undefined) summary.max = rowValue;
-		summary.min = rowValue < summary.min ? rowValue : summary.min;
-		summary.max = rowValue > summary.max ? rowValue : summary.max;
-
-		if (typeof rowValue === 'number') {
-			summary.sum = (summary.sum || 0) + rowValue;
-		}
-	}
-
-	private calcSummary(row: IDictionary<any>) {
-		if (this.summaryColumns.length === 0) return;
-
-		this.summaryColumns.forEach((column) => {
-			const columnName = column.name;
-			if (isNil(this.summary[columnName])) {
-				this.summary[columnName] = {
-					count: 0,
-					sum: undefined,
-					avg: undefined,
-					min: undefined,
-					max: undefined,
-				};
-			}
-
-			this.calcSummaryValues(column, this.summary[columnName], row);
-
-			this.groups.forEach((group) => {
-				this.calcSummaryValues(column, group.footer[columnName], row);
-			});
-		});
-	}
-
-	private addSummary() {
-		if (this.summaryColumns.length === 0) return;
-
-		const summaryRow = {
-			groupFooter: true,
-			groupSummary: true,
-			...this.getSummaryData(this.summary),
-		};
-
-		this.groupedData.push(summaryRow);
-	}
-
-	/**
-	 * It takes a flat array of data and groups it by the group columns specified in
-	 * the grid.
-	 */
-	buildGroupedData(): void {
-		this.initGroups();
-		this.initSummaryColumns();
-		this.groupedData = [];
-		const data = this.grid.getData();
-
-		data.forEach((row) => {
-			let groupBreak = false;
-			this.groups.forEach((group, index) => {
-				const groupValue = row[group.name];
-				if (group.lastValue !== groupValue || groupBreak) {
-					if (!groupBreak) {
-						this.addGroupFooters(index);
-					}
-					group.lastValue = groupValue;
-
-					this.resetFooterVariables(group);
-					this.addGroupHeader(row, group, index);
-					groupBreak = true;
-				}
-			});
-
-			this.groups.forEach((group) => {
-				group.lastGroupHeaderRow!.children.push(row);
-			});
-
-			this.groupedData.push({
-				...row,
-				groupHeaders: this.groups.map((group) => group.lastGroupHeaderRow).filter(Boolean),
-			});
-
-			this.calcSummary(row);
-		});
-
-		if (this.groupedData.length > 0) {
-			this.addGroupFooters(0);
-
-			if (this.grid.showSummaryTotal) {
-				this.addSummary();
-			}
-		}
-	}
-
-	openGroup(group: IDictionary<any>): void {
-		group.groupOpened = !group.groupOpened;
-		if (this.grid.virtualScroll && this.viewUpdateScrollData) this.viewUpdateScrollData();
-	}
-
-	isItemVisible(row: IDictionary<any>) {
-		return !row.groupHeaders || !row.groupHeaders.length || row.groupHeaders.every((group: any) => group.groupOpened);
-	}
-
-	isGrouped(): boolean {
-		return !!this.groupColumnNames.length || (this.grid.showSummaryTotal && !!this.summaryColumns.length);
-	}
-
-	isColumnSearchable(column: TekGridColumn): boolean {
-		return !this.grid.searchVisibleOnly || column.isVisible || column.grouped;
-	}
-
-	directionalLeft(): void {
-		const { currentRow } = this.grid.datasource;
-		if (currentRow.group && currentRow.groupOpened) {
-			currentRow.groupOpened = false;
-			return;
-		}
-
-		if (this.grid.cellSelection || !currentRow.groupHeaders?.length) return;
-
-		const newCurrentRow = currentRow.groupHeaders[currentRow.groupHeaders.length - 1];
-		this.grid.setCurrentRow(newCurrentRow);
-	}
-
-	directionalRight(): void {
-		const { currentRow } = this.grid.datasource;
-
-		if (!currentRow.group || currentRow.groupOpened) return;
-
-		currentRow.groupOpened = true;
-	}
-}

package/src/components/tek-grid/grouped-data-navigator.ts

@@ -1,66 +0,0 @@
-import { IDictionary } from '@zeedhi/core';
-import { DataNavigator, IDataNavigator, VerticalDirection } from '@zeedhi/common';
-import { ITekGrid } from './interfaces';
-
-export class GroupedDataNavigator implements IDataNavigator {
-	private dataNavigator: DataNavigator;
-
-	protected grid: ITekGrid;
-
-	constructor(grid: ITekGrid) {
-		this.dataNavigator = new DataNavigator(grid);
-		this.grid = grid;
-	}
-
-	public navigatePageUp(): void {
-		this.dataNavigator.navigatePageUp();
-	}
-
-	public navigatePageDown(): void {
-		this.dataNavigator.navigatePageDown();
-	}
-
-	public navigateDatasource(direction: VerticalDirection): void {
-		if (!this.grid.isGrouped()) {
-			this.dataNavigator.navigateDatasource(direction);
-			return;
-		}
-
-		this.navigateGroupedDatasource(direction);
-	}
-
-	private getRowIndex(groupedData: IDictionary[], index?: number) {
-		if (index !== undefined) return index;
-
-		const { currentRow } = this.grid.datasource;
-		return groupedData.findIndex((row) => {
-			if (currentRow.group) {
-				return row.group && row.groupValue === currentRow.groupValue;
-			}
-			const rowKey = this.grid.getRowKey(row);
-			const currentRowKey = this.grid.getRowKey(currentRow);
-			return rowKey && rowKey === currentRowKey;
-		});
-	}
-
-	private navigateGroupedDatasource(direction: VerticalDirection, index?: number): void {
-		const groupedData = this.grid.getGroupedData();
-		const up = direction === 'up';
-
-		if (!groupedData.length || (up && index === -1) || (!up && index === groupedData.length)) return;
-
-		let rowIndex = this.getRowIndex(groupedData, index);
-
-		if (up && rowIndex === -1) rowIndex = groupedData.length;
-
-		const nextIndex = rowIndex + (up ? -1 : 1);
-		const newRow = groupedData[nextIndex];
-
-		if (!newRow || !this.grid.isItemVisible(newRow) || newRow.groupFooter) {
-			this.navigateGroupedDatasource(direction, nextIndex);
-			return;
-		}
-
-		this.grid.setCurrentRow(newRow);
-	}
-}

package/src/components/tek-grid/grouped-data-selector.ts

@@ -1,40 +0,0 @@
-import { IDictionary } from '@zeedhi/core';
-import { DataSelector, IDataSelector, IGrid } from '@zeedhi/common';
-import { IGroupedDataManager } from './interfaces';
-
-export class GroupedDataSelector extends DataSelector implements IDataSelector {
-	protected declare iterable: IGrid & IGroupedDataManager;
-
-	public selectAll(isSelected: boolean) {
-		if (!this.iterable.selectable) return;
-
-		this.iterable.selectionState = { allSelected: isSelected, except: [] };
-		const data = this.getData();
-
-		if (!isSelected) {
-			data.forEach((row: IDictionary) => {
-				const index = this.iterable.selectedRows.indexOf(row);
-				if (index > -1) {
-					this.iterable.selectedRows.splice(index, 1);
-				}
-			});
-			return;
-		}
-
-		data.forEach((row: IDictionary) => {
-			if (this.callDisableSelection(row)) return;
-
-			const key = this.iterable.getRowKey(row);
-			if (key && this.iterable.selectedRows.indexOf(row) === -1) {
-				this.iterable.selectedRows.push(row);
-			}
-		});
-	}
-
-	private getData() {
-		if (this.iterable.isGrouped()) {
-			return this.iterable.getGroupedData();
-		}
-		return this.iterable.getData();
-	}
-}

package/src/components/tek-grid/index.ts

@@ -1,18 +0,0 @@
-export * from '../tek-datasource';
-export * from './tek-grid-toolbar-provider';
-export * from './columns-searcher';
-export * from './dynamic-filter-datasource-factory';
-export * from './filter-helper';
-export * from './grid-filter-button';
-export * from './grouped-data-manager';
-export * from './grouped-data-navigator';
-export * from './interfaces';
-export * from './keymap-grouped';
-export * from './layout-options';
-export * from './tek-grid-column';
-export * from './tek-grid-controller';
-export * from './tek-grid-events';
-export * from './tek-grid';
-export * from './tek-grid-columns-button/tek-grid-columns-button';
-export * from './tek-grid-columns-button/tek-grid-columns-button-controller';
-export * from './grouped-data-selector';