alchemy-form 0.2.8 → 0.2.9

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## 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/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.9
+ *
+ * @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.getMainValue();
+				}
+
+				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;
 			}
 

package/element/al_form.js

@@ -34,6 +34,15 @@ Form.setAttribute('method');
  */
 Form.setAttribute('model');
 
+/**
+ * Should the entire document be submitted?
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.9
+ * @version  0.2.9
+ */
+Form.setAttribute('serialize-entire-document', {type: 'boolean'});
+
 /**
  * The document that is being edited
  *
@@ -88,34 +97,20 @@ Form.setProperty(function main_error_area() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.2.0
+ * @version  0.2.9
  */
 Form.setProperty(function value() {
 
-	let fields = this.queryAllNotNested('al-field'),
-	    result = {},
-	    field,
-	    key,
-	    i;
-
-	if (this.document && this.document.$pk) {
-		result[this.document.$model.primary_key] = this.document.$pk;
-	}
+	let result = this.getMainValue();
 
-	for (i = 0; i < fields.length; i++) {
-		field = fields[i];
+	if (this.model) {
+		let model = alchemy.getModel(this.model);
 
-		if (field && field.readonly) {
-			continue;
+		if (model) {
+			result = {
+				[model.model_name] : result
+			};
 		}
-
-		result[field.field_name] = field.value;
-	}
-
-	if (this.model) {
-		result = {
-			[this.model] : result
-		};
 	}
 
 	return result;
@@ -148,6 +143,45 @@ Form.setMethod(Hawkejs.SERIALIZE_FORM, function serializeForm() {
 	return this.value;
 });
 
+/**
+ * Get the non-wrapped value
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.9
+ * @version  0.2.9
+ */
+Form.setMethod(function getMainValue() {
+
+	let fields = this.queryAllNotNested('al-field'),
+	    result = {},
+	    field,
+	    i;
+
+	if (this.document) {
+
+		if (this.serialize_entire_document) {
+			let value = this.document.$main;
+			Object.assign(result, value);
+		}
+
+		if (this.document.$pk) {
+			result[this.document.$model.primary_key] = this.document.$pk;
+		}
+	}
+
+	for (i = 0; i < fields.length; i++) {
+		field = fields[i];
+
+		if (field && field.readonly) {
+			continue;
+		}
+
+		result[field.field_name] = field.value;
+	}
+
+	return result;
+});
+
 /**
  * Submit this form
  *
@@ -172,33 +206,130 @@ Form.setMethod(async function submit() {
 		}
 	}
 
+	if (result?.render == false && result.document) {
+		this.setDocument(result.document);
+	}
+
 	return result;
 });
 
+/**
+ * Get a field by its name
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.9
+ * @version  0.2.9
+ */
+Form.setMethod(function getField(name) {
+	
+	let fields = this.queryAllNotNested('al-field'),
+	    field,
+	    i;
+
+	for (i = 0; i < fields.length; i++) {
+		field = fields[i];
+
+		if (field.field_name == name) {
+			return field;
+		}
+	}
+});
+
+/**
+ * Set the document
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.9
+ * @version  0.2.9
+ */
+Form.setMethod(function setDocument(document) {
+
+	let current_value = this.getMainValue();
+
+	// Set the current document
+	this.document = document;
+
+	console.log('Setting document', document);
+
+	for (let key in current_value) {
+		let original_value = current_value[key],
+		    new_value = document[key];
+
+		if (!Object.alike(original_value, new_value)) {
+			let field = this.getField(key);
+
+			if (field) {
+ 				field.value = new_value;
+			}
+		}
+	}
+
+});
+
 /**
  * Validate this form
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.2.2
- * @version  0.2.2
+ * @version  0.2.9
  */
 Form.setMethod(async function validate() {
 
-	if (this.model) {
-		let model = alchemy.getModel(this.model);
+	let doc = this.getValueAsDocument();
 
-		if (model) {
-			let doc = model.createDocument(this.value);
+	let violations = await doc.getViolations();
 
-			let violations = await doc.getViolations();
+	if (violations) {
+		this.showError(violations);
+		throw violations;
+	}
 
-			if (violations) {
-				this.showError(violations);
-				throw violations;
-			}
-		}
+});
+
+/**
+ * Get the value as a document instance
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.9
+ * @version  0.2.9
+ */
+Form.setMethod(function getValueAsDocument() {
+
+	if (!this.model) {
+		return;
 	}
 
+	let model = alchemy.getModel(this.model);
+
+	if (model) {
+		return model.createDocument(this.getMainValue());
+	}
+});
+
+/**
+ * Get the updated document:
+ * The original document's values + the form's values
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.9
+ * @version  0.2.9
+ */
+Form.setMethod(function getUpdatedDocument() {
+
+	if (!this.model) {
+		return;
+	}
+
+	const model = alchemy.getModel(this.model);
+	const original_value = this.document;
+
+	if (!original_value) {
+		return this.getValueAsDocument();
+	}
+
+	let main_value = Object.assign({}, original_value.$main, this.getMainValue());
+
+	return model.createDocument(main_value);
 });
 
 /**

package/element/al_toggle.js

@@ -42,12 +42,16 @@ AlchemyToggle.setAttribute('value', null, function setValue(value) {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.9
  */
 AlchemyToggle.setMethod(function introduced() {
 
 	this.addEventListener('click', e => {
 		this.value = !this.value;
+		this.emit('change', {
+			'bubbles'   : true,
+			'cancelable': true
+		});
 	});
 
 	let input = this.querySelector('input');
@@ -62,5 +66,9 @@ AlchemyToggle.setMethod(function introduced() {
 		}
 
 		this.value = input.checked;
+		this.emit('change', {
+			'bubbles'   : true,
+			'cancelable': true
+		});
 	});
 });

package/helper/field_recompute_handler.js

@@ -0,0 +1,50 @@
+/**
+ * Recompute fields in the browser that has its logic in the server
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.9
+ * @version  0.2.9
+ *
+ * @param   {Alchemy.Client.Document}  document
+ * @param   {Alchemy.Client.Field}     field
+ */
+alchemy.registerCustomHandler('recompute_field', async function fieldRecomputeHandler(document, field) {
+
+	let body = {
+		_id   : document._id,
+	};
+
+	for (let other_field of field.dependency_fields) {
+		let value = other_field.getRecordValue(document);
+		body[other_field.name] = value;
+	}
+
+	let resource_options = {
+		name  : 'FormApi#recompute',
+		post  : true,
+		body  : body,
+	};
+
+	let params = {
+		model_name : document.$model_name,
+		field      : field.name,
+	};
+
+	console.log(document)
+
+	let helpers;
+
+	if (Blast.isServer) {
+		helpers = document.conduit?.renderer?.helpers;
+	} else {
+		helpers = hawkejs.scene.helpers;
+	}
+
+	if (!helpers) {
+		return;
+	}
+
+	let response = await helpers.Alchemy.getResource(resource_options, params);
+
+	return response?.result;
+});

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "alchemy-form",
 	"description": "Form plugin for Alchemy",
-	"version": "0.2.8",
+	"version": "0.2.9",
 	"repository": {
 		"type" : "git",
 		"url"  : "https://github.com/11ways/alchemy-form.git"

package/view/form/elements/alchemy_field.hwk

@@ -5,7 +5,7 @@ variables = {
 	alchemy_field : self,
 	field_context : self,
 	view_files    : view_files,
-	value         : self.original_value,
+	value         : self.value_to_render,
 }
 %>
 

package/view/form/inputs/edit/belongs_to.hwk

@@ -1,5 +1,7 @@
 <al-select
 	class="alchemy-field-value"
+	value-item-template={% alchemy_field.getFieldOption('value_item_template') %}
+	option-item-template={% alchemy_field.getFieldOption('option_item_template') %}
 ><%
 $0.dataprovider = alchemy_field;
 $0.name = path;

package/view/form/inputs/edit/decimal.hwk

@@ -0,0 +1,7 @@
+<input
+	value=<% value %>
+	class="alchemy-field-value"
+	type="number"
+	form=<% form_id %>
+	name=<% path %>
+>

package/view/form/inputs/edit/fixed_decimal.hwk

@@ -0,0 +1,15 @@
+<%
+if (alchemy_field && alchemy_field.config && alchemy_field.config.options && alchemy_field.config.options.scale != null) {
+	step = 10 ** (-1 * alchemy_field.config.options.scale);
+} else {
+	step = 1;
+}
+%>
+<input
+	value=<% value %>
+	class="alchemy-field-value"
+	type="number"
+	form=<% form_id %>
+	name=<% path %>
+	step={% step %}
+>

package/view/form/inputs/edit/hidden.hwk

@@ -0,0 +1,7 @@
+<input
+	value=<% value %>
+	class="alchemy-field-value"
+	type="hidden"
+	form=<% form_id %>
+	name=<% path %>
+>

package/view/form/inputs/edit/integer.hwk

@@ -0,0 +1,8 @@
+<input
+	value=<% value %>
+	class="alchemy-field-value"
+	type="number"
+	form=<% form_id %>
+	name=<% path %>
+	step="1"
+>

package/view/form/inputs/edit/local_date.hwk

@@ -0,0 +1,13 @@
+<%
+if (value) {
+	value = value.format('Y-m-d');
+}
+%>
+<input
+	value=<% value %>
+	class="alchemy-field-value"
+	type="date"
+	form=<% form_id %>
+	name=<% path %>
+	pattern="\d{4}-\d{2}-\d{2}"
+>

package/view/form/inputs/edit/local_date_time.hwk

@@ -0,0 +1,20 @@
+<%
+
+if (value) {
+
+	// Make sure it's a date
+	value = LocalDate.create(value);
+
+	// According to MDN `toISOString()` should work,
+	// but neither Chrome or Firefox allow that format (it still contains timezone info)
+	value = value.format('Y-m-d\\TH:i:s');
+}
+%>
+<input
+	value=<% value %>
+	class="alchemy-field-value"
+	type="datetime-local"
+	form=<% form_id %>
+	name=<% path %>
+	pattern="\d{4}-\d{2}-\d{2} \d{1,2}:\d{1,2}(?::\d{1,2})?"
+>

package/view/form/inputs/edit/local_time.hwk

@@ -0,0 +1,14 @@
+<%
+if (value) {
+	value = value.format('H:i:s');
+}
+%>
+<input
+	value=<% value %>
+	class="alchemy-field-value"
+	type="time"
+	form=<% form_id %>
+	name=<% path %>
+	pattern="\d{2}:\d{2}:\d{2}"
+	step=1
+>

package/view/form/inputs/hidden/hidden.hwk

@@ -0,0 +1,7 @@
+<input
+	value=<% value %>
+	class="alchemy-field-value"
+	type="hidden"
+	form=<% form_id %>
+	name=<% path %>
+>

package/view/form/inputs/view/hidden.hwk

@@ -0,0 +1,7 @@
+<input
+	value=<% value %>
+	class="alchemy-field-value"
+	type="hidden"
+	form=<% form_id %>
+	name=<% path %>
+>