alchemy-form 0.1.3 → 0.1.6

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+## 0.1.6 (2022-05-31)
+
+* Fix `FormApi#related` action searching through multiple fields in an `and` group
+* Use microcopy translations in buttons
+* Add `Action` class for user interaction
+* Add context-menu support to `alchemy-table`
+* Add support for using custom templates for `alchemy-select` options
+* Add QueryBuilder
+
+## 0.1.5 (2022-03-21)
+
+* Print `alchemy-select-item` contents as text, not html
+* Only get a maximum of 50 related items
+* Set the parent `alchemy-select` element when creating `alchemy-select-item` element
+
+## 0.1.4 (2022-03-16)
+
+* Make fields work with the new `Alchemy.Map.Backed` and `Alchemy.Map.Enum` class
+* Add the `field_path_in_current_schema` property
+* Make sure `alchemy-fields` know which `alchemy-form` they belong to
+* Improve the `original_value` getters
+* Set the `field-type` attribute of `alchemy-field` elements
+* Fix `alchemy-field` elements sometimes not getting their value elements
+
 ## 0.1.3 (2022-02-20)
 
 * Fix datetime fields never showing their value

package/assets/stylesheets/form/alchemy_field_array.scss

@@ -10,4 +10,8 @@ alchemy-field-array-entry {
 		align-content: center;
 		padding-left: 0.5rem;
 	}
+
+	.button .remove > * {
+		writing-mode: vertical-rl;
+	}
 }

package/assets/stylesheets/form/alchemy_toggle.scss

@@ -34,6 +34,7 @@ alchemy-toggle {
 		height: 36px;
 		flex: 0 0 134px;
 		border-radius: 4px;
+		min-width: 134px;
 
 		transition: background-color 0.3s cubic-bezier(0, 1, 0.5, 1);
 		background: #848484;
@@ -43,6 +44,7 @@ alchemy-toggle {
 		&:after {
 			text-transform: uppercase;
 			text-align: center;
+			box-sizing: inherit;
 		}
 
 		&:before {

package/assets/stylesheets/form/query_builder.scss

@@ -0,0 +1,185 @@
+:root {
+	--qb-border-color: #d3d3d3;
+	--qb-btn-background-color: #fafafa;
+	--qb-text-color: #3e3e3e;
+
+	--qb-btn-primary: #286090;
+	--qb-btn-primary-border: #204d74;
+	--qb-btn-primary-text-color: #fafafa;
+
+	--qb-btn-active: #3da50e;
+	--qb-btn-active-text: #fff;
+	--qb-btn-border-color: #d3d3d3;
+}
+
+alchemy-query-builder {
+	display: block;
+	border-color: var(--qb-border-color);
+	padding: 1rem;
+	position: relative;
+}
+
+alchemy-query-builder-group {
+	display: block;
+	padding: 10px;
+	padding-bottom: 6px;
+	background-color: rgba(250,240,210,.5);
+	border: 1px solid #dcc896;
+	position: relative;
+
+
+	margin: 4px 0;
+	padding: 5px;
+	border: 1px solid #eee;
+	border-radius: 3px;
+
+	.qb-group-header {
+		margin-bottom: 10px;
+	}
+
+	.qb-group-actions {
+		float: right;
+	}
+
+	.qb-group-body {
+		.qb-rules-list {
+			display: flex;
+			flex-flow: column;
+			gap: 1rem;
+			padding: 0 0 0 15px;
+
+			& > :first-child::before {
+				top: -11px;
+				height: calc(50% + 14px);
+			}
+
+			& > :last-child::before {
+				border-radius: 0 0 0 4px;
+			}
+
+			& > ::after {
+				top: 50%;
+				border-width: 0 0 0 2px;
+			}
+
+			& >:last-child::after {
+				display: none;
+			}
+
+			> ::before {
+				top: -2px;
+				border-width: 0 0 2px 2px;
+			}
+
+			> ::before,
+			> ::after {
+				content: '';
+				position: absolute;
+				left: -10px;
+				width: 10px;
+				height: calc(50% + 4px);
+				border-color: #ccc;
+				border-style: solid;
+			}
+		}
+	}
+}
+
+alchemy-query-builder-value {
+	min-width: 10rem;
+}
+
+alchemy-query-builder-entry {
+	min-width: 40rem;
+}
+
+alchemy-query-builder-value,
+alchemy-query-builder-entry {
+	display: flex;
+	gap: 0.7rem;
+
+	alchemy-select {
+		min-width: 11rem;
+	}
+
+	.qb-delete-wrapper {
+		flex: 1;
+		text-align: right;
+	}
+
+	.qb-value-wrapper {
+		display: flex;
+		gap: 0.3rem;
+	}
+
+	.qb-value-input {
+		height: 100%;
+		color: black;
+		padding: 0 0.5rem;
+	}
+}
+
+.qb-group-invert,
+.qb-button-group,
+.qb-group-type {
+	display: inline-flex;
+	box-shadow: 0 1px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);
+	user-select: none;
+
+	> input {
+		height: 1px;
+		width: 1px;
+		opacity: 0;
+		position: absolute;
+		margin: 0 0 0 -1px;
+	}
+
+	> input + label {
+		opacity: 0.7;
+	}
+
+	> input:checked + label {
+		background-color: var(--qb-btn-active);
+		border-color: var(--qb-btn-active);
+		color: var(--qb-btn-active-text);
+		opacity: 1;
+	}
+}
+
+.qb-primary {
+	--qb-btn-background-color: var(--qb-btn-primary);
+	--qb-text-color: var(--qb-btn-primary-text-color);
+	--qb-btn-border-color: var(--qb-btn-primary-border);
+}
+
+button.qb-btn {
+	border-color: var(--qb-btn-border-color);
+}
+
+.qb-btn {
+	background-color: var(--qb-btn-background-color);
+	color: var(--qb-text-color);
+	transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
+	border-radius: 2px;
+	cursor: pointer;
+	display: inline-block;
+	font-weight: bold;
+	text-align: center;
+	padding: 2px 12px 1px;
+}
+
+.qb-select-item {
+	display: flex;
+	flex-flow: column;
+	padding-right: 1rem;
+
+	.option-title {
+		font-weight: bold;
+		font-size: 1rem;
+		white-space: nowrap;
+	}
+
+	.option-description {
+		min-width: 10rem;
+	}
+}

package/config/routes.js

@@ -2,4 +2,12 @@ Router.add({
 	name       : 'FormApi#related',
 	methods    : 'post',
 	paths      : '/api/form/data/related',
+	policy     : 'logged_in',
+});
+
+Router.add({
+	name       : 'FormApi#queryBuilderData',
+	methods    : 'post',
+	paths      : '/api/form/data/qbdata',
+	policy     : 'logged_in',
 });

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.1.0
+ * @version  0.1.6
  *
  * @param    {Conduit}   conduit
  */
@@ -26,8 +26,26 @@ FormApi.setAction(async function related(conduit) {
 	const body = conduit.body;
 
 	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) {
+		let display_fields = Array.cast(model.displayField);
+
+		let or = crit.or();
+		let rx = RegExp.interpretWildcard('*' + body.config.search + '*', 'i');
 
-	let records = await model.find('all');
+		for (let field of display_fields) {
+			if (!field) {
+				continue;
+			}
+
+			or.where(field).equals(rx);
+		}
+	}
+
+	let records = await model.find('all', crit);
 
 	let result = {
 		available : records.available,
@@ -36,3 +54,34 @@ FormApi.setAction(async function related(conduit) {
 
 	conduit.end(result);
 });
+
+
+/**
+ * The related action
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ *
+ * @param    {Conduit}   conduit
+ */
+FormApi.setAction(async function queryBuilderData(conduit) {
+
+	const body = conduit.body;
+	const config = body.config || {};
+	let result;
+
+	if (body && body.model) {
+		const model = this.getModel(body.model);
+
+		if (body.$pk) {
+			const doc = await model.findByPk(body.$pk);
+
+			if (doc) {
+				result = await doc.loadQueryBuilderData(config);
+			}
+		}
+	}
+
+	conduit.end(result);
+});

package/element/00_form_base.js

@@ -125,6 +125,38 @@ Base.setProperty(function wrapper_type() {
 
 });
 
+/**
+ * Get the path of this field value in the current (sub)schema
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.4
+ * @version  0.1.4
+ */
+Base.setProperty(function field_path_in_current_schema() {
+
+	let result = [],
+	    parent = this.getParentField(),
+		name;
+
+	name = this.getPathEntryName();
+
+	if (name) {
+		result.push(name);
+	}
+
+	while (parent && !(parent instanceof Classes.Alchemy.Element.Form.FieldSchema)) {
+		name = parent.getPathEntryName();
+
+		if (name) {
+			result.unshift(name);
+		}
+
+		parent = parent.getParentField();
+	}
+
+	return result.join('.');
+});
+
 /**
  * Get the path of this field value in the current record
  *
@@ -162,7 +194,7 @@ Base.setProperty(function field_path_in_record() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.3
- * @version  0.1.3
+ * @version  0.1.4
  *
  * @return   {Alchemy.Element.Form.Base}
  */
@@ -179,6 +211,10 @@ Base.setMethod(function getParentField() {
 		parent = parent.parentElement;
 	}
 
+	if (this.field_context) {
+		return this.field_context;
+	}
+
 	return false;
 });
 

package/element/20_query_builder_base.js

@@ -0,0 +1,82 @@
+/**
+ * The base abstract query builder custom element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+const QueryBuilderBase = Function.inherits('Alchemy.Element.Form.Base', 'QueryBuilderBase');
+
+/**
+ * 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.6
+ * @version  0.1.6
+ */
+QueryBuilderBase.setStatic('is_abstract_class', true, false);
+
+/**
+ * The stylesheet to load for this element
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+QueryBuilderBase.setStylesheetFile('form/query_builder');
+
+/**
+ * Get the dataprovider
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+QueryBuilderBase.enforceProperty(function dataprovider(new_value) {
+
+	if (new_value == null) {
+		if (this.assigned_data.dataprovider) {
+			new_value = this.assigned_data.dataprovider;
+		} else if (this.root_query_builder && this.root_query_builder.dataprovider) {
+			new_value = this.root_query_builder.dataprovider;
+		}
+	} else {
+		this.assigned_data.dataprovider = new_value;
+	}
+
+	return new_value;
+});
+
+/**
+ * Getter for the rules list element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+QueryBuilderBase.setProperty(function root_query_builder() {
+	return this.queryParents('alchemy-query-builder');
+});
+
+/**
+ * Get the value type of the given input
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ * 
+ * @param    {HTMLElement}
+ * 
+ * @return   {String}
+ */
+QueryBuilderBase.setMethod(function getValueType(element) {
+
+	if (!element) {
+		return null;
+	}
+
+	let result = element.value_type || element.type;
+
+	return result;
+});

package/element/alchemy_field.js

@@ -3,11 +3,9 @@
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.4
  */
-var Field = Function.inherits('Alchemy.Element.Form.Base', function Field() {
-	Field.super.call(this);
-});
+const Field = Function.inherits('Alchemy.Element.Form.Base', 'Field');
 
 /**
  * The template to use for the content of this element
@@ -45,6 +43,15 @@ Field.setStatic('use_new_renderer_scope', true);
  */
 Field.setAttribute('field-name');
 
+/**
+ * The type of the field
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.4
+ * @version  0.1.4
+ */
+Field.setAttribute('field-type');
+
 /**
  * The view override
  *
@@ -77,9 +84,24 @@ Field.setAssignedProperty('widget_settings');
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.4
  */
-Field.addParentTypeGetter('alchemy_form', 'alchemy-form');
+Field.enforceProperty(function alchemy_form(new_value) {
+
+	if (new_value == null) {
+		new_value = this.queryUp('alchemy-form');
+
+		if (!new_value && this.field_context) {
+			new_value = this.field_context.queryUp('alchemy-form');
+		}
+
+		if (!new_value && this.alchemy_field_schema && this.alchemy_field_schema.alchemy_field) {
+			new_value = this.alchemy_field_schema.alchemy_field.alchemy_form;
+		}
+	}
+	
+	return new_value;
+});
 
 /**
  * Get the error area
@@ -111,7 +133,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.0
+ * @version  0.1.4
  */
 Field.enforceProperty(function config(new_value, old_value) {
 
@@ -124,6 +146,12 @@ 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 {
+		this.field_type = null;
+	}
+
 	return new_value;
 });
 
@@ -465,17 +493,20 @@ Field.setProperty(function wrapper_files() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.4
  */
 Field.setProperty(function original_value() {
 
-	let alchemy_field_schema = this.alchemy_field_schema;
+	let alchemy_field_schema = this.alchemy_field_schema,
+	    path = this.field_path_in_current_schema;
 
 	if (alchemy_field_schema) {
 		let original_schema_value = alchemy_field_schema.original_value;
 
 		if (original_schema_value) {
-			return original_schema_value[this.field_name];
+			if (path) {
+				return Object.path(original_schema_value, path);
+			}
 		}
 
 		return;
@@ -484,7 +515,7 @@ Field.setProperty(function original_value() {
 	let form = this.alchemy_form;
 
 	if (form && form.document) {
-		return form.document[this.field_name];
+		return Object.path(form.document, path);
 	}
 });
 
@@ -493,7 +524,7 @@ Field.setProperty(function original_value() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.3
+ * @version  0.1.4
  */
 Field.setProperty(function value_element() {
 
@@ -506,7 +537,9 @@ Field.setProperty(function value_element() {
 		input = this.querySelector('alchemy-field-array');
 	} else if (this.contains_schema) {
 		input = this.querySelector('alchemy-field-schema');
-	} else {
+	}
+
+	if (!input) {
 		input = this.querySelector('.alchemy-field-value');
 	}
 
@@ -675,16 +708,33 @@ Field.setMethod(function retained() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.6
  *
  * @param    {Object}        config
  * @param    {HTMLElement}   element
  */
-Field.setMethod(function loadData(config, element) {
+Field.setMethod(async function loadData(config, element) {
 
 	let field = this.config;
 
 	if (field) {
+
+		let result;
+
+		if (typeof field.loadData == 'function') {
+
+			try {
+				result = await field.loadData(config, element);
+			} catch (err) {
+				// Ignore
+				console.error('Error loading field data:', err);
+			}
+
+			if (result) {
+				return result;
+			}
+		}
+
 		return this.hawkejs_helpers.Alchemy.getResource({
 			name  : 'FormApi#related',
 			post  : true,