@zeedhi/teknisa-components-common 3.0.0 → 3.0.1

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

@@ -0,0 +1,193 @@
+import { Datasource, DatasourceFactory, IDictionary } from '@zeedhi/core';
+import { GridColumnEditable } from '@zeedhi/common';
+import { IFilterPropsComponent, ITekGridColumn, ITekGridColumnAggregation } from './interfaces';
+import { TekGrid } from './tek-grid';
+
+/**
+ * Base class for TekGrid column
+ */
+export class TekGridColumn extends GridColumnEditable implements ITekGridColumn {
+	/* filter component props */
+	public filterProps: IFilterPropsComponent | IFilterPropsComponent[] = [];
+
+	/* column can be use to filter */
+	public filterable = true;
+
+	/* Index of the column inside filter modal */
+	public filterIndex?: number;
+
+	/* should not consider lookup column on search */
+	public skipLookupSearch = false;
+
+	/* column is grouped */
+	private groupedValue = false;
+
+	/* column group is opened */
+	private groupOpenedValue?: boolean = false;
+
+	/* Value to show when grouped value is empty */
+	public groupLabelForEmptyValue = '';
+
+	/* column has aggregation */
+	private aggregationValue?: ITekGridColumnAggregation;
+
+	/* column is visible */
+	private isVisibleValue = true;
+
+	/**
+	 * Defines if the column should store the componentProps datasource.data in memory
+	 */
+	public storeData = true;
+
+	private grid: TekGrid;
+
+	/* istanbul ignore next */
+	/**
+	 * Creates a new TekGrid Column.
+	 * @param props TekGrid column properties
+	 */
+	constructor(props: ITekGridColumn, grid: TekGrid) {
+		super(props);
+		this.grid = grid;
+		this.isVisible = this.getInitValue('isVisible', props.isVisible, this.isVisible);
+		this.filterProps = this.getInitValue('filterProps', props.filterProps, this.filterProps);
+		this.filterable = this.getInitValue('filterable', props.filterable, this.filterable);
+		this.filterIndex = this.getInitValue('filterIndex', props.filterIndex, this.filterIndex);
+		this.skipLookupSearch = this.getInitValue('skipLookupSearch', props.skipLookupSearch, this.skipLookupSearch);
+		this.grouped = this.getInitValue('grouped', props.grouped, this.grouped);
+		this.groupOpened = this.getInitValue('groupOpened', props.groupOpened, this.groupOpened);
+		this.aggregation = this.getInitValue('aggregation', props.aggregation, this.aggregation);
+		this.groupLabelForEmptyValue = this.getInitValue(
+			'groupLabelForEmptyValue',
+			props.groupLabelForEmptyValue,
+			this.groupLabelForEmptyValue,
+		);
+		this.storeData = this.getInitValue('storeData', props.storeData, this.storeData);
+		this.createAccessors();
+	}
+
+	public async getBatchLookupData(lookupColumn: string, values: any[]): Promise<IDictionary[]> {
+		const batch: IDictionary[] = [];
+		const dataToLookup: any[] = [];
+		values.forEach((value) => {
+			if (this.lookupData[value]) {
+				batch.push(this.lookupData[value]);
+				return;
+			}
+
+			const dataIndex = this.lookupDatasource!.data.findIndex((row) => row[lookupColumn] === value);
+			if (dataIndex !== -1) {
+				this.lookupData[value] = this.lookupDatasource!.data[dataIndex];
+				batch.push(this.lookupData[value]);
+				return;
+			}
+
+			dataToLookup.push(value);
+		});
+
+		if (dataToLookup.length > 0) {
+			await this.lookupFn(lookupColumn, dataToLookup);
+
+			dataToLookup.forEach((value) => {
+				const row = this.lookupData[value];
+				if (row) batch.push(row);
+			});
+		}
+
+		return batch;
+	}
+
+	/**
+	 * Memory search, without changing lookupDatasource
+	 */
+	public async memorySearch(search: string): Promise<any> {
+		if (!this.lookupDatasource) {
+			throw new Error("Can't search in a column that doesn't have a datasource");
+		}
+
+		let { data } = this.lookupDatasource;
+		if (this.storeData) {
+			if (!data.length) {
+				data = await this.lookupDatasource.get();
+			}
+		} else {
+			// datasource without the lookup filters
+			const defaultDs = DatasourceFactory.factory({
+				...this.componentProps.datasource,
+				lazyLoad: true,
+				loadAll: true,
+			});
+			defaultDs.initialize();
+
+			data = await defaultDs.get();
+		}
+
+		const { dataText } = this.componentProps;
+		const searchIn = Array.isArray(dataText) ? dataText : [dataText];
+
+		// get datasource as memory
+		const datasource: Datasource = DatasourceFactory.factory({
+			searchIn,
+			data,
+			type: 'memory',
+			loadAll: true,
+		});
+		datasource.initialize();
+
+		return datasource.setSearch(search);
+	}
+
+	get grouped() {
+		return this.groupedValue;
+	}
+
+	set grouped(value: boolean) {
+		const changed = value !== this.groupedValue;
+		this.groupedValue = value;
+		if (changed) {
+			this.changeGrouping();
+		}
+	}
+
+	get aggregation() {
+		return this.aggregationValue;
+	}
+
+	set aggregation(value: ITekGridColumnAggregation) {
+		const changed = value !== this.aggregationValue;
+		this.aggregationValue = value;
+		if (changed) {
+			this.changeGrouping();
+		}
+	}
+
+	get groupOpened() {
+		return this.groupOpenedValue;
+	}
+
+	set groupOpened(value: boolean | undefined) {
+		const changed = value !== this.groupOpenedValue;
+		this.groupOpenedValue = value;
+		if (changed) {
+			this.changeGrouping();
+		}
+	}
+
+	/* istanbul ignore next */
+	// @ts-ignore
+	get isVisible() {
+		return this.isVisibleValue && !this.grouped;
+	}
+
+	/* istanbul ignore next */
+	set isVisible(value: boolean) {
+		this.isVisibleValue = value;
+	}
+
+	private changeGrouping() {
+		// wait for grid.constructor to be fully executed
+		setTimeout(() => {
+			this.grid.updateGrouping();
+		});
+	}
+}

package/src/components/tek-grid/tek-grid-columns-button/tek-grid-columns-button-controller.ts

@@ -0,0 +1,28 @@
+import { IEventParam } from '@zeedhi/core';
+import { Checkbox, IterableColumnsButtonController } from '@zeedhi/common';
+import { TekGridColumn } from '../tek-grid-column';
+
+export class TekGridColumnsButtonController extends IterableColumnsButtonController {
+	public changeGroupedColumn(column: TekGridColumn, { component, event, element }: IEventParam<Checkbox>) {
+		column.grouped = component.value;
+		if (!column.grouped) {
+			const index = this.iterableComponent.datasource.order.indexOf(`${column.name}.asc`);
+			this.iterableComponent.datasource.order.splice(index, 1);
+		}
+		this.iterableComponent.changeLayout(event, element);
+	}
+
+	public changeAggregationColumn(column: TekGridColumn, { component, event, element }: IEventParam<Checkbox>) {
+		const newValue = component.value || undefined;
+		if (column.aggregation !== newValue) {
+			this.iterableComponent.changeLayout(event, element);
+		}
+		column.aggregation = newValue;
+	}
+
+	public showHideTekColumn(column: TekGridColumn, { component, event, element }: IEventParam<Checkbox>) {
+		if (!component.value && column.grouped) column.grouped = false;
+		column.isVisible = component.value;
+		this.iterableComponent.changeLayout(event, element);
+	}
+}

package/src/components/tek-grid/tek-grid-columns-button/tek-grid-columns-button.ts

@@ -0,0 +1,38 @@
+import { I18n, Loader } from '@zeedhi/core';
+import { IterableColumnsButton } from '@zeedhi/common';
+import { TekGridColumn } from '../tek-grid-column';
+import { ITekGridColumnsButton, columnAggregationValues } from '../interfaces';
+import { TekGridColumnsButtonController } from './tek-grid-columns-button-controller';
+
+/**
+ * Base class for TekGrid Columns Button component
+ */
+export class TekGridColumnsButton extends IterableColumnsButton<TekGridColumn> implements ITekGridColumnsButton {
+	public hideGroups = false;
+
+	constructor(props: ITekGridColumnsButton) {
+		super(props);
+		this.hideGroups = this.getInitValue('hideGroups', props.hideGroups, this.hideGroups);
+		this.createAccessors();
+	}
+
+	public onCreated() {
+		super.onCreated();
+		Loader.addController(`IterableColumnsButtonController_${this.name}`, TekGridColumnsButtonController, [
+			this.iterableComponent,
+		]);
+		this.controller = Loader.getInstance(`IterableColumnsButtonController_${this.name}`);
+	}
+
+	private aggregationDataSet: any[] = [];
+
+	public getAggregationSelectData() {
+		if (!this.aggregationDataSet.length) {
+			this.aggregationDataSet = columnAggregationValues.filter(Boolean).map((value) => ({
+				text: I18n.translate(`TEKGRID_AGGREGATION_${value}`),
+				value,
+			}));
+		}
+		return this.aggregationDataSet;
+	}
+}

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

@@ -0,0 +1,140 @@
+import { IGridEditable } from '@zeedhi/common';
+import { ISupportsToolbar } from './interfaces';
+
+export class TekGridController {
+	private grid!: IGridEditable & ISupportsToolbar;
+
+	public openToolbar = true;
+
+	public constructor(grid: IGridEditable & ISupportsToolbar) {
+		this.grid = grid;
+		this.openToolbar = this.grid.toolbarOpened;
+	}
+
+	public get gridTitle() {
+		return this.grid.title;
+	}
+
+	public get showAddButton() {
+		return this.grid.addButton;
+	}
+
+	public get showDeleteButton() {
+		return this.grid.deleteButton !== 'none';
+	}
+
+	public get showFilterButton() {
+		return this.grid.filterButton;
+	}
+
+	public get showModalFilterProps() {
+		return this.grid.modalFilterProps;
+	}
+
+	public get showSearchInput() {
+		return this.grid.showSearch;
+	}
+
+	public get showToolbar() {
+		return this.openToolbar;
+	}
+
+	public set showToolbar(value: boolean) {
+		this.openToolbar = value;
+	}
+
+	public get toolbarClass(): string {
+		return !this.openToolbar ? 'is-rotated' : '';
+	}
+
+	public get tooltipName() {
+		return !this.openToolbar ? 'TEKGRID_SHOW' : 'TEKGRID_HIDE';
+	}
+
+	public get showReloadButton() {
+		return this.grid.showReload;
+	}
+
+	public get showDivider2() {
+		return (
+			this.showReloadButton &&
+			(this.showLayoutOptionsButton ||
+				this.showColumnsButton ||
+				this.showActionsButton ||
+				this.showExportButton ||
+				this.showSearchInput)
+		);
+	}
+
+	public get showColumnsButton() {
+		return this.grid.columnsButton;
+	}
+
+	public get columnsButtonIgnore() {
+		return this.grid.columnsButtonIgnore;
+	}
+
+	public get showLayoutOptionsButton() {
+		return this.grid.showLayoutOptions;
+	}
+
+	public get showDivider1() {
+		return (
+			(this.showAddButton || this.showDeleteButton) &&
+			(this.showReloadButton ||
+				this.showLayoutOptionsButton ||
+				this.showColumnsButton ||
+				this.showActionsButton ||
+				this.showExportButton ||
+				this.showSearchInput)
+		);
+	}
+
+	public get showActionsButton() {
+		return this.grid.actions.length > 0;
+	}
+
+	public get showExportButton() {
+		return this.grid.showExport;
+	}
+
+	public get showActionAndExportButton() {
+		return (
+			(this.showLayoutOptionsButton || this.showColumnsButton) &&
+			(this.showActionsButton || this.showExportButton || this.showSearchInput)
+		);
+	}
+
+	public get showDivider3() {
+		return (this.showActionsButton || this.showExportButton) && this.showSearchInput;
+	}
+
+	public get isEditing() {
+		return this.grid.editing;
+	}
+
+	public get showEditButtons() {
+		return this.isEditing && this.grid.showEditButtons;
+	}
+
+	public get isNotEditing() {
+		return !this.isEditing;
+	}
+
+	public get disableDeleteButton() {
+		if (this.grid.deleteButton === 'selection') {
+			if (this.grid.selectAllPages) {
+				const { allSelected, except } = this.grid.selectionState;
+				return (allSelected && except.length === this.grid.datasource.total) || (!allSelected && except.length === 0);
+			}
+
+			return this.grid.selectedRows.length === 0;
+		}
+
+		if (this.grid.deleteButton === 'currentRow') {
+			return !this.grid.datasource.currentRow[this.grid.datasource.uniqueKey];
+		}
+
+		return false;
+	}
+}

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

@@ -0,0 +1,105 @@
+import { IDictionary } from '@zeedhi/core';
+import { GridEditableEvents } from '@zeedhi/common';
+import { ITekGrid, ITekGridEvents, ITekGridSummary } from './interfaces';
+import { TekGridColumn } from './tek-grid-column';
+
+export class TekGridEvents extends GridEditableEvents implements ITekGridEvents {
+	protected tekGrid: ITekGrid;
+
+	/**
+	 * Flag to prevent row click
+	 */
+	protected preventRowClick = false;
+
+	protected preventRowDoubleClick = false;
+
+	constructor(tekGrid: ITekGrid) {
+		super(tekGrid);
+		this.tekGrid = tekGrid;
+	}
+
+	calcSummary(column: TekGridColumn, summary: ITekGridSummary, row: IDictionary): void {
+		this.tekGrid.callEvent('calcSummary', {
+			component: this.tekGrid,
+			column,
+			columnName: column.name,
+			summary,
+			row,
+			rowValue: row[column.name],
+		});
+	}
+
+	public rowDoubleClick(row: IDictionary<any>, event: Event, element: HTMLElement) {
+		if (!this.preventRowDoubleClick) {
+			this.tekGrid.datasource.currentRow = row;
+
+			this.tekGrid.callEvent('rowDoubleClick', {
+				event,
+				element,
+				row,
+				component: this.tekGrid,
+				column: undefined,
+			});
+		}
+		this.preventRowDoubleClick = false;
+	}
+
+	/**
+	 * Dispatches group row click event
+	 * @param row Grid row
+	 * @param event DOM event
+	 * @param element DOM Element
+	 */
+	public groupRowClick(row: IDictionary<any>, event: Event, element: HTMLElement) {
+		if (!this.preventRowClick) {
+			this.tekGrid.callEvent('groupRowClick', {
+				event,
+				element,
+				row,
+				component: this.tekGrid,
+				column: undefined,
+			});
+		}
+		this.preventRowClick = false;
+	}
+
+	public groupRowDoubleClick(row: IDictionary<any>, event: Event, element: HTMLElement) {
+		if (!this.preventRowDoubleClick) {
+			this.tekGrid.callEvent('groupRowDoubleClick', {
+				event,
+				element,
+				row,
+				component: this.tekGrid,
+				column: undefined,
+			});
+		}
+		this.preventRowDoubleClick = false;
+	}
+
+	/**
+	 * Dispatches group select/unselect event
+	 * @param row Group row
+	 * @param isSelected Row is selected
+	 * @param event DOM event
+	 * @param element DOM Element
+	 */
+	public selectGroupClick(row: IDictionary<any>, isSelected: boolean, event: Event, element: HTMLElement) {
+		if (isSelected) {
+			this.tekGrid.callEvent('groupSelected', {
+				event,
+				element,
+				row,
+				component: this.tekGrid,
+				column: undefined,
+			});
+		} else {
+			this.tekGrid.callEvent('groupUnselected', {
+				event,
+				element,
+				row,
+				component: this.tekGrid,
+				column: undefined,
+			});
+		}
+	}
+}

package/src/components/tek-grid/tek-grid-toolbar-provider/export-options/button-option.ts

@@ -0,0 +1,26 @@
+import { IComponent } from '@zeedhi/common';
+import { IExportable, ITekGridExportConfig } from '../../interfaces';
+import { IExportOption } from './interfaces';
+
+export class ButtonOption implements IExportOption {
+	private config: ITekGridExportConfig;
+
+	constructor(config: ITekGridExportConfig) {
+		this.config = config;
+	}
+
+	buildComponent(grid: IComponent & IExportable) {
+		const { type, label, portrait = true, iconName } = this.config;
+		const orientation = portrait ? 'portrait' : 'landscape';
+		return {
+			label,
+			iconName,
+			name: `${grid.name}_export_${type}_${orientation}`,
+			component: 'ZdButton',
+			flat: true,
+			events: {
+				click: () => grid.getReport(type, portrait) as any,
+			},
+		};
+	}
+}

package/src/components/tek-grid/tek-grid-toolbar-provider/export-options/index.ts

@@ -0,0 +1,3 @@
+export * from './button-option';
+export * from './multi-option';
+export * from './interfaces';

package/src/components/tek-grid/tek-grid-toolbar-provider/export-options/interfaces.ts

@@ -0,0 +1,6 @@
+import { IComponent, IComponentRender } from '@zeedhi/common';
+import { IExportable } from '../../interfaces';
+
+export interface IExportOption {
+	buildComponent: (grid: IComponent & IExportable) => IComponentRender;
+}

package/src/components/tek-grid/tek-grid-toolbar-provider/export-options/multi-option.ts

@@ -0,0 +1,85 @@
+import { IButton, IComponent, IDivider, IRow, IText, ITooltip } from '@zeedhi/common';
+import { IExportable, ITekGridExportConfig, MultiOptionParams } from '../../interfaces';
+import { IExportOption } from './interfaces';
+
+export class MultiOption implements IExportOption {
+	private config: ITekGridExportConfig;
+
+	constructor(config: ITekGridExportConfig) {
+		this.config = config;
+	}
+
+	private formatName(id: string, type: string, grid: IComponent & IExportable) {
+		return `${grid.name}_export_${type}_${id}`;
+	}
+
+	private buildTooltip(option: MultiOptionParams, type: string, grid: IComponent & IExportable): ITooltip {
+		const { label } = option;
+		return {
+			name: this.formatName(`tooltip_${label}`, type, grid),
+			component: 'ZdTooltip',
+			bottom: true,
+			label,
+			children: [],
+		};
+	}
+
+	private buildButton(option: MultiOptionParams, type: string, grid: IComponent & IExportable): IButton {
+		const { cssClass, label, iconName, reportParams } = option;
+		const { portrait: optionPortrait, rowObj } = reportParams || {};
+
+		return {
+			name: this.formatName(`button_${label}`, type, grid),
+			component: 'ZdButton',
+			cssClass,
+			icon: true,
+			iconName,
+			events: {
+				click: () => grid.getReport(type, optionPortrait, rowObj) as any,
+			},
+		};
+	}
+
+	private buildDivider(option: MultiOptionParams, type: string, grid: IComponent & IExportable): IDivider {
+		const { label } = option;
+
+		return {
+			name: this.formatName(`divider_${label}`, type, grid),
+			component: 'ZdDivider',
+			cssClass: 'zd-my-1',
+			vertical: true,
+		};
+	}
+
+	buildComponent(grid: IComponent & IExportable) {
+		const { type, label, multiOption } = this.config;
+
+		const optionComponents = multiOption!.flatMap((option) => [
+			{
+				...this.buildTooltip(option, type, grid),
+				children: [this.buildButton(option, type, grid)],
+			},
+			this.buildDivider(option, type, grid),
+		]);
+
+		optionComponents.pop();
+
+		const text: IText = {
+			name: this.formatName('text', type, grid),
+			component: 'ZdText',
+			cssClass: 'zd-display-flex zd-align-center zd-flex-grow-1 tek-grid-export-multioption-text',
+			events: {
+				click: ({ event }) => event?.stopPropagation(),
+			},
+			text: label || '',
+		};
+		const result: IRow = {
+			name: this.formatName('row', type, grid),
+			component: 'ZdRow',
+			cssClass: 'zd-display-flex zd-ma-0 zd-py-0 zd-gap-x-1 tek-grid-export-multioption-row',
+			children: [text, ...optionComponents],
+		};
+
+		return result;
+	}
+}

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

@@ -0,0 +1,2 @@
+export * from './export-options';
+export * from './tek-grid-toolbar-provider';