@zeedhi/teknisa-components-common 3.0.0 → 3.0.1

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