@zeedhi/teknisa-components-common 1.117.1 → 3.0.1

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);
+	}
+}

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

@@ -0,0 +1,419 @@
+import { IDictionary, IEventParam, Metadata } from '@zeedhi/core';
+import {
+	Button,
+	Form,
+	IModal,
+	Input,
+	Iterable,
+	Modal,
+	ModalService,
+} from '@zeedhi/common';
+import { ISupportsToolbar, ITekGridColumn, ITekGridFilterButton } from './interfaces';
+import { TekGridColumn } from './tek-grid-column';
+import { TekMemoryDatasource, TekRestDatasource } from '../tek-datasource';
+import { TekFilterHelper } from './filter-helper';
+
+/**
+ * Base class for TekGrid Filter Button component
+ */
+export class TekGridFilterButton extends Button implements ITekGridFilterButton {
+	public gridName?: string;
+
+	public grid: Iterable<TekGridColumn> & ISupportsToolbar;
+
+	public showCheckboxAll = false;
+
+	private filterModal?: Modal;
+
+	protected filterFormInputs: IDictionary<string[]> = {};
+
+	constructor(props: ITekGridFilterButton) {
+		super(props);
+		this.gridName = this.getInitValue('gridName', props.gridName, this.gridName);
+		this.grid = this.getInitValue('grid', props.grid, undefined);
+		this.showCheckboxAll = this.getInitValue('showCheckboxAll', props.showCheckboxAll, this.showCheckboxAll);
+		this.createAccessors();
+
+		if (!this.grid) this.loadGrid();
+	}
+
+	public loadGrid(gridName?: string) {
+		if (gridName) this.gridName = gridName;
+		if (!this.gridName) return;
+
+		this.grid = Metadata.getInstances(this.gridName)[0];
+	}
+
+	public click(event?: Event) {
+		this.callEvent('click', { component: this, event });
+		this.grid.callEvent('filterClick', { component: this.grid, event });
+		if (!event?.defaultPrevented) {
+			this.createFilterFromColumns.call(this);
+		}
+	}
+
+	private loadFilterValues({ component }: IEventParam<Form>) {
+		const changedCompNames: string[] = [];
+
+		const { datasource } = this.grid;
+		if (datasource instanceof TekRestDatasource || datasource instanceof TekMemoryDatasource) {
+			const { dynamicFilter } = datasource;
+
+			const newDynamicFilter = { ...this.grid.defaultFilter, ...dynamicFilter };
+
+			Object.keys(newDynamicFilter).forEach((column) => {
+				if (newDynamicFilter[column] && newDynamicFilter[column].length > 0) {
+					newDynamicFilter[column].forEach((filterItem: any, index: number) => {
+						const relation = filterItem.relation || 'AND';
+						const operation = filterItem.operation || 'CONTAINS';
+						const compName = `${this.grid!.name}-filter-${relation}-${operation}-${column}-${index}`;
+						changedCompNames.push(compName);
+						component.value[compName] = filterItem.value;
+
+						let helperValue = '';
+						const columnObj = this.grid!.getColumn(column);
+						if (columnObj instanceof TekGridColumn) {
+							const { filterProps } = columnObj;
+							if (!Array.isArray(filterProps)) {
+								helperValue = filterProps.helperValue || '';
+							} else {
+								filterProps.forEach((prop) => {
+									if ((prop.relation || 'AND') === relation && (prop.operation || 'CONTAINS') === operation) {
+										helperValue = prop.helperValue || '';
+									}
+								});
+							}
+							const inputObj = Metadata.getInstances(compName);
+							if (helperValue && inputObj.length && inputObj[0]) {
+								(inputObj[0] as Input).hint = TekFilterHelper.getLabel(helperValue);
+							}
+						}
+					});
+				}
+			});
+		} else {
+			const { filter } = datasource;
+
+			const newFilter = { ...this.grid.defaultFilter, ...filter };
+
+			Object.keys(newFilter).forEach((item) => {
+				if (newFilter[item]) {
+					const compName = `${this.grid!.name}-filter-AND-CONTAINS-${item}-0`;
+					changedCompNames.push(compName);
+					component.value[compName] = newFilter[item];
+				}
+			});
+		}
+
+		Object.keys(component.value).forEach((compName: string) => {
+			if (changedCompNames.indexOf(compName) === -1) {
+				component.value[compName] = null;
+			}
+		});
+	}
+
+	public hideFilterModal() {
+		this.filterModal!.hide();
+	}
+
+	public destroyFilterModal() {
+		if (this.filterModal) this.filterModal!.destroy();
+	}
+
+	private createFilterFromColumns() {
+		if (!this.filterModal) {
+			const originalProps = {
+				height: 'auto',
+				maxHeight: '18.75rem',
+				persistent: true,
+				title: 'FILTER',
+			};
+			const mergeModalFilterProps = Object.assign(originalProps, this.grid.modalFilterProps);
+			const filterModalDef: IModal = {
+				name: `${this.grid.name}-filter-modal`,
+				persistent: mergeModalFilterProps.persistent,
+				grid: mergeModalFilterProps.grid,
+				cssClass: mergeModalFilterProps.cssClass,
+				cssStyle: mergeModalFilterProps.cssStyle,
+				draggable: mergeModalFilterProps.draggable,
+				dragHandle: mergeModalFilterProps.dragHandle,
+				fullscreen: mergeModalFilterProps.fullscreen,
+				light: mergeModalFilterProps.light,
+				dark: mergeModalFilterProps.dark,
+				escKeydownStop: false,
+				children: [
+					{
+						name: `${this.grid.name}-filter-header-container`,
+						component: 'ZdContainer',
+						cssClass: 'zd-pa-0 zd-display-flex',
+						children: [
+							{
+								name: `${this.grid.name}-filter-title`,
+								component: 'ZdText',
+								cssStyle: `color: ${'var(--v-primary-base);'}`,
+								text: mergeModalFilterProps.title,
+								tag: 'h3',
+							},
+							{
+								name: `${this.grid.name}-filter-spacer`,
+								component: 'VSpacer',
+							},
+							{
+								name: `${this.grid.name}-filter-close-button`,
+								component: 'ZdModalCloseButton',
+								small: true,
+								modalName: `${this.grid.name}-filter-modal`,
+							},
+						],
+					},
+					{
+						name: `${this.grid.name}-filter-content-container`,
+						component: 'ZdContainer',
+						scrollView: true,
+						cssClass: 'zd-my-2 zd-pa-0 tek-grid-filter-content-container',
+						maxHeight: mergeModalFilterProps!.maxHeight,
+						height: mergeModalFilterProps!.height,
+						children: [
+							{
+								name: `${this.grid.name}-filter-form`,
+								component: 'ZdForm',
+								cssClass: 'zd-my-2 zd-pa-0',
+								children: this.getFilterModalComponents(),
+								events: {
+									onMounted: this.loadFilterValues.bind(this),
+								},
+							},
+						],
+					},
+					{
+						name: `${this.grid.name}-filter-footer-container`,
+						component: 'ZdContainer',
+						cssClass: 'zd-pa-0',
+						children: [
+							{
+								name: `${this.grid.name}-filter-footer`,
+								component: 'ZdFooter',
+								color: 'transparent',
+								padless: true,
+								leftSlot: [
+									{
+										name: `${this.grid.name}-filter-clearButton`,
+										component: 'ZdButton',
+										label: 'CLEAR',
+										outline: true,
+										events: {
+											click: this.clearFilter.bind(this),
+										},
+									},
+								],
+								rightSlot: [
+									{
+										name: `${this.grid.name}-filter-cancelButton`,
+										component: 'ZdButton',
+										label: 'CANCEL',
+										keyMap: {
+											esc: {
+												event: this.hideFilterModal.bind(this),
+												focus: true,
+												visible: true,
+												input: true,
+												stop: true,
+											},
+										},
+										outline: true,
+										events: {
+											click: this.hideFilterModal.bind(this),
+										},
+									},
+									{
+										name: `${this.grid.name}-filter-okButton`,
+										component: 'ZdButton',
+										label: 'OK',
+										events: {
+											click: this.applyFilter.bind(this),
+										},
+										keyMap: {
+											'mod+enter': {
+												event: this.applyFilter.bind(this),
+												focus: true,
+												input: true,
+												stop: true,
+												visible: true,
+											},
+										},
+									},
+								],
+							},
+						],
+					},
+				],
+			};
+
+			this.filterModal = ModalService.create(filterModalDef);
+		} else {
+			this.loadFilterValues({ component: Metadata.getInstance(`${this.grid.name}-filter-form`) });
+		}
+		this.filterModal.show();
+	}
+
+	public onBeforeDestroy() {
+		super.onBeforeDestroy();
+		this.destroyFilterModal();
+	}
+
+	private formatFormValue(filterForm: Form) {
+		// TODO: add this logic when SelectMultiple is implemented
+		// return Object.keys(filterForm.value).reduce((result, item) => {
+		//   try {
+		//     const itemInstance = filterForm.getChildInstance<Input>(item);
+		//     if (!(itemInstance instanceof SelectMultiple) || !itemInstance.checkboxAll) return result;
+		//     // when selectmultiple with checkboxAll, should either remove it from the filter or
+		//     // change the value to T, depending on selectAllCompatibilityMode
+		//     if ((Config as ITekConfig).selectAllCompatibilityMode) {
+		//       result[item] = 'T';
+		//       return result;
+		//     }
+
+		//     delete result[item];
+		//     return result;
+		//   } catch (e) {
+		//     return result;
+		//   }
+		// }, { ...filterForm.value });
+
+		return filterForm.value;
+	}
+
+	private async applyFilter({ event }: any) {
+		const filterForm = Metadata.getInstance<Form>(`${this.grid.name}-filter-form`);
+		const isFormValid = await filterForm.validate();
+		if (isFormValid.valid) {
+			const { datasource } = this.grid;
+			const filter: IDictionary = {};
+			const formValue = this.formatFormValue(filterForm);
+
+			if (datasource instanceof TekRestDatasource || datasource instanceof TekMemoryDatasource) {
+				Object.keys(formValue).forEach((item) => {
+					const itemValue = formValue[item];
+
+					if (itemValue && !(Array.isArray(itemValue) && !itemValue.length)) {
+						const relationAndOperationAndName = item.split(`${this.grid!.name}-filter-`)[1];
+						const [relation, operation] = relationAndOperationAndName.split('-');
+						let columnName = relationAndOperationAndName.split(`${relation}-${operation}-`)[1];
+						columnName = columnName.split('-').slice(0, -1).join('-'); // remove index
+
+						if (!filter[columnName]) {
+							filter[columnName] = [];
+						}
+
+						const value = itemValue;
+						filter[columnName].push({
+							relation,
+							operation,
+							value,
+						});
+					}
+				});
+
+				datasource.dynamicFilter = filter;
+				this.setFilter(filter, event, datasource.setDynamicFilter.bind(datasource));
+			} else {
+				Object.keys(formValue).forEach((item) => {
+					let columnName = item.split(`${this.grid!.name}-filter-AND-CONTAINS-`)[1];
+					columnName = columnName.split('-').slice(0, -1).join('-'); // remove index
+
+					if (formValue[item]) {
+						filter[columnName] = formValue[item];
+					}
+				});
+
+				datasource.filter = filter;
+				this.setFilter(filter, event, datasource.setFilter.bind(datasource));
+			}
+
+			this.grid.changeLayout(event);
+		}
+	}
+
+	private setFilter(filter: IDictionary, event: Event, filterFn: (filter: IDictionary) => Promise<any>) {
+		this.grid.callEvent('beforeApplyFilter', { component: this.grid, event });
+		if (event.defaultPrevented) return;
+
+		filterFn(filter);
+		this.hideFilterModal();
+	}
+
+	private clearFilter() {
+		const filterForm = Metadata.getInstance<Form>(`${this.grid!.name}-filter-form`);
+		Object.keys(filterForm.value).forEach((item) => {
+			filterForm.value[item] = null;
+		});
+	}
+
+	private sortFilterIndex(col1: ITekGridColumn, col2: ITekGridColumn) {
+		const index1 = col1.filterIndex !== undefined ? col1.filterIndex : Number.MAX_SAFE_INTEGER;
+		const index2 = col2.filterIndex !== undefined ? col2.filterIndex : Number.MAX_SAFE_INTEGER;
+		return index1 - index2;
+	}
+
+	private getFilterModalComponents() {
+		const filterColumns: ITekGridColumn[] = [];
+		let columnComponentName: any;
+		[...this.grid.columns].sort(this.sortFilterIndex).forEach((column) => {
+			const filterProps = Array.isArray(column.filterProps) ? column.filterProps : [column.filterProps];
+			if (column.filterable && filterProps && filterProps.length > 0) {
+				this.filterFormInputs[column.name] = [];
+
+				filterProps.forEach((filterItem, index: number) => {
+					const { datasource } = this.grid;
+					if (datasource instanceof TekRestDatasource || datasource instanceof TekMemoryDatasource) {
+						const relation = filterItem.relation || 'AND';
+						const operation = filterItem.operation || 'CONTAINS';
+
+						columnComponentName = `${this.grid!.name}-filter-${relation}-${operation}-${column.name}-${index}`;
+					} else {
+						columnComponentName = `${this.grid!.name}-filter-AND-CONTAINS-${column.name}-${index}`;
+					}
+
+					this.filterFormInputs[column.name].push(columnComponentName);
+
+					const newColumnComponent = {
+						label: column.label,
+						...column.componentProps,
+						...filterItem,
+						name: columnComponentName,
+					};
+
+					if (filterItem.helperOptions) {
+						if (!newColumnComponent.events) newColumnComponent.events = {};
+						newColumnComponent.events.change = this.changeHelperEvent.bind(this, column);
+					}
+
+					if (newColumnComponent.component === 'ZdSelectMultiple') {
+						newColumnComponent.showCheckboxAll = newColumnComponent.showCheckboxAll ?? this.showCheckboxAll;
+					}
+
+					filterColumns.push(newColumnComponent);
+				});
+			}
+		});
+		return filterColumns;
+	}
+
+	private changeHelperEvent(column: TekGridColumn, { component }: any) {
+		const { helperValue } = component;
+		const componentName = component.name;
+
+		if (!Array.isArray(column.filterProps)) {
+			column.filterProps.helperValue = helperValue;
+		} else {
+			column.filterProps.forEach((prop) => {
+				const relationAndOperationAndName = componentName.split(`${this.grid!.name}-filter-`)[1];
+				const [relation, operation] = relationAndOperationAndName.split('-');
+				if ((prop.relation || 'AND') === relation && (prop.operation || 'CONTAINS') === operation) {
+					prop.helperValue = helperValue;
+				}
+			});
+		}
+	}
+}