@zeedhi/common 1.115.0 → 3.0.1

package/src/components/zd-grid/data-navigator.ts

@@ -0,0 +1,73 @@
+import { Direction, IDataNavigator, IGrid, IIterableTable } from './interfaces';
+
+export class DataNavigator implements IDataNavigator {
+	protected iterable: IGrid & IIterableTable;
+
+	constructor(iterable: IGrid & IIterableTable) {
+		this.iterable = iterable;
+	}
+
+	public navigateDatasource(direction: Direction) {
+		const { uniqueKey, currentRow } = this.iterable.datasource;
+		const data = this.iterable.getData();
+		const rowIndex = data.findIndex((row) => row[uniqueKey] === currentRow[uniqueKey]);
+
+		if (rowIndex === -1) {
+			return this.navigateInitial(direction);
+		}
+
+		if (direction === 'up' && rowIndex === 0) {
+			return this.navigatePageDown();
+		}
+
+		if (direction === 'down' && rowIndex === data.length - 1) {
+			return this.navigatePageUp();
+		}
+
+		return this.navigateCurrentRow(direction, rowIndex);
+	}
+
+	private navigateFirst() {
+		const data = this.iterable.getData();
+		const currentRow = data[0];
+		const currentColumn = this.iterable.columns[0];
+		this.iterable.selectCell(currentRow, currentColumn);
+	}
+
+	private navigateLast() {
+		const data = this.iterable.getData();
+		const currentRow = data[data.length - 1];
+		const currentColumn = this.iterable.columns[0];
+		this.iterable.selectCell(currentRow, currentColumn);
+	}
+
+	private navigateInitial(direction: Direction) {
+		if (direction === 'up') {
+			this.navigateLast();
+			return;
+		}
+
+		this.navigateFirst();
+	}
+
+	public navigatePageDown() {
+		const page = this.iterable.getPage();
+		if (page > 1) {
+			this.iterable.setPage(page - 1);
+		}
+	}
+
+	public navigatePageUp() {
+		const page = this.iterable.getPage();
+		if (page < this.iterable.getLastPage()) {
+			this.iterable.setPage(page + 1);
+		}
+	}
+
+	private navigateCurrentRow(direction: Direction, rowIndex: number) {
+		const addIndex = direction === 'up' ? -1 : 1;
+		const data = this.iterable.getData();
+		const row = data[rowIndex + addIndex];
+		this.iterable.setCurrentRow(row);
+	}
+}

package/src/components/zd-grid/data-selector.ts

@@ -0,0 +1,149 @@
+import { IDictionary } from '@zeedhi/core';
+import { IDataSelector, IGrid } from './interfaces';
+
+export class DataSelector implements IDataSelector {
+	protected iterable: IGrid;
+
+	constructor(iterable: IGrid) {
+		this.iterable = iterable;
+	}
+
+	public selectAll(isSelected: boolean) {
+		if (!this.iterable.selectable) return;
+
+		this.iterable.selectionState = { allSelected: isSelected, except: [] };
+		const data = this.iterable.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);
+			}
+		});
+	}
+
+	public toggleRow(row: IDictionary) {
+		// array that references the selected rows
+		let arrSelection;
+
+		if (this.iterable.selectAllPages) {
+			arrSelection = this.iterable.selectionState.except;
+		} else {
+			arrSelection = this.iterable.selectedRows;
+		}
+
+		const rowKey = this.iterable.getRowKey(row);
+		const index = arrSelection.findIndex((selectedRow) => this.iterable.getRowKey(selectedRow) === rowKey);
+		const isSelected = index !== -1;
+
+		if (!isSelected) {
+			arrSelection.push(row);
+			return;
+		}
+
+		if (isSelected) {
+			arrSelection.splice(index, 1);
+		}
+	}
+
+	public selectRow(row: IDictionary, select: boolean) {
+		// array that references the selected rows
+		let arrSelection;
+		// stores whether this row should be added/removed from arrSelection
+		let shouldBeSelected;
+
+		if (this.iterable.selectAllPages) {
+			arrSelection = this.iterable.selectionState.except;
+			shouldBeSelected = select !== this.iterable.selectionState.allSelected;
+		} else {
+			arrSelection = this.iterable.selectedRows;
+			shouldBeSelected = select;
+		}
+
+		const rowKey = this.iterable.getRowKey(row);
+		const index = arrSelection.findIndex((selectedRow) => this.iterable.getRowKey(selectedRow) === rowKey);
+		const isSelected = index !== -1;
+
+		if (!isSelected && shouldBeSelected) {
+			arrSelection.push(row);
+			return;
+		}
+
+		if (isSelected && !shouldBeSelected) {
+			arrSelection.splice(index, 1);
+		}
+	}
+
+	public callDisableSelection(row: IDictionary<any>) {
+		return (
+			!!this.iterable.disableSelection &&
+			typeof this.iterable.disableSelection === 'function' &&
+			this.iterable.disableSelection({ row, component: this.iterable })
+		);
+	}
+
+	/**
+	 * Dispatches select/unselect event
+	 * @param row Grid row
+	 * @param isSelected Row is selected
+	 * @param event DOM event
+	 * @param element DOM Element
+	 */
+	public selectClick(row: IDictionary<any>, isSelected: boolean, event: Event, element: any) {
+		if (isSelected) {
+			this.iterable.callEvent('selected', {
+				event,
+				element,
+				row,
+				component: this.iterable,
+				column: undefined,
+			});
+		} else {
+			this.iterable.callEvent('unselected', {
+				event,
+				element,
+				row,
+				component: this.iterable,
+				column: undefined,
+			});
+		}
+	}
+
+	/**
+	 * Dispatches select/unselect all rows event
+	 * @param isSelected Row is selected
+	 * @param event DOM event
+	 * @param element DOM Element
+	 */
+	public selectAllClick(isSelected: boolean, event: Event, element: any) {
+		if (isSelected) {
+			this.iterable.callEvent('selectedAll', {
+				event,
+				element,
+				component: this.iterable,
+				row: undefined,
+				column: undefined,
+			});
+		} else {
+			this.iterable.callEvent('unselectedAll', {
+				event,
+				element,
+				component: this.iterable,
+				row: undefined,
+				column: undefined,
+			});
+		}
+	}
+}

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

@@ -0,0 +1,208 @@
+import { FormatterParserProvider, I18n, IDictionary, Utils } from '@zeedhi/core';
+import isUndefined from 'lodash.isundefined';
+import { Column } from '../zd-iterable/column';
+import { IChildrenActionColumn, IGridColumn } from './interfaces';
+
+/**
+ * Base class for Grid column
+ */
+export class GridColumn extends Column implements IGridColumn {
+	/* Children components to be rendered on action columns */
+	public children: IChildrenActionColumn[] = [];
+
+	/* istanbul ignore next */
+	/**
+	 * Creates a new Grid Column.
+	 * @param props Grid column properties
+	 */
+	constructor(props: IGridColumn) {
+		super(props);
+		this.children = this.getInitValue('children', props.children, this.children);
+		if (!this.componentProps.component) {
+			this.componentProps.mask = this.componentProps.mask || this.mask;
+			this.componentProps.component = 'ZdTextInput';
+		}
+		this.createAccessors();
+	}
+
+	/**
+	 * Children props without grid system.
+	 */
+	get childrenProps() {
+		return this.children.map(({ conditions, ...otherAttrs }) => otherAttrs);
+	}
+
+	/**
+	 * Get the Column without the conditions object
+	 * @param component Column component
+	 */
+	public getColumnWithoutConditions(component: any) {
+		return { ...component, conditions: undefined };
+	}
+
+	/**
+	 * checkOutValues
+	 */
+	public checkOutValues(component: any, row: IDictionary<any>, newRow: IDictionary<any>) {
+		if (this.componentProps.dataValueOut && component.datasource?.currentRow) {
+			this.componentProps.dataValueOut.forEach((dataOutColumn: any) => {
+				let column: string;
+				let columnOnGrid: string;
+
+				if (typeof dataOutColumn === 'string') {
+					column = dataOutColumn;
+					columnOnGrid = this.componentProps.foreignColumns?.[column] || column;
+				} else {
+					column = dataOutColumn.column;
+					columnOnGrid = dataOutColumn.columnOnGrid;
+				}
+				let currentValue = component.datasource.currentRow[column];
+
+				if (Array.isArray(component.value)) {
+					currentValue = component.selectedValue.map((item: IDictionary) => item[column]);
+				}
+
+				if (
+					Utils.isEqual(newRow[`${columnOnGrid}_original`], newRow.originalRow[columnOnGrid]) &&
+					Utils.isEqual(newRow[columnOnGrid], currentValue)
+				) {
+					return;
+				}
+
+				if (!Utils.isEqual(newRow.originalRow[columnOnGrid], currentValue)) {
+					newRow[`${columnOnGrid}_original`] = newRow.originalRow[columnOnGrid];
+					newRow[columnOnGrid] = currentValue;
+				} else {
+					delete newRow[`${columnOnGrid}_original`];
+					delete newRow[columnOnGrid];
+				}
+				row[columnOnGrid] = currentValue;
+			});
+		}
+	}
+}
+
+FormatterParserProvider.registerFormatter('column_ZdSelect', ({ column, value, row, componentProps }: any) => {
+	if (value === null || value === undefined) return '';
+
+	const { dataText, formatterDataText, dataTextSeparator, dataValue, dataTextDiscrete, foreignColumns } =
+		componentProps;
+	let currentRow = row;
+
+	const dataTextColumns = Array.isArray(dataText) ? dataText : [dataText];
+	if (dataValue) {
+		const columns = Array.isArray(formatterDataText) ? formatterDataText : [formatterDataText];
+		if (foreignColumns) {
+			const loopkupRow: IDictionary = {};
+			dataTextColumns.forEach((item) => {
+				const dataTextName = typeof item === 'string' ? item : item.name;
+				loopkupRow[dataTextName] = currentRow[foreignColumns[dataTextName] || dataTextName];
+			});
+			loopkupRow[dataValue] = currentRow[column.name];
+
+			column.lookupData[currentRow[column.name]] = loopkupRow;
+		} else if (!formatterDataText) {
+			currentRow = column.getLookupData(dataValue, value[dataValue] || value);
+		} else if (columns.length === dataTextColumns.length) {
+			const loopkupRow: IDictionary = {};
+			columns.forEach((item, index) => {
+				const dataTextValue = dataTextColumns[index];
+				const dataTextName = typeof dataTextValue === 'string' ? dataTextValue : dataTextValue.name;
+				loopkupRow[dataTextName] = currentRow[typeof item === 'string' ? item : item.name];
+			});
+			loopkupRow[dataValue] = currentRow[column.name];
+
+			column.lookupData[currentRow[column.name]] = loopkupRow;
+		}
+	}
+
+	if (!Object.keys(currentRow).length) return typeof value === 'object' ? '' : value;
+
+	let dataTextForeign: any = dataText;
+	if (dataText && foreignColumns) {
+		if (typeof dataText === 'string') {
+			dataTextForeign = foreignColumns[dataText] || dataText;
+		} else {
+			dataTextForeign = dataTextColumns.map((item: any) => {
+				const itemName = typeof item === 'string' ? item : item.name;
+				return foreignColumns[itemName] || itemName;
+			});
+		}
+	}
+
+	const textColumn = formatterDataText || dataTextDiscrete || dataTextForeign;
+	if (!textColumn) return value;
+
+	if (typeof textColumn === 'string') {
+		return currentRow[textColumn] || value;
+	}
+
+	const formatterFn = FormatterParserProvider.getFormatter('ZdSelect');
+	return formatterFn(currentRow, { dataText: textColumn, dataTextSeparator });
+});
+
+FormatterParserProvider.registerFormatter('column_ZdSelectMultiple', ({ column, value, row, componentProps }: any) => {
+	if (!value || !Array.isArray(value) || value.length === 0) return '';
+
+	const { formatterDataText, foreignColumns, dataText } = componentProps;
+	const formatterFn = FormatterParserProvider.getFormatter('column_ZdSelect');
+
+	const result = value.map((item: string | number | IDictionary, index: number) => {
+		let formatterRow = { ...row };
+		const rowOverride: IDictionary = {};
+
+		if (formatterDataText && formatterDataText.length > 0) {
+			const columns = Array.isArray(formatterDataText) ? formatterDataText : [formatterDataText];
+
+			columns.forEach((col) => {
+				const textName = typeof col === 'string' ? col : col.name;
+				rowOverride[textName] = row[textName][index];
+			});
+
+			formatterRow = { ...row, ...rowOverride };
+		} else if (foreignColumns && dataText) {
+			let dataTextForeign: any = dataText;
+
+			if (typeof dataText === 'string') {
+				dataTextForeign = [foreignColumns[dataText] || dataText];
+			} else {
+				dataTextForeign = dataText.map((col: any) => {
+					const colName = typeof col === 'string' ? col : col.name;
+					return foreignColumns[colName] || colName;
+				});
+			}
+
+			dataTextForeign.forEach((col: string) => {
+				rowOverride[col] = row[col][index];
+			});
+
+			formatterRow = { ...row, ...rowOverride };
+		}
+		return formatterFn({
+			column,
+			value: item,
+			row: formatterRow,
+			componentProps,
+		});
+	});
+	return result.join(', ');
+});
+
+const toggleableFormatter = ({ value, componentProps }: any) => {
+	const { trueValue, falseValue, trueIcon, falseIcon, trueDisplayValue, falseDisplayValue } = componentProps;
+
+	const trueDefined = isUndefined(trueValue) ? true : trueValue;
+	const falseDefined = isUndefined(falseValue) ? false : falseValue;
+
+	if (value === trueDefined) {
+		const display = trueDisplayValue ? I18n.translate(trueDisplayValue) : trueDisplayValue;
+		return trueIcon || display || trueDefined;
+	}
+
+	const display = falseDisplayValue ? I18n.translate(falseDisplayValue) : falseDisplayValue;
+	return falseIcon || display || falseDefined;
+};
+
+FormatterParserProvider.registerFormatter('column_ZdCheckbox', toggleableFormatter);
+
+FormatterParserProvider.registerFormatter('column_ZdSwitch', toggleableFormatter);

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

@@ -0,0 +1,53 @@
+import { IDictionary } from '@zeedhi/core';
+import { GridColumn } from './grid-column';
+import { IGrid, IGridEvents } from './interfaces';
+
+export class GridEvents implements IGridEvents {
+	protected iterable: IGrid;
+
+	/**
+	 * Flag to prevent row click
+	 */
+	protected preventRowClick = false;
+
+	constructor(iterable: IGrid) {
+		this.iterable = iterable;
+	}
+
+	/**
+	 * Dispatches row click event
+	 * @param row Grid row
+	 * @param event DOM event
+	 * @param element DOM Element
+	 */
+	public rowClick(row: IDictionary<any>, event: Event, element: any) {
+		if (!this.preventRowClick) {
+			this.iterable.setCurrentRow(row);
+			this.iterable.callEvent('rowClick', {
+				event,
+				element,
+				row,
+				component: this.iterable,
+				column: undefined,
+			});
+		}
+		this.preventRowClick = false;
+	}
+
+	/**
+	 * Dispatches cell click Event
+	 * @param row Grid row
+	 * @param column Grid column
+	 * @param event DOM event
+	 * @param element DOM Element
+	 */
+	public cellClick(row: IDictionary<any>, column: GridColumn, event: Event, element: any) {
+		this.preventRowClick = this.iterable.callEvent('cellClick', {
+			event,
+			element,
+			row,
+			column,
+			component: this.iterable,
+		});
+	}
+}