alchemy-form 0.1.4 → 0.1.7

package/element/query_builder_group.js

@@ -0,0 +1,248 @@
+/**
+ * The alchemy-toggle custom element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+const QueryBuilderGroup = Function.inherits('Alchemy.Element.Form.QueryBuilderBase', 'QueryBuilderGroup');
+
+/**
+ * The template to use for the content of this element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.0
+ * @version  0.1.0
+ */
+QueryBuilderGroup.setTemplateFile('form/elements/query_builder_group');
+
+/**
+ * Should the result be inverted?
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+QueryBuilderGroup.setAttribute('not', {boolean: true});
+
+/**
+ * Is this the root group?
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+QueryBuilderGroup.setProperty(function is_root_group() {
+	return (this.root_query_builder == this.parentElement);
+});
+
+/**
+ * Getter for the header element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+QueryBuilderGroup.addElementGetter('header', ':scope > .qb-group-header');
+
+/**
+ * Getter for the body element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+QueryBuilderGroup.addElementGetter('body', ':scope > .qb-group-body');
+
+/**
+ * Getter for the body element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+QueryBuilderGroup.addElementGetter('rules_list', ':scope > .qb-group-body > .qb-rules-list');
+
+/**
+ * Get the group type
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+QueryBuilderGroup.setProperty(function group_type() {
+
+	let input = this.header.querySelector('.qb-group-type input:checked'),
+	    result;
+
+	if (input) {
+		result = input.value;
+	}
+
+	if (!result) {
+		result = 'and';
+	}
+
+	return result;
+}, function setType(value) {
+
+	if (!value) {
+		value = 'and';
+	} else {
+		value = String(value).toLowerCase();
+	}
+
+	let input = this.header.querySelector('.qb-group-type input[value="' + value + '"]');
+
+	if (input) {
+		input.checked = true;
+	}
+});
+
+/**
+ * Is this group inverted/not?
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.7
+ */
+QueryBuilderGroup.setProperty(function inverted() {
+
+	let input = this.header.querySelector('.qb-group-invert input:checked');
+
+	if (input) {
+		return true;
+	}
+
+	return false;
+}, function setInverted(value) {
+
+	if (!this.assigned_data.value) {
+		this.assigned_data.value = {};
+	}
+
+	this.assigned_data.value.inverted = value;
+
+	if (this.header) {
+		let input = this.header.querySelector('.qb-group-invert input');
+		input.checked = value;
+	}
+});
+
+/**
+ * Get/set the value
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.7
+ */
+QueryBuilderGroup.setProperty(function value() {
+
+	let result = {
+		type      : 'group',
+		condition : this.group_type,
+		inverted  : this.inverted,
+		rules     : [],
+	};
+
+	let rules_elements = this.rules_list.children;
+
+	for (let i = 0; i < rules_elements.length; i++) {
+		let element = rules_elements[i],
+		    value = element.value;
+
+		if (value) {
+			result.rules.push(element.value);
+		}
+	}
+
+	return result;
+}, function setValue(value) {
+
+	this.assigned_data.value = value;
+
+	if (this.has_rendered) {
+		this.applyValue(value);
+	}
+});
+
+/**
+ * Apply the given value
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.7
+ */
+QueryBuilderGroup.setMethod(function applyValue(value) {
+
+	if (!value) {
+		return;
+	}
+
+	// Keep track of how many time a value has been applied
+	// (needed for the initial value setter)
+	if (!this.applied_value_counter) {
+		this.applied_value_counter = 0;
+	}
+
+	this.applied_value_counter++;
+
+	this.inverted = value.inverted;
+	this.group_type = value.condition;
+
+	Hawkejs.removeChildren(this.rules_list);
+
+	if (value.rules && value.rules.length) {
+		let element,
+		    rule;
+
+		for (rule of value.rules) {
+			if (rule.type == 'qb_entry') {
+				element = this.createElement('alchemy-query-builder-entry');
+			} else {
+				element = this.createElement('alchemy-query-builder-group');
+			}
+
+			element.assigned_data.value = rule;
+			this.rules_list.append(element);
+		}
+	}
+});
+
+/**
+ * Added to the dom
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.7
+ */
+QueryBuilderGroup.setMethod(function introduced() {
+
+	let add_rule = this.header.querySelector('.qb-add-rule'),
+	    add_group = this.header.querySelector('.qb-add-group'),
+		delete_group = this.header.querySelector('.qb-delete-group');
+	
+	add_rule.addEventListener('click', e => {
+		e.preventDefault();
+		
+		let new_rule = this.createElement('alchemy-query-builder-entry');
+		this.rules_list.append(new_rule);
+	});
+
+	add_group.addEventListener('click', e => {
+		e.preventDefault();
+
+		let new_group = this.createElement('alchemy-query-builder-group');
+		this.rules_list.append(new_group);
+	});
+
+	delete_group.addEventListener('click', e => {
+		e.preventDefault();
+		this.remove();
+	});
+
+	// Apply the value if it hasn't been done already
+	if (this.assigned_data.value && !this.applied_value_counter) {
+		this.applyValue(this.assigned_data.value);
+	}
+});

package/element/query_builder_value.js

@@ -0,0 +1,316 @@
+/**
+ * The alchemy-query-builder-value custom element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+const QueryBuilderValue = Function.inherits('Alchemy.Element.Form.QueryBuilderData', 'QueryBuilderValue');
+
+/**
+ * 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
+ */
+QueryBuilderValue.setTemplateFile('form/elements/query_builder_value');
+
+/**
+ * Does this use a single source type?
+ * (Set automatically, based on source-types attribute)
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+QueryBuilderValue.setAttribute('single-source-type');
+
+/**
+ * Does this use a single variable type?
+ * (Set automatically, based on variable-types attribute)
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+QueryBuilderValue.setAttribute('single-variable-type');
+
+/**
+ * A filter of variable definition types
+ * (number, string, ...)
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+QueryBuilderValue.setAttribute('variable-types');
+
+/**
+ * A filter of source types
+ * (variable, value)
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+QueryBuilderValue.setAttribute('source-types');
+
+/**
+ * Getter for the source type selector
+ * (variable, value)
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+QueryBuilderValue.addElementGetter('source_type_select', '.qb-source-type');
+
+/**
+ * Getter for the value input wrapper
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+QueryBuilderValue.addElementGetter('value_input_wrapper', '.qb-value-input-wrapper');
+
+/**
+ * Get/set the value
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+QueryBuilderValue.setProperty(function value() {
+
+	if (!this.source_type_select.value) {
+		return;
+	}
+
+	let result = {
+		type         : 'qb_value',
+		source_type  : this.source_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 value type data
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+QueryBuilderValue.setMethod(async function loadSourceTypeData(config) {
+
+	let items = [];
+
+	items.push({id: 'variable', title: 'Variable'});
+	items.push({id: 'value', title: 'Value'});
+
+	return items;
+});
+
+/**
+ * Show the correct value input
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+QueryBuilderValue.setMethod(async function showValueInput() {
+
+	let variable_type = this.single_variable_type;
+
+	if (!variable_type) {
+		return;
+	}
+
+	let constructor = Blast.Classes.Alchemy.QueryBuilder.VariableDefinition.VariableDefinition.getMember(variable_type);
+
+	if (!constructor) {
+		return;
+	}
+
+	let instance = new constructor();
+
+	let element = instance.createValueInput(this.hawkejs_renderer);
+
+	element.classList.add('qb-value-input');
+
+	this.value_input_wrapper.append(element);
+});
+
+
+/**
+ * Apply source type changes
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+QueryBuilderValue.setMethod(async function applySourceTypeChanges() {
+
+	Hawkejs.removeChildren(this.value_input_wrapper);
+
+	let type = this.source_type_select.value;
+
+	if (type == 'variable') {
+		let select = this.createElement('alchemy-select');
+		select.dataprovider = this;
+		select.classList.add('qb-value-variable');
+		this.value_input_wrapper.append(select);
+	} else if (type == 'value') {
+		await this.showValueInput();
+	}
+});
+
+/**
+ * Apply the given value
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+QueryBuilderValue.setMethod(async function applyValue(value) {
+
+	if (!value) {
+		return;
+	}
+
+	this.source_type_select.value = value.source_type;
+
+	await this.applySourceTypeChanges();
+
+	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;
+		}
+	}
+});
+
+/**
+ * Set the source type selector visibility
+ * (It should be hidden if there is only 1 possible value)
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+QueryBuilderValue.setMethod(function checkTypeConfig() {
+
+	// Don't hide the source type select by default
+	let single_source_type,
+	    hide_source_type = false;
+
+	// Check the variable types first
+	let variable_types = this.variable_types,
+	    single_variable_type;
+
+	if (variable_types) {
+		let pieces = variable_types.split(',');
+
+		if (pieces && pieces.length == 1) {
+			single_variable_type = pieces[0];
+		} else {
+			// There are NO or MULTIPLE variable types, so we can't use the "value" source type
+			single_source_type = 'variable';
+		}
+	}
+
+	if (single_variable_type) {
+		this.single_variable_type = single_variable_type;
+	} else {
+		this.removeAttribute('single-variable-type');
+	}
+	
+	// If we don't have to hide the source type yet
+	if (!single_source_type) {
+		let source_types = this.source_types;
+
+		if (source_types) {
+			let pieces = source_types.split(',');
+
+			if (pieces && pieces.length == 1) {
+				single_source_type = pieces[0];
+			}
+		}
+	}
+
+	// If we have a single source type, apply it now
+	if (single_source_type) {
+		if (this.source_type_select.value != single_source_type) {
+			this.source_type_select.value = single_source_type;
+			this.applySourceTypeChanges();
+		}
+
+		hide_source_type = true;
+	}
+
+	this.source_type_select.hidden = hide_source_type;
+
+	if (single_source_type) {
+		this.single_source_type = single_source_type;
+	} else {
+		this.removeAttribute('single-source-type');
+	}
+});
+
+/**
+ * Added to the dom
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+QueryBuilderValue.setMethod(async function introduced() {
+
+	this.source_type_select.addEventListener('change', e => {
+		e.preventDefault();
+		this.applySourceTypeChanges();
+	});
+
+	this.checkTypeConfig();
+
+	if (this.assigned_data.value) {
+		await this.applyValue(this.assigned_data.value);
+	}
+});

package/element/query_builder_variable.js

@@ -0,0 +1,103 @@
+/**
+ * The alchemy-query-builder-value custom element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.7
+ * @version  0.1.7
+ */
+const QueryBuilderVariable = Function.inherits('Alchemy.Element.Form.QueryBuilderData', 'QueryBuilderVariable');
+
+/**
+ * The template to use for the content of this element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.7
+ * @version  0.1.7
+ */
+QueryBuilderVariable.setTemplateFile('form/elements/query_builder_variable');
+
+/**
+ * A filter of variable definition types
+ * (number, string, ...)
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.7
+ * @version  0.1.7
+ */
+QueryBuilderVariable.setAttribute('variable-types');
+
+/**
+ * Getter for the value input wrapper
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.7
+ * @version  0.1.7
+ */
+QueryBuilderVariable.addElementGetter('variable_select', '.qb-variable');
+
+/**
+ * Get/set the value
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.7
+ * @version  0.1.7
+ */
+QueryBuilderVariable.setProperty(function value() {
+
+	let result = {
+		type          : 'qb_variable',
+		variable_type : null,
+	};
+
+	let select = this.variable_select;
+
+	if (select) {
+		result.variable = select.value;
+
+		if (select.values) {
+			let value_def = select.values[result.variable];
+
+			if (value_def) {
+				result.variable_type = value_def.type_name;
+			}
+		}
+	}
+
+	return result;
+}, function setValue(value) {
+	this.assigned_data.value = value;
+});
+
+/**
+ * Apply the given value
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.7
+ * @version  0.1.7
+ */
+QueryBuilderVariable.setMethod(async function applyValue(value) {
+
+	if (!value) {
+		return;
+	}
+
+	let select = this.variable_select;
+
+	if (select) {
+		select.value = value.variable;
+	}
+});
+
+/**
+ * Added to the dom
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.7
+ * @version  0.1.7
+ */
+QueryBuilderVariable.setMethod(async function introduced() {
+
+	if (this.assigned_data.value) {
+		await this.applyValue(this.assigned_data.value);
+	}
+});