alchemy-form 0.1.5 → 0.1.6

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## 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_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.5
+ * @version  0.1.6
  *
  * @param    {Conduit}   conduit
  */
@@ -28,6 +28,7 @@ FormApi.setAction(async function related(conduit) {
 	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);
@@ -40,7 +41,7 @@ FormApi.setAction(async function related(conduit) {
 				continue;
 			}
 
-			crit.where(field).equals(rx);
+			or.where(field).equals(rx);
 		}
 	}
 
@@ -53,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/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.5
+ * @version  0.1.6
  *
  * @param    {String}   type    "value" or "option"
  * @param    {Mixed}    value   The actual value of this item
@@ -1181,6 +1209,13 @@ 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;
 

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
  *

package/element/alchemy_table.js

@@ -513,7 +513,7 @@ Table.setMethod(function getCurrentStateUrl() {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.6
  *
  * @param    {Array}   records
  */
@@ -530,6 +530,7 @@ Table.setMethod(function setRecords(records) {
 	}
 
 	this.showPagination();
+	this.attachContextMenus();
 });
 
 /**
@@ -593,7 +594,7 @@ Table.setMethod(function showPagination() {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.1
+ * @version  0.1.6
  *
  * @param    {Object}   entry
  *
@@ -604,7 +605,10 @@ Table.setMethod(function createDataRow(entry) {
 	let field,
 	    value,
 	    tr = this.createElement('tr'),
-	    td;
+	    td,
+		id = entry.$pk || entry._id || entry.id;
+	
+	tr.dataset.pk = id;
 
 	for (field of this.fieldset) {
 		td = this.createElement('td');
@@ -623,31 +627,22 @@ Table.setMethod(function createDataRow(entry) {
 		td.classList.add('aft-actions');
 		tr.append(td);
 
-		let actions;
-
-		if (entry.$hold && entry.$hold.actions) {
-			actions = entry.$hold.actions;
-		} else {
-			actions = entry.$actions;
-		}
+		let actions = this.getEntryActions(entry, 'row');
 
 		if (actions && actions.length) {
+
 			let action,
 			    anchor;
 
+			// Iterate over all the defined actions
 			for (action of actions) {
-				anchor = this.createElement('a');
-				anchor.dataset.name = action.name;
-
-				if (action.icon) {
-					let alico = this.createElement('al-ico');
-					alico.setAttribute('type', action.icon);
-					anchor.append(alico);
-				} else {
-					anchor.textContent = action.title || action.name;
+
+				anchor = action.constructElement(this);
+
+				if (!anchor) {
+					continue;
 				}
 
-				anchor.setAttribute('href', action.url);
 				td.append(anchor);
 			}
 		}
@@ -658,6 +653,111 @@ Table.setMethod(function createDataRow(entry) {
 	return tr;
 });
 
+/**
+ * Get a list of actions
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ *
+ * @param    {Object}   record
+ * @param    {Stirng}   filter
+ * 
+ * @return   {Alchemy.Form.Action.Action[]}
+ */
+Table.setMethod(function getEntryActions(record, filter) {
+
+	let result = [];
+
+	if (!record) {
+		return result;
+	}
+
+	let actions;
+
+	if (record.$hold && record.$hold.actions) {
+		actions = record.$hold.actions;
+	} else {
+		actions = record.$actions;
+	}
+
+	if(!actions || !actions.length) {
+		return result;
+	}
+
+	for (let action of actions) {
+
+		if (!action.type) {
+			action.type = 'url';
+		}
+
+		// Make sure it's an action instance
+		action = Classes.Alchemy.Form.Action.Action.cast(action);
+
+		if (!action || (filter && !action.isAllowedIn(filter))) {
+			continue;
+		}
+
+		result.push(action);
+	}
+
+	return result;
+});
+
+/**
+ * Add context menus to rows
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ *
+ * @param    {Object}   entry
+ */
+Table.setMethod(function attachContextMenus() {
+
+	if (!Blast.isBrowser) {
+		return;
+	}
+
+	if (!this.assigned_data.records || !this.assigned_data.records.length) {
+		return;
+	}
+
+	for (let record of this.assigned_data.records) {
+
+		let context_actions = this.getEntryActions(record, 'context');
+
+		if (!context_actions || !context_actions.length) {
+			contintue;
+		}
+
+		let pk = record.$pk || record._id || record.id;
+
+		if (!pk) {
+			continue;
+		}
+
+		let tr = this.querySelector('[data-pk="' + pk + '"]');
+
+		if (!tr) {
+			continue;
+		}
+
+		tr.addEventListener('contextmenu', e => {
+
+			this.selectRow(tr);
+
+			let menu = this.createElement('he-context-menu');
+
+			for (let action of context_actions) {
+				action.addToContextMenu(menu);
+			}
+
+			menu.show(e);
+		});
+	}
+});
+
 /**
  * On new fieldset
  *
@@ -931,12 +1031,14 @@ Table.setMethod(function sortData() {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.6
  */
 Table.setMethod(function introduced() {
 
 	const that = this;
 
+	this.attachContextMenus();
+
 	this.addEventListener('click', function onClick(e) {
 
 		let target = e.target,