@zeedhi/teknisa-components-common 3.1.0 → 3.2.0

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

@@ -1,193 +0,0 @@
-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-expect-error
-	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

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

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

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

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

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

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

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

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

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

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