@zeedhi/common 1.112.0 → 3.0.0

package/src/components/zd-grid/table-action-builder.ts

@@ -0,0 +1,114 @@
+import { Accessor, Event as EventFactory, IDictionary, Metadata } from '@zeedhi/core';
+import merge from 'lodash.merge';
+import { Component } from '../zd-component/component';
+import { IComponent } from '../zd-component/interfaces';
+import { Iterable } from '../zd-iterable/iterable';
+import { GridColumn } from './grid-column';
+import { ITableActionBuilder } from './interfaces';
+
+export class TableActionBuilder implements ITableActionBuilder {
+	protected iterable: Iterable;
+
+	constructor(iterable: Iterable) {
+		this.iterable = iterable;
+	}
+
+	public getActionComponent(
+		actionComponent: IComponent,
+		column: GridColumn,
+		row: IDictionary,
+		parentPath = '',
+	): IComponent {
+		const { props, instance } = this.getActionProps(actionComponent, column, row, parentPath);
+
+		if (instance) {
+			return instance;
+		}
+
+		return props;
+	}
+
+	private setGridRowsInEvents(comp: IComponent, column: GridColumn, row: IDictionary) {
+		if (comp.events?.click) {
+			const compEvents = EventFactory.factory(comp.events);
+			if (typeof compEvents.click === 'function') {
+				return ({ component, event, element }: any) =>
+					(compEvents as any).click({
+						component,
+						event,
+						element,
+						row,
+						column,
+					});
+			}
+		}
+		return undefined;
+	}
+
+	private filterObject<T>(obj: Record<string, T>, callback: (key: string, value: T) => boolean): Record<string, T> {
+		return Object.fromEntries(Object.entries(obj).filter(([key, value]) => callback(key, value as T)));
+	}
+
+	private deleteAccessorProps(newComponent: IComponent) {
+		const filteredProps = this.filterObject(newComponent, (_key, value) => !Accessor.isAccessorDefinition(value));
+		return filteredProps;
+	}
+
+	protected updateActionInstance(instanceName: string, newComponent: IComponent) {
+		const updatedComponent: any = this.deleteAccessorProps(newComponent);
+		updatedComponent.datasource = undefined;
+		updatedComponent.events = undefined;
+
+		const instance = Metadata.updateInstance<Component>(instanceName, updatedComponent);
+
+		return instance;
+	}
+
+	protected getActionProps(actionComponent: IComponent, column: GridColumn, row: IDictionary, parentPath: string) {
+		const rowKey = this.iterable.getRowKey(row);
+		const compName = actionComponent.name;
+		const instanceName = `${compName}_${rowKey}`;
+		const path = parentPath ? `${parentPath}.${compName}` : compName;
+		const compActivator: IComponent = actionComponent.activator ?? undefined;
+
+		const props: IComponent = merge({}, actionComponent, this.iterable.getAppliedConditions({ row, column, path }));
+
+		const newClickEvt: undefined | ((params: any) => boolean) = this.setGridRowsInEvents(props, column, row);
+
+		const children = props.children || [];
+		const newChildren = children.map((child) => this.getActionProps(child, column, row, path).props);
+
+		props.children = newChildren;
+		props.name = instanceName;
+		props.allowDuplicate = true;
+		props.autoRegister = false;
+
+		let instance: Component | null = null;
+
+		try {
+			instance = this.updateActionInstance(instanceName, props);
+			if (newClickEvt) instance.events.click = newClickEvt;
+		} catch (_e) {
+			instance = null;
+		}
+
+		if (!props.events) {
+			props.events = {};
+		}
+
+		if (newClickEvt) props.events.click = newClickEvt;
+
+		if (compActivator) {
+			const newActivatorClickEvt: undefined | ((params: any) => boolean) = this.setGridRowsInEvents(
+				compActivator,
+				column,
+				row,
+			);
+			if (newActivatorClickEvt) {
+				props.activator.events.click = newActivatorClickEvt;
+			}
+		}
+
+		return { props, instance };
+	}
+}

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

@@ -0,0 +1,30 @@
+import { IEventParam } from '@zeedhi/core';
+import { Direction, IViewNavigator } from './interfaces';
+
+export class ViewNavigator implements IViewNavigator {
+	protected viewNavigate: ((direction: Direction, event?: Event) => void) | null = null;
+
+	public setViewNavigate(viewNavigate: (direction: Direction, event?: Event) => void) {
+		this.viewNavigate = viewNavigate;
+	}
+
+	public navigateLeft({ event }: IEventParam<any>) {
+		if (!this.viewNavigate) return;
+		this.viewNavigate('left', event);
+	}
+
+	public navigateRight({ event }: IEventParam<any>) {
+		if (!this.viewNavigate) return;
+		this.viewNavigate('right', event);
+	}
+
+	public navigateUp() {
+		if (!this.viewNavigate) return;
+		this.viewNavigate('up');
+	}
+
+	public navigateDown() {
+		if (!this.viewNavigate) return;
+		this.viewNavigate('down');
+	}
+}

package/src/components/zd-grid-editable/data-editor-with-add.ts

@@ -0,0 +1,247 @@
+import { IDictionary, IEventParam, Loader, Utils } from '@zeedhi/core';
+import { omit } from '../../utils';
+import { Input } from '../zd-input/input';
+import { Column } from '../zd-iterable/column';
+import { DataEditor } from './data-editor';
+import { GridEditableController } from './grid-editable-controller';
+import { IDataEditorWithAdd, IGridColumnEditable, IGridEditable } from './interfaces';
+
+export class DataEditorWithAdd extends DataEditor implements IDataEditorWithAdd {
+	private NEW_ROW_IDENTIFIER = '__added_row';
+
+	/**
+	 * Rows with newRowIdentifier
+	 * @private
+	 */
+	private addedRows: Map<string | number, IDictionary> = new Map();
+
+	constructor(grid: IGridEditable) {
+		super(grid);
+		this.addCancelColumn();
+		this.createGridController();
+	}
+
+	addCancelColumn(): void {
+		if (!this.grid.showCancelColumn) return;
+
+		const deleteColumn = this.grid.createColumn(this.getCancelColumnProps());
+		this.grid.columns.push(deleteColumn);
+	}
+
+	getCancelColumnProps(): IGridColumnEditable {
+		return {
+			name: `cancel_action_${this.grid.name}`,
+			type: 'action',
+			align: 'center',
+			actionFixed: true,
+			isVisible: `{{GridEditableController_${this.grid.name}.hasAddedRows}}`,
+			children: [
+				{
+					name: 'cancel_btn',
+					component: 'ZdButton',
+					icon: true,
+					iconName: 'clear',
+					small: true,
+					conditions: {
+						isVisible: `{{GridEditableController_${this.grid.name}.isAddedRow}}`,
+					},
+					events: {
+						click: ({ row }: IEventParam<Column>) => {
+							const rowKey = this.grid.getRowKey(row);
+							this.cancelAddedRow(rowKey);
+						},
+					},
+				},
+			],
+		};
+	}
+
+	createGridController(): void {
+		Loader.addController(`GridEditableController_${this.grid.name}`, GridEditableController, [this.grid]);
+	}
+
+	isAdded(row: IDictionary): boolean {
+		const rowKey = this.grid.getRowKey(row);
+		return !!this.addedRows.get(rowKey);
+	}
+
+	cancelAddedRow(key: string | number): Promise<any> {
+		this.editedRows.delete(key);
+		this.addedRows.delete(key);
+
+		const data = this.grid.datasource.getLoadedData();
+
+		const index = data.findIndex((row) => {
+			const rowKey = this.grid.getRowKey(row);
+			return rowKey === key;
+		});
+
+		data.splice(index, 1);
+
+		return this.grid.updateData(data);
+	}
+
+	async cancelAddedRows(): Promise<void> {
+		const loadedData = this.grid.datasource.getLoadedData();
+
+		Promise.resolve(loadedData);
+		for (let index = loadedData.length - 1; index >= 0; index -= 1) {
+			const row = loadedData[index];
+			const rowKey = this.grid.getRowKey(row);
+			const addedRow = this.addedRows.get(rowKey);
+			if (addedRow) {
+				loadedData.splice(index, 1);
+			}
+		}
+
+		await this.grid.updateData(loadedData);
+	}
+
+	getAddedRows(): IDictionary<any>[] {
+		const addedRows: IDictionary<any>[] = [];
+		this.addedRows.forEach((addedRow) => {
+			let row = { ...addedRow.originalRow, ...addedRow };
+			row = omit(row, 'originalRow');
+			row = omit(row, this.NEW_ROW_IDENTIFIER);
+
+			Object.keys(row).forEach((attr) => {
+				if (Object.prototype.hasOwnProperty.call(row, `${attr}_original`)) {
+					delete row[`${attr}_original`];
+				}
+			});
+
+			addedRows.push(row);
+		});
+		return addedRows;
+	}
+
+	async addNewRow(row: IDictionary, position: 'end' | 'start' = 'end'): Promise<void> {
+		const newRow = { ...row };
+		const data: IDictionary<any>[] = this.grid.datasource.getLoadedData();
+
+		newRow[this.NEW_ROW_IDENTIFIER] = true;
+
+		if (position === 'start') {
+			data.unshift(newRow);
+		} else {
+			data.push(newRow);
+		}
+
+		const rowKey = this.grid.getRowKey(newRow);
+		if (rowKey) {
+			this.editedRows.set(rowKey, newRow);
+			this.addedRows.set(rowKey, newRow);
+		}
+		await this.grid.updateData(data);
+
+		this.grid.editing = true;
+	}
+
+	changeEditableComponent(column: IGridColumnEditable, row: IDictionary<any>, value: any, component?: Input): void {
+		const key = this.grid.getRowKey(row);
+		const columnName = column.name;
+		const editedRow = this.editedRows.get(key);
+		if (!Utils.isEqual(value, row[columnName])) {
+			const newRow: IDictionary = { ...editedRow };
+			newRow.originalRow = omit(row, 'originalRow');
+			newRow[columnName] = value;
+			newRow[`${columnName}_original`] = row[columnName];
+
+			if (component) {
+				column.checkOutValues(component, row, newRow);
+				component.value = value;
+			}
+
+			this.editedRows.set(key, newRow);
+
+			if (this.isAdded(row)) {
+				this.addedRows.set(key, newRow);
+			}
+		} else if (editedRow) {
+			let newRow = { ...editedRow };
+			newRow = omit(newRow, columnName);
+			newRow = omit(newRow, `${columnName}_original`);
+
+			this.editedRows.set(key, newRow);
+
+			if (this.isAdded(row)) {
+				this.addedRows.set(key, newRow);
+			}
+
+			if (component) {
+				column.checkOutValues(component, row, newRow);
+				component.value = value;
+			}
+
+			if (Object.keys(newRow).length === 1 && newRow.originalRow) {
+				this.editedRows.delete(key);
+			}
+		}
+	}
+
+	private addDataRow(row: IDictionary<any>) {
+		const key = this.grid.getRowKey(row);
+		if (this.addedRows.get(key)) this.grid.datasource.post(row);
+		else this.grid.datasource.put(row);
+	}
+
+	/**
+	 * Saves all edited rows if they are valid
+	 * @param revalidate Defines if the fields should be revalidated
+	 * @throws Will throw when it finds an invalid row
+	 */
+	public async saveEditedRows(revalidate = false) {
+		const page = this.grid.getPage();
+
+		await this.cancelAddedRows();
+		const response = await Promise.all(this.getEditedRows(revalidate).map((row) => this.addDataRow(row)));
+
+		this.grid.editing = false;
+		this.editedRows.clear();
+		this.invalidComponents.clear();
+		this.addedRows.clear();
+
+		await this.grid.setPage(page);
+		return response;
+	}
+
+	/**
+	 * Cancels all edited rows and enable grid components
+	 */
+	public async cancelEditedRows() {
+		const page = this.grid.getPage();
+
+		await this.cancelAddedRows();
+
+		await this.grid.setPage(page);
+
+		this.grid.editing = false;
+		this.editedRows.clear();
+		this.invalidComponents.clear();
+	}
+
+	protected omitInternals(editedRow: IDictionary) {
+		let row = { ...editedRow.originalRow, ...editedRow };
+		row = omit(row, 'originalRow');
+		row = omit(row, this.NEW_ROW_IDENTIFIER);
+
+		Object.keys(row).forEach((attr) => {
+			row = omit(row, `${attr}_original`);
+		});
+
+		return row;
+	}
+
+	reapplyCanEditRow(row: IDictionary<any>) {
+		let canEdit = true;
+		if (this.grid.editingNewRows) {
+			canEdit = !!row[this.NEW_ROW_IDENTIFIER];
+		} else {
+			canEdit =
+				!this.grid.canEditRow ||
+				typeof this.grid.canEditRow !== 'function' ||
+				this.grid.canEditRow({ row, component: this.grid });
+		}
+		this.canEditRowConditions.set(this.grid.getRowKey(row), canEdit);
+	}
+}