alchemy-form 0.1.4 → 0.1.7

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.7
+ *
+ * @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) {
+			continue;
+		}
+
+		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,

package/element/query_builder.js

@@ -0,0 +1,90 @@
+/**
+ * The alchemy-toggle custom element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+const QueryBuilder = Function.inherits('Alchemy.Element.Form.Base', 'QueryBuilder');
+
+/**
+ * The template code
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+QueryBuilder.setTemplate(`<alchemy-query-builder-group></alchemy-query-builder-group>`, {plain_html: true, render_immediate: true});
+
+/**
+ * The stylesheet to load for this element
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+QueryBuilder.setStylesheetFile('form/query_builder');
+
+/**
+ * The dataprovider used to get the variables
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+QueryBuilder.setAssignedProperty('dataprovider');
+
+/**
+ * Getter for the header element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+QueryBuilder.addElementGetter('root_group', ':scope > alchemy-query-builder-group');
+
+/**
+ * Get/set the value
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+QueryBuilder.setProperty(function value() {
+	return this.root_group.value;
+}, function setValue(value) {
+	this.assigned_data.value = value;
+
+	if (Blast.isBrowser && this.has_rendered) {
+		this.applyValue(value);
+	}
+});
+
+/**
+ * Apply the given value
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+QueryBuilder.setMethod(function applyValue(value) {
+
+	if (!value) {
+		return;
+	}
+
+	this.root_group.value = value;
+});
+
+/**
+ * Added to the dom
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+QueryBuilder.setMethod(function introduced() {
+	if (this.assigned_data.value) {
+		this.applyValue(this.assigned_data.value);
+	}
+});

package/element/query_builder_entry.js

@@ -0,0 +1,388 @@
+/**
+ * The query-builder-entry custom element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+const QueryBuilderEntry = Function.inherits('Alchemy.Element.Form.QueryBuilderBase', 'QueryBuilderEntry');
+
+/**
+ * The template to use for the content of this element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+QueryBuilderEntry.setTemplateFile('form/elements/query_builder_entry');
+
+/**
+ * The type of entry
+ * (can change the operators used)
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+QueryBuilderEntry.setAttribute('type');
+
+/**
+ * Getter for the field selector
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+QueryBuilderEntry.addElementGetter('field_select', '.qb-field');
+
+/**
+ * Getter for the operator selector
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+QueryBuilderEntry.addElementGetter('operator_select', '.qb-operator');
+
+/**
+ * Getter for the value type selector
+ * (variable, value)
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+QueryBuilderEntry.addElementGetter('value_type_select', '.qb-value-type');
+
+/**
+ * Getter for the value input wrapper
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+QueryBuilderEntry.addElementGetter('value_input_wrapper', '.qb-value-input-wrapper');
+
+/**
+ * Getter for the delete button
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+QueryBuilderEntry.addElementGetter('delete_button', '.qb-delete-entry');
+
+/**
+ * Get/set the value
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+QueryBuilderEntry.setProperty(function value() {
+
+	if (!this.field_select.value) {
+		return;
+	}
+
+	let result = {
+		type         : 'qb_entry',
+		field        : this.field_select.value,
+		operator     : this.operator_select.value,
+		source_type  : this.value_type_select.value,
+	};
+
+	if (result.source_type == 'variable') {
+		let select = this.value_input_wrapper.querySelector('.qb-value-variable');
+
+		if (select) {
+			result.value_variable = select.value;
+		}
+	} else if (result.source_type == 'value') {
+		let input = this.value_input_wrapper.querySelector('.qb-value-input');
+
+		if (input) {
+			let value_explicit = {
+				type  : this.getValueType(input),
+				value : null,
+			};
+
+			if (value_explicit.type == 'number' && typeof input.valueAsNumber != 'undefined') {
+				value_explicit.value = input.valueAsNumber;
+			} else {
+				value_explicit.value = input.value;
+			}
+
+			result.value_explicit = value_explicit;
+		}
+	}
+
+	return result;
+}, function setValue(value) {
+	this.assigned_data.value = value;
+});
+
+/**
+ * Load data for a specific element
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+QueryBuilderEntry.setMethod(async function loadData(config, element) {
+
+	if (!element) {
+		return;
+	}
+
+	if (!config) {
+		config = {};
+	}
+
+	let items;
+
+	if (element.classList.contains('qb-field') || element.classList.contains('qb-value-variable')) {
+		items = await this.loadVariableData(config);
+	} else if (element.classList.contains('qb-operator')) {
+		items = await this.loadOperatorData(config);
+	} else if (element.classList.contains('qb-value-type')) {
+		items = await this.loadValueTypeData(config);
+	}
+
+	console.log('Got items:', items);
+	items.clean(null);
+	items.clean(undefined);
+	items.clean(false);
+
+	return {
+		items: items,
+	};
+});
+
+/**
+ * Load value type data
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+QueryBuilderEntry.setMethod(async function loadValueTypeData(config) {
+
+	let items = [];
+
+	items.push({id: 'variable', title: 'Other variable'});
+	items.push({id: 'value', title: 'Value'});
+
+	return items;
+});
+
+/**
+ * Load variable data
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+QueryBuilderEntry.setMethod(async function loadVariableData(config) {
+
+	config.value_type = 'variable';
+
+	let dataprovider = this.dataprovider;
+
+	if (!config) {
+		config = {};
+	}
+
+	config.type = this.type || 'logical';
+
+	let variables = [];
+
+	if (dataprovider) {
+		variables = await dataprovider.loadData(config, this);
+	}
+
+	let result = [];
+
+	if (variables && variables.length) {
+		let allow_readonly = true,
+		    entry;
+
+		if (config.type != 'logical') {
+			allow_readonly = false;
+		}
+
+		for (entry of variables) {
+			if (entry) {
+				if (allow_readonly || !entry.readonly) {
+					result.push(entry);
+				}
+			}
+		}
+	}
+
+	// Example
+	// items.push({
+	// 	id    : 'id',
+	// 	title : 'ID',
+	// 	type  : 'number'
+	// });
+
+	return result;
+});
+
+/**
+ * Load operator data
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+QueryBuilderEntry.setMethod(async function loadOperatorData(config) {
+
+	let type = this.field_select.value;
+
+	if (!type) {
+		return;
+	}
+
+	let variable_def = this.field_select.getValueData(type);
+
+	let items = [];
+
+	if (variable_def) {
+
+		if (!this.type || this.type == 'logical') {
+			items.include(variable_def.getLogicalOperators());
+		} else if (this.type == 'assignment') {
+			items.include(variable_def.getAssignmentOperators());
+		}
+	}
+
+	return items;
+});
+
+/**
+ * Show the correct value input
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+QueryBuilderEntry.setMethod(async function showValueInput() {
+
+	let variable_name = this.field_select.value;
+
+	if (!variable_name) {
+		return;
+	}
+
+	let entry = this.field_select.getValueData(variable_name);
+
+	if (!entry) {
+		await this.field_select.waitForTasks();
+
+		entry = this.field_select.getValueData(variable_name);
+	}
+
+	if (!entry) {
+		return;
+	}
+
+	let element = entry.createValueInput(this.hawkejs_renderer);
+
+	element.classList.add('qb-value-input');
+
+	this.value_input_wrapper.append(element);
+});
+
+/**
+ * Apply the given value
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+QueryBuilderEntry.setMethod(async function applyValue(value) {
+
+	if (!value) {
+		return;
+	}
+
+	this.field_select.value = value.field;
+	this.operator_select.value = value.operator;
+	this.value_type_select.value = value.source_type;
+
+	await this.applyValueTypeChanges();
+
+	if (value.source_type == 'variable') {
+		let select = this.value_input_wrapper.querySelector('.qb-value-variable');
+
+		if (select) {
+			select.value = value.value_variable;
+		}
+	} else if (value.source_type == 'value') {
+		let input = this.value_input_wrapper.querySelector('.qb-value-input');
+
+		if (input && value.value_explicit) {
+			input.value = value.value_explicit.value;
+		}
+	}
+});
+
+/**
+ * Apply value type changes
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+QueryBuilderEntry.setMethod(async function applyValueTypeChanges() {
+
+	Hawkejs.removeChildren(this.value_input_wrapper);
+
+	let type = this.value_type_select.value;
+
+	if (type == 'variable') {
+		let select = this.createElement('alchemy-select');
+		select.value_item_template = 'form/select/qb_item';
+		select.option_item_template = 'form/select/qb_item';
+
+		select.dataprovider = this;
+		select.classList.add('qb-value-variable');
+		this.value_input_wrapper.append(select);
+	} else if (type == 'value') {
+		await this.showValueInput();
+	}
+});
+
+/**
+ * Added to the dom
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+QueryBuilderEntry.setMethod(function introduced() {
+
+	this.field_select.addEventListener('change', e => {
+		e.preventDefault();
+
+		this.operator_select.value = null;
+		this.value_type_select.value = null;
+		Hawkejs.removeChildren(this.value_input_wrapper);
+	});
+
+	this.delete_button.addEventListener('click', e => {
+		e.preventDefault();
+		this.remove();
+	});
+
+	this.value_type_select.addEventListener('change', e => {
+		e.preventDefault();
+		this.applyValueTypeChanges();
+	});
+
+	if (this.assigned_data.value) {
+		this.applyValue(this.assigned_data.value);
+	}
+});