@zeedhi/common 3.0.2 → 3.0.4

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

@@ -1,422 +0,0 @@
-import { IDictionary, IEventParam, Metadata } from '@zeedhi/core';
-import {
-	Button,
-	Form,
-	IModal,
-	ISupportsToolbar,
-	ITekGridColumn,
-	ITekGridFilterButton,
-	Input,
-	Iterable,
-	Modal,
-	TekGridColumn,
-	TekMemoryDatasource,
-	TekRestDatasource,
-} from '..';
-import { ModalService } from '../../services';
-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;
-				}
-			});
-		}
-	}
-}