alchemy-form 0.1.6 → 0.1.9

package/CHANGELOG.md

@@ -1,3 +1,30 @@
+## 0.1.9 (2022-07-06)
+
+* Allow supplying a custom `data-src` to `alchemy-field` elements
+* Add `view` templates for File & Datetime fields
+* Use the new `alchemy.getClientModel()` method in `alchemy-field` element
+* Add `alchemy-password-input` element
+
+## 0.1.8 (2022-06-29)
+
+* Move the `alchemy-select` pagination checker initializer to a static function
+* Prevent `alchemy-select` from keeping on loading remote data when last few results were empty
+* Fix pagination breaking re-opening of `alchemy-select` dropdown
+* Fix initial value of a `BelongsTo` `alchemy-select` element not loading
+* Fix `alchemy-select` downward-arrow-icon being rendered over value content
+* Use `alchemy-code-input` for HTML fields
+* Allow manually setting a value on `alchemy-field` elements
+* Try to let `Field` instances decide the representation of values in `alchemy-table` elements
+* Don't open the `alchemy-table` contextmenu when clicking on anchors
+
+## 0.1.7 (2022-06-12)
+
+* Fix `<alchemy-table>` code typo
+* Fix QueryBuilderGroup value being set incorrectly
+* Add `<alchemy-query-builder-value>` element
+* Add `<alchemy-query-builder-variable>` element
+* Add List variable definition, which can contain other variables
+
 ## 0.1.6 (2022-05-31)
 
 * Fix `FormApi#related` action searching through multiple fields in an `and` group

package/assets/stylesheets/form/alchemy_select.scss

@@ -39,7 +39,7 @@ alchemy-select {
 		align-items: center;
 
 		input.type-area {
-			height: 1.5rem;
+			height: 1.5rem !important;
 		}
 	}
 
@@ -102,7 +102,6 @@ alchemy-select {
 		font-family: inherit;
 		font-size: 13px;
 		line-height: 18px;
-		-webkit-font-smoothing: inherit;
 		display: inline-block !important;
 		padding: 0 !important;
 		min-height: 0 !important;
@@ -113,11 +112,10 @@ alchemy-select {
 		border: 0 none !important;
 		background: none !important;
 		line-height: inherit !important;
-		-webkit-user-select: auto !important;
-		-webkit-box-shadow: none !important;
 		box-shadow: none !important;
 		outline: none !important;
 		flex: 0 1 auto;
+		margin-right: 20px !important;
 	}
 
 	.dropdown {

package/controller/form_api_controller.js

@@ -17,20 +17,23 @@ const FormApi = Function.inherits('Alchemy.Controller', 'FormApi');
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.6
+ * @version  0.1.8
  *
  * @param    {Conduit}   conduit
  */
 FormApi.setAction(async function related(conduit) {
 
-	const body = conduit.body;
+	const body = conduit.body || {},
+	      config = body.config || {};
 
 	const model = this.getModel(body.assoc_model);
 	let crit = model.find();
 	crit.limit(50);
 	crit.setOption('scenario', 'related_data');
 
-	if (body.config && body.config.search) {
+	if (config.value) {
+		crit.where(model.primary_key).equals(config.value);
+	} else if (config.search) {
 		let display_fields = Array.cast(model.displayField);
 
 		let or = crit.or();
@@ -45,6 +48,10 @@ FormApi.setAction(async function related(conduit) {
 		}
 	}
 
+	if (config.page) {
+		crit.page(config.page);
+	}
+
 	let records = await model.find('all', crit);
 
 	let result = {

package/element/25_query_builder_data.js

@@ -0,0 +1,139 @@
+/**
+ * The base abstract query builder custom element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.7
+ * @version  0.1.7
+ */
+const QueryBuilderData = Function.inherits('Alchemy.Element.Form.QueryBuilderBase', 'QueryBuilderData');
+
+/**
+ * Don't register this as a custom element,
+ * but don't let child classes inherit this
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.7
+ * @version  0.1.7
+ */
+QueryBuilderData.setStatic('is_abstract_class', true, false);
+
+/**
+ * Check a filter
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.7
+ */
+QueryBuilderData.setMethod(function checkFilterType(filter_type, entry) {
+
+	if (!entry) {
+		return false;
+	}
+
+	let whitelist = this[filter_type];
+
+	if (!whitelist) {
+		return true;
+	}
+
+	let type = entry.type_name || entry.type || entry.id || entry.name;
+
+	if (!type) {
+		return false;
+	}
+
+	let entries = whitelist.split(',');
+
+	return entries.indexOf(type) > -1;
+});
+
+/**
+ * Load data for a specific element
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+QueryBuilderData.setMethod(async function loadData(config, element) {
+
+	if (!element) {
+		return;
+	}
+
+	if (!config) {
+		config = {};
+	}
+
+	let filter_type,
+	    result = [],
+	    items;
+
+	if (element.classList.contains('qb-source-type')) {
+		items = await this.loadSourceTypeData(config);
+		filter_type = 'source-types';
+	} else if (element.classList.contains('qb-value-variable') || element.classList.contains('qb-variable')) {
+		items = await this.loadVariableData(config);
+		filter_type = 'variable-types';
+	}
+
+	if (items && items.length) {
+
+		let entry;
+
+		for (entry of items) {
+			if (!entry) {
+				continue;
+			}
+
+			if (filter_type && !this.checkFilterType(filter_type, entry)) {
+				continue;
+			}
+
+			result.push(entry);
+		}
+	}
+
+	return {
+		items: result,
+	};
+});
+
+/**
+ * Load variable data
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.7
+ */
+QueryBuilderData.setMethod(async function loadVariableData(config) {
+
+	let dataprovider = this.dataprovider;
+
+	if (!config) {
+		config = {};
+	}
+
+	config.source_type = 'variable';
+
+	let variables = [];
+
+	if (dataprovider) {
+		variables = await dataprovider.loadData(config, this);
+	}
+
+	let result = [];
+
+	if (variables && variables.length) {
+		let entry;
+
+		for (entry of variables) {
+			if (entry) {
+				result.push(entry);
+			}
+		}
+	}
+
+	console.log('Got loadvariable data:', result);
+
+	return result;
+});

package/element/alchemy_field.js

@@ -34,6 +34,15 @@ Field.setStylesheetFile('form/alchemy_field');
  */
 Field.setStatic('use_new_renderer_scope', true);
 
+/**
+ * The data source url/route to use
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.9
+ * @version  0.1.9
+ */
+Field.setAttribute('data-src');
+
 /**
  * The name of the field
  *
@@ -133,7 +142,7 @@ Field.enforceProperty(function alchemy_field_schema(new_value, old_value) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.4
+ * @version  0.1.8
  */
 Field.enforceProperty(function config(new_value, old_value) {
 
@@ -148,7 +157,7 @@ Field.enforceProperty(function config(new_value, old_value) {
 
 	if (new_value && new_value.constructor && new_value.constructor.type_name) {
 		this.field_type = new_value.constructor.type_name;
-	} else {
+	} else if (new_value) {
 		this.field_type = null;
 	}
 
@@ -160,7 +169,7 @@ Field.enforceProperty(function config(new_value, old_value) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.9
  */
 Field.enforceProperty(function schema(new_value, old_value) {
 
@@ -181,15 +190,10 @@ Field.enforceProperty(function schema(new_value, old_value) {
 		let model_name = this.model;
 
 		if (model_name) {
-			// @TODO: Always get the Client-side model here
-			let model = alchemy.getModel(model_name);
+			let model = alchemy.getClientModel(model_name);
 
 			if (model) {
 				new_value = model.schema;
-
-				if (Blast.isNode) {
-					new_value = JSON.clone(new_value, 'toHawkejs');
-				}
 			}
 		}
 	}
@@ -493,10 +497,14 @@ Field.setProperty(function wrapper_files() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.4
+ * @version  0.1.8
  */
 Field.setProperty(function original_value() {
 
+	if (this.assigned_data.original_value != null) {
+		return this.assigned_data.original_value;
+	}
+
 	let alchemy_field_schema = this.alchemy_field_schema,
 	    path = this.field_path_in_current_schema;
 
@@ -517,6 +525,8 @@ Field.setProperty(function original_value() {
 	if (form && form.document) {
 		return Object.path(form.document, path);
 	}
+}, function setOriginalValue(value) {
+	return this.assigned_data.original_value = value;
 });
 
 /**
@@ -551,7 +561,7 @@ Field.setProperty(function value_element() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.3
+ * @version  0.1.8
  */
 Field.setProperty(function value() {
 
@@ -569,8 +579,9 @@ Field.setProperty(function value() {
 
 	if (element) {
 		element.value = value;
+	} else if (this.original_value == null) {
+		this.original_value = value;
 	}
-
 });
 
 /**
@@ -708,7 +719,7 @@ Field.setMethod(function retained() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.6
+ * @version  0.1.9
  *
  * @param    {Object}        config
  * @param    {HTMLElement}   element
@@ -735,7 +746,7 @@ Field.setMethod(async function loadData(config, element) {
 			}
 		}
 
-		return this.hawkejs_helpers.Alchemy.getResource({
+		let resource_options = {
 			name  : 'FormApi#related',
 			post  : true,
 			body  : {
@@ -744,7 +755,13 @@ Field.setMethod(async function loadData(config, element) {
 				assoc_model  : field.options.modelName,
 				config       : config,
 			}
-		});
+		};
+
+		if (this.data_src) {
+			resource_options.name = this.data_src;
+		}
+
+		return this.hawkejs_helpers.Alchemy.getResource(resource_options);
 	}
 
 });

package/element/alchemy_password_input.js

@@ -0,0 +1,141 @@
+/**
+ * The number-input custom element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.9
+ * @version  0.1.9
+ */
+const PasswordInput = Function.inherits('Alchemy.Element.Form.StringInput', 'PasswordInput');
+
+/**
+ * The template to use for the content of this element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.9
+ * @version  0.1.9
+ */
+PasswordInput.setTemplateFile('form/elements/password_input');
+
+/**
+ * Reference to the repeat input element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.9
+ * @version  0.1.9
+ */
+PasswordInput.addElementGetter('repeat_el', '.repeat-input');
+
+/**
+ * Reference to the repeat label element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.9
+ * @version  0.1.9
+ */
+PasswordInput.addElementGetter('repeat_label', '.repeat-input-label');
+
+/**
+ * The value property
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.9
+ * @version  0.1.9
+ */
+PasswordInput.setProperty(function value() {
+
+	let val;
+
+	if (this.input_el) {
+		val = this.input_el.value;
+	}
+
+	if (!val) {
+		return undefined;
+	}
+
+	if (!this.valuesAreEqual()) {
+		return undefined;
+	}
+
+	return val;
+});
+
+/**
+ * Are both inputs the same?
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.9
+ * @version  0.1.9
+ */
+PasswordInput.setMethod(function valuesAreEqual() {
+
+	let first_value = this.input_el?.value,
+	    repeat_value = this.repeat_el?.value;
+	
+	return first_value == repeat_value;
+});
+
+/**
+ * Revalidate the value
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.9
+ * @version  0.1.9
+ */
+PasswordInput.setMethod(async function revalidate() {
+
+	let first_value = this.input_el?.value,
+	    repeat_value = this.repeat_el.value;
+
+	if (first_value) {
+		this.repeat_label.hidden = false;
+	} else {
+		this.repeat_el.value = '';
+		this.repeat_label.hidden = true;
+	}
+
+	this.removeErrors();
+
+	if (!first_value && !repeat_value) {
+		return;
+	}
+
+	if (first_value != repeat_value) {
+		return this.addError(this.__('does-not-match'), true);
+	}
+
+	return revalidate.super.call(this);
+});
+
+/**
+ * Actions to perform when this element
+ * has been added to the DOM for the first time
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.9
+ * @version  0.1.9
+ */
+PasswordInput.setMethod(function introduced() {
+
+	const that = this;
+
+	introduced.super.call(this);
+
+	this.repeat_el.addEventListener('focus', function onFocus(e) {
+		that.inputbox_el.classList.add('focus');
+	});
+
+	this.repeat_el.addEventListener('blur', function onBlur(e) {
+		that.inputbox_el.classList.remove('focus');
+	});
+
+	this.repeat_el.addEventListener('keyup', Fn.throttle(function onKeyup(e) {
+		that.revalidate();
+		that.emit('changing');
+	}, {
+		minimum_wait  : 350,
+		immediate     : false,
+		reset_on_call : true
+	}));
+
+});