@bgroup/wise-form 1.0.1

package/src/models/model.ts

@@ -0,0 +1,260 @@
+import { FormField } from './field';
+import { WrappedFormModel } from './wrapper';
+import { BaseWiseModel } from './base';
+import { PluginsManager } from './plugins';
+import { CallbackManager } from './callback-manager';
+
+export
+	class FormModel extends BaseWiseModel {
+	#childWrappers: number = 0;
+	#plugins: PluginsManager;
+	get plugins() {
+		return this.#plugins;
+	}
+
+	/**
+	 * since the fields can be children of the model or a
+	 * wrapper, this method is used to get the form model
+	 */
+	get form() {
+		return this;
+	}
+	#mode: string;
+	get mode() {
+		return this.#mode;
+	}
+	#update: boolean;
+	#callbackManagers: CallbackManager[];
+	get update() {
+		return this.#update;
+	}
+	/**
+	 * Initializes a new instance of the `FormModel`, setting up the initial state, including field configurations,
+	 * callbacks, and reactive properties. This constructor also triggers the asynchronous setup process for the form.
+	 *
+	 * @param {Object} settings The configuration settings for the form, including fields, default values, and callbacks.
+	 * @param {Object} [reactiveProps] Optional reactive properties to enhance the form's reactivity.
+	 */
+	constructor(settings, reactiveProps?) {
+		super(settings, reactiveProps);
+		this.#startup(settings);
+		if (!globalThis._wiseForms) globalThis._wiseForms = [];
+		globalThis._wiseForms.push(this);
+		this.#update = settings.update;
+		this.#mode = this.#update ? 'update' : 'create';
+	}
+
+	#startup = async settings => {
+		const values = settings?.values || {};
+		const createItems = item => {
+			const instance = this.#getFieldModel(item, values);
+			const onChange = () => {
+				// FormField has value, WrappedFormModel doesn't
+				if ('value' in instance) {
+					(this as any)[item.name] = (instance as FormField).value;
+				}
+			};
+			instance.on('change', onChange);
+			this.fields.set(item.name, instance);
+		};
+
+		this.settings.fields.map(createItems);
+
+		await this.#checkReady();
+		this.#configFields();
+		// todo: @everyone Define if is required to wait for the plugins to be ready.
+		this.#plugins = new PluginsManager(this);
+		this.ready = true;
+		this.specs = settings;
+		this.trigger('change');
+	};
+
+	/**
+	 * Checks if all wrappers and fields within the form are loaded and sets the form to a loaded state. This method ensures that the form is fully operational before any interaction.
+	 * Its used for the start to listen the dependencies
+	 */
+	#checkReady = () => {
+		const onReady = () => {
+			const areAllWrappersLoaded = this.childWrappersReady === this.#childWrappers;
+
+			if (!areAllWrappersLoaded) {
+				this.childWrappersReady = this.childWrappersReady + 1;
+				return;
+			}
+
+			this.loaded = true;
+			this.loadedPromise.resolve(true);
+			this.off('wrappers.children.loaded', onReady);
+		};
+
+		if (this.loaded) return this.loaded;
+
+		if (!this.wrappers.size) {
+			onReady();
+			return this.loaded;
+		}
+
+		this.on('wrappers.children.loaded', onReady);
+		return this.loadedPromise;
+	};
+
+	/**
+	 * Configures all fields by initializing them and setting up dependencies. This method ensures that each field is ready for interaction and that any field dependencies are respected.
+	 */
+	#configFields = () => {
+		this.fields.forEach(this.#listenDependencies);
+		this.fields.forEach(field => field.initialize());
+	};
+
+	/**
+	 * Creates a new instance of a field or a wrapper based on the provided item configuration. It initializes the field or wrapper with specified values and properties.
+	 * @param {Object} item - The field or wrapper configuration.
+	 * @param {Object} values - The initial values for the fields.
+	 * @returns {FormField|WrappedFormModel} A new field or wrapper instance.
+	 */
+	#getFieldModel = (item, values: Record<string, unknown>) => {
+		let externalValues: Record<string, any> = {};
+
+		// @todo: @veD-tnayrB: Review this code and document it
+		if (Array.isArray(item?.properties)) {
+			item?.properties.forEach(item => (externalValues[item.name] = item.value));
+		}
+		if (item.type === 'wrapper') return this.#getWrapper(item);
+
+		const instance = new FormField({
+			parent: this,
+			specs: {
+				...item,
+				value: values[item.name] || item?.value,
+				properties: item?.properties || [],
+			},
+		});
+
+		/**
+		 * @todo: review it. why we need it.?
+		 */
+		if (item?.properties) {
+			let toSet = {};
+			item?.properties.forEach(property => (toSet[property] = item[property] || ''));
+			instance.set(toSet);
+		}
+
+		return instance;
+	};
+
+	/**
+	 * Examines each field for dependencies and sets up listeners to respond to changes in dependent fields. This ensures dynamic interactions within the form based on field dependencies.
+	 * @param {FormField|WrappedFormModel} instance - The field or wrapper instance to check for dependencies.
+	 */
+	#listenDependencies = instance => {
+		if (!instance?.specs?.dependentOn?.length) return;
+		const manager = new CallbackManager(this, instance);
+	};
+
+	/**
+	 *
+	 * @param item 
+	 * @param values 
+	 * @returns 
+	 */
+
+	#getWrapper = item => {
+		let instance: WrappedFormModel | FormField;
+		if (!item.fields) throw new Error(`Wrapper ${item.name} must have fields property`);
+		const fieldsProperties = item.fields.map(item => item.name);
+
+		const properties = [...fieldsProperties, ...(item?.properties || [])];
+		const defaultValues = item.values || {};
+
+		instance = new WrappedFormModel({
+			parent: this,
+			settings: { ...item, form: this },
+			specs: { properties: properties || [], ...defaultValues },
+		});
+
+		let toSet = {};
+		Object.keys(instance?.getProperties()).forEach(property => (toSet[property] = item[property] || ''));
+		instance.set(toSet);
+
+		this.registerWrapper(instance);
+		this.#childWrappers = this.#childWrappers + 1;
+
+		return instance;
+	};
+
+	/**
+	 * Registers a wrapper model within the form model, allowing for nested form structures.
+	 * This method is crucial for managing complex forms where fields might be grouped into sections or wrappers.
+	 * @param {WrappedFormModel} wrapper - The wrapper instance to register.
+	 */
+	registerWrapper = (wrapper: WrappedFormModel) => {
+		this.wrappers.set(wrapper.name, wrapper);
+	};
+
+	getForm() {
+		return this;
+	}
+
+	hide = (fields: string[]) => {
+		fields.forEach(field => {
+			const instance = this.getField(field);
+			if (!instance) throw new Error(`Field ${field} does not exist in form ${this.name}`);
+
+			instance.hide();
+		});
+	};
+
+	show = (fields: string[]) => {
+		fields.forEach(field => {
+			const instance = this.getField(field);
+			if (!instance) throw new Error(`Field ${field} does not exist in form ${this.name}`);
+
+			instance.show();
+		});
+	};
+
+	disable = (fields: string[]) => {
+		fields.forEach(field => {
+			const instance = this.getField(field);
+			if (!instance) throw new Error(`Field ${field} does not exist in form ${this.name}`);
+
+			instance.disabled = true;
+		});
+	};
+
+	enable = (fields: string[]) => {
+		fields.forEach(field => {
+			const instance = this.getField(field);
+			if (!instance) throw new Error(`Field ${field} does not exist in form ${this.name}`);
+
+			instance.disabled = false;
+		});
+	};
+
+	reset = (fields: string[]) => {
+		fields.forEach(field => {
+			const instance = this.getField(field);
+			if (!instance) throw new Error(`Field ${field} does not exist in form ${this.name}`);
+
+			instance.clear();
+		});
+	};
+
+	static create = settings => {
+		const properties = settings.fields.map(item => item.name);
+		const values = settings.values || {};
+		const instance = new FormModel(settings, { ...properties, ...values });
+
+		return instance;
+	};
+
+	public getFormula(name: string) {
+		if (!name) return null;
+		const formulaPlugin = this.#plugins.instances.get("formula");
+		if (!formulaPlugin || !formulaPlugin.formulas) return;
+		const formula = formulaPlugin.formulas.get(name);
+		if (!formula) return null;
+		return formula;
+	}
+}
+

package/src/models/plugins/base.ts

@@ -0,0 +1,11 @@
+import { FormModel } from '../model';
+import { IPluginFormSpecs } from '../types/plugins';
+
+export abstract class WiseFormPluginBase {
+	abstract readonly name: string;
+	abstract readonly ready: boolean;
+	abstract init(): Promise<void>;
+
+	static settings?(model: FormModel, specs: IPluginFormSpecs): Promise<WiseFormPluginBase>;
+}
+

package/src/models/plugins/formula.ts

@@ -0,0 +1,80 @@
+// esta interfaz existe para poder esperar
+// a que el plugin esté listo.
+import { parse } from 'mathjs';
+import type { FormModel } from '../model';
+import { IPluginFormSpecs } from '../types/plugins';
+import { FormulaManager } from '@bgroup/wise-form/formulas';
+import { FormField } from '../field';
+import { WiseFormPluginBase } from './base';
+// pensar porque no manejarlo con eventos.
+export class FormulaPlugin extends WiseFormPluginBase {
+	#form: FormModel;
+	get form() {
+		return this.#form;
+	}
+	#settings: IPluginFormSpecs;
+	get name() {
+		return 'formula';
+	}
+
+	get ready() {
+		return true;
+	}
+	#formulas: Map<string, any> = new Map();
+	get formulas() {
+		return this.#formulas;
+	}
+
+	#value: string | number = 0;
+	get value() {
+		return this.#value;
+	}
+
+	set value(v) {
+		if (v === this.#value) return;
+		this.#value = v;
+	}
+
+	constructor(form: FormModel, settings: IPluginFormSpecs) {
+		super();
+		this.#form = form;
+		this.#settings = settings;
+	}
+
+	async init() {
+		if (!this.#form.settings?.observers) return;
+		const promises = this.#form.settings.observers.map(this.create.bind(this));
+		const formulas = await Promise.all(promises);
+		formulas.forEach(formula => {
+			this.#formulas.set(formula.name, formula);
+		});
+		this.#formulas.forEach(formula => {
+			if (!formula.initialize) console.log(-1, formula);
+			formula.initialize();
+		});
+	}
+
+	async create(observer) {
+		const { formula } = observer;
+
+		if (!observer.name) {
+			throw new Error(`Observer in form "${this.#form.name}" must have a name`);
+		}
+		if (!formula) {
+			throw new Error(`Observer ${observer.name} in form "${this.#form.name}" must have a formula`);
+		}
+
+		return FormulaManager.create(this, observer);
+	}
+
+	static async settings(model, settings): Promise<WiseFormPluginBase> {
+		try {
+			const instance = new FormulaPlugin(model, settings);
+			await instance.init();
+			return instance;
+		} catch (e) {
+			console.error(e);
+		}
+	}
+}
+

package/src/models/plugins/index.ts

@@ -0,0 +1,48 @@
+import { ReactiveModel } from '@beyond-js/reactive/model';
+import type { FormModel } from '../model';
+import { PLUGINS } from './plugins';
+import { IPluginForm } from '../types/plugins';
+export class PluginsManager extends ReactiveModel<PluginsManager> {
+	#plugins: Record<string, any> = ['formula'];
+
+	private static items: Map<string, any> = new Map();
+	#instances = new Map<string, IPluginForm>();
+	get instances() {
+		return this.#instances;
+	};
+	static formulas: Record<string, any> = {};
+	#model: FormModel;
+	constructor(model) {
+		super();
+		this.#model = model;
+
+		globalThis.f = model;
+		this.initialize();
+	}
+
+	private async initialize() {
+		const plugins = Object.keys(PLUGINS);
+		const promises: Promise<IPluginForm>[] = [];
+
+		plugins.forEach(plugin => {
+			const manager = PLUGINS[plugin].object;
+			const instance = manager.settings(this.#model);
+			promises.push(instance);
+		});
+
+		const results = await Promise.allSettled(promises);
+
+		const installed = results
+			.filter(result => result.status === 'fulfilled')
+			.map(result => (result as PromiseFulfilledResult<any>).value);
+
+		const failed = results.filter(result => result.status === 'rejected');
+		if (failed.length) {
+			console.warn('Failed to install plugins', failed);
+		}
+		installed.forEach((plugin: IPluginForm) => this.#instances.set(plugin.name, plugin));
+
+		this.ready = true;
+	}
+}
+

package/src/models/plugins/plugins.ts

@@ -0,0 +1,8 @@
+import { FormulaManager } from '@bgroup/wise-form/formulas';
+import { FormulaPlugin } from './formula';
+export const PLUGINS = {
+	formula: {
+		object: FormulaPlugin,
+	},
+};
+

package/src/models/types/base-wise-model.ts

@@ -0,0 +1,7 @@
+export interface IBaseWiseModel {
+	name?: string;
+	className?: string;
+	hidden?: boolean;
+	[key: string]: any;
+}
+

package/src/models/types/callbacks.ts

@@ -0,0 +1,23 @@
+import { FormField } from '../field';
+import { FormModel } from '../model';
+
+// Define un tipo que puede ser un string o un objeto con cualquier número de propiedades de tipo string,
+// donde la clave es el nombre del campo y el valor es el alias.
+export type FieldOrAlias = string | { [fieldName: string]: string };
+
+export interface ICallbackProps {
+	form: FormModel;
+	field: FieldOrAlias;
+	[string: string]: any;
+	/**
+	 * Additional fields to be passed to the callback.
+	 */
+	fields?: Record<string, any>;
+	/**
+	 * Additional data registered in the WiseForm settings.
+	 */
+	specs?: Record<string, any>;
+}
+
+export type CallbackFunction = (props: ICallbackProps) => void;
+

package/src/models/types/disabled.ts

@@ -0,0 +1,8 @@
+export type TDisabledSettings = {
+	name: string;
+	value: any;
+};
+export interface IDisabled {
+	fields: string[] | TDisabledSettings[];
+}
+

package/src/models/types/form-field.ts

@@ -0,0 +1,22 @@
+export interface IFormField {
+	name?: string;
+	type?: string;
+	placeholder?: string;
+	required?: boolean;
+	label?: string;
+	variant?: string;
+	disabled?: boolean;
+	value?: any;
+	hidden?: boolean;
+	options?: Array<{ value: any; label?: string; [key: string]: any }>;
+	className?: string;
+	checked?: boolean;
+	id?: string;
+	icon?: string;
+	[key: string]: any;
+}
+
+export interface IFormFieldProps extends IFormField {
+	properties?: string[];
+}
+

package/src/models/types/model.ts

@@ -0,0 +1,14 @@
+import { IFormField } from './form-field';
+
+type Callback = (...args: any[]) => void | Promise<any>;
+
+export interface IFormModelProps {
+	name?: string;
+	params?: Record<string, any>;
+	callbacks?: Record<string, Callback>;
+	fields?: IFormField[];
+	template?: Array<string | number>;
+	properties?: string[];
+	[key: string]: any;
+}
+

package/src/models/types/plugins.ts

@@ -0,0 +1,15 @@
+import type { FormModel } from '../model';
+
+export interface IPluginFormSpecs {
+	object: IPluginForm;
+	property: string;
+}
+
+export interface IPluginForm {
+	readonly ready: boolean;
+	readonly name: string;
+	formulas?: Map<string, any>;
+	settings: (model: FormModel, specs: IPluginFormSpecs) => Promise<IPluginForm>;
+	[key: string]: any;
+}
+

package/src/models/types/wrapped-form-model-props.ts

@@ -0,0 +1,9 @@
+import type { FormModel } from '../model';
+import type { WrappedFormModel } from '../wrapper';
+
+export interface IWrapperFormModelProps {
+	parent: FormModel | WrappedFormModel;
+	settings: any;
+	specs: { properties?: string[]; [key: string]: any };
+}
+