alchemy-form 0.2.8 → 0.2.10

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## 0.2.10 (2024-01-15)
+
+* Fix `al-table` throwing an error when receiving null data
+* Add `al-virtual-scroll` element
+* Make field `constraints` work by using the `Document` instance instead of plain data object
+* Clear old errors when validating a form
+
+## 0.2.9 (2023-11-27)
+
+* Add support for new local Date/Time fields & Decimal fields
+* Add "hidden" field templates
+* Fix `al-toggle` not firing a change event
+* Fixed `al-field` rendering to update content for non-value setter elements when a new value is assigned
+* Use `constraints` data from sibling fields when loading associated field data
+* Automatically update computed field values when a field it depends on changes
+
 ## 0.2.8 (2023-10-15)
 
 * Add basic `al-apex-chart` element

package/assets/stylesheets/form/elements/_virtual_scroll.scss

@@ -0,0 +1,19 @@
+al-virtual-scroll {
+	display: block;
+	min-height: 20rem;
+	min-width: 2rem;
+	overflow: auto;
+	border: 1px solid red;
+
+	.top-trigger,
+	.bottom-trigger {
+		width: 1px;
+		height: 1px;
+	}
+
+	[data-loaded-entry-index] {
+		border: 1px solid orange;
+		min-height: 2rem;
+		padding: 1rem;
+	}
+}

package/assets/stylesheets/form/elements/index.scss

@@ -13,4 +13,5 @@
 @import "_toggle.scss";
 @import "_tabs.scss";
 @import "_pathway.scss";
-@import "_apex_charts.scss";
+@import "_apex_charts.scss";
+@import "_virtual_scroll.scss";

package/config/routes.js

@@ -3,6 +3,8 @@ Router.add({
 	methods    : 'post',
 	paths      : '/api/form/data/related',
 	policy     : 'logged_in',
+	cache      : true,
+	is_system_route : true,
 });
 
 Router.add({
@@ -10,4 +12,15 @@ Router.add({
 	methods    : 'post',
 	paths      : '/api/form/data/qbdata',
 	policy     : 'logged_in',
+	cache      : true,
+	is_system_route : true,
+});
+
+Router.add({
+	name            : 'FormApi#recompute',
+	methods         : 'post',
+	paths           : '/api/form/data/recompute/{model_name}/{field}',
+	policy          : 'logged_in',
+	is_system_route : true,
+	permission      : 'model.{model_name}.recompute.{field}',
 });

package/controller/form_api_controller.js

@@ -17,7 +17,7 @@ const FormApi = Function.inherits('Alchemy.Controller', 'FormApi');
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.2.3
+ * @version  0.2.9
  *
  * @param    {Conduit}   conduit
  */
@@ -31,6 +31,12 @@ FormApi.setAction(async function related(conduit) {
 	crit.limit(50);
 	crit.setOption('scenario', 'related_data');
 
+	if (body.constraints) {
+		for (let key in body.constraints) {
+			crit.where(key).equals(body.constraints[key]);
+		}
+	}
+
 	if (config.value) {
 		crit.where(model.primary_key).equals(config.value);
 	} else if (config.search) {
@@ -84,6 +90,36 @@ FormApi.setAction(async function related(conduit) {
 	conduit.end(result);
 });
 
+/**
+ * The action to recompute field values
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.9
+ * @version  0.2.9
+ *
+ * @param    {Conduit}   conduit
+ * @param    {String}    model_name
+ * @param    {String}    field
+ */
+FormApi.setAction(async function recompute(conduit, model_name, field) {
+
+	const body = conduit.body || {};
+
+	const model = this.getModel(model_name);
+
+	if (!model) {
+		return conduit.error(new Error('Model "' + model_name + '" not found'));
+	}
+
+	let doc = model.createDocument(body);
+
+	await doc.recomputeFieldIfNecessary(field, true);
+
+	conduit.end({
+		result : doc[field],
+	});
+});
+
 /**
  * The related action
  *

package/element/10_dataprovider.js

@@ -199,7 +199,7 @@ WithDataprovider.setMethod(function getWantedPage() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.2.0
- * @version  0.2.0
+ * @version  0.2.9
  *
  * @param    {Object}   fetch_config
  */
@@ -207,9 +207,9 @@ WithDataprovider.setMethod(function loadRemoteData(fetch_config) {
 
 	let pledge = new Classes.Pledge();
 
-	let config = this.getRemoteFetchConfig();
+	let config = this.getRemoteFetchConfig(fetch_config);
 
-	if (fetch_config) {
+	if (fetch_config && fetch_config != config) {
 		Object.assign(config, fetch_config);
 	}
 

package/element/al_field.js

@@ -1,3 +1,5 @@
+const LAST_SET_VALUE = Symbol('last_set_value');
+
 /**
  * The al-field element
  *
@@ -583,7 +585,7 @@ Field.setProperty(function value_element() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.8
+ * @version  0.2.9
  */
 Field.setProperty(function value() {
 
@@ -591,19 +593,47 @@ Field.setProperty(function value() {
 
 	if (element) {
 		return element.value;
-	} else {
-		return this.original_value;
 	}
 
+	return this.value_to_render;
+
 }, function setValue(value) {
 
-	let element = this.value_element;
+	let has_changed = !Object.alike(this[LAST_SET_VALUE], value);
 
-	if (element) {
-		element.value = value;
-	} else if (this.original_value == null) {
+	if (this.original_value == null) {
 		this.original_value = value;
 	}
+
+	this[LAST_SET_VALUE] = value;
+
+	if (!this.valueElementHasValuePropertySetter()) {
+		// @TODO: Rerendering during a render causes a deadlock 
+		if (has_changed) {
+			this.rerender();
+		}
+	} else {
+		let element = this.value_element;
+
+		if (element) {
+			element.value = value;
+		}
+	}
+});
+
+/**
+ * Get value to use for rendering
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.9
+ * @version  0.2.9
+ */
+Field.setProperty(function value_to_render() {
+	if (this[LAST_SET_VALUE] != null) {
+		return this[LAST_SET_VALUE];
+	} else {
+		return this.original_value;
+	}
 });
 
 /**
@@ -827,7 +857,122 @@ Field.setMethod(function retained() {
 		label.setAttribute('for', v_id);
 		this.value_element.setAttribute('id', v_id);
 	}
+});
+
+/**
+ * Is this field in the given list somehow?
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.9
+ * @version  0.2.9
+ *
+ * @param    {string[]|Field[]}   list
+ *
+ * @return   boolean
+ */
+Field.setMethod(function isInList(list) {
+
+	if (!list?.length) {
+		return false;
+	}
+
+	for (let entry of list) {
+
+		if (typeof entry == 'string') {
+			if (entry == this.field_name) {
+				return true;
+			}
+
+			continue;
+		}
+
+		if (entry == this || entry == this.config) {
+			return true;
+		}
+
+		// @TODO
+	}
+
+	return false;
+});
+
+/**
+ * The element has been introduced to the DOM for the first time
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.9
+ * @version  0.2.9
+ */
+Field.setMethod(function introduced() {
+
+	let dependencies = this.getDependencyFields();
+
+	if (!dependencies.length) {
+		return;
+	}
+
+	let form = this.alchemy_form;
+
+	if (!form) {
+		return;
+	}
+
+	form.addEventListener('change', e => {
+
+		let changed_field = e.target.closest('al-field');
+
+		console.log('Field change', changed_field, e, this)
+
+		// Rerender the entire field when a field we depend on changes
+		// (@TODO: use something less drastic than a rerender)
+		if (changed_field?.field_name && changed_field.isInList(dependencies)) {
+			this.handleDependentFieldValueChange(changed_field);
+		}
+	});
+});
+
+/**
+ * Refresh the value of this field somehow
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.9
+ * @version  0.2.9
+ *
+ * @param    {Alchemy.Element.Form.Field}   changed_field
+ */
+Field.decorateMethod(
+	Blast.Decorators.throttle({
+		minimum_wait: 150,
+		reset_on_call: true,
+	}),
+	async function handleDependentFieldValueChange(changed_field) {
+
+	const field = this.config;
+
+	// Unset the value
+	this.value = null;
+
+	if (field?.is_computed) {
+		let doc = this.alchemy_form.getUpdatedDocument();
+
+		if (doc) {
+			let value = await doc.recomputeFieldIfNecessary(field, true);
+			this.value = value;
+		}
+	}
+});
 
+/**
+ * Get any other field names this field depends on
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.9
+ * @version  0.2.9
+ *
+ * @return   {string[]}
+ */
+Field.setMethod(function getDependencyFields() {
+	return this.config?.dependency_fields || [];
 });
 
 /**
@@ -835,7 +980,7 @@ Field.setMethod(function retained() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.9
+ * @version  0.2.9
  *
  * @param    {Object}        config
  * @param    {HTMLElement}   element
@@ -862,18 +1007,27 @@ Field.setMethod(async function loadData(config, element) {
 			}
 		}
 
+		const field_options = field.options || {},
+		      assoc_options = field_options.options;
+
 		let model = field.parent_schema?.model_name,
-		    assoc_model = field.options?.model_name || field.options?.modelName;
+		    assoc_model = field_options.model_name || field_options.modelName;
+
+		let body = {
+			field        : field.name,
+			model        : model,
+			assoc_model  : assoc_model,
+			config       : config,
+		};
+
+		if (assoc_options?.constraints) {
+			body.constraints = this.resolveConstraintInstruction(assoc_options.constraints);
+		}
 
 		let resource_options = {
 			name  : 'FormApi#related',
 			post  : true,
-			body  : {
-				field        : field.name,
-				model        : model,
-				assoc_model  : assoc_model,
-				config       : config,
-			}
+			body  : body,
 		};
 
 		if (this.data_src) {
@@ -882,5 +1036,109 @@ Field.setMethod(async function loadData(config, element) {
 
 		return this.hawkejs_helpers.Alchemy.getResource(resource_options);
 	}
+});
+
+/**
+ * Resolve a constraint instruction
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.9
+ * @version  0.2.10
+ *
+ * @param    {Object}   constraints
+ */
+Field.setMethod(function resolveConstraintInstruction(constraints) {
+
+	let context,
+	    result = {},
+	    value,
+	    key;
+
+	for (key in constraints) {
+		value = constraints[key];
+
+		if (value && typeof value == 'object') {
+			if (value instanceof Classes.Alchemy.PathEvaluator) {
+				if (!context && this.alchemy_form) {
+					context = this.alchemy_form.getValueAsDocument();
+				}
+
+				result[key] = value.getValue({$0: context}) ?? null;
+			}
+		} else {
+			result[key] = value;
+		}
+	}
+
+	return result;
+});
+
+/**
+ * Does this field require a re-render when a related field changes?
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.9
+ * @version  0.2.9
+ */
+Field.setMethod(function requiresRerenderOnRelatedFieldChange() {
+
+	if (!this.valueElementHasValuePropertySetter()) {
+		return true;
+	}
+
+	return false;
+});
+
+/**
+ * Can the value element of this field be updated by its value property?
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.9
+ * @version  0.2.9
+ */
+Field.setMethod(function valueElementHasValuePropertySetter() {
+
+	let element = this.value_element;
+
+	if (!element) {
+		return false;
+	}
+
+	let descriptor = Object.getPropertyDescriptor(element, 'value');
+
+	if (typeof descriptor?.set == 'function') {
+		return true;
+	}
+
+	return false;
+});
+
+/**
+ * Get a certain field option.
+ * This might be defined in the Field instance itself, or on this element.
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.9
+ * @version  0.2.9
+ */
+Field.setMethod(function getFieldOption(name) {
+
+	if (!name) {
+		return;
+	}
+
+	let dasherized = name.dasherize();
+	let attribute_name = 'data-' + dasherized;
+
+	if (this.hasAttribute(attribute_name)) {
+		let result = this.getAttribute(attribute_name);
+
+		if (result) {
+			return result;
+		}
+	}
+
+	let underscored = name.underscore();
 
+	return this.config?.options?.[underscored];
 });

package/element/al_field_schema.js

@@ -21,7 +21,7 @@ FieldSchema.setTemplateFile('form/elements/alchemy_field_schema');
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.2.6
+ * @version  0.2.9
  */
 FieldSchema.setProperty(function schema() {
 
@@ -46,12 +46,7 @@ FieldSchema.setProperty(function schema() {
 
 				const form = field_element.alchemy_form;
 
-				let record_value = form.value;
-
-				if (form.model) {
-					record_value = record_value[form.model];
-				}
-
+				let record_value = form.getMainValue();
 				parent_schema_value = record_value;
 			}