alchemy-form 0.2.0 → 0.2.2

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+## 0.2.2 (2023-01-23)
+
+* Fix `al-button`'s `activate` event not being cancelable
+* Add `placeholder` support to the string field
+
+## 0.2.1 (2022-12-23)
+
+* Enable `al-form` model validation
+* Don't throw an error when a `al-field` element has no field name configured
+* Overwrite preloaded `al-select` values with their processed variant
+* Throw an error when a document does not have a `loadQueryBuilderData` method while using the `FormApi#queryBuilderData` action
+* `QueryBuilderValue` instances will now always add a type to the `value_explicit` object
+* Make `al-button` elements submit forms automatically
+* Fix operator `al-select` element staying empty in a query builder entry
+* Work around a race condition in the query builder
+* Add `behaviour` attribute to `al-button` element
+
 ## 0.2.0 (2022-11-02)
 
 * Use the `al-` prefix for all custom elements instead of nothing or `alchemy-`

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

@@ -102,12 +102,18 @@ al-query-builder-entry {
 		min-width: 11rem;
 	}
 
+	.small-title {
+		color: gray;
+		margin-bottom: 5px;
+		display: block;
+	}
+
 	.qb-delete-wrapper {
 		flex: 1;
 		text-align: right;
 	}
 
-	.qb-value-wrapper {
+	.qb-value-wrapper .qb-value-nested-wrapper {
 		display: flex;
 		gap: 0.3rem;
 	}

package/controller/form_api_controller.js

@@ -67,7 +67,7 @@ FormApi.setAction(async function related(conduit) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.6
- * @version  0.1.6
+ * @version  0.2.1
  *
  * @param    {Conduit}   conduit
  */
@@ -84,7 +84,11 @@ FormApi.setAction(async function queryBuilderData(conduit) {
 			const doc = await model.findByPk(body.$pk);
 
 			if (doc) {
-				result = await doc.loadQueryBuilderData(config);
+				if (typeof doc.loadQueryBuilderData != 'function') {
+					throw new Error('The document class of "' + body.model + '" has no loadQueryBuilderData(config) method');
+				} else {
+					result = await doc.loadQueryBuilderData(config);
+				}
 			}
 		}
 	}

package/element/al_button.js

@@ -43,6 +43,15 @@ Button.setAttribute('tabindex', {default: 0});
  */
 Button.setAttribute('activatable-states', {type: 'token_list'});
 
+/**
+ * Preconfigured behaviours
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.2.1
+ * @version  0.2.1
+ */
+Button.setAttribute('behaviour', {type: 'token_list'});
+
 /**
  * Action instances
  *
@@ -57,7 +66,7 @@ Button.setAssignedProperty('action_instance');
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.2.0
- * @version  0.2.0
+ * @version  0.2.2
  */
 Button.setMethod(function activate() {
 
@@ -73,7 +82,7 @@ Button.setMethod(function activate() {
 		return;
 	}
 
-	let event = this.emit('activate');
+	let event = this.emit('activate', {cancelable: true});
 
 	if (event.defaultPrevented) {
 		return;
@@ -81,6 +90,35 @@ Button.setMethod(function activate() {
 
 	if (this.action_instance) {
 		this.action_instance.execute(event);
+	} else if (this.behaviour.contains('submit')) {
+		let form = this.queryUp('al-form, form');
+
+		if (form) {
+			let pledge = form.submit();
+
+			if (Pledge.isThenable(pledge)) {
+				let old_state = this.state;
+				this.setState('busy');
+
+				Pledge.done(pledge, err => {
+
+					let temp_state,
+					    duration;
+
+					if (err) {
+						temp_state = 'error';
+						duration = 2500;
+					} else {
+						temp_state = 'done';
+						duration = 1000;
+					}
+
+					this.setState(temp_state, duration, old_state);
+				});
+			} else {
+				this.setState('busy', 1000);
+			}
+		}
 	}
 });
 

package/element/al_field.js

@@ -88,6 +88,15 @@ Field.setAttribute('readonly', {boolean: true});
  */
 Field.setAssignedProperty('widget_settings');
 
+/**
+ * The placeholder
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.2
+ * @version  0.2.2
+ */
+Field.setAttribute('placeholder');
+
 /**
  * Get the parent al-form element
  *
@@ -770,7 +779,7 @@ Field.setMethod(function removeErrors() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.2.0
+ * @version  0.2.1
  */
 Field.setMethod(function retained() {
 
@@ -781,7 +790,9 @@ Field.setMethod(function retained() {
 			id += this.alchemy_form.id + '-';
 		}
 
-		id += this.field_name.slug();
+		if (this.field_name) {
+			id += this.field_name.slug();
+		}
 
 		this.id = id;
 	}

package/element/al_form.js

@@ -153,13 +153,38 @@ Form.setMethod(Hawkejs.SERIALIZE_FORM, function serializeForm() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.2
  */
 Form.setMethod(async function submit() {
 
 	let result;
 
-	if (false && this.model) {
+	await this.validate();
+
+	try {
+		result = await hawkejs.scene.onFormSubmit(this, null, {render_error: false});
+	} catch (err) {
+		if (err instanceof Classes.Alchemy.Error.Validation) {
+			this.showError(err);
+		} else {
+			this.showError(err);
+			throw err;
+		}
+	}
+
+	return result;
+});
+
+/**
+ * Validate this form
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.2
+ * @version  0.2.2
+ */
+Form.setMethod(async function validate() {
+
+	if (this.model) {
 		let model = alchemy.getModel(this.model);
 
 		if (model) {
@@ -174,15 +199,6 @@ Form.setMethod(async function submit() {
 		}
 	}
 
-	try {
-		result = await hawkejs.scene.onFormSubmit(this, null, {render_error: false});
-	} catch (err) {
-		if (err instanceof Classes.Alchemy.Error.Validation) {
-			this.showError(err);
-		} else {
-			throw err;
-		}
-	}
 });
 
 /**

package/element/al_query_builder_entry.js

@@ -165,14 +165,23 @@ QueryBuilderEntry.setMethod(async function loadData(config, element) {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.6
- * @version  0.1.6
+ * @version  0.2.1
  */
 QueryBuilderEntry.setMethod(async function loadValueTypeData(config) {
 
 	let items = [];
 
-	items.push({id: 'variable', title: 'Other variable'});
-	items.push({id: 'value', title: 'Value'});
+	items.push({
+		id: 'variable',
+		title: 'Variable',
+		description: 'Use the value of a variable',
+	});
+
+	items.push({
+		id: 'value',
+		title: 'Value',
+		description: 'Supply the value now',
+	});
 
 	return items;
 });
@@ -231,12 +240,46 @@ QueryBuilderEntry.setMethod(async function loadVariableData(config) {
 	return result;
 });
 
+/**
+ * Get the field_select variable definition
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.2.1
+ * @version  0.2.1
+ *
+ * @return   {Promise<Object>}
+ */
+QueryBuilderEntry.setMethod(async function getFieldSelectVariableDefinition(variable_name, attempt = 0) {
+
+	let variable_def = this.field_select.getValueData(variable_name);
+
+	if (variable_def) {
+		return variable_def;
+	}
+
+	await this.field_select.waitForTasks();
+	variable_def = this.field_select.getValueData(variable_name);
+
+	if (!variable_def) {
+		variable_def = await this.field_select.awaitValueData(variable_name);
+	}
+
+	if (!variable_def && attempt == 0) {
+		// There is an annoying race condition where one select gets valid data,
+		// but the other field doesn't. So in that case: wait a little bit and try agian.
+		await Pledge.after(250);
+		return this.getFieldSelectVariableDefinition(variable_name, 1);
+	}
+
+	return variable_def;
+});
+
 /**
  * Load operator data
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.6
- * @version  0.1.6
+ * @version  0.2.1
  */
 QueryBuilderEntry.setMethod(async function loadOperatorData(config) {
 
@@ -246,12 +289,11 @@ QueryBuilderEntry.setMethod(async function loadOperatorData(config) {
 		return;
 	}
 
-	let variable_def = this.field_select.getValueData(type);
+	let variable_def = await this.getFieldSelectVariableDefinition(type);
 
 	let items = [];
 
 	if (variable_def) {
-
 		if (!this.type || this.type == 'logical') {
 			items.include(variable_def.getLogicalOperators());
 		} else if (this.type == 'assignment') {
@@ -267,7 +309,7 @@ QueryBuilderEntry.setMethod(async function loadOperatorData(config) {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.6
- * @version  0.1.6
+ * @version  0.2.1
  */
 QueryBuilderEntry.setMethod(async function showValueInput() {
 
@@ -277,13 +319,7 @@ QueryBuilderEntry.setMethod(async function showValueInput() {
 		return;
 	}
 
-	let entry = this.field_select.getValueData(variable_name);
-
-	if (!entry) {
-		await this.field_select.waitForTasks();
-
-		entry = this.field_select.getValueData(variable_name);
-	}
+	let entry = await this.getFieldSelectVariableDefinition(variable_name);
 
 	if (!entry) {
 		return;

package/element/al_query_builder_value.js

@@ -80,7 +80,7 @@ QueryBuilderValue.addElementGetter('value_input_wrapper', '.qb-value-input-wrapp
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.6
- * @version  0.1.6
+ * @version  0.2.1
  */
 QueryBuilderValue.setProperty(function value() {
 
@@ -105,7 +105,7 @@ QueryBuilderValue.setProperty(function value() {
 		if (input) {
 
 			let value_explicit = {
-				type  : this.getValueType(input),
+				type  : this.getValueType(input) || 'unknown_value_type',
 				value : null,
 			}
 
@@ -129,14 +129,23 @@ QueryBuilderValue.setProperty(function value() {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.6
- * @version  0.1.6
+ * @version  0.2.1
  */
 QueryBuilderValue.setMethod(async function loadSourceTypeData(config) {
 
 	let items = [];
 
-	items.push({id: 'variable', title: 'Variable'});
-	items.push({id: 'value', title: 'Value'});
+	items.push({
+		id: 'variable',
+		title: 'Variable',
+		description: 'Use the value of a variable',
+	});
+
+	items.push({
+		id: 'value',
+		title: 'Value',
+		description: 'Supply the value now',
+	});
 
 	return items;
 });

package/element/al_select.js

@@ -137,7 +137,11 @@ AlchemySelect.setAssignedProperty('value', function getValue(value) {
 });
 
 /**
- * The options property (will be stored in assigned_data)
+ * The options property:
+ * this contains configuration options of this element.
+ *
+ * It does NOT contain things to select from.
+ * Use `values` for that instead!
  *
  * @author   Jelle De Loecker <jelle@develry.be>
  * @since    0.1.0
@@ -240,7 +244,7 @@ AlchemySelect.setProperty(function loaded_items() {
  */
 AlchemySelect.setProperty(function loaded_item_count() {
 	if (this.options.values) {
-		return this.options.values.size;
+		return this.options.values.size || 0;
 	} else {
 		return 0;
 	}
@@ -746,6 +750,22 @@ AlchemySelect.setMethod(function getValueData(value) {
 	return data;
 });
 
+/**
+ * Get the data for a specific value,
+ * but make sure it's loaded
+ *
+ * @author   Jelle De Loecker <jelle@develry.be>
+ * @since    0.2.1
+ * @version  0.2.1
+ *
+ * @param    {*}   value
+ *
+ * @return   {Pledge<Object>}
+ */
+AlchemySelect.setMethod(function awaitValueData(value) {
+	return this._ensureValueData(value);
+});
+
 /**
  * Ensure the data for the given value is loaded
  *
@@ -793,7 +813,7 @@ AlchemySelect.setMethod(function _ensureValueData(value) {
  *
  * @author   Jelle De Loecker <jelle@develry.be>
  * @since    0.1.0
- * @version  0.1.4
+ * @version  0.2.1
  */
 AlchemySelect.setMethod(function _processPreloadedValues() {
 
@@ -808,12 +828,14 @@ AlchemySelect.setMethod(function _processPreloadedValues() {
 		items     : [],
 	};
 
-	let item,
-	    key;
+	let item;
 
 	let enum_values = new Classes.Alchemy.Map.Enum(values),
 	    value;
 
+	// Make sure to use this new enum instance from now on
+	this.options.values = enum_values;
+
 	for (let key of enum_values.keys()) {
 		value = enum_values.get(key);
 
@@ -847,9 +869,7 @@ AlchemySelect.setMethod(function _processResponseData(response, page) {
 		this.total_item_count = response.available;
 	}
 
-	let records = response.items || response.records,
-	    record,
-	    item;
+	let records = response.items || response.records;
 
 	if (!records) {
 		records = [];
@@ -955,8 +975,7 @@ AlchemySelect.setMethod(function applyFetchedData(err, result, config) {
 AlchemySelect.setMethod(function recreateDropdownElements() {
 
 	let items = this.loaded_items,
-	    item,
-	    key;
+	    item;
 
 	Hawkejs.removeChildren(this.dropdown_content);
 

package/package.json

@@ -1,14 +1,14 @@
 {
 	"name": "alchemy-form",
 	"description": "Form plugin for Alchemy",
-	"version": "0.2.0",
+	"version": "0.2.2",
 	"repository": {
 		"type" : "git",
 		"url"  : "https://github.com/11ways/alchemy-form.git"
 	},
 	"peerDependencies": {
 		"alchemymvc"    : ">=1.2.0",
-		"alchemy-media" : "~0.7.0"
+		"alchemy-media" : ">=0.7.2"
 	},
 	"license": "MIT",
 	"engines": {

package/view/form/elements/query_builder_entry.hwk

@@ -1,4 +1,6 @@
 <div class="qb-field-wrapper">
+	<small class="small-title">Field</small>
+
 	<al-select
 		class="qb-field"
 		#dataprovider={% self %}
@@ -7,6 +9,8 @@
 	></al-select>
 </div>
 <div class="qb-operator-wrapper">
+	<small class="small-title">Operator</small>
+
 	<al-select
 		class="qb-operator"
 		#dataprovider={% self %}
@@ -15,15 +19,20 @@
 	></al-select>
 </div>
 <div class="qb-value-wrapper">
-	<al-select
-		class="qb-value-type"
-		#dataprovider={% self %}
-		value-item-template="form/select/qb_item"
-		option-item-template="form/select/qb_item"
-	></al-select>
+	<small class="small-title">Value</small>
+
+	<div class="qb-value-nested-wrapper">
+
+		<al-select
+			class="qb-value-type"
+			#dataprovider={% self %}
+			value-item-template="form/select/qb_item"
+			option-item-template="form/select/qb_item"
+		></al-select>
 
-	<div class="qb-value-input-wrapper">
+		<div class="qb-value-input-wrapper">
 
+		</div>
 	</div>
 </div>
 <div class="qb-delete-wrapper">

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

@@ -10,4 +10,5 @@
 	type={% type %}
 	form=<% form_id %>
 	name=<% path %>
+	placeholder={% alchemy_field.placeholder %}
 >