@zeedhi/teknisa-components-common 3.0.0 → 3.0.1

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

@@ -0,0 +1,448 @@
+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-selector.ts

@@ -0,0 +1,40 @@
+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/grouped-view-navigator.ts

@@ -0,0 +1,84 @@
+import { IEventParam, IDictionary } from '@zeedhi/core';
+import { Direction, IViewNavigator, ViewNavigator } from '@zeedhi/common';
+import { ITekGrid } from './interfaces';
+
+export class GroupedViewNavigator implements IViewNavigator {
+	private viewNavigator: ViewNavigator;
+
+	protected grid: ITekGrid;
+
+	constructor(iterable: ITekGrid) {
+		this.viewNavigator = new ViewNavigator();
+		this.grid = iterable;
+	}
+
+	navigateLeft(param: IEventParam<any>): void {
+		this.viewNavigator.navigateLeft(param);
+	}
+
+	navigateRight(param: IEventParam<any>): void {
+		this.viewNavigator.navigateRight(param);
+	}
+
+	setViewNavigate(viewNavigate: (direction: Direction, event?: Event) => void): void {
+		this.viewNavigator.setViewNavigate(viewNavigate);
+	}
+
+	private getRowIndex(groupedData: IDictionary[], index?: number) {
+		if (index) 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;
+		});
+	}
+
+	public navigateUp(index?: number) {
+		if (!this.grid.isGrouped() || this.grid.cellSelection) {
+			this.viewNavigator.navigateUp();
+			return;
+		}
+		const groupedData = this.grid.getGroupedData();
+
+		if (!groupedData.length || index === -1) return;
+
+		let rowIndex: number = this.getRowIndex(groupedData, index);
+
+		if (rowIndex === -1) rowIndex = groupedData.length;
+
+		const newRow = groupedData[rowIndex - 1];
+
+		if (!newRow || !this.grid.isItemVisible(newRow) || newRow.groupFooter) {
+			this.navigateUp(rowIndex - 1);
+			return;
+		}
+
+		this.grid.setCurrentRow(newRow);
+	}
+
+	public navigateDown(index?: number) {
+		if (!this.grid.isGrouped() || this.grid.cellSelection) {
+			this.viewNavigator.navigateDown();
+			return;
+		}
+		const groupedData = this.grid.getGroupedData();
+
+		if (!groupedData.length || index === groupedData.length) return;
+
+		const rowIndex = this.getRowIndex(groupedData, index);
+
+		const newRow = groupedData[rowIndex + 1];
+
+		if (!newRow || !this.grid.isItemVisible(newRow) || newRow.groupFooter) {
+			this.navigateDown(rowIndex + 1);
+			return;
+		}
+
+		this.grid.setCurrentRow(newRow);
+	}
+}

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

@@ -0,0 +1,18 @@
+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-view-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';