@zeedhi/common 1.115.0 → 3.0.1

package/src/utils/tree-data-structure/tree-data-structure.ts

@@ -0,0 +1,520 @@
+import { Datasource, IDictionary } from '@zeedhi/core';
+import { ITreeComponent, ITreeDataStructure } from './interfaces';
+
+export class TreeDataStructure implements ITreeDataStructure {
+	/**
+	 * Original datasource
+	 */
+	private originalDatasource!: Datasource;
+
+	/**
+	 * Parent field Name
+	 */
+	private parentField: string;
+
+	/**
+	 * Defines if the tree will be opened or not (true/false) or if it should open only until a specific level
+	 */
+	public openLevelOnLoad: number | boolean = false;
+
+	/**
+	 * Stores tree data
+	 */
+	public treeData: IDictionary<any>[] = [];
+
+	/**
+	 * Search returns no data
+	 */
+	public searchHasNoData = false;
+
+	/**
+	 * Stores tree structure
+	 */
+	private treeStructure: any = {};
+
+	public fieldHasChild?: string = '';
+
+	/**
+	 * Tree component
+	 */
+	private tree!: ITreeComponent;
+
+	constructor(tree: ITreeComponent) {
+		this.parentField = tree.parentField;
+		this.openLevelOnLoad = tree.openLevelOnLoad;
+		this.fieldHasChild = tree.fieldHasChild;
+		this.tree = tree;
+	}
+	detach?: boolean | undefined;
+
+	get fetchOnDemand() {
+		return this.tree.fetchOnDemand || false;
+	}
+
+	set fetchOnDemand(value: boolean) {
+		if (this.tree.fetchOnDemand === undefined) return;
+
+		this.tree.fetchOnDemand = value;
+	}
+
+	/**
+	 * Creates properties and methods
+	 */
+	public initialize() {
+		this.originalDatasource = this.tree.datasource;
+		const originalGetFunction = this.originalDatasource.get;
+		this.originalDatasource.get = this.treeGetData(originalGetFunction);
+		(this.originalDatasource as any).reloadAndUpdateSelectedRows = this.reloadAndUpdateSelectedRows.bind(this);
+	}
+
+	private searchValue = '';
+
+	/**
+	 * Redefine get method
+	 * @param originalGet originalDatasource get function
+	 */
+	private treeGetData(originalGet: () => Promise<any>) {
+		return async () => {
+			this.searchValue = this.originalDatasource.search;
+			this.searchHasNoData = false;
+
+			if (this.fetchOnDemand) {
+				if (this.tree.detach || this.originalDatasource.search) {
+					delete this.originalDatasource.filter[this.parentField];
+				} else if (!this.originalDatasource.filter[this.parentField]) {
+					this.originalDatasource.filter[this.parentField] = 'NULL';
+				}
+			}
+
+			if (!this.tree.detach && !this.fetchOnDemand && this.searchValue) {
+				this.searchAllData();
+				return Promise.resolve(this.originalDatasource.data);
+			}
+
+			return originalGet.call(this.originalDatasource).then((data: IDictionary<any>[]) => {
+				if (this.searchValue) {
+					this.buildDetached();
+				} else {
+					this.buildTree();
+				}
+
+				return data;
+			});
+		};
+	}
+
+	/**
+	 * search data
+	 */
+	public buildTree() {
+		if (this.tree.detach) {
+			this.buildDetached();
+		} else if (this.fetchOnDemand) {
+			this.buildOnDemand();
+		} else {
+			this.buildAllData();
+		}
+	}
+
+	/**
+	 * Build tree without fetchOnDemand
+	 * @param data datasource data
+	 */
+	private buildAllData() {
+		this.treeData = [];
+		this.treeStructure = {};
+
+		this.originalDatasource.data.forEach((row) => {
+			const parentKey = row[this.parentField] || 'no-parent';
+			if (!this.treeStructure[parentKey]) {
+				this.treeStructure[parentKey] = [];
+			}
+			this.treeStructure[parentKey].push({ ...row });
+		});
+
+		this.buildTreeData();
+		this.sortData();
+	}
+
+	/**
+	 * Build tree data using a parent row
+	 * @param parentRow Parent row (undefined = build entire tree)
+	 */
+	private buildTreeData(parentRow: any = undefined) {
+		const parentKey = parentRow?.[this.originalDatasource.uniqueKey] || 'no-parent';
+		const childrenData = (this.treeStructure[parentKey] || []).map((row: IDictionary<any>) => {
+			const level = (parentRow?.tree__level || 0) + 1;
+			row.tree__children = [{}];
+			row.tree__opened = this.openLevelOnLoad === true || level <= this.openLevelOnLoad;
+			row.tree__parent = parentRow;
+			row.tree__level = level;
+			row.tree__searched = false;
+			return row;
+		});
+
+		if (parentRow) {
+			parentRow.tree__children = childrenData;
+		}
+
+		childrenData.forEach((row: any) => {
+			this.treeData.push(row);
+			this.buildTreeData(row);
+		});
+	}
+
+	public findDataIndex(data: IDictionary<any>[], value: any) {
+		const { uniqueKey } = this.originalDatasource;
+		return data.findIndex((item) => item[uniqueKey] === value);
+	}
+
+	/**
+	 * Build tree with fetchOnDemand
+	 */
+	private buildOnDemand() {
+		let parentKey = this.originalDatasource.filter[this.parentField];
+
+		if (parentKey === 'NULL') {
+			parentKey = 'no-parent';
+			this.treeData = [];
+			this.treeStructure = {};
+		}
+
+		const parentIdx = this.findDataIndex(this.treeData, parentKey);
+		const parent = parentIdx !== -1 ? this.treeData[parentIdx] : undefined;
+		if (parent) {
+			parent.tree__children = [];
+		}
+
+		const childData = this.originalDatasource.data.map((row) => {
+			const item = {
+				...row,
+				tree__children: [{}],
+				tree__opened: false,
+				tree__searched: false,
+				tree__level: parent ? parent.tree__level + 1 : 1,
+				tree__parent: parent,
+			};
+
+			if (parent) {
+				parent.tree__children.push(item);
+			}
+
+			return item;
+		});
+
+		if (parent) {
+			// remove all existing children to add new ones
+			this.treeData = this.treeData.filter((item) => item.tree__parent !== parent);
+		}
+
+		if (!parent) {
+			this.treeData = childData;
+		} else {
+			this.treeData.splice(parentIdx + 1, 0, ...childData);
+		}
+
+		this.treeStructure[parentKey] = [...childData];
+	}
+
+	/**
+	 * Sort data
+	 */
+	private sortData() {
+		const columns: string[] = [];
+		const order: string[] = [];
+		this.originalDatasource.order.forEach((value) => {
+			const splitted = value.split('.');
+			columns.push(splitted[0]);
+			order.push(splitted[1]);
+		});
+
+		this.treeData = [];
+		this.originalDatasource.data = [];
+		this.sortTreeDataRows(this.treeStructure['no-parent'] || [], columns, order);
+	}
+
+	/**
+	 * Sort tree data rows
+	 * @param dataToSort Data to sort
+	 * @param columns Columns used to oreder the collection
+	 * @param types Order orientation. All values must be asc or desc
+	 * @param index Columns and types position
+	 * @returns Sorted data
+	 */
+	private sortTreeDataRows(dataToSort: IDictionary<any>[], columns: string[], types: string[]) {
+		const { uniqueKey } = this.originalDatasource;
+		const childrenData = dataToSort.sort((row, nextRow) => this.sort(row, nextRow, columns, types));
+
+		childrenData.forEach((row) => {
+			this.treeData.push(row);
+			this.originalDatasource.data.push(this.clearRow(row));
+			const key = row[uniqueKey];
+			if (this.treeStructure[key]?.length) {
+				this.sortTreeDataRows(this.treeStructure[key], columns, types);
+			}
+		});
+	}
+
+	/**
+	 * Custom sort for collections
+	 * @param row Collection row
+	 * @param nextRow Next row from collection
+	 * @param columns Columns used to oreder the collection
+	 * @param types Order orientation. All values must be asc or desc
+	 * @param index Columns and types position
+	 * @returns Row's position
+	 */
+	private sort(
+		row: IDictionary<any>,
+		nextRow: IDictionary<any>,
+		columns: string[],
+		types: string[],
+		index = 0,
+	): number {
+		const orderTypes: IDictionary<number> = {
+			asc: 1,
+			desc: -1,
+			same: 0,
+		};
+
+		if (row[columns[index]] === nextRow[columns[index]]) {
+			const nextIndex = index + 1;
+			if (Object.prototype.hasOwnProperty.call(columns, nextIndex)) {
+				return this.sort(row, nextRow, columns, types, nextIndex);
+			}
+			return orderTypes.same;
+		}
+		if (row[columns[index]] > nextRow[columns[index]]) {
+			return orderTypes[types[index]];
+		}
+		return orderTypes[types[index]] * -1;
+	}
+
+	/**
+	 * Return if tree element and its parents are opened
+	 * @param row datasource row
+	 * @returns Element and parents are opened
+	 */
+	public isOpened(row: IDictionary<any>): boolean {
+		const rowData = this.getRowData(row);
+		const isSearched = !this.searchValue || rowData.tree__searched;
+		const isOpened =
+			!rowData.tree__parent || (rowData.tree__parent.tree__opened && this.isOpened(rowData.tree__parent));
+		return isSearched && isOpened;
+	}
+
+	/**
+	 * Return previous opened row index
+	 * @param rowIdx row index
+	 * @returns previous row index
+	 */
+	public previousOpenedRow(rowIdx: number) {
+		let result = -1;
+		for (let i = rowIdx - 1; i >= 0; i -= 1) {
+			if (this.isOpened(this.treeData[i])) {
+				result = i;
+				break;
+			}
+		}
+		return result;
+	}
+
+	/**
+	 * Return next opened row index
+	 * @param rowIdx row index
+	 * @returns next row index
+	 */
+	public nextOpenedRow(rowIdx: number) {
+		let result = -1;
+		for (let i = rowIdx + 1; i < this.treeData.length; i += 1) {
+			if (this.isOpened(this.treeData[i])) {
+				result = i;
+				break;
+			}
+		}
+		return result;
+	}
+
+	/**
+	 * Expands or collapses a row
+	 * @param row Row object
+	 * @param rowIndex Row index
+	 */
+	public async toggleExpand(row: IDictionary<any>, rowIndex = -1) {
+		const { uniqueKey } = this.originalDatasource;
+		const rowData = this.getRowData(row);
+		rowData.tree__opened = !rowData.tree__opened;
+		if (
+			rowData.tree__opened &&
+			this.fetchOnDemand &&
+			rowData.tree__children.length === 1 &&
+			!rowData.tree__children[0][uniqueKey]
+		) {
+			let index = rowIndex;
+			if (index === -1) {
+				index = this.findDataIndex(this.treeData, row[uniqueKey]);
+			}
+			const originalData = [...this.originalDatasource.data];
+			const data: IDictionary<any>[] = await this.originalDatasource.addFilter(this.parentField, row[uniqueKey]);
+			originalData.splice(index + 1, 0, ...data);
+			this.originalDatasource.data = originalData;
+			this.originalDatasource.currentRow = this.clearRow(row);
+			delete this.originalDatasource.filter[this.parentField];
+
+			return data;
+		}
+
+		return undefined;
+	}
+
+	/**
+	 * Return row with tree data
+	 * @param row datasource row
+	 */
+	public getRowData(row: IDictionary<any>) {
+		if (row.tree__opened !== undefined) {
+			return row;
+		}
+		const rowIdx = this.findDataIndex(this.treeData, row[this.originalDatasource.uniqueKey]);
+		return this.treeData[rowIdx];
+	}
+
+	/**
+	 * Toggle expand/collapse using navigation keys
+	 * @param collapse Should collapse
+	 */
+	public navigateToggle(collapse: boolean) {
+		const { currentRow } = this.originalDatasource;
+		const rowData = this.getRowData(currentRow);
+		if (rowData.tree__opened === collapse && rowData.tree__children.length > 0) {
+			this.toggleExpand(rowData);
+		} else if (collapse) {
+			if (rowData.tree__parent) {
+				this.originalDatasource.currentRow = this.clearRow(rowData.tree__parent);
+			}
+		}
+	}
+
+	/**
+	 * Updates selected rows, fetches and retrieves data collection
+	 * @returns Promise with data collection
+	 */
+	private async reloadAndUpdateSelectedRows() {
+		this.sortData();
+	}
+
+	/**
+	 * Arrange treeData in a uniform structure
+	 */
+	public buildDetached() {
+		this.treeData = [];
+		this.treeStructure = {};
+
+		const childData = this.originalDatasource.data.map((row) => ({
+			...row,
+			tree__children: [],
+			tree__opened: false,
+			tree__searched: !!this.searchValue,
+			tree__level: 1,
+			tree__parent: undefined,
+		}));
+
+		this.treeData = childData;
+		this.treeStructure['no-parent'] = childData;
+	}
+
+	/**
+	 * Search value against a memory datasource
+	 */
+	private searchAllData() {
+		this.searchHasNoData = true;
+		const searchValue = this.searchValue.toLowerCase();
+		this.treeData.forEach((row) => {
+			let filtered = false;
+
+			Object.keys(row).every((key) => {
+				const rowValue = (row[key] || '').toString().toLowerCase();
+				filtered = this.originalDatasource.searchIn.indexOf(key) !== -1 && rowValue.indexOf(searchValue) !== -1;
+				return !filtered;
+			});
+
+			row.tree__searched = filtered;
+			if (filtered) {
+				this.searchHasNoData = false;
+				let parent = row.tree__parent;
+				while (parent && !parent.tree__searched) {
+					parent.tree__searched = true;
+					parent = parent.tree__parent;
+				}
+			}
+		});
+
+		this.searchHasNoData = !this.treeData.some((row) => row.tree__searched);
+	}
+
+	/**
+	 * Clear row removing 'tree__' props
+	 */
+	public clearRow(row: IDictionary<any>) {
+		const result = { ...row };
+		result.tree__children = undefined;
+		result.tree__level = undefined;
+		result.tree__parent = undefined;
+		result.tree__opened = undefined;
+		result.tree__searched = undefined;
+		return result;
+	}
+
+	/**
+	 * Get all children
+	 * @param row datasource row
+	 */
+	public getChildren(row: IDictionary<any>) {
+		let result: IDictionary<any>[] = [];
+		const { uniqueKey } = this.originalDatasource;
+		(this.treeStructure[row[uniqueKey]] || []).forEach((item: IDictionary<any>) => {
+			result.push(this.clearRow(item));
+			result = result.concat(this.getChildren(item));
+		});
+		return result;
+	}
+
+	/**
+	 * Checks if a row has async children that are yet to be loaded
+	 * @param row
+	 * @returns `false` if the row has no children to be loaded, `true` if it does or if fieldHasChild is not defined
+	 */
+	public hasChildOnDemand(row: IDictionary<any>) {
+		if (!this.fieldHasChild) return true;
+
+		const rowHasChild: boolean | number | '0' | '1' = row[this.fieldHasChild];
+		let isVisibleChevron = true;
+
+		switch (rowHasChild) {
+			case '0':
+			case false:
+			case 0:
+				isVisibleChevron = false;
+				break;
+			case '1':
+			case true:
+			case 1:
+				isVisibleChevron = true;
+				break;
+			default:
+				isVisibleChevron = true;
+				break;
+		}
+
+		return isVisibleChevron;
+	}
+
+	public getParentRow(row: IDictionary): IDictionary {
+		return this.getRowData(row).tree__parent;
+	}
+
+	public resetTree() {
+		this.treeData = [];
+		this.buildTree();
+	}
+}

package/src/utils/unique-by/unique-by.ts

@@ -0,0 +1,15 @@
+import { IDictionary } from '@zeedhi/core';
+
+const uniqueBy = (a: IDictionary[], key: string) => {
+	const seen: IDictionary = {};
+	return a.filter((item) => {
+		const k = item[key] || JSON.stringify(item);
+		if (!seen[k]) {
+			seen[k] = true;
+			return true;
+		}
+		return false;
+	});
+};
+
+export { uniqueBy };

package/tests/unit/__helpers__/component-event-helper.ts

@@ -0,0 +1,9 @@
+import { Component } from '../../../src';
+
+const setFocus = (instance: Component) => instance.focus({} as Event, {});
+
+const setBlur = (instance: Component) => instance.blur({} as Event, {});
+
+const setClick = (instance: Component, event: any = {}) => instance.click(event, {});
+
+export { setFocus, setBlur, setClick };

package/tests/unit/__helpers__/create-component.ts

@@ -0,0 +1,8 @@
+import { Newable } from '@zeedhi/core';
+import { ComponentRender, IComponentRender } from '../../../src';
+
+export function createComponent<T extends ComponentRender>(componentClass: Newable<T>, props: IComponentRender): T { 
+  const instance = new componentClass(props);
+  instance.onCreated();
+  return instance;
+}

package/tests/unit/__helpers__/find-component.ts

@@ -0,0 +1,18 @@
+export function findComponent(name: string, children: any[]) {
+  let found: any;
+
+  children.forEach((child) => {
+    if (child.name === name) {
+      found = child;
+      return;
+    }
+
+    if (child.children && child.children.length > 0) {
+      const result = findComponent(name, child.children);
+
+      if (result) found = result;
+    }
+  });
+
+  return found;
+}

package/tests/unit/__helpers__/flush-promises-helper.ts

@@ -0,0 +1,3 @@
+const flushPromises = () => new Promise(process.nextTick);
+
+export { flushPromises };

package/tests/unit/__helpers__/get-child-helper.ts

@@ -0,0 +1,27 @@
+import { IComponent } from '../../../src';
+
+/**
+ * Search for a component inside an array of children
+ *
+ * The children array can be either an array of IComponent or an array of Component
+ */
+const getChild = <T extends IComponent>(children: any[], name: string): T => {
+  let found: any;
+
+  children.forEach((child) => {
+    if (child.name === name) {
+      found = child;
+      return;
+    }
+
+    if (child.children && child.children.length > 0) {
+      const result = getChild<T>(child.children, name) as T;
+
+      if (result) found = result;
+    }
+  });
+
+  return found;
+};
+
+export { getChild };

package/tests/unit/__helpers__/index.ts

@@ -0,0 +1,10 @@
+export * from './component-event-helper';
+export * from './create-component';
+export * from './find-component';
+export * from './flush-promises-helper';
+export * from './get-child-helper';
+export * from './mock-http-get-helper';
+export * from './mock-i18n';
+export * from './mock-loader-get-instance';
+export * from './mock-loader-value-accessor';
+export * from './spy-on-all-methods';

package/tests/unit/__helpers__/mock-http-get-helper.spec.ts

@@ -0,0 +1,55 @@
+import { Http } from '@zeedhi/core';
+import { mockGetUsingData } from './mock-http-get-helper';
+
+describe('mockHttpGet helper', () => {
+  it('should mock Http get using predefined data', async () => {
+    const data = [{ value: '1' }, { value: '2' }, { value: '3' }];
+    const params = {
+      page: 1,
+      limit: 2,
+    };
+    const spy = mockGetUsingData(data);
+
+    const result = await Http.get('path', { params });
+    expect(result.data.data).toEqual([data[0], data[1]]);
+    expect(result.data.pagination).toEqual({
+      page: params.page,
+      total: data.length,
+      limit: params.limit,
+    });
+    spy.mockClear();
+  });
+
+  it('should mock Http get using predefined data without pagination', async () => {
+    const data = [{ value: '1' }, { value: '2' }, { value: '3' }];
+
+    const spy = mockGetUsingData(data);
+
+    const result = await Http.get('path');
+    expect(result.data.data).toEqual(data);
+    expect(result.data.pagination).toBeUndefined();
+    spy.mockClear();
+  });
+
+  it('should mock Http get using search', async () => {
+    const data = [
+      { value: '1st' }, { value: '2nd' }, { value: '3rd' }, { value: '4th' }, { value: '5th' }, { value: '6th' },
+    ];
+    const params = {
+      page: 1,
+      limit: 2,
+      search: 'th',
+    };
+    const spy = mockGetUsingData(data);
+
+    const result = await Http.get('path', { params });
+
+    expect(result.data.data).toEqual([{ value: '4th' }, { value: '5th' }]);
+    expect(result.data.pagination).toEqual({
+      page: params.page,
+      total: data.length,
+      limit: params.limit,
+    });
+    spy.mockClear();
+  });
+});

package/tests/unit/__helpers__/mock-http-get-helper.ts

@@ -0,0 +1,29 @@
+import { Http, IDictionary } from '@zeedhi/core';
+
+/**
+ * Mocks Http.get to simulate a paginated backend. (using mockClear is necessary)
+ * @param data data that will be returned
+ * @returns the jest spy
+ */
+const mockGetUsingData = (data: IDictionary[]) => jest.spyOn(Http, 'get').mockImplementation((_url, config) => {
+  if (!config?.params) {
+    return Promise.resolve({
+      data: { data },
+    });
+  }
+
+  const { page, limit, search } = config.params;
+
+  const searchFn = (item: IDictionary) => Object.values(item).some((value) => String(value).indexOf(search) > -1);
+  const searched = search ? [...data].filter(searchFn) : [...data];
+  const paginatedData = searched.splice((page - 1) * limit, limit);
+
+  return Promise.resolve({
+    data: {
+      data: paginatedData,
+      pagination: { page, total: data.length, limit },
+    },
+  });
+});
+
+export { mockGetUsingData };