@zeedhi/common 1.111.1 → 3.0.0

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

@@ -0,0 +1,245 @@
+import { Accessor, Config, Datasource, DatasourceFactory, I18n, IDictionary, Loader } from '@zeedhi/core';
+import clonedeep from 'lodash.clonedeep';
+import { ComponentRender } from '../zd-component/component-render';
+import { IComponentRender } from '../zd-component/interfaces';
+import { Column } from './column';
+import { ColumnNotFoundError } from './column-not-found';
+import { ConditionsManager } from './conditions-manager';
+import { IColumn, IConditionsManager, IIterable, IIterableEvents, IIterableProps } from './interfaces';
+import { IterableController } from './iterable-controller';
+
+/**
+ * Base class for Iterable components.
+ */
+export abstract class Iterable<T extends Column = Column>
+	extends ComponentRender<IIterableProps>
+	implements IIterable<T>
+{
+	/**
+	 * Iterable datasource
+	 */
+	public datasource!: Datasource;
+
+	// Iterable columns
+	public columns: T[] = [];
+
+	// Define page Sizes
+	public pageSizes: string[] = ['5', '10', '25', '50'];
+
+	// Defines grid events.
+	declare events: IIterableEvents;
+
+	// Uses virtual scrolling to render data.
+	public virtualScroll = false;
+
+	// Number of lines outside the viewport to cache when using virtual scroll.
+	public virtualScrollCache = 5;
+
+	// Defines if searchIn should consider only visible columns or not
+	public searchVisibleOnly!: boolean;
+
+	public defaultSearchVisibleOnly: boolean = Config.iterableSearchVisibleOnly ?? true;
+
+	private conditionsManager!: IConditionsManager;
+
+	/* istanbul ignore next */
+	/**
+	 * Creates a new Iterable.
+	 * @param props Iterable properties
+	 */
+	constructor(props: IIterableProps) {
+		super(props);
+		this.columns = this.createColumns(props);
+
+		this.pageSizes = this.getInitValue('pageSizes', props.pageSizes, this.pageSizes);
+		this.searchVisibleOnly = this.getInitValue(
+			'searchVisibleOnly',
+			props.searchVisibleOnly,
+			this.defaultSearchVisibleOnly,
+		);
+		this.virtualScroll = this.getInitValue('virtualScroll', props.virtualScroll, this.virtualScroll);
+		this.virtualScrollCache = this.getInitValue(
+			'virtualScrollCache',
+			props.virtualScrollCache,
+			this.virtualScrollCache,
+		);
+	}
+
+	protected initializeDatasource(props: IIterableProps) {
+		let datasourceProps = clonedeep(props.datasource);
+		// if using accessor, get props from the controller
+		if (typeof props.datasource === 'string' && Accessor.isAccessorDefinition(props.datasource)) {
+			const [controller, accessor] = Accessor.getAccessor(props.datasource);
+			const instance = Loader.getInstance(controller);
+			datasourceProps = instance[accessor];
+		}
+		this.datasource = DatasourceFactory.factory({
+			...datasourceProps,
+			searchIn: props.datasource?.searchIn || (`{{IterableController_${this.name}.searchIn}}` as any),
+		});
+	}
+
+	updateData(data: IDictionary[]): Promise<any> {
+		return this.datasource.updateData(data);
+	}
+
+	getAppliedConditions(args: { row: IDictionary; column: Column; path?: string }): Partial<IComponentRender> {
+		return this.conditionsManager.getAppliedConditions(args);
+	}
+
+	getCurrentRowIndex(): number {
+		const { uniqueKey, currentRow } = this.datasource;
+		const data = this.getData();
+		return data.findIndex((row) => row[uniqueKey] === currentRow[uniqueKey]);
+	}
+
+	getPage(): number {
+		return this.datasource.page;
+	}
+
+	setPage(page: number): Promise<any> {
+		return this.datasource.setPage(page);
+	}
+
+	getLastPage(): number {
+		return Math.ceil(this.datasource.total / this.datasource.limit);
+	}
+
+	protected createController() {
+		Loader.addController(`IterableController_${this.name}`, IterableController, [this]);
+	}
+
+	public onCreated(): void {
+		super.onCreated();
+
+		this.columns.forEach((column) => column.initialize());
+		this.createController();
+
+		this.initializeDatasource(this.props);
+		this.datasource.initialize();
+		this.conditionsManager = new ConditionsManager(this.datasource.uniqueKey, this.columns);
+	}
+
+	/**
+	 * Retrieves columns instances
+	 * @param columns Columns property
+	 */
+	protected createColumns(props: IIterableProps): T[] {
+		if (!props.columns) return [];
+
+		return props.columns?.map((columnProps) => this.createColumn(columnProps));
+	}
+
+	public abstract createColumn(columnProps: IColumn): T;
+
+	/**
+	 * Retrieves a columns by name
+	 * @param name Column name
+	 */
+	public getColumn(name: string) {
+		const column = this.columns.find((item) => item.name === name);
+		if (!column) {
+			throw new ColumnNotFoundError(name, this.name);
+		}
+		return column;
+	}
+
+	// Retrieves text for page items
+	get pageText() {
+		const last = this.datasource.page * this.datasource.limit;
+		const lastRow = last > this.datasource.total ? this.datasource.total : last;
+		const firstRow = lastRow === 0 ? 0 : last - this.datasource.limit + 1;
+		const translatedText = I18n.instance.t('gridPageText', { firstRow, lastRow, total: this.datasource.total });
+		return translatedText === 'gridPageText' ? `${firstRow} - ${lastRow} of ${this.datasource.total}` : translatedText;
+	}
+
+	// Get pagination length
+	get paginationLength() {
+		let { limit, total } = this.datasource;
+		limit = Number(limit);
+		total = Number(total);
+
+		if (!limit || Number.isNaN(total) || Number.isNaN(limit)) {
+			return 0;
+		}
+		return Math.ceil(total / limit);
+	}
+
+	/**
+	 * Return cells with conditions applied for each row
+	 * @param columns Iterable columns
+	 * @param row Datasource row
+	 */
+	public getCellWithAppliedConditions(columns: Column[], row: IDictionary<any>) {
+		return this.reapplyConditions(row, columns);
+	}
+
+	public reapplyConditions(row: IDictionary<any>, columns: Column[] = this.columns) {
+		return this.conditionsManager.reapplyConditions(row, columns);
+	}
+
+	// Causes a reload of the datasource and clear columns lookup data
+	public reload() {
+		this.columns.forEach((column: Column) => {
+			column.clearLookupData();
+		});
+		return this.datasource.get();
+	}
+
+	// Called when data changes (shallow reactivity)
+	public changeData(data: IDictionary[]) {
+		data.forEach((row) => this.reapplyConditions(row, this.columns));
+	}
+
+	public onBeforeDestroy() {
+		super.onBeforeDestroy();
+		this.datasource?.destroy();
+	}
+
+	/**
+	 * Dispatches change layout Event
+	 * @param event DOM event
+	 * @param element DOM Element
+	 */
+	public changeLayout(event?: Event, element?: any) {
+		this.callEvent('changeLayout', {
+			event,
+			element,
+			component: this,
+		});
+	}
+
+	public async setSearch(search: string): Promise<any> {
+		return this.datasource.setSearch(search);
+	}
+
+	public setCurrentRow(row: IDictionary) {
+		this.datasource.currentRow = row;
+	}
+
+	public setOrder(order: string[]) {
+		return this.datasource.setOrder(order);
+	}
+
+	public getRowKey(row: IDictionary) {
+		return row[this.datasource.uniqueKey];
+	}
+
+	public delete(row: IDictionary) {
+		return this.datasource.delete(row);
+	}
+
+	getData(): IDictionary[] {
+		return this.datasource.data;
+	}
+
+	protected changeDefaultSlotNames(slot: IComponentRender[]) {
+		const strMetadata = JSON.stringify(slot);
+		const newObj = strMetadata.replace(/<<NAME>>/g, this.name);
+		return JSON.parse(newObj);
+	}
+
+	public findRow(key: string | number) {
+		return this.getData().find((row) => this.getRowKey(row) === key);
+	}
+}

package/src/components/zd-iterable/search.ts

@@ -0,0 +1,86 @@
+import { Metadata } from '@zeedhi/core';
+import debounce from 'lodash.debounce';
+import { InputFactory } from '../zd-input/input-factory';
+import { TextInput } from '../zd-text-input/text-input';
+import { ISearch } from './interfaces';
+import { Iterable } from './iterable';
+
+/**
+ * Base class for Search component
+ */
+export class Search extends TextInput implements ISearch {
+	/**
+	 * Iterable component name
+	 */
+	public iterableComponentName!: string;
+
+	/**
+	 * Iterable component name
+	 */
+	public iterableComponent!: Iterable;
+
+	public showLabel = false;
+
+	public showHelper = false;
+
+	public appendIcon = 'magnify';
+
+	public placeholder = 'SEARCH';
+
+	public lazyAttach = false;
+
+	/* istanbul ignore next */
+	/**
+	 * Creates a new Iterable Page component.
+	 * @param props Iterable page component properties
+	 */
+	constructor(props: ISearch) {
+		super(props);
+		this.iterableComponentName = this.getInitValue(
+			'iterableComponentName',
+			props.iterableComponentName,
+			this.iterableComponent,
+		);
+		this.showHelper = this.getInitValue('showHelper', props.showHelper, this.showHelper);
+		this.showLabel = this.getInitValue('showLabel', props.showLabel, this.showLabel);
+		this.appendIcon = this.getInitValue('appendIcon', props.appendIcon, this.appendIcon);
+		this.placeholder = this.getInitValue('placeholder', props.placeholder, this.placeholder);
+		this.lazyAttach = this.getInitValue('lazyAttach', props.lazyAttach, this.lazyAttach);
+		if (!this.lazyAttach) this.setIterableComponent();
+		this.createAccessors();
+	}
+
+	public setIterableComponent(name?: string) {
+		this.iterableComponentName = name || this.iterableComponentName;
+		if (this.iterableComponentName && Metadata.getInstances(this.iterableComponentName).length > 0) {
+			this.iterableComponent = Metadata.getInstance(this.iterableComponentName) as Iterable;
+		} else if (this.parent instanceof Iterable) {
+			this.iterableComponent = this.parent;
+		} else {
+			throw new Error(`Could not find the iterable component associated with ${this.name}`);
+		}
+	}
+
+	protected async setSearch(search: string) {
+		await this.iterableComponent.setSearch(search);
+	}
+
+	public debounceSetSearch: (search: string) => void = debounce(this.setSearch, 500);
+
+	get value() {
+		return this.iterableComponent?.datasource.search || '';
+	}
+
+	set value(value: string) {
+		if (!this.iterableComponent) return;
+
+		if (this.internalValue !== value) {
+			this.internalDisplayValue = this.formatter(value);
+			this.iterableComponent.datasource.search = value;
+		}
+
+		this.debounceSetSearch(value);
+	}
+}
+
+InputFactory.register('ZdSearch', Search);

package/src/components/zd-iterable-component-render/interfaces.ts

@@ -0,0 +1,36 @@
+import { IComponentRender } from '../zd-component/interfaces';
+import { IIterableProps } from '../zd-iterable/interfaces';
+
+export interface IIterableComponentRenderProps extends IIterableProps {
+	rowPropName?: string;
+	componentMetadata?: IComponentRender;
+	footerSlot?: IComponentRender[];
+	toolbarSlot?: IComponentRender[];
+	errorSlot?: IComponentRender[];
+	noDataSlot?: IComponentRender[];
+	noResultSlot?: IComponentRender[];
+	height?: number | string;
+	maxHeight?: number | string;
+	minHeight?: number | string;
+	fillHeight?: boolean;
+	width?: number | string;
+	maxWidth?: number | string;
+	minWidth?: number | string;
+}
+
+export interface IIterableComponentRender extends IIterableProps {
+	rowPropName: string;
+	componentMetadata?: IComponentRender;
+	footerSlot: IComponentRender[];
+	toolbarSlot: IComponentRender[];
+	errorSlot: IComponentRender[];
+	noDataSlot: IComponentRender[];
+	noResultSlot: IComponentRender[];
+	height: number | string;
+	maxHeight: number | string;
+	minHeight: number | string;
+	fillHeight: boolean;
+	width: number | string;
+	maxWidth: number | string;
+	minWidth: number | string;
+}

package/src/components/zd-iterable-component-render/iterable-component-render.ts

@@ -0,0 +1,169 @@
+import { IDictionary } from '@zeedhi/core';
+import get from 'lodash.get';
+import { IComponentRender } from '../zd-component/interfaces';
+import { Column } from '../zd-iterable/column';
+import { IColumn } from '../zd-iterable/interfaces';
+import { Iterable } from '../zd-iterable/iterable';
+import { IIterableComponentRender, IIterableComponentRenderProps } from './interfaces';
+
+/**
+ * Base class for IterableComponentRender component.
+ * This component uses every row returned by Iterable.datasource to render
+ * components defined by componentMetadata property.
+ * If the data inside the datasource is changed you should perform
+ * a datasource.get() to force updating the rendered components.
+ */
+export class IterableComponentRender extends Iterable implements IIterableComponentRender {
+	/**
+	 * Components that will be rendered on toolbar slot
+	 */
+	public toolbarSlot: IComponentRender[] = [];
+
+	/**
+	 * Components that will be rendered on footer slot
+	 */
+	public footerSlot: IComponentRender[] = [];
+
+	/**
+	 * Component item definition
+	 */
+	public componentMetadata!: IComponentRender;
+
+	/**
+	 * Row property name
+	 */
+	public rowPropName = 'row';
+
+	/**
+	 * Components that will be rendered in no-data case
+	 */
+	public noDataSlot: IComponentRender[] = [
+		{
+			name: '<<NAME>>_no-data',
+			component: 'ZdText',
+			cssClass: 'no-data',
+			text: 'NO_DATA',
+		},
+	];
+
+	/**
+	 * Components that will be rendered in no-result case
+	 */
+	public noResultSlot: IComponentRender[] = [
+		{
+			name: '<<NAME>>_no-result',
+			component: 'ZdText',
+			cssClass: 'no-result',
+			text: 'NO_RESULT',
+		},
+	];
+
+	/**
+	 * Defines the component height. Possible values for this property can be
+	 * <samp>'auto', '100%', '400px' or 400</samp>
+	 */
+	public height: string | number = 'auto';
+
+	/**
+	 * Defines the component min height. Possible values for this property can be
+	 * <samp>'auto', '100%', '400px' or 400</samp>
+	 */
+	public minHeight: string | number = 'auto';
+
+	/**
+	 * Defines the component max height. Possible values for this property can be
+	 * <samp>'auto', '100%', '400px' or 400</samp>
+	 */
+	public maxHeight: string | number = 'none';
+
+	/**
+	 * Set component height to fill all space available
+	 */
+	public fillHeight = false;
+
+	/**
+	 * Defines the component width. Possible values for this property can be
+	 * <samp>'auto', '100%', '400px' or 400</samp>
+	 */
+	public width: string | number = '100%';
+
+	/**
+	 * Defines the component min width. Possible values for this property can be
+	 * <samp>'auto', '100%', '400px' or 400</samp>
+	 */
+	public minWidth: string | number = 'auto';
+
+	/**
+	 * Defines the component max height. Possible values for this property can be
+	 * <samp>'auto', '100%', '400px' or 400</samp>
+	 */
+	public maxWidth: string | number = 'none';
+
+	/**
+	 * Components that will be rendered in error case
+	 */
+	public errorSlot: IComponentRender[] = [];
+
+	public constructor(props: IIterableComponentRenderProps) {
+		super(props);
+		this.toolbarSlot = props.toolbarSlot || this.toolbarSlot;
+		this.footerSlot = props.footerSlot || this.footerSlot;
+		this.componentMetadata = this.getInitValue('componentMetadata', props.componentMetadata, this.componentMetadata);
+		this.rowPropName = this.getInitValue('rowPropName', props.rowPropName, this.rowPropName);
+		this.noDataSlot = props.noDataSlot || this.noDataSlot;
+		this.noResultSlot = props.noResultSlot || this.noResultSlot;
+		this.errorSlot = props.errorSlot || this.errorSlot;
+		this.noDataSlot = this.changeDefaultSlotNames(this.noDataSlot);
+		this.noResultSlot = this.changeDefaultSlotNames(this.noResultSlot);
+		this.height = this.getInitValue('height', props.height, this.height);
+		this.minHeight = this.getInitValue('minHeight', props.minHeight, this.minHeight);
+		this.maxHeight = this.getInitValue('maxHeight', props.maxHeight, this.maxHeight);
+		this.fillHeight = this.getInitValue('fillHeight', props.fillHeight, this.fillHeight);
+		this.width = this.getInitValue('width', props.width, this.width);
+		this.minWidth = this.getInitValue('minWidth', props.minWidth, this.minWidth);
+		this.maxWidth = this.getInitValue('maxWidth', props.maxWidth, this.maxWidth);
+		this.createAccessors();
+	}
+
+	private addSlashes(value: any) {
+		if (typeof value === 'string') {
+			return value
+				.replace(/\\/g, '\\\\')
+				.replace(/\t/g, '\\t')
+				.replace(/\n/g, '\\n')
+				.replace(/\f/g, '\\f')
+				.replace(/\r/g, '\\r')
+				.replace(/"/g, '\\"');
+		}
+
+		return value;
+	}
+
+	/**
+	 * Returns the iterable component metadata based on row data
+	 */
+	public getComponentMetadata(row: IDictionary<any>) {
+		const exp = new RegExp(`<<${this.rowPropName}.(.[A-z]+?)>>|"<<${this.rowPropName}.(.[A-z]+?)>>"`, 'g');
+		const rowExp = new RegExp(`"<<${this.rowPropName}>>"`, 'g');
+		const metadata = JSON.stringify(this.componentMetadata)
+			.replace(rowExp, JSON.stringify(row))
+			.replace(exp, (match) => {
+				const propPath = match
+					.replace(/<<|>>|"/g, '')
+					.split('.')
+					.splice(1)
+					.join('.');
+				const value = this.addSlashes(get(row, propPath));
+				if (typeof value === 'string') {
+					if (match.startsWith('"') && match.endsWith('"')) return `"${value}"`;
+					return value;
+				}
+				return value;
+			});
+		return JSON.parse(metadata);
+	}
+
+	public createColumn(column: IColumn): Column {
+		return new Column(column);
+	}
+}

package/src/components/zd-layout/interfaces.ts

@@ -0,0 +1,8 @@
+import { IComponentRender } from '../zd-component/interfaces';
+
+export interface ILayout extends IComponentRender {
+	fullHeight?: boolean;
+	scrollable?: boolean;
+	tag?: string;
+	height: string | number;
+}

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

@@ -0,0 +1,20 @@
+import { ComponentRender } from '../zd-component/component-render';
+import { ILayout } from './interfaces';
+
+export class Layout extends ComponentRender implements ILayout {
+	public fullHeight? = false;
+
+	public scrollable? = false;
+
+	public tag?: string = 'main';
+
+	public height: string | number = '100%';
+
+	constructor(props: ILayout) {
+		super(props);
+		this.fullHeight = this.getInitValue('fullHeight', props.fullHeight, this.fullHeight);
+		this.scrollable = this.getInitValue('scrollable', props.scrollable, this.scrollable);
+		this.tag = this.getInitValue('tag', props.tag, this.tag);
+		this.height = this.getInitValue('height', props.height, this.height);
+	}
+}

package/src/components/zd-list/interfaces.ts

@@ -0,0 +1,47 @@
+import { IComponent, IComponentRender } from '../zd-component/interfaces';
+
+/**
+ * Interface for list component
+ */
+export interface IList extends IComponentRender {
+	dense?: boolean;
+	disabled?: boolean;
+	divided?: boolean;
+	items?: IListItem[];
+	lines?: false | 'one' | 'two' | 'three';
+	color?: string;
+	elevation?: number | string;
+	openStrategy?: 'single' | 'multiple' | 'list';
+	height?: number | string;
+	maxHeight?: number | string;
+	minHeight?: number | string;
+	fillHeight?: boolean;
+	width?: number | string;
+	maxWidth?: number | string;
+	minWidth?: number | string;
+}
+
+/**
+ * Interface for list itens
+ */
+export interface IListItem extends IComponentRender {
+	appendIcon?: string;
+	disabled?: boolean;
+	leftField?: IComponent;
+	prependIcon?: string;
+	rightField?: IComponent;
+	ripple?: boolean;
+	subtitle?: string;
+	title?: string;
+	lines?: false | 'one' | 'two' | 'three';
+	dense?: boolean;
+}
+
+/**
+ * Interface for list group
+ */
+export interface IListGroup extends IListItem {
+	items?: IListItem[];
+	lazyLoad?: boolean;
+	opened?: boolean;
+}

package/src/components/zd-list/item-not-found.ts

@@ -0,0 +1,8 @@
+/**
+ * Item not found error
+ */
+export class ItemNotFoundError extends Error {
+	constructor(name: string, parentName: string) {
+		super(`Item ${name} not found on parent ${parentName}`);
+	}
+}

package/src/components/zd-list/list-group.ts

@@ -0,0 +1,52 @@
+import { IListGroup, IListItem } from './interfaces';
+import { ItemNotFoundError } from './item-not-found';
+import { ListItem } from './list-item';
+
+/**
+ * Base class for ListGroup component.
+ */
+export class ListGroup extends ListItem implements IListGroup {
+	/**
+	 * List items structure.
+	 */
+	public items!: IListItem[];
+
+	/**
+	 * Content will be loaded only when the group opens.
+	 */
+	public lazyLoad = false;
+
+	/**
+	 * Group state.
+	 */
+	public opened = false;
+
+	constructor(props: IListGroup) {
+		super(props);
+		this.items = this.getInitValue('items', props.items, this.items);
+		this.lazyLoad = this.getInitValue('lazyLoad', props.lazyLoad, this.lazyLoad);
+		this.opened = this.getInitValue('opened', props.opened, this.opened);
+		if (this.appendIcon === undefined) this.appendIcon = 'expand';
+		this.createAccessors();
+	}
+
+	/**
+	 * Toggle group state.
+	 */
+	public toggle() {
+		this.opened = !this.opened;
+	}
+
+	/**
+	 * Get item by name
+	 * @param name name property of the item
+	 * @throws ItemNotFoundError
+	 */
+	public getItem(name: string) {
+		const item = this.items.find((listItem: IListItem) => listItem.name === name);
+		if (item) {
+			return item;
+		}
+		throw new ItemNotFoundError(name, this.name);
+	}
+}