alchemy-form 0.1.4 → 0.1.7

package/CHANGELOG.md

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

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/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

@@ -708,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,

package/element/alchemy_select.js

@@ -36,6 +36,26 @@ AlchemySelect.setProperty('_clear_count', 0);
  */
 AlchemySelect.setAttribute('total-item-count', {number: true});
 
+/**
+ * The optional template to use for value items
+ * (The chosen value)
+ *
+ * @author   Jelle De Loecker <jelle@develry.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+AlchemySelect.setAttribute('value-item-template');
+
+/**
+ * The optional template to use for option items
+ * (The items visible in the dropdown)
+ *
+ * @author   Jelle De Loecker <jelle@develry.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+AlchemySelect.setAttribute('option-item-template');
+
 /**
  * The hawkejs template to use
  *
@@ -809,12 +829,16 @@ AlchemySelect.setMethod(function _processPreloadedValues() {
  *
  * @author   Jelle De Loecker <jelle@develry.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.6
  *
  * @param    {Object}   response
  */
 AlchemySelect.setMethod(function _processResponseData(response) {
 
+	if (!response) {
+		response = {};
+	}
+
 	if (response.available) {
 		this.total_item_count = response.available;
 	}
@@ -823,6 +847,10 @@ AlchemySelect.setMethod(function _processResponseData(response) {
 	    record,
 	    item;
 
+	if (!records) {
+		records = [];
+	}
+
 	for (record of records) {
 		item = this._makeOption(record._id || record.id, record);
 		this.addToDropdown(item);
@@ -1166,7 +1194,7 @@ AlchemySelect.setMethod(function close(event) {
  *
  * @author   Jelle De Loecker <jelle@develry.be>
  * @since    0.1.0
- * @version  0.1.4
+ * @version  0.1.6
  *
  * @param    {String}   type    "value" or "option"
  * @param    {Mixed}    value   The actual value of this item
@@ -1181,9 +1209,19 @@ AlchemySelect.setMethod(function _makeValueItem(type, value, data) {
 	// Set the type ("value" or "option")
 	item.type = type;
 
+	// Set the custom template to use, if any
+	let custom_template = this[type + '-item-template'];
+
+	if (custom_template) {
+		item.custom_template = custom_template;
+	}
+
 	// Assign the value
 	item.value = value;
 
+	// Add a reference to this element
+	item.alchemy_select = this;
+
 	if (!data) {
 		data = this.getValueData(value);
 	}

package/element/alchemy_select_item.js

@@ -37,6 +37,15 @@ Item.setAttribute('type');
  */
 Item.setAttribute('selected', {boolean: true});
 
+/**
+ * Should a custom template be used?
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+Item.setAttribute('custom-template');
+
 /**
  * The value of this item
  *
@@ -53,4 +62,36 @@ Item.setAssignedProperty('value');
  * @since    0.1.0
  * @version  0.1.0
  */
-Item.setAssignedProperty('data');
+Item.setAssignedProperty('data');
+
+/**
+ * The parent alchemy-select item
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.5
+ * @version  0.1.5
+ */
+Item.enforceProperty(function alchemy_select(new_value) {
+
+	if (new_value == null) {
+		new_value = this.closest('alchemy-select');
+	}
+
+	return new_value;
+});
+
+/**
+ * The display item
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.5
+ * @version  0.1.5
+ */
+Item.setProperty(function display_title() {
+
+	if (!this.data) {
+		return '';
+	}
+
+	return this.data.title || this.data.name || this.data.username || this.data.$pk || this.value;
+});