@zeedhi/teknisa-components-common 3.0.0 → 3.0.1

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

@@ -0,0 +1,329 @@
+import { Datasource, IDictionary, IEvent, IEventParam } from '@zeedhi/core';
+import {
+	EventDef,
+	GridEventsProp,
+	IButton,
+	IComponent,
+	IComponentEvents,
+	IComponentRender,
+	IGridColumnEditable,
+	IGridEditable,
+	IGridEditableEvents,
+	IGridEditableProps,
+	IGridEvent,
+	IIterableColumnsButton,
+	IModal,
+	Iterable,
+} from '@zeedhi/common';
+import { IDynamicFilterItem } from '../tek-datasource/interfaces';
+import { TekGridColumn } from './tek-grid-column';
+
+export interface IModalFilterProps extends IModal {
+	height?: string;
+	maxHeight?: string;
+}
+
+export interface ITekGridLayoutColumn {
+	name: string;
+	width?: string;
+	minWidth?: string;
+	maxWidth?: string;
+	isVisible?: boolean;
+	fixed?: boolean;
+	grouped?: boolean;
+	aggregation?: ITekGridColumnAggregation;
+	label?: string;
+	align?: 'left' | 'right' | 'center';
+	groupOpened?: boolean;
+	filterHelperValue?: string | IDictionary<any>;
+}
+
+export interface ITekGridLayout {
+	name: string;
+	gridWidth?: string;
+	columns?: ITekGridLayoutColumn[];
+	order?: string[];
+	dynamicFilter?: IDictionary<IDynamicFilterItem[]>;
+	filter?: IDictionary<any>;
+}
+
+export interface ITekGridLayoutInfo {
+	currentLayoutName?: string;
+	layouts?: IDictionary<ITekGridLayout>;
+}
+
+export interface ITekGridLayoutEventParams extends IEventParam<ITekGrid> {
+	layouts: ITekGridLayoutInfo;
+}
+
+export interface ITekGridSummary {
+	sum: any;
+	avg: any;
+	count: number;
+	min: any;
+	max: any;
+}
+
+export interface ITekGridCalcSummaryEventParams extends IEventParam<ITekGrid> {
+	summary: ITekGridSummary;
+	columnName: string;
+	rowValue: IDictionary<any>;
+}
+
+export interface ITekGridProps extends IGridEditableProps, Partial<ISupportsToolbar>, Partial<IExportable> {
+	events?: TekGridEventsProp;
+	groupsOpened?: boolean;
+	showSummaryTotal?: boolean;
+	mainGrid?: boolean;
+}
+
+export interface ITekGrid
+	extends IGridEditable<TekGridColumn>,
+		ITekGridEvents,
+		ISupportsToolbar,
+		IExportable,
+		IGroupedDataManager {
+	events: TekGridEventsProp;
+	groupsOpened: boolean;
+	showSummaryTotal: boolean;
+	mainGrid: boolean;
+	columnHasFilter: (columnName: string) => boolean;
+}
+
+export interface ISupportsToolbar {
+	actions: IComponentRender[];
+	addButton: boolean;
+	columnsButton: boolean;
+	columnsButtonIgnore: string[];
+	deleteButton: 'none' | 'currentRow' | 'selection';
+	showEditButtons: boolean;
+	filterButton: boolean;
+	showSearch: boolean;
+	showLayoutOptions: boolean;
+	title: string;
+	showExport: boolean;
+	showReload: boolean;
+	exportConfig: ITekGridExportConfig[];
+	exportActions?: IComponentRender[];
+	toolbarOpened: boolean;
+	columnFilterButton: boolean;
+	modalFilterProps: IModalFilterProps;
+	showCheckboxAllFilter: boolean;
+	defaultFilter: IDictionary;
+	editNewRowsOnly: boolean;
+}
+
+export interface IExportable {
+	reportTitle: string;
+	xlsDefaultType?: string;
+	getReport(type: string, portrait?: boolean, rowObj?: any): Promise<Window | null>;
+}
+
+export type IAsyncEvent<T> = (event: T) => Promise<any>;
+
+export interface TekGridEventsProp<
+	T = IGridEvent | IEventParam<any> | ITekGridLayoutEventParams | ITekGridCalcSummaryEventParams,
+> extends GridEventsProp<T> {
+	addClick?: EventDef<T>;
+	afterCancel?: EventDef<T>;
+	afterDelete?: EventDef<T>;
+	afterSave?: EventDef<T>;
+	beforeApplyFilter?: EventDef<T>;
+	beforeCancel?: EventDef<T>;
+	beforeDelete?: EventDef<T>;
+	beforeSave?: EventDef<T>;
+	calcSummary?: EventDef<T>;
+	filterClick?: EventDef<T>;
+	loadLayouts?: EventDef<T, IAsyncEvent<T>>;
+	saveLayouts?: EventDef<T>;
+	groupRowClick?: EventDef<T>;
+	groupSelect?: EventDef<T>;
+	groupUnselect?: EventDef<T>;
+	beforeReload?: EventDef<T>;
+}
+
+export type MultiOptionParams = {
+	iconName: string;
+	label: string;
+	cssClass?: string;
+	reportParams?: { portrait?: boolean; rowObj?: any };
+};
+
+export interface ITekGridExportConfig {
+	type: string;
+	portrait?: boolean;
+	label?: string;
+	iconName?: string;
+	multiOption?: MultiOptionParams[];
+}
+
+export interface ITekGridEvents extends IGridEditableEvents {
+	rowDoubleClick(row: IDictionary<any>, event: Event, element?: HTMLElement): void;
+	groupRowClick(row: IDictionary<any>, event: Event, element?: HTMLElement): void;
+	groupRowDoubleClick(row: IDictionary<any>, event: Event, element?: HTMLElement): void;
+	selectGroupClick(row: IDictionary<any>, isSelected: boolean, event: Event, element?: HTMLElement): void;
+	calcSummary(column: TekGridColumn, summary: ITekGridSummary, row: IDictionary): void;
+}
+
+export type IFilterRelation = 'AND' | 'OR';
+
+export type IFilterOperation =
+	| 'CONTAINS'
+	| 'NOT_CONTAINS'
+	| 'EQUALS'
+	| 'NOT_EQUALS'
+	| 'GREATER_THAN'
+	| 'LESS_THAN'
+	| 'GREATER_THAN_EQUALS'
+	| 'LESS_THAN_EQUALS'
+	| 'IN'
+	| 'NOT_IN'
+	| 'BETWEEN';
+
+export interface IFilterPropsComponent extends IComponent {
+	relation?: IFilterRelation;
+	operation?: IFilterOperation;
+	helperOptions?: string[];
+	helperValue?: string;
+}
+
+type Narrowable = string | number | boolean | symbol | object | void | null | undefined;
+const tuple = <T extends Narrowable[]>(...args: T) => args;
+export const columnAggregationValues = tuple('SUM', 'MIN', 'MAX', 'AVG', 'COUNT', undefined);
+
+export type ITekGridColumnAggregation = (typeof columnAggregationValues)[number];
+
+export interface ITekGridColumn extends IGridColumnEditable {
+	filterProps?: IFilterPropsComponent | IFilterPropsComponent[];
+	filterable?: boolean;
+	filterIndex?: number;
+	skipLookupSearch?: boolean;
+	grouped?: boolean;
+	aggregation?: ITekGridColumnAggregation;
+	groupOpened?: boolean;
+	groupLabelForEmptyValue?: string;
+}
+
+export interface IColumnsSearcher {
+	searchColumn(columns: ITekGridColumn[], search: string): Promise<IDictionary<(string | number)[]>>;
+}
+
+export interface IGroupedDataManager {
+	initializeGrouping(lazyLoad: boolean): void;
+	updateGrouping: (lazyLoad?: boolean) => void;
+	updateGroupedData(lazyLoad: boolean): Promise<void>;
+	buildGroupedData(): void;
+	openGroup(group: IDictionary<any>): void;
+	isItemVisible(row: IDictionary<any>): any;
+	isGrouped(): boolean;
+	isColumnSearchable(column: TekGridColumn): boolean;
+	getGroupedData(): IDictionary<any>[];
+	directionalLeft(param: IEventParam<any>): void;
+	directionalRight(param: IEventParam<any>): void;
+	loadAfterTasks(): Promise<void>;
+	registerTask(task: Promise<any>): void;
+	setViewUpdateFixedColumns(fn: () => void): void;
+	setViewUpdateScrollData(fn: () => void): void;
+}
+
+export interface ITekGridGroupHeader {
+	group: boolean;
+	groupRow: IDictionary;
+	groupColumnName: string;
+	groupHeader: boolean;
+	groupIndex: number;
+	groupLabel: string;
+	groupValue: any;
+	groupOpened: boolean;
+	groupHeaders: ITekGridGroupHeader[]; // parent group headers
+	children: IDictionary<any>[];
+}
+
+export interface ITekGridGroupFooter {
+	groupFooter: boolean;
+	groupIndex: number;
+	groupHeaders: ITekGridGroupHeader[];
+	groupLabel: string;
+	groupValue: any;
+	[key: string]: any;
+}
+
+export interface ITekGridFooter {
+	[key: string]: ITekGridSummary;
+}
+
+export interface ITekGridGroup {
+	column: ITekGridColumn;
+	name: string;
+	label: string;
+	lastValue: any;
+	footer: ITekGridFooter;
+	initialized: boolean;
+	lastGroupHeaderRow?: ITekGridGroupHeader;
+}
+
+export interface ITekGridAtoms {
+	TITLE: string;
+	HIDE_BUTTON: string;
+	ADD_BUTTON: string;
+	DELETE_BUTTON: string;
+	REFRESH_BUTTON: string;
+	COLUMNS_BUTTON: string;
+	LAYOUT_BUTTON: string;
+	EXPORT_BUTTON: string;
+	ACTIONS_BUTTON: string;
+	SAVE_BUTTON: string;
+	CANCEL_BUTTON: string;
+	SEARCH: string;
+	FILTER_BUTTON: string;
+	FILTER_MODAL: string;
+	FILTER_FORM: string;
+	EXPORT_DROPDOWN: string;
+	ACTIONS_DROPDOWN: string;
+	HIDE_TOOLTIP: string;
+	TOOLBAR_DIV: string;
+	NOT_EDITING_SPAN: string;
+	ADD_TOOLTIP: string;
+	DELETE_TOOLTIP: string;
+	DIVIDER1: string;
+	REFRESH_TOOLTIP: string;
+	DIVIDER2: string;
+	COLUMNS_TOOLTIP: string;
+	DIVIDER_ACTIONS: string;
+	DIVIDER3: string;
+	FILTER_TOOLTIP: string;
+}
+
+export interface ITekGridToolbarProvider {
+	getProperties(): IComponentRender[];
+	getAtomInstance<T>(key: keyof ITekGridAtoms): T;
+	getAtomName(key: keyof ITekGridAtoms): string;
+	// getFilterInputs(columnName?: string): Input[];
+}
+
+export interface IDynamicFilterDatasourceFactory {
+	factory(options: IDictionary<boolean>): Datasource;
+}
+
+export type ITekGridLayoutOptionsEvent<T> = (event: T) => Promise<any>;
+
+export interface ITekGridLayoutOptionsEvents<T = IEventParam<any> | ITekGridLayoutEventParams>
+	extends IComponentEvents<T> {
+	loadLayouts?: IAsyncEvent<T>;
+	saveLayouts?: IEvent<T>;
+	[key: string]: any;
+}
+
+export interface ITekGridLayoutOptions extends IComponentRender {
+	events?: ITekGridLayoutOptionsEvents;
+}
+
+export interface ITekGridFilterButton extends IButton {
+	gridName?: string;
+	grid?: Iterable & ISupportsToolbar;
+	showCheckboxAll?: boolean;
+}
+
+export interface ITekGridColumnsButton extends IIterableColumnsButton {
+	hideGroups?: boolean;
+}

package/src/components/tek-grid/keymap-grouped.ts

@@ -0,0 +1,20 @@
+import { IKeyMap } from '@zeedhi/core';
+import { Component, IKeyMapConfig } from '@zeedhi/common';
+import { IGroupedDataManager } from './interfaces';
+
+export class KeyMapGrouped implements IKeyMapConfig<IGroupedDataManager> {
+	getMap(instance: Component & IGroupedDataManager): IKeyMap {
+		return {
+			left: {
+				event: instance.directionalLeft.bind(instance),
+				stop: true,
+				active: true,
+			},
+			right: {
+				event: instance.directionalRight.bind(instance),
+				stop: true,
+				active: true,
+			},
+		};
+	}
+}

package/src/components/tek-grid/layout-options.ts

@@ -0,0 +1,248 @@
+import { Config, Http, IDictionary } from '@zeedhi/core';
+import { Column, ComponentRender, Iterable } from '@zeedhi/common';
+import { ITekConfig } from '../../utils/config/config';
+import {
+	ITekGridLayout,
+	ITekGridLayoutColumn,
+	ITekGridLayoutInfo,
+	ITekGridLayoutOptions,
+	ITekGridLayoutOptionsEvents,
+} from './interfaces';
+import { IDynamicFilterItem } from '../tek-datasource/interfaces';
+import { TekGrid } from './tek-grid';
+import { TekGridColumn } from './tek-grid-column';
+
+export class TekGridLayoutOptions extends ComponentRender implements ITekGridLayoutOptions {
+	public currentLayoutName = '';
+
+	public layoutEdited = false;
+
+	public layouts: IDictionary<ITekGridLayout> = {};
+
+	public layoutNames: string[] = [];
+
+	public viewApplyLayout?: (layout?: ITekGridLayout) => void;
+
+	public viewGetCurrentLayout?: (layoutName: string) => {
+		name: string;
+		gridWidth: any;
+		order: any;
+		filter: any;
+		dynamicFilter: any;
+		columns: any;
+	};
+
+	public originalColumnProps: ITekGridLayoutColumn[] = [];
+
+	public originalDatasourceOrder: string[] = [];
+
+	public originalDatasourceDynamicFilter: IDictionary<IDynamicFilterItem[]> = {};
+
+	public originalDatasourceFilter: IDictionary<any> = {};
+
+	/* Grid events */
+	public declare events: ITekGridLayoutOptionsEvents;
+
+	public grid!: Iterable<TekGridColumn>;
+
+	private getParentGrid() {
+		let { parent } = this;
+		while (parent && !(parent.constructor === Iterable || parent.constructor.prototype instanceof Iterable)) {
+			parent = parent.parent;
+		}
+		return parent as Iterable<TekGridColumn>;
+	}
+
+	public async onMounted(element: HTMLElement) {
+		super.onMounted(element);
+		this.grid = this.getParentGrid();
+
+		this.originalDatasourceOrder = [...this.grid.datasource.order];
+		this.originalDatasourceDynamicFilter = {
+			...(this.grid.datasource as any).dynamicFilter,
+		};
+		this.originalDatasourceFilter = { ...this.grid.datasource.filter };
+		this.originalColumnProps = this.grid.columns.map((column: any) => ({
+			name: column.name,
+			label: column.label,
+			align: column.align,
+			isVisible: column.isVisible,
+			minWidth: column.minWidth,
+			maxWidth: column.maxWidth,
+			width: column.width,
+			fixed: column.fixed,
+			grouped: column.grouped,
+			groupOpened: column.groupOpened,
+			aggregation: column.aggregation,
+			filterHelperValue: this.getHelperValue(column),
+		}));
+
+		let layoutsInfo: ITekGridLayoutInfo = {};
+
+		const promise = this.loadLayoutsInfo();
+
+		if (this.grid instanceof TekGrid) {
+			this.grid.registerTask(promise);
+		}
+
+		layoutsInfo = await promise;
+		if (layoutsInfo.layouts) {
+			this.layouts = layoutsInfo.layouts;
+			this.layoutNames = Object.keys(this.layouts);
+			if (layoutsInfo.currentLayoutName) {
+				this.currentLayoutName = layoutsInfo.currentLayoutName;
+				this.applyLayout(this.currentLayoutName, false);
+			}
+		}
+	}
+
+	protected async loadLayoutsInfo() {
+		const eventFunction = this.events.loadLayouts || this.grid.events.loadLayouts;
+
+		if (eventFunction && typeof eventFunction === 'function') {
+			return eventFunction({ component: this.grid });
+		}
+
+		if ((Config as ITekConfig).loadGridLayoutsEndPoint) {
+			const route = (Config as ITekConfig).loadGridLayoutsEndPoint!;
+			const response = await Http.get(`${route}?id=${this.grid.name}`);
+			const responseData = response.data.data;
+			return responseData.length && responseData[0] ? responseData[0].layouts : responseData.layouts || {};
+		}
+
+		return JSON.parse(localStorage.getItem(this.grid.name) || '{}');
+	}
+
+	public getHelperValue(column: Column) {
+		if (column instanceof TekGridColumn) {
+			if (!Array.isArray(column.filterProps)) return column.filterProps.helperValue;
+			return column.filterProps.map((prop) => prop.helperValue);
+		}
+		return '';
+	}
+
+	public newLayout(layout: ITekGridLayout) {
+		this.fixColumns(layout);
+		this.currentLayoutName = layout.name;
+		this.addLayout(layout);
+		this.layoutEdited = false;
+	}
+
+	public addLayout(layout: ITekGridLayout) {
+		this.fixColumns(layout);
+		this.layouts[layout.name] = layout;
+
+		this.saveLayouts();
+	}
+
+	public discardChanges() {
+		const layoutSelected = this.layouts[this.currentLayoutName];
+
+		if (this.viewApplyLayout) {
+			this.viewApplyLayout(layoutSelected);
+		}
+
+		this.layoutEdited = false;
+	}
+
+	public applyLayout(name: string, save = true) {
+		this.currentLayoutName = name;
+		const layoutSelected = this.layouts[name];
+
+		if (this.viewApplyLayout) {
+			this.viewApplyLayout(layoutSelected);
+		}
+
+		if (save) {
+			this.saveLayouts();
+		}
+
+		this.layoutEdited = false;
+	}
+
+	private saveLayouts() {
+		this.layoutNames = Object.keys(this.layouts);
+
+		const layoutInfo: ITekGridLayoutInfo = {
+			currentLayoutName: this.currentLayoutName,
+			layouts: this.layouts,
+		};
+
+		const eventFunction = this.events.saveLayouts || this.grid.events.saveLayouts;
+		if (eventFunction && typeof eventFunction === 'function') {
+			eventFunction({ component: this.grid, layouts: layoutInfo });
+		} else if ((Config as ITekConfig).saveGridLayoutsEndPoint) {
+			const route = (Config as ITekConfig).saveGridLayoutsEndPoint!;
+			Http.post(route, { id: this.grid.name, layouts: layoutInfo });
+		} else {
+			localStorage.setItem(this.grid.name, JSON.stringify(layoutInfo));
+		}
+	}
+
+	public deleteLayout(name: string) {
+		if (this.currentLayoutName === name) {
+			this.currentLayoutName = '';
+			this.applyLayout(this.currentLayoutName, false);
+		}
+
+		delete this.layouts[name];
+
+		this.saveLayouts();
+	}
+
+	public updateLayout(name: string, layout: ITekGridLayout) {
+		this.fixColumns(layout);
+		this.currentLayoutName = name;
+		layout.name = name;
+		this.layouts[layout.name] = layout;
+
+		this.saveLayouts();
+
+		this.layoutEdited = false;
+	}
+
+	public updateDefaultLayout(layout: ITekGridLayout) {
+		this.fixColumns(layout);
+		this.originalDatasourceOrder = layout.order || this.originalDatasourceOrder;
+		this.originalDatasourceDynamicFilter = layout.dynamicFilter || this.originalDatasourceDynamicFilter;
+		this.originalDatasourceFilter = layout.filter || this.originalDatasourceFilter;
+		if (layout.columns) {
+			this.originalColumnProps = layout.columns.map((column: any) => {
+				const originalColumnIdx = this.originalColumnProps.findIndex((item) => item.name === column.name);
+				const originalColumn = originalColumnIdx !== -1 ? this.originalColumnProps[originalColumnIdx] : {};
+				return {
+					...originalColumn,
+					...column,
+				};
+			});
+		}
+
+		if (this.currentLayoutName === '') {
+			this.applyLayout(this.currentLayoutName, false);
+		}
+	}
+
+	private fixColumns(layout: ITekGridLayout) {
+		const hasLayoutColumns = !!layout.columns;
+		layout.columns = layout.columns || [];
+		const layoutColumnNames = layout.columns.map((layoutColumn) => layoutColumn.name);
+		this.grid.columns.forEach((gridColumn: any) => {
+			if (!hasLayoutColumns || layoutColumnNames.indexOf(gridColumn.name) === -1) {
+				layout.columns!.push({
+					name: gridColumn.name,
+					label: gridColumn.label,
+					align: gridColumn.align,
+					isVisible: !hasLayoutColumns && gridColumn.isVisible,
+					width: gridColumn.width,
+					minWidth: gridColumn.minWidth,
+					maxWidth: gridColumn.maxWidth,
+					fixed: gridColumn.fixed,
+					grouped: gridColumn.grouped,
+					groupOpened: gridColumn.groupOpened,
+					aggregation: gridColumn.aggregation,
+					filterHelperValue: this.getHelperValue(gridColumn),
+				});
+			}
+		});
+	}
+}