alchemy-form 0.1.5 → 0.1.8

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+## 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
+* 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

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_select.scss

@@ -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/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,19 +17,23 @@ const FormApi = Function.inherits('Alchemy.Controller', 'FormApi');
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.5
+ * @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();
@@ -40,10 +44,14 @@ FormApi.setAction(async function related(conduit) {
 				continue;
 			}
 
-			crit.where(field).equals(rx);
+			or.where(field).equals(rx);
 		}
 	}
 
+	if (config.page) {
+		crit.page(config.page);
+	}
+
 	let records = await model.find('all', crit);
 
 	let result = {
@@ -53,3 +61,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/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/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

@@ -133,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.4
+ * @version  0.1.8
  */
 Field.enforceProperty(function config(new_value, old_value) {
 
@@ -148,7 +148,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;
 	}
 
@@ -493,10 +493,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 +521,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 +557,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 +575,9 @@ Field.setProperty(function value() {
 
 	if (element) {
 		element.value = value;
+	} else if (this.original_value == null) {
+		this.original_value = value;
 	}
-
 });
 
 /**
@@ -708,16 +715,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,