@zeedhi/teknisa-components-common 3.1.0 → 3.3.0

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

@@ -1,329 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,248 +0,0 @@
-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),
-				});
-			}
-		});
-	}
-}