@zeedhi/common 1.115.0 → 3.0.1

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

@@ -0,0 +1,330 @@
+import { IDictionary } from '@zeedhi/core';
+import { ComponentRender } from '../zd-component/component-render';
+import { Input } from '../zd-input/input';
+import { IForm, IFormComponent, IFormEvents, IFormGrid } from './interfaces';
+
+/**
+ * Base class for Form component.
+ */
+export class Form extends ComponentRender implements IForm {
+	/**
+	 * Children component structure if the component has children.
+	 */
+	public declare children: IFormComponent[];
+
+	/**
+	 * Applies the align-items css property.
+	 * Available options are start, center, end, space-between, space-around and stretch.
+	 */
+	public align?: string;
+
+	/**
+	 * Applies the justify-content css property.
+	 * Available options are start, center, end, space-between and space-around.
+	 */
+	public justify?: string;
+
+	/**
+	 * 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';
+
+	/**
+	 * 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';
+
+	/**
+	 * Defines form events.
+	 */
+	public declare events: IFormEvents;
+
+	/**
+	 * Optional validation method assigned by view layer.
+	 */
+	private viewValidate?: () => Promise<{
+		valid: boolean;
+		errors: {
+			id: string | number;
+			errorMessages: string[];
+		}[];
+	}>;
+
+	/**
+	 * Optional submit method.
+	 */
+	public submitFunction?: () => void;
+
+	/**
+	 * Reset validation method assigned by view layer.
+	 */
+	private viewResetValidation?: () => void;
+
+	/**
+	 * Children components that are Inputs.
+	 */
+	private inputs: IDictionary<Input> = {};
+
+	private internalValue: IDictionary = {};
+
+	/* istanbul ignore next */
+	/**
+	 * Creates a new Form.
+	 * @param props Form properties
+	 */
+	constructor(props: IForm) {
+		super(props);
+		this.align = this.getInitValue('align', props.align, this.align);
+		this.justify = this.getInitValue('justify', props.justify, this.justify);
+		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.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.internalValue = this.getInitValue('value', props.value, this.value);
+	}
+
+	/**
+	 * Form value.
+	 */
+	get value() {
+		return this.internalValue;
+	}
+
+	set value(value: IDictionary) {
+		Object.keys(value).forEach((key) => {
+			if (this.inputs[key]) {
+				this.inputs[key].value = value[key];
+			} else {
+				this.internalValue[key] = value[key];
+			}
+		});
+	}
+
+	/**
+	 * Clear all form inputs
+	 */
+	public clearForm() {
+		Object.keys(this.value).forEach((item) => {
+			this.value[item] = null;
+		});
+	}
+
+	/**
+	 * Saves input instance and defines property on form value.
+	 * @param component Children component
+	 */
+	public registerInput(component: Input) {
+		this.inputs[component.name] = component;
+		component.value = this.value[component.name] || component.value;
+		Object.defineProperty(this.value, component.name, {
+			get: () => component.value,
+			set: (value: any) => {
+				component.value = value;
+			},
+			enumerable: true,
+			configurable: true,
+		});
+	}
+
+	/**
+	 * Children props without grid system.
+	 */
+	get childrenProps() {
+		return this.children.map(({ grid, ...otherAttrs }) => otherAttrs);
+	}
+
+	/**
+	 * Checks if the value matches a col value (1, 2, ... 12) or auto
+	 */
+	private matchColumn = (value: string) => (!Number.isNaN(Number(value)) || value === 'auto');
+
+	private breakpoints = ['lg', 'md', 'sm', 'xl', 'xxl'] as const;
+
+	private matchBreakpoint = (value: string): value is typeof this.breakpoints[number] => (this.breakpoints.includes(value as any))
+
+	private handleColClass(cssClass: string): { key: keyof IFormGrid, value: string } | null {
+		const dataString = cssClass.replace('zd-col-', '');
+
+		const splittedData = dataString.split('-');
+		const firstData = splittedData[0];
+		const secondData = splittedData[1];
+
+		// in this case the class is zd-col-{n} or zd-col-auto
+		if (this.matchColumn(firstData)) {
+			return { key: 'cols', value: firstData };
+		}
+
+		const matchWithBreakpoints = this.matchBreakpoint(firstData) && this.matchColumn(secondData);
+		if (!matchWithBreakpoints) return null;
+
+		// in this case the class is zd-col-{breakpoint}-{n} or zd-col-{breakpoint}-auto
+		return { key: firstData, value: secondData };
+	}
+
+	private handleOffsetClass(cssClass: string): { key: keyof IFormGrid, value: string } | null {
+		const dataString = cssClass.replace('zd-offset-', '');
+
+		const splittedData = dataString.split('-');
+		const firstData = splittedData[0];
+		const secondData = splittedData[1];
+
+		// in this case the class is zd-offset-{n} or zd-offset-auto
+		if (this.matchColumn(firstData)) {
+			return { key: 'offset', value: firstData };
+		}
+
+		const matchWithBreakpoints = this.matchBreakpoint(firstData) && this.matchColumn(secondData);
+		if (!matchWithBreakpoints) return null;
+
+		// in this case the class is zd-offset-{breakpoint}-{n} or zd-offset-{breakpoint}-auto
+		return { key: `offset-${firstData}`, value: secondData };
+	}
+
+	/**
+	 * This method searches in a css class string to find classes related to grid cols \
+	 * Parses all of the grid cols classes found to form grid object entries, for example
+	 * the following class: 'zd-col-sm-12 zd-col-md-6' will become { sm: '12', md: '6' }
+	 */
+	private parseGridClasses(classes: string) {
+		const classesArray = classes.split(' ');
+		const gridObject: IFormGrid = {};
+
+		classesArray.forEach((cssClass) => {
+			if (cssClass.startsWith('zd-col-')) {
+				const result = this.handleColClass(cssClass);
+				if (!result) return;
+
+				const { key, value } = result;
+				gridObject[key] = value;
+				return;
+			}
+
+			if (cssClass.startsWith('zd-offset-')) {
+				const result = this.handleOffsetClass(cssClass);
+				if (!result) return;
+
+				const { key, value } = result;
+				gridObject[key] = value;
+				return;
+			}
+
+			return;
+		});
+
+		return gridObject;
+	}
+
+	private getChildGrid(child: IFormComponent) {
+		if (child.grid && Object.keys(child.grid).length > 0) return child.grid;
+
+		if (child.cssClass) return this.parseGridClasses(child.cssClass);
+
+		return {};
+	}
+
+	/**
+	 * Grid system for each child.
+	 */
+	get childrenGrid() {
+		const childrenGrid: IDictionary<IFormGrid> = {};
+		this.children.forEach((child) => {
+			const grid = this.getChildGrid(child);
+			childrenGrid[child.name] = { cols: '3', ...grid };
+		});
+		return childrenGrid;
+	}
+
+	/**
+	 * Validates form.
+	 */
+	public validate() {
+		if (this.viewValidate) {
+			return this.viewValidate();
+		}
+		return Promise.resolve({ valid: Object.values(this.inputs).every((input) => input.isValid()) });
+	}
+
+	/**
+	 * Sets view validation method.
+	 */
+	public setViewValidate(
+		viewValidate: () => Promise<{
+			valid: boolean;
+			errors: {
+				id: string | number;
+				errorMessages: string[];
+			}[];
+		}>,
+	) {
+		this.viewValidate = viewValidate;
+	}
+
+	/**
+	 * Sets view reset validation method.
+	 */
+	public setViewResetValidation(viewResetValidation: () => void) {
+		this.viewResetValidation = viewResetValidation;
+	}
+
+	/**
+	 * Triggered when form is submitted and it's valid.
+	 * @param event DOM Event
+	 * @param element Form component
+	 */
+	public callSubmitEvent(event: Event, element: any) {
+		this.callEvent('submit', { event, element, component: this });
+	}
+
+	/**
+	 * Triggered when the component is mounted.
+	 * @param element Element mounted reference
+	 */
+	public onMounted(element: any) {
+		super.onMounted(element);
+		this.submitFunction = (element as any).requestSubmit?.bind(element);
+	}
+
+	public submit() {
+		if (this.submitFunction) this.submitFunction();
+	}
+
+	/**
+	 * Reset all form validation errors.
+	 * @throws Will throw if viewResetValidation is undefined
+	 */
+	public resetValidation() {
+		if (this.viewResetValidation) {
+			return this.viewResetValidation();
+		}
+
+		throw new Error('viewResetValidation method not assigned');
+	}
+}

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

@@ -0,0 +1,41 @@
+import { IEventParam } from '@zeedhi/core';
+import { EventDef, IComponentEvents, IComponentRender } from '../zd-component/interfaces';
+import { Form } from './form';
+
+export type IFormEvent = IEventParam<Form>;
+
+export interface IFormEvents extends IComponentEvents<IFormEvent> {
+	submit?: EventDef<IFormEvent>;
+}
+
+export interface IFormGrid {
+	cols?: string;
+	lg?: string;
+	md?: string;
+	sm?: string;
+	xl?: string;
+	xxl?: string;
+	offset?: string;
+	'offset-lg'?: string;
+	'offset-md'?: string;
+	'offset-sm'?: string;
+	'offset-xl'?: string;
+	'offset-xxl'?: string;
+}
+
+export interface IFormComponent extends IComponentRender {
+	grid?: IFormGrid;
+}
+
+export interface IForm extends IComponentRender {
+	align?: string;
+	justify?: string;
+	height?: number | string;
+	maxHeight?: number | string;
+	minHeight?: number | string;
+	width?: number | string;
+	maxWidth?: number | string;
+	minWidth?: number | string;
+	children?: IFormComponent[];
+	events?: IFormEvents;
+}

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

@@ -0,0 +1,226 @@
+import { IDictionary, Metadata } from '@zeedhi/core';
+import merge from 'lodash.merge';
+import { ComponentRender } from '../zd-component/component-render';
+import { IFrame, IFrameEvents } from './interfaces';
+
+const TWO_HOURS = 2 * 60 * 60 * 1000;
+
+export class Frame extends ComponentRender implements IFrame {
+	public loading = false;
+
+	public local = false;
+
+	public metadata: object = {};
+
+	public override: object = {};
+
+	public params: object = {};
+
+	public overrideNamedProps: IDictionary = {};
+
+	public path = '';
+
+	public cache = false;
+
+	public JSONCache: boolean | string = false;
+
+	public declare events: IFrameEvents;
+
+	public cacheDuration: number = TWO_HOURS;
+
+	/**
+	 * 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';
+
+	/**
+	 * 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';
+
+	public type = 'get';
+
+	private readonly headerName = 'sw-fetched-on';
+
+	private static readonly cacheName = 'zd-frame-cache';
+
+	protected resolveLoad?: (value: object) => void;
+
+	protected rejectLoad?: (reason?: any) => void;
+
+	constructor(props: IFrame) {
+		super(props);
+		this.path = this.getInitValue('path', props.path, this.path);
+		this.local = props.local === true;
+		this.override = props.override || this.override;
+		this.overrideNamedProps = props.overrideNamedProps || this.overrideNamedProps;
+		this.cache = props.cache || this.cache;
+		this.JSONCache = this.getInitValue('JSONCache', props.JSONCache, this.JSONCache);
+		this.cacheDuration = this.getInitValue('cacheDuration', props.cacheDuration, this.cacheDuration);
+		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.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.type = this.getInitValue('type', props.type, this.type);
+		this.params = this.getInitValue('params', props.params, this.params);
+	}
+
+	public onCreated(): void {
+		super.onCreated();
+		this.getMetadata();
+	}
+
+	public overrideNamedPropsFunc(metadata: object) {
+		let strMetadata = JSON.stringify(metadata);
+		// TODO: re-factory this forEach for better performance
+		Object.keys(this.overrideNamedProps).forEach((key) => {
+			strMetadata = strMetadata.replace(RegExp(`<<${key}>>`, 'g'), this.overrideNamedProps[key]);
+		});
+		return JSON.parse(strMetadata);
+	}
+
+	public async reload() {
+		this.loading = true;
+		this.getMetadata();
+	}
+
+	/**
+	 * Triggered when frame is load.
+	 * @param event
+	 * @param element
+	 */
+	public afterLoad(event?: Event, element?: HTMLElement) {
+		if (this.resolveLoad) this.resolveLoad(this.metadata);
+
+		this.callEvent('onAfterLoad', {
+			event,
+			element,
+			component: this,
+		});
+	}
+
+	/**
+	 * Deletes all frame cached requests
+	 */
+	public static async deleteCache() {
+		return caches.delete(Frame.cacheName);
+	}
+
+	public async waitLoading(): Promise<object> {
+		return new Promise((resolve, reject) => {
+			if (!this.loading) {
+				resolve(this.metadata);
+				return;
+			}
+
+			this.resolveLoad = resolve;
+			this.rejectLoad = reject;
+		});
+	}
+
+	protected notFoundError(e: unknown) {
+		if (this.rejectLoad) this.rejectLoad(e);
+	}
+
+	private async getMetadata() {
+		try {
+			this.loading = true;
+			const page = await this.requestPage();
+			if (typeof page !== 'object') throw new Error();
+			this.metadata = merge(page, this.override);
+			if (Object.keys(this.overrideNamedProps).length !== 0) {
+				this.metadata = this.overrideNamedPropsFunc(this.metadata);
+			}
+		} catch (e) {
+			this.notFoundError(e);
+		} finally {
+			this.loading = false;
+			this.afterLoad();
+		}
+	}
+
+	private async requestPage(): Promise<IDictionary> {
+		const { path } = this;
+		if (!this.cache) {
+			if (this.type === 'post') {
+				return Metadata.post(path, this.params);
+			}
+			return Metadata.get(path, this.local, this.JSONCache);
+		}
+
+		const url = Metadata.getMetadataUrl(path, this.local);
+
+		const cache = await caches.open(Frame.cacheName);
+		const cachedResponse: Response | undefined = (await cache.match(url)) as Response | undefined;
+
+		if (this.isValid(cachedResponse)) {
+			return cachedResponse.json();
+		}
+
+		const metadata = await Metadata.get(path, this.local);
+
+		this.putCache(cache, url, metadata);
+
+		return metadata;
+	}
+
+	/**
+	 * Checks if cache response is valid (not expired yet)
+	 * @param response
+	 */
+	private isValid(response?: Response): response is Response {
+		if (!response) return false;
+
+		const header = response.headers.get(this.headerName);
+
+		if (!header) return false;
+
+		const lastFetch = Number(header);
+		return lastFetch + this.cacheDuration > new Date().getTime();
+	}
+
+	/**
+	 * Puts the metadata in defined cache with defined url
+	 * @param cache Cache object in which data will be stored
+	 * @param url Metadata url
+	 * @param metadata Metadata to be stored
+	 */
+	private putCache(cache: Cache, url: string, metadata: IDictionary) {
+		const time = String(new Date().getTime());
+		const headers = new Headers({
+			[this.headerName]: time,
+		});
+
+		const stringData = JSON.stringify(metadata);
+		const responseObj: Response = new Response(stringData, { headers });
+		cache.put(url, responseObj);
+	}
+}

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

@@ -0,0 +1,26 @@
+import { IDictionary, IEventParam } from '@zeedhi/core';
+import { EventDef, IComponentEvents, IComponentRender } from '../zd-component/interfaces';
+import { Frame } from './frame';
+
+export type IFrameEvent = IEventParam<Frame>;
+
+export interface IFrameEvents<T = IFrameEvent> extends IComponentEvents<T> {
+	onAfterLoad?: EventDef<T>;
+}
+
+export interface IFrame extends IComponentRender {
+	path: string;
+	local?: boolean;
+	override?: object;
+	overrideNamedProps?: IDictionary;
+	cache?: boolean;
+	JSONCache?: boolean | string;
+	cacheDuration?: number;
+	height?: number | string;
+	maxHeight?: number | string;
+	minHeight?: number | string;
+	width?: number | string;
+	maxWidth?: number | string;
+	minWidth?: number | string;
+	type?: string;
+}

package/src/components/zd-frame-page/frame-page.ts

@@ -0,0 +1,28 @@
+import { Loader, Router } from '@zeedhi/core';
+import { Frame } from '../zd-frame/frame';
+import { IFramePage } from './interfaces';
+
+export class FramePage extends Frame implements IFramePage {
+	/**
+	 * Set "NotFound" to the frame
+	 */
+	public notFoundRoute = '/notfound';
+
+	constructor(props: IFramePage) {
+		super(props);
+		this.notFoundRoute = this.getInitValue('notFoundRoute', props.notFoundRoute, this.notFoundRoute);
+	}
+
+	/**
+	 * Triggered before the component is destroyed.
+	 */
+	public onBeforeDestroy() {
+		super.onBeforeDestroy();
+		Loader.clearInstances();
+	}
+
+	protected notFoundError(e: unknown): void {
+		super.notFoundError(e);
+		Router.replace(this.notFoundRoute);
+	}
+}

package/src/components/zd-frame-page/interfaces.ts

@@ -0,0 +1,5 @@
+import { IFrame } from '../zd-frame/interfaces';
+
+export interface IFramePage extends IFrame {
+	notFoundRoute?: string;
+}