@zeedhi/common 1.111.1 → 3.0.0

package/src/components/zd-select/select.ts

@@ -0,0 +1,668 @@
+import {
+	Accessor,
+	Datasource,
+	DatasourceFactory,
+	FormatterParserProvider,
+	IDatasource,
+	IDictionary,
+	Loader,
+	Mask,
+	Utils,
+} from '@zeedhi/core';
+import debounce from 'lodash.debounce';
+import { DataValueOutHelper, DatasourceSearcher, ISelectDataValueOutItem, SearchParam } from '../../utils';
+import { IComponentRender } from '../zd-component/interfaces';
+import { InputFactory } from '../zd-input/input-factory';
+import { TextInput } from '../zd-text-input/text-input';
+import { ISelect } from './interfaces';
+
+/**
+ * Base class for Select component.
+ */
+export class Select extends TextInput implements ISelect {
+	/**
+	 * Source of select items
+	 */
+	public datasource: Datasource;
+
+	/**
+	 * Field used to display values
+	 */
+	public dataText: string | any[] = '';
+
+	/**
+	 * Field used to display values when the select is closed
+	 */
+	public dataTextDiscrete: string | any[] = '';
+
+	/**
+	 * Value used to join display values
+	 */
+	public dataTextSeparator = ' | ';
+
+	/**
+	 * Field used to save values
+	 */
+	public dataValue = '';
+
+	/**
+	 * Field used to make the item disabled
+	 */
+	public dataDisabled = 'disabled';
+
+	/**
+	 * Defines if field value should be an object
+	 */
+	public returnObject = false;
+
+	/**
+	 * Enables search input
+	 */
+	public autocomplete = true;
+
+	/**
+	 * Automatically select option if only one is filtered
+	 */
+	public autoSelection = true;
+
+	/**
+	 * Prevents load select data when the input is focused
+	 */
+	public preventLoadOnFocus = true;
+
+	/**
+	 * Maximum height of select menu
+	 */
+	public menuMaxHeight: string | number = 304;
+
+	/**
+	 * Maximum width of select menu
+	 */
+	public menuMaxWidth: string | number = 'auto';
+
+	/**
+	 * Input select value
+	 */
+	public selectValue: IDictionary<any> | null = null;
+
+	/**
+	 * Components that will be rendered in itemAfterSlot case
+	 */
+	public itemAfterSlot: IComponentRender[] = [];
+
+	/**
+	 * Components that will be rendered in itemBeforeSlot case
+	 */
+	public itemBeforeSlot: IComponentRender[] = [];
+
+	/**
+	 * Items that will be disabled for selection. Users will still see them
+	 */
+	public disabledItems: any[] = [];
+
+	/**
+	 * Defines if data handling should be manual or automatic
+	 */
+	public manualMode = false;
+
+	/**
+	 * Defines if data handling should be manual or automatic
+	 */
+	public searchParam: SearchParam = 'SEARCH';
+
+	/**
+	 * Defines other columns that must me set on form on change
+	 */
+	public dataValueOut: ISelectDataValueOutItem[] = [];
+
+	/**
+	 * Defines the name of the form target to set using dataValueOut
+	 */
+	public dataValueOutFormName = '';
+
+	/**
+	 * Input search value
+	 */
+	private searchValue = '';
+
+	protected dirtySearchValue = '';
+
+	protected formatterFn = FormatterParserProvider.getFormatter('ZdSelect');
+
+	private discreteProps?: {
+		dataText: string | any[];
+		dataTextSeparator: string;
+	};
+
+	public loadMoreAmount = 0;
+
+	/**
+	 * Conditions for pushing a value:
+	 * 1. Every time a value from outside the datasource is set
+	 * 2. On blur, if the current value is not part of the cache
+	 * 3. When the datasource is reloaded, if the current value is not part of the datasource but is in another page
+	 *
+	 * Conditions for removing a push
+	 * 1. When the datasource is reloaded, if the current value cannot be found in another page
+	 * 2. When the datasource is reloaded, if the push is already part of the datasource
+	 * 3. When the search is empty
+	 * 4. On blur, if the current value is null
+	 */
+	public pushedValue: IDictionary | null = null;
+
+	public defaultValue: any;
+
+	protected cachedData: IDictionary[] = [];
+
+	protected cachedTotal = 0;
+
+	/* istanbul ignore next */
+	/**
+	 * Create a new Select.
+	 * @param props Select properties
+	 */
+	constructor(props: ISelect) {
+		super({ ...props, value: undefined });
+		this.appendIcon = this.getInitValue('appendIcon', props.appendIcon, 'expand');
+		this.dataText = this.getInitValue('dataText', props.dataText, this.dataText);
+		this.dataTextDiscrete = this.getInitValue('dataTextDiscrete', props.dataTextDiscrete, this.dataTextDiscrete);
+		this.dataTextSeparator = this.getInitValue('dataTextSeparator', props.dataTextSeparator, this.dataTextSeparator);
+		this.dataValue = this.getInitValue('dataValue', props.dataValue, this.dataValue);
+		this.dataDisabled = this.getInitValue('dataDisabled', props.dataDisabled, this.dataDisabled);
+		this.menuMaxHeight = this.getInitValue('menuMaxHeight', props.menuMaxHeight, this.menuMaxHeight);
+		this.menuMaxWidth = this.getInitValue('menuMaxWidth', props.menuMaxWidth, this.menuMaxWidth);
+		this.returnObject = this.getInitValue('returnObject', props.returnObject, this.returnObject);
+		this.autocomplete = this.getInitValue('autocomplete', props.autocomplete, this.autocomplete);
+		this.autoSelection = this.getInitValue('autoSelection', props.autoSelection, this.autoSelection);
+		this.disabledItems = this.getInitValue('disabledItems', props.disabledItems, this.disabledItems);
+		this.manualMode = this.getInitValue('manualMode', props.manualMode, this.manualMode);
+		this.searchParam = this.getInitValue('searchParam', props.searchParam, this.searchParam);
+		this.dataValueOut = this.getInitValue('dataValueOut', props.dataValueOut, this.dataValueOut);
+		this.dataValueOutFormName = this.getInitValue(
+			'dataValueOutFormName',
+			props.dataValueOutFormName,
+			this.dataValueOutFormName,
+		);
+		this.setDataProperties(props);
+		const defaultDatasource = this.getDefaultDatasource(props);
+		this.datasource = DatasourceFactory.factory(defaultDatasource);
+
+		this.defaultValue = props.value;
+		if (Accessor.isAccessorDefinition(props.value)) {
+			this.defaultValue = this.getAccessorValue(props.value);
+
+			this.getInitValue('value', props.value, this.value);
+		}
+
+		this.preventLoadOnFocus = !defaultDatasource.lazyLoad;
+		this.preventLoadOnFocus = this.getInitValue(
+			'preventLoadOnFocus',
+			props.preventLoadOnFocus,
+			this.preventLoadOnFocus,
+		);
+		this.loadMoreAmount = this.datasource.limit;
+		this.itemAfterSlot = props.itemAfterSlot || this.itemAfterSlot;
+		this.itemBeforeSlot = props.itemBeforeSlot || this.itemBeforeSlot;
+
+		this.internalDisplayValue = this.formatter(this.selectValue);
+		this.createAccessors();
+	}
+
+	public async onCreated(): Promise<void> {
+		super.onCreated();
+
+		this.registerGetCallback();
+		await this.datasource.initialize();
+	}
+
+	public onMounted(element: any) {
+		super.onMounted(element);
+
+		this.setDefaultValue(this.defaultValue);
+	}
+
+	/**
+	 * Select items list, containing all of the items that appear on the menu
+	 * including the pushedValue
+	 */
+	get items() {
+		if (!this.pushedValue) return this.datasource.data;
+
+		return [this.pushedValue, ...this.datasource.data];
+	}
+
+	/**
+	 * Initializes the select data properties: dataText, dataValue and dataTextDiscrete
+	 * @param props Select props
+	 */
+	private setDataProperties(props: ISelect) {
+		if (props.datasource?.type === 'simple') {
+			this.dataValue = 'value';
+			this.dataText = this.dataText || this.dataValue;
+		}
+		if (this.dataText && !Array.isArray(this.dataText)) this.dataText = [this.dataText];
+		if (this.dataTextDiscrete && !Array.isArray(this.dataTextDiscrete)) this.dataTextDiscrete = [this.dataTextDiscrete];
+		this.discreteProps = {
+			dataText: this.dataTextDiscrete,
+			dataTextSeparator: this.dataTextSeparator,
+		};
+	}
+
+	private getAccessorValue(accessorName: string) {
+		const [controller, accessor] = Accessor.getAccessor(accessorName);
+		const instance = Loader.getInstance(controller);
+
+		return instance[accessor];
+	}
+
+	/**
+	 * Retrieves datasource structure applying infinity scroll
+	 * @param field Field structure
+	 */
+	private getDefaultDatasource(field: ISelect): IDatasource {
+		const getDataTextNames = (text: any) => (typeof text === 'string' ? text : text.name);
+		const searchInDefault = this.dataText ? (this.dataText as any[]).map(getDataTextNames) : [];
+		const searchIn = (field.datasource?.searchIn || []).concat(searchInDefault);
+		return {
+			...field.datasource,
+			searchIn,
+			lazyLoad: (field.value !== '' && field.value !== undefined) || field.datasource?.lazyLoad,
+		};
+	}
+
+	/**
+	 * Returns the currentRow in the dataText key
+	 */
+	public formatter(
+		value?: string | IDictionary<any> | null,
+		props?: {
+			dataText: string | any[];
+			dataTextSeparator: string;
+		},
+	): any {
+		return this.formatterFn(value, props ?? this);
+	}
+
+	protected registerGetCallback() {
+		const callback = async () => {
+			if (this.value && this.indexOf(this.value) === -1 && !this.pushedValue) {
+				this.pushedValue = this.selectValue;
+			}
+
+			if (this.indexOf(this.value) === -1 && !this.datasource.search && !this.isFocused) {
+				await this.setValue(this.value, false);
+			}
+
+			if (this.indexOf(this.value) !== -1) {
+				this.pushedValue = null;
+			}
+
+			if (!this.datasource.search && !this.manualMode) {
+				this.cachedData = [...this.datasource.data];
+				this.cachedTotal = this.datasource.total;
+			}
+		};
+		this.datasource.registerGetCallback(callback);
+	}
+
+	public get search() {
+		return this.searchValue;
+	}
+
+	public set search(value: string) {
+		this.searchValue = value || '';
+		const formattedSelectValue = this.formatter(this.selectValue);
+		const formattedDiscreteValue = this.formatter(this.selectValue, this.discreteProps);
+		if (
+			this.searchValue === '' ||
+			(this.searchValue !== formattedSelectValue && this.searchValue !== formattedDiscreteValue)
+		) {
+			this.dirtySearchValue = this.searchValue;
+			if (this.isFocused) this.debounceSearch(this.searchValue);
+		}
+	}
+
+	/**
+	 * Sets select default value and dispatches defaultAssigned event.
+	 * @param value Default value
+	 */
+	protected async setDefaultValue(value: any) {
+		if (value || typeof value === 'number') {
+			await this.setValue(value, false);
+		}
+	}
+
+	/**
+	 * Finds and retrieves items searching by value
+	 * @param value Default value
+	 */
+	protected async getItemsBySearchValue(value: any) {
+		this.datasource.loading = true;
+
+		const datasourceSearcher = new DatasourceSearcher();
+		const result = await datasourceSearcher.search(this.datasource, value, this.dataValue, this.searchParam);
+
+		this.datasource.loading = false;
+
+		return result;
+	}
+
+	public async focus(event: Event, element: any) {
+		super.focus(event, element);
+		this.afterFocus();
+	}
+
+	protected async afterFocus() {
+		if (!this.preventLoadOnFocus) {
+			await this.datasource.get();
+			this.preventLoadOnFocus = true;
+		}
+
+		this.updateSearch(this.dirtySearchValue);
+
+		if (this.manualMode) return;
+
+		this.cachedData = [...this.datasource.data];
+		this.cachedTotal = this.datasource.total;
+	}
+
+	/**
+	 * Field value
+	 */
+	get value() {
+		return this.getReturnValue(this.selectValue);
+	}
+
+	set value(value: any) {
+		const valueToSet = this.getValue(value);
+		const fieldSingleValue = this.getValue(this.selectValue);
+		if (Utils.isEqual(valueToSet, fieldSingleValue)) return;
+
+		this.setValue(value);
+	}
+
+	public async setValue(value: any, callEvent = true) {
+		const foundInAnotherPage = await this.setFieldValue(value);
+
+		if (foundInAnotherPage) {
+			this.pushedValue = this.selectValue;
+		} else {
+			this.pushedValue = null;
+		}
+
+		if (callEvent) {
+			this.callChangeEvent(this.selectValue);
+		}
+	}
+
+	protected async setFieldValue(value: any) {
+		if (typeof value !== 'number' && (!value || Object.keys(value).length === 0)) {
+			this.setFieldRowValue(null);
+			return false;
+		}
+
+		const filterValue = this.getValue(value);
+
+		const rowFromData = this.datasource.data.find((row) => row[this.dataValue] === filterValue);
+
+		let rowFromSearch = rowFromData;
+
+		if (!rowFromData && !this.manualMode) {
+			[rowFromSearch] = await this.getItemsBySearchValue(filterValue);
+		}
+
+		if (!rowFromSearch) {
+			this.setFieldRowValue(null);
+
+			return false;
+		}
+
+		this.setFieldRowValue(rowFromSearch);
+
+		return !rowFromData;
+	}
+
+	/**
+	 * Set value accessors
+	 * @param row
+	 * @param value
+	 */
+	protected setFieldRowValue(row: any) {
+		if (row) {
+			this.selectValue = row;
+		} else {
+			this.selectValue = null;
+		}
+		this.datasource.currentRow = row;
+		this.internalDisplayValue = this.formatter(this.selectValue);
+	}
+
+	/**
+	 * Retrieves value based on the returnObject definition
+	 */
+	protected getReturnValue(value: IDictionary | null) {
+		if (!value) {
+			return null;
+		}
+
+		return this.returnObject ? value : value[this.dataValue];
+	}
+
+	/**
+	 * Retrieves a single-value (dataValue property)
+	 */
+	protected getValue(value: any | IDictionary | null) {
+		if (!value) return null;
+
+		if (typeof value === 'object') return value[this.dataValue];
+
+		return value;
+	}
+
+	/**
+	 * Event trigged when component loses the focus and value changes
+	 * @param value inputted value
+	 */
+	public selectChange(value: any, event?: Event, element?: any) {
+		const changeValue = this.getReturnValue(value);
+		this.setValue(value, false).then(() => {
+			DataValueOutHelper.setDataValueOut(this, value);
+			this.callChangeEvent(changeValue, event, element);
+		});
+	}
+
+	protected callChangeEvent(value: any, event?: Event, element?: any) {
+		this.callEvent('change', { event, element, value, component: this });
+	}
+
+	/**
+	 * Event trigged when value is inputted
+	 * @param value inputted value
+	 */
+	public selectInput(value: any, event?: Event, element?: any) {
+		if (value === this.lastInputValue) return;
+
+		this.lastInputValue = value;
+		this.callEvent('input', { event, element, value, component: this });
+	}
+
+	/**
+	 * Updates search value
+	 * @param value Search value
+	 */
+	public async updateSearch(value: string) {
+		if (value === this.datasource.search) return;
+
+		await this.datasource.setSearch(value);
+	}
+
+	/**
+	 * Update datasource data
+	 */
+	public async updateData(data: IDictionary<any>[]): Promise<any> {
+		return this.datasource.updateData(data);
+	}
+
+	/**
+	 * Update datasource items
+	 */
+	public async updateItems(items: (string | number)[]): Promise<any> {
+		const data = items.map((item: string | number) => ({ value: item }));
+		return this.datasource.updateData(data);
+	}
+
+	protected async doSearch(value: string) {
+		if (this.manualMode || value) {
+			await this.updateSearch(value);
+		} else {
+			this.datasource.search = this.searchValue;
+			this.pushedValue = null;
+			this.datasource.data = [...this.cachedData];
+			this.datasource.total = this.cachedTotal;
+		}
+	}
+
+	private debounceSearch: (value: string) => void = debounce(this.doSearch, 500);
+
+	/**
+	 * Load more data
+	 */
+	public async loadMore() {
+		await this.datasource.setLimit(this.datasource.limit + this.loadMoreAmount);
+	}
+
+	/**
+	 * Triggered when the component loses focus.
+	 * @param event DOM event
+	 * @param element Element that lost the focus
+	 */
+	public blur(event: Event, element: any) {
+		if (this.autocomplete) {
+			this.datasource.search = '';
+			this.dirtySearchValue = '';
+
+			this.checkValueOnBlur();
+		}
+
+		super.blur(event, element);
+	}
+
+	protected checkValueOnBlur() {
+		if (!this.search && this.value !== null) {
+			this.setValue(null);
+		}
+
+		if (this.manualMode) return;
+
+		this.datasource.data = [...this.cachedData];
+		this.datasource.total = this.cachedTotal;
+
+		if (this.value === null) {
+			this.pushedValue = null;
+			return;
+		}
+
+		if (this.indexOf(this.value, this.cachedData) === -1) {
+			this.pushedValue = this.selectValue;
+		}
+	}
+
+	/**
+	 * Checks if the 'load more' option should be shown \
+	 * conditions to show:
+	 * - datasource has data
+	 * - datasource is not loading
+	 * - datasource is not loadAll
+	 * - datasource current data length is less than the total
+	 */
+	public showLoadMore() {
+		return (
+			!!this.datasource.data.length &&
+			!this.datasource.loading &&
+			!this.datasource.loadAll &&
+			this.datasource.data.length < this.datasource.total
+		);
+	}
+
+	/**
+	 * Checks if skeleton loaders should be shown \
+	 * conditions to show:
+	 * - datasource is loading and
+	 * - datasource has no data or has less data than the total
+	 */
+	public showSkeletonLoaders() {
+		return (
+			this.datasource.loading &&
+			(this.datasource.data.length === 0 || this.datasource.data.length < this.datasource.total)
+		);
+	}
+
+	public onBeforeDestroy() {
+		super.onBeforeDestroy();
+		this.datasource!.destroy();
+	}
+
+	/**
+	 * Retrieves the index of a select value inside a data array
+	 */
+	public indexOf(search: IDictionary | string | number, data: IDictionary[] = this.datasource.data) {
+		const value = search && typeof search === 'object' ? search[this.dataValue] : search;
+
+		return data.findIndex((row: IDictionary) => row[this.dataValue] === value);
+	}
+}
+
+FormatterParserProvider.registerFormatter(
+	'ZdSelect',
+	(
+		value: any,
+		{
+			dataText,
+			dataTextSeparator = ' | ',
+		}: {
+			dataText: string | any[];
+			dataTextSeparator: string;
+		},
+	) => {
+		if (value === null || value === undefined) {
+			return null;
+		}
+
+		if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+			return value;
+		}
+
+		const dataTextArr = Array.isArray(dataText) ? dataText : [dataText];
+
+		const dataTextNames: string[] = [];
+		const masks: any[] = [];
+		dataTextArr.forEach((text: any) => {
+			if (typeof text === 'string') {
+				dataTextNames.push(text);
+				masks.push('');
+			} else {
+				dataTextNames.push(text.name);
+				if (Accessor.isAccessorDefinition(text.mask)) {
+					const [controller, accessor] = Accessor.getAccessor(text.mask);
+					masks.push(Loader.getInstance(controller)[accessor]);
+				} else {
+					masks.push(text.mask);
+				}
+			}
+		});
+		return dataTextNames.reduce((result: string, column: string, index: number) => {
+			if (value[column] !== null && value[column] !== undefined) {
+				const separator = index > 0 ? dataTextSeparator : '';
+				let masked = value[column];
+				if (masks[index]) {
+					const maskValue = typeof masks[index] === 'function' ? masks[index](value[column]) : masks[index];
+					masked = Mask.getValueWithMask(value[column], maskValue);
+				}
+				return result + separator + masked;
+			}
+			return result;
+		}, '');
+	},
+);
+
+InputFactory.register('ZdSelect', Select);

package/src/components/zd-select-multiple/interfaces.ts

@@ -0,0 +1,21 @@
+import { IEventParam } from '@zeedhi/core';
+import { EventDef, IComponentEvents } from '../zd-component/interfaces';
+import { ISelect } from '../zd-select/interfaces';
+import { SelectMultiple } from './select-multiple';
+
+export type ISelectMultipleEvent = IEventParam<SelectMultiple>;
+
+export interface ISelectMultipleEvents<T = IEventParam<any>> extends IComponentEvents<T> {
+	selectedAll?: EventDef<T>;
+	unselectedAll?: EventDef<T>;
+}
+
+export interface ISelectMultiple extends ISelect {
+	moreChip?: number;
+	showSelectAll?: boolean;
+	events?: ISelectMultipleEvents;
+	maxRows?: string | number;
+	limit?: number | null;
+	showCheckboxAll?: boolean;
+	checkboxAll?: boolean;
+}