@zeedhi/teknisa-components-common 3.0.0 → 3.0.2

package/src/components/tek-datasource/index.ts

@@ -0,0 +1,3 @@
+export * from './interfaces';
+export * from './tek-memory-datasource';
+export * from './tek-rest-datasource';

package/src/components/tek-datasource/interfaces.ts

@@ -0,0 +1,36 @@
+import { IDictionary, IMemoryDatasource, IRestDatasource } from '@zeedhi/core';
+
+export interface ITekMemoryDatasource extends IMemoryDatasource {
+	dynamicFilter?: IDictionary<any>;
+	searchJoin?: IDictionary<Array<string | number>>;
+}
+
+export interface ITekRestDatasource extends IRestDatasource {
+	dynamicFilter?: IDictionary<any>;
+	searchJoin?: IDictionary<Array<string | number>>;
+}
+
+export interface IDynamicFilterItem {
+	relation: string;
+	operation: string;
+	value: any;
+}
+
+export const DynamicFilterOperations: IDictionary<boolean> = {
+	CONTAINS: true,
+	NOT_CONTAINS: true,
+	EQUALS: true,
+	NOT_EQUALS: true,
+	GREATER_THAN: true,
+	LESS_THAN: true,
+	GREATER_THAN_EQUALS: true,
+	LESS_THAN_EQUALS: true,
+	IN: true,
+	NOT_IN: true,
+	BETWEEN: true,
+};
+
+export const DynamicFilterRelations: IDictionary<boolean> = {
+	AND: true,
+	OR: true,
+};

package/src/components/tek-datasource/tek-memory-datasource.ts

@@ -0,0 +1,314 @@
+import { DatasourceFactory, IDatasource, IDictionary, MemoryDatasource, URL, Utils } from '@zeedhi/core';
+import {
+	DynamicFilterOperations,
+	DynamicFilterRelations,
+	IDynamicFilterItem,
+	ITekMemoryDatasource,
+} from './interfaces';
+
+export class TekMemoryDatasource extends MemoryDatasource implements ITekMemoryDatasource {
+	/** Dynamic filter data */
+	public dynamicFilter!: IDictionary<IDynamicFilterItem[]>;
+
+	/** Search Join data */
+	public searchJoin!: IDictionary<Array<string | number>>;
+
+	/**
+	 * Dynamic Filter Operations
+	 */
+	public dynamicFilterOperations = DynamicFilterOperations;
+
+	/**
+	 * Dynamic Filter Relations
+	 */
+	public dynamicFilterRelations = DynamicFilterRelations;
+
+	/**
+	 * Dynamic Filter applied flag
+	 */
+	protected dynamicFilterApplied = '';
+
+	/**
+	 * Create new datasource
+	 * @param props Datasource properties
+	 */
+	constructor(props: ITekMemoryDatasource) {
+		super(props);
+
+		if (!this.watchUrl) {
+			this.dynamicFilter = this.getInitValue('dynamicFilter', props.dynamicFilter, {});
+			this.searchJoin = this.getInitValue('searchJoin', props.searchJoin, {});
+		}
+
+		this.createAccessors();
+		this.createObjAccessors(this.dynamicFilter, 'dynamicFilter');
+		this.createObjAccessors(this.searchJoin, 'searchJoin');
+	}
+
+	protected updateReservedKeys() {
+		this.reservedKeys.dynamic_filter = true;
+		this.reservedKeys.search_join = true;
+	}
+
+	protected updateInternalProperties(datasource: IDatasource = {}) {
+		if (!this.watchUrl) return;
+		this.updateReservedKeys();
+		super.updateInternalProperties(datasource);
+		const queryString = URL.getParsedQueryStringFromUrl();
+		this.dynamicFilter = this.getEncodedParam(queryString.dynamic_filter, datasource.dynamicFilter);
+		this.searchJoin = this.getEncodedParam(queryString.search_join, datasource.searchJoin);
+	}
+
+	protected getEncodedParam(urlParam: string, datasourceParam: IDictionary<any> = {}): IDictionary<any> {
+		return urlParam ? JSON.parse(atob(urlParam)) : datasourceParam;
+	}
+
+	protected getQueryStringValues(): IDictionary<any> {
+		const values = super.getQueryStringValues();
+		if (this.dynamicFilter && Object.keys(this.dynamicFilter).length) {
+			values.dynamic_filter = btoa(JSON.stringify(this.dynamicFilter));
+		}
+		if (this.searchJoin && Object.keys(this.searchJoin).length) {
+			values.search_join = btoa(JSON.stringify(this.searchJoin));
+		}
+		return values;
+	}
+
+	protected getUrlQueryString() {
+		const superQueryString = super.getUrlQueryString();
+		const query = URL.getParsedQueryStringFromUrl();
+
+		let dynamicFilterQuerystring = '';
+		if (query.dynamic_filter) {
+			dynamicFilterQuerystring = `&${URL.getFormattedQueryString({
+				dynamic_filter: query.dynamic_filter,
+			})}`;
+		}
+
+		let searchJoinQuerystring = '';
+		if (query.search_join) {
+			searchJoinQuerystring = `&${URL.getFormattedQueryString({
+				search_join: query.search_join,
+			})}`;
+		}
+		return superQueryString + dynamicFilterQuerystring + searchJoinQuerystring;
+	}
+
+	/**
+	 * Adds a new dynamic filter position or replace if exists
+	 * @param column Dynamic Filter column name
+	 * @param value Dynamic Filter value
+	 * @returns Promise with data collection
+	 */
+	public addDynamicFilter(column: string, value: any) {
+		if (this.isValidDynamicFilterValue(column, value)) {
+			this.dynamicFilter[column] = value;
+			return this.updateDynamicFilter();
+		}
+		return this.removeDynamicFilter(column);
+	}
+
+	/**
+	 * Removes a dynamic filter position
+	 * @param column Dynamic Filter column name
+	 * @returns Promise with data collection
+	 */
+	public removeDynamicFilter(column: string) {
+		delete this.dynamicFilter[column];
+		return this.updateDynamicFilter();
+	}
+
+	/**
+	 * Sets new dynamic filter value
+	 * @param filter Dynamic Filter value
+	 * @returns Promise with data collection
+	 */
+	public setDynamicFilter(filter: IDictionary<any>) {
+		this.dynamicFilter = {};
+		Object.keys(filter).forEach((column: string) => {
+			if (this.isValidDynamicFilterValue(column, filter[column])) {
+				this.dynamicFilter[column] = filter[column];
+			} else {
+				delete this.dynamicFilter[column];
+			}
+		});
+		return this.updateDynamicFilter();
+	}
+
+	/**
+	 * Clears Dynamic filter value
+	 * @returns Promise with data collection
+	 */
+	public clearDynamicFilter() {
+		this.dynamicFilter = {};
+		return this.updateDynamicFilter();
+	}
+
+	/**
+	 * Resets page and selected rows and tries to update the url
+	 * @returns Promise with data collection
+	 */
+	public async updateDynamicFilter() {
+		this.page = this.firstPage;
+		this.selectedRows = [];
+		this.visibleSelectedRows = [];
+		if (this.watchUrl) {
+			if (this.dynamicFilter && Object.keys(this.dynamicFilter).length) {
+				URL.updateQueryString({
+					dynamic_filter: btoa(JSON.stringify(this.dynamicFilter)),
+				});
+			} else {
+				URL.updateQueryString({
+					dynamic_filter: undefined,
+				});
+			}
+		}
+		return this.get();
+	}
+
+	/**
+	 * Checks if a filter value is valid
+	 * @param value Filter value
+	 * @returns Is valid filter value
+	 */
+	protected isValidDynamicFilterValue(column: string, value?: IDictionary<any>[]) {
+		return (
+			!this.reservedKeys[column] &&
+			value &&
+			value.length > 0 &&
+			value.every(
+				(filterValue) =>
+					this.dynamicFilterOperations[filterValue.operation] &&
+					this.dynamicFilterRelations[filterValue.relation] &&
+					filterValue.value !== '' &&
+					filterValue.value !== null,
+			)
+		);
+	}
+
+	public clone() {
+		return {
+			...super.clone(),
+			dynamicFilter: this.dynamicFilter,
+			searchJoin: this.searchJoin,
+			type: 'tek-memory',
+		};
+	}
+
+	/**
+	 * Updates filtered data
+	 */
+	protected updateFilteredData() {
+		// first apply filters (simple and dynamic)
+		this.filteredData = Object.keys(this.filter).length
+			? this.allData.filter((row) => this.getRowByFilter(row))
+			: Array.from(this.allData);
+
+		if (this.dynamicFilter && Object.keys(this.dynamicFilter).length) {
+			this.filteredData = this.filteredData.filter((row) => this.getRowByDynamicFilter(row));
+		}
+
+		const searchWithoutSearchJoin = (row: IDictionary<any>) => {
+			const searchRow = { ...row };
+			if (this.searchJoin) {
+				// do not search on columns with searchJoin
+				Object.keys(this.searchJoin).forEach((key) => delete searchRow[key]);
+			}
+			return this.getRowBySearch(searchRow);
+		};
+
+		// only after do the search
+		const searchData = this.search ? this.filteredData.filter(searchWithoutSearchJoin) : this.filteredData;
+
+		let searchIds = searchData.map((row) => row[this.uniqueKey]);
+
+		if (this.searchJoin && Object.keys(this.searchJoin).length) {
+			const searchJoinData = this.filteredData.filter((row) => this.getRowBySearchJoin(row));
+
+			// get the ids from search and searchJoin
+			searchIds = searchIds.concat(searchJoinData.map((row) => row[this.uniqueKey])).sort();
+		}
+
+		// filter filteredData using searchIds
+		this.filteredData = this.allData.filter((row) => searchIds.indexOf(row[this.uniqueKey]) !== -1);
+	}
+
+	protected getRowByDynamicFilter(row: IDictionary<any>) {
+		let filtered: any;
+		try {
+			Object.keys(this.dynamicFilter).forEach((key) => {
+				const filterItems = this.dynamicFilter[key];
+				filterItems.forEach((item) => {
+					if (filtered === false && item.relation === 'AND') return;
+					if (filtered === true && item.relation === 'OR') return;
+
+					const columnValue = Utils.normalize(row[key].toString());
+					let value: string | string[] = '';
+					if (Array.isArray(item.value)) {
+						value = item.value.map((val: string) => Utils.normalize(val.toString()));
+
+						switch (item.operation) {
+							case 'IN':
+								filtered = value.includes(columnValue);
+								break;
+							case 'NOT_IN':
+								filtered = !value.includes(columnValue);
+								break;
+							case 'BETWEEN':
+								filtered =
+									(Number(columnValue) || columnValue) >= (Number(value[0]) || value[0]) &&
+									(Number(columnValue) || columnValue) <= (Number(value[1]) || value[1]);
+								break;
+							default:
+								break;
+						}
+					} else {
+						value = Utils.normalize(item.value.toString());
+
+						switch (item.operation) {
+							case 'CONTAINS':
+								filtered = columnValue.indexOf(value) !== -1;
+								break;
+							case 'NOT_CONTAINS':
+								filtered = columnValue.indexOf(value) === -1;
+								break;
+							case 'EQUALS':
+								filtered = columnValue === value;
+								break;
+							case 'NOT_EQUALS':
+								filtered = columnValue !== value;
+								break;
+							case 'GREATER_THAN':
+								filtered = (Number(columnValue) || columnValue) > (Number(value) || value);
+								break;
+							case 'LESS_THAN':
+								filtered = (Number(columnValue) || columnValue) < (Number(value) || value);
+								break;
+							case 'GREATER_THAN_EQUALS':
+								filtered = (Number(columnValue) || columnValue) >= (Number(value) || value);
+								break;
+							case 'LESS_THAN_EQUALS':
+								filtered = (Number(columnValue) || columnValue) <= (Number(value) || value);
+								break;
+							default:
+								break;
+						}
+					}
+				});
+			});
+		} catch {
+			// do nothing
+		}
+		return filtered;
+	}
+
+	protected getRowBySearchJoin(row: IDictionary<any>) {
+		return Object.keys(this.searchJoin).some((key) => this.searchJoin[key].includes(row[key]));
+	}
+
+	public hasFilter(columnName: string): boolean {
+		return this.dynamicFilter[columnName] && this.dynamicFilter[columnName].length > 0;
+	}
+}
+
+DatasourceFactory.register('tek-memory', TekMemoryDatasource);

package/src/components/tek-datasource/tek-rest-datasource.ts

@@ -0,0 +1,224 @@
+import { DatasourceFactory, IDatasource, IDictionary, RestDatasource, URL } from '@zeedhi/core';
+import { DynamicFilterOperations, DynamicFilterRelations, IDynamicFilterItem, ITekRestDatasource } from './interfaces';
+
+export class TekRestDatasource extends RestDatasource implements ITekRestDatasource {
+	/** Dynamic filter data */
+	public dynamicFilter!: IDictionary<IDynamicFilterItem[]>;
+
+	/** Search Join data */
+	public searchJoin!: IDictionary<Array<string | number>>;
+
+	/**
+	 * Dynamic Filter Operations
+	 */
+	public dynamicFilterOperations = DynamicFilterOperations;
+
+	/**
+	 * Dynamic Filter Relations
+	 */
+	public dynamicFilterRelations = DynamicFilterRelations;
+
+	/**
+	 * Dynamic Filter applied flag
+	 */
+	protected dynamicFilterApplied = '';
+
+	/**
+	 * Create new datasource
+	 * @param props Datasource properties
+	 */
+	constructor(props: ITekRestDatasource) {
+		super({ ...props, lazyLoad: true });
+
+		if (!this.watchUrl) {
+			this.dynamicFilter = this.getInitValue('dynamicFilter', props.dynamicFilter, {});
+			this.searchJoin = this.getInitValue('searchJoin', props.searchJoin, {});
+		}
+		this.lazyLoad = this.getInitValue('lazyLoad', props.lazyLoad, this.lazyLoad);
+
+		this.createAccessors();
+		this.createObjAccessors(this.dynamicFilter, 'dynamicFilter');
+		this.createObjAccessors(this.searchJoin, 'searchJoin');
+	}
+
+	protected updateReservedKeys() {
+		this.reservedKeys.dynamic_filter = true;
+		this.reservedKeys.search_join = true;
+	}
+
+	protected updateInternalProperties(datasource: IDatasource = {}) {
+		if (!this.watchUrl) return;
+		this.updateReservedKeys();
+		super.updateInternalProperties(datasource);
+		const queryString = URL.getParsedQueryStringFromUrl();
+		this.dynamicFilter = this.getEncodedParam(queryString.dynamic_filter, datasource.dynamicFilter);
+		this.searchJoin = this.getEncodedParam(queryString.search_join, datasource.searchJoin);
+	}
+
+	protected getEncodedParam(urlParam: string, datasourceParam: IDictionary<any> = {}): IDictionary<any> {
+		return urlParam ? JSON.parse(atob(urlParam)) : datasourceParam;
+	}
+
+	protected getQueryStringValues(): IDictionary<any> {
+		const values = super.getQueryStringValues();
+		if (this.dynamicFilter && Object.keys(this.dynamicFilter).length) {
+			values.dynamic_filter = btoa(JSON.stringify(this.dynamicFilter));
+		}
+		if (this.searchJoin && Object.keys(this.searchJoin).length) {
+			values.search_join = btoa(JSON.stringify(this.searchJoin));
+		}
+		return values;
+	}
+
+	protected getUrlQueryString() {
+		const superQueryString = super.getUrlQueryString();
+		const query = URL.getParsedQueryStringFromUrl();
+
+		let dynamicFilterQuerystring = '';
+		if (query.dynamic_filter) {
+			dynamicFilterQuerystring = `&${URL.getFormattedQueryString({
+				dynamic_filter: query.dynamic_filter,
+			})}`;
+		}
+
+		let searchJoinQuerystring = '';
+		if (query.search_join) {
+			searchJoinQuerystring = `&${URL.getFormattedQueryString({
+				search_join: query.search_join,
+			})}`;
+		}
+
+		return superQueryString + dynamicFilterQuerystring + searchJoinQuerystring;
+	}
+
+	/**
+	 * Adds a new dynamic filter position or replace if exists
+	 * @param column Dynamic Filter column name
+	 * @param value Dynamic Filter value
+	 * @returns Promise with data collection
+	 */
+	public addDynamicFilter(column: string, value: any) {
+		if (this.isValidDynamicFilterValue(column, value)) {
+			this.dynamicFilter[column] = value;
+			return this.updateDynamicFilter();
+		}
+		return this.removeDynamicFilter(column);
+	}
+
+	/**
+	 * Removes a dynamic filter position
+	 * @param column Dynamic Filter column name
+	 * @returns Promise with data collection
+	 */
+	public removeDynamicFilter(column: string) {
+		delete this.dynamicFilter[column];
+		return this.updateDynamicFilter();
+	}
+
+	/**
+	 * Sets new dynamic filter value
+	 * @param filter Dynamic Filter value
+	 * @returns Promise with data collection
+	 */
+	public setDynamicFilter(filter: IDictionary<any>) {
+		this.dynamicFilter = {};
+		Object.keys(filter).forEach((column: string) => {
+			if (this.isValidDynamicFilterValue(column, filter[column])) {
+				this.dynamicFilter[column] = filter[column];
+			} else {
+				delete this.dynamicFilter[column];
+			}
+		});
+		return this.updateDynamicFilter();
+	}
+
+	/**
+	 * Clears Dynamic filter value
+	 * @returns Promise with data collection
+	 */
+	public clearDynamicFilter() {
+		this.dynamicFilter = {};
+		return this.updateDynamicFilter();
+	}
+
+	/**
+	 * Resets page and selected rows and tries to update the url
+	 * @returns Promise with data collection
+	 */
+	public async updateDynamicFilter() {
+		this.page = this.firstPage;
+		this.selectedRows = [];
+		this.visibleSelectedRows = [];
+		if (this.watchUrl) {
+			if (this.dynamicFilter && Object.keys(this.dynamicFilter).length) {
+				URL.updateQueryString({
+					dynamic_filter: btoa(JSON.stringify(this.dynamicFilter)),
+				});
+			} else {
+				URL.updateQueryString({
+					dynamic_filter: undefined,
+				});
+			}
+		}
+		return this.get();
+	}
+
+	/**
+	 * Checks if a filter value is valid
+	 * @param value Filter value
+	 * @returns Is valid filter value
+	 */
+	protected isValidDynamicFilterValue(column: string, value?: IDictionary<any>[]) {
+		return (
+			!this.reservedKeys[column] &&
+			value &&
+			value.length > 0 &&
+			value.every(
+				(filterValue) =>
+					this.dynamicFilterOperations[filterValue.operation] &&
+					this.dynamicFilterRelations[filterValue.relation] &&
+					filterValue.value !== '' &&
+					filterValue.value !== null,
+			)
+		);
+	}
+
+	/**
+	 * Retrieves request params
+	 */
+	protected getRequestParams(): any {
+		const requestParams = super.getRequestParams();
+		const isNotEmptyObj = (obj?: IDictionary) => !!(obj && Object.keys(obj).length);
+		const isValid =
+			this.dynamicFilter &&
+			Object.keys(this.dynamicFilter).every((column) => {
+				const value = this.dynamicFilter[column];
+
+				return value && value.length > 0 && this.isValidDynamicFilterValue(column, value);
+			});
+
+		if (isNotEmptyObj(this.dynamicFilter) && isValid) {
+			requestParams.dynamic_filter = btoa(JSON.stringify(this.dynamicFilter));
+		}
+
+		if (isNotEmptyObj(this.searchJoin)) {
+			requestParams.search_join = btoa(JSON.stringify(this.searchJoin));
+		}
+		return requestParams;
+	}
+
+	public hasFilter(columnName: string): boolean {
+		return this.dynamicFilter[columnName] && this.dynamicFilter[columnName].length > 0;
+	}
+
+	public clone() {
+		return {
+			...super.clone(),
+			dynamicFilter: this.dynamicFilter,
+			searchJoin: this.searchJoin,
+			type: 'tek-rest',
+		};
+	}
+}
+
+DatasourceFactory.register('tek-rest', TekRestDatasource);

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

@@ -0,0 +1,22 @@
+import { IDictionary } from '@zeedhi/core';
+import { IColumnsSearcher, ITekGridColumn } from './interfaces';
+
+export class ColumnsSearcher implements IColumnsSearcher {
+	async searchColumn(columns: ITekGridColumn[], search: string): Promise<IDictionary<(string | number)[]>> {
+		const lookupColumns = columns.filter((column) => !!column.componentProps?.datasource && !column.skipLookupSearch);
+		const searchJoin: IDictionary<Array<string | number>> = {};
+
+		if (search) {
+			const promises = lookupColumns.map(async (column) => {
+				const searchData = await column.memorySearch(search);
+
+				const lookupId = column.componentProps!.datasource.uniqueKey;
+				searchJoin[column.name] = searchData.map((row: IDictionary) => row[lookupId]);
+			});
+
+			await Promise.all(promises);
+		}
+
+		return searchJoin;
+	}
+}

package/src/components/tek-grid/dynamic-filter-datasource-factory.ts

@@ -0,0 +1,20 @@
+import { Datasource, DatasourceFactory, IDictionary } from '@zeedhi/core';
+import { IDynamicFilterDatasourceFactory } from './interfaces';
+
+export class DynamicFilterDatasourceFactory implements IDynamicFilterDatasourceFactory {
+	factory(options: IDictionary<boolean>): Datasource {
+		return DatasourceFactory.factory({
+			data: this.getFilterOptionsData(options),
+			loadAll: true,
+			translate: ['text'],
+		});
+	}
+
+	private getFilterOptionsData(options: IDictionary<boolean>): IDictionary<any>[] {
+		const optionsKeys = Object.keys(options);
+		return optionsKeys.map((item) => ({
+			text: `TEKGRID_${item}`,
+			value: item,
+		}));
+	}
+}

package/src/components/tek-grid/filter-helper.ts

@@ -0,0 +1,20 @@
+import { DateHelper } from '@zeedhi/core';
+import { TekGridColumn } from './tek-grid-column';
+
+export class TekFilterHelper {
+	public static getLabel(name: string) {
+		return DateHelper.getLabel(name);
+	}
+
+	public static getValue(name: string, column: TekGridColumn) {
+		return DateHelper.getValue(name, column.componentProps.dateFormat);
+	}
+
+	public static register(name: string, label: string, fn: () => Date | [Date, Date]) {
+		DateHelper.register(name, label, fn);
+	}
+
+	public static unregister(name: string) {
+		DateHelper.unregister(name);
+	}
+}