alchemy-form 0.1.2 → 0.1.5

package/element/alchemy_field_array_entry.js

@@ -18,15 +18,6 @@ var FieldArrayEntry = Function.inherits('Alchemy.Element.Form.FieldEntry', funct
  */
 FieldArrayEntry.setTemplateFile('form/elements/alchemy_field_array_entry');
 
-/**
- * The prefix of this translation
- *
- * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.0
- * @version  0.1.0
- */
-FieldArrayEntry.setAttribute('index');
-
 /**
  * Get a reference to the alchemy-field-array parent
  *
@@ -43,6 +34,46 @@ FieldArrayEntry.enforceProperty(function alchemy_field_array(new_value, old_valu
 	return new_value;
 });
 
+/**
+ * Get the index of this entry
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.3
+ */
+FieldArrayEntry.setProperty(function index() {
+
+	let defined_index = this.getAttribute('index'),
+	    index;
+
+	let container = this.alchemy_field_array;
+
+	if (!container || !container.entries_element) {
+		if (defined_index) {
+			index = +defined_index;
+		}
+	} else {
+		let counter = -1,
+		    child;
+
+		for (let i = 0; i < container.entries_element.children.length; i++) {
+			child = container.entries_element.children[i];
+
+			if (child.tagName == 'ALCHEMY-FIELD-ARRAY-ENTRY') {
+				counter++;
+			}
+
+			if (child == this) {
+				break;
+			}
+		}
+
+		index = counter;
+	}
+
+	return index;
+});
+
 /**
  * Get the original value
  *
@@ -58,3 +89,16 @@ FieldArrayEntry.setProperty(function original_value() {
 		return context_value[this.index];
 	}
 });
+
+/**
+ * Get the name of this entry for use in a record path
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.3
+ *
+ * @return   {String}
+ */
+FieldArrayEntry.setMethod(function getPathEntryName() {
+	return '' + this.index;
+});

package/element/alchemy_field_schema.js

@@ -23,12 +23,36 @@ FieldSchema.setTemplateFile('form/elements/alchemy_field_schema');
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.4
  */
 FieldSchema.setProperty(function schema() {
 
 	if (this.alchemy_field && this.alchemy_field.config.options) {
-		return this.alchemy_field.config.options.schema;
+		let schema = this.alchemy_field.config.options.schema;
+
+		if (typeof schema == 'string') {
+			let other_field = this.getSchemaSupplierField();
+			schema = null;
+
+			if (other_field && other_field.value && other_field.config && other_field.config.options) {
+				let values = other_field.config.options.values;
+
+				if (values) {
+
+					if (values instanceof Classes.Alchemy.Map.Backed) {
+						schema = values.get(other_field.value);
+					} else {
+						schema = values[other_field.value];
+					}
+
+					if (schema && schema.schema) {
+						schema = schema.schema;
+					}
+				}
+			}
+		}
+
+		return schema;
 	}
 });
 
@@ -37,12 +61,21 @@ FieldSchema.setProperty(function schema() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.3
  */
 FieldSchema.setProperty(function sub_fields() {
 
-	if (this.schema) {
-		return this.schema.getSorted();
+	let schema = this.schema;
+
+	if (schema) {
+
+		if (typeof schema != 'object') {
+			throw new Error('Expected a schema object, but found "' + typeof schema + '" instead');
+		}
+
+		if (schema) {
+			return schema.getSorted();
+		}
 	}
 
 	return [];
@@ -73,56 +106,87 @@ FieldSchema.setProperty(function value() {
 	throw new Error('Unable to set value of schema field');
 });
 
-return;
+/**
+ * Get the optional field that is supplying the schema
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.3
+ */
+FieldSchema.setMethod(function getSchemaSupplierField() {
 
+	if (!this.alchemy_field || !this.alchemy_field.config || !this.alchemy_field.config.options) {
+		return;
+	}
 
+	let schema = this.alchemy_field.config.options.schema;
 
+	if (typeof schema == 'string') {
+		let other_field_path = this.resolvePath(schema);
 
+		schema = null;
+	
+		let form = this.alchemy_field.alchemy_form;
 
+		if (form) {
+			return form.findFieldByPath(other_field_path);
+		}
+	}
+});
 
 /**
  * Added to the DOM for the first time
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.0
- * @version  0.1.0
+ * @since    0.1.3
+ * @version  0.1.3
  */
-FieldArray.setMethod(function introduced() {
-
-	const that = this;
-
-	this.onEventSelector('click', '.remove', function onClick(e) {
-
-		e.preventDefault();
+FieldSchema.setMethod(function introduced() {
 
-		let entry = e.target.queryUp('alchemy-field-array-entry');
+	let supplier_field = this.getSchemaSupplierField();
 
-		entry.remove();
-	});
+	if (supplier_field) {
+		supplier_field.addEventListener('change', e => {
+			this.rerender();
+		});
 
-	let add_entry = this.querySelector('.add-entry');
+		this.rerender();
+	}
+});
 
-	if (add_entry) {
-		add_entry.addEventListener('click', function onClick(e) {
+/**
+ * Get the original value
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.4
+ * @version  0.1.4
+ */
+FieldSchema.setProperty(function original_value() {
 
-			let field_context = that.field_context,
-			    alchemy_field = that.alchemy_field;
+	let field = this.alchemy_field,
+	    path = this.field_path_in_record;
 
-			e.preventDefault();
+	if (field && path) {
+		let form = field.alchemy_form || this.alchemy_form || this.field_context.alchemy_form;
 
-			let view_files = alchemy_field.view_files;
+		if (form) {
+			return Object.path(form.document, path);
+		}
+	}
 
-			if (!view_files || !view_files.length) {
-				throw new Error('Unable to add new entry for ' + alchemy_field.field_title);
-			}
+	let context = this.field_context.alchemy_field_schema,
+	    data;
 
-			let new_entry = that.createElement('alchemy-field-array-entry');
+	if (context) {
+		data = context.original_value;
+	} else {
+		context = this.field_context.alchemy_form || this.alchemy_field.alchemy_form;
+		data = context.document;
+	}
 
-			new_entry.alchemy_field_array = that;
+	path = this.field_path_in_current_schema;
 
-			that.entries_element.append(new_entry);
-		});
-	}
+	let result = Object.path(data, path);
 
+	return result;
 });
-

package/element/alchemy_form.js

@@ -5,18 +5,7 @@
  * @since    0.1.0
  * @version  0.1.0
  */
-var Form = Function.inherits('Alchemy.Element.Form.Base', function Form() {
-	Form.super.call(this);
-});
-
-/**
- * The stylesheet to load for this element
- *
- * @author   Jelle De Loecker <jelle@develry.be>
- * @since    0.1.0
- * @version  0.1.0
- */
-Form.setStylesheetFile('form/form');
+var Form = Function.inherits('Alchemy.Element.Form.Base', 'Form');
 
 /**
  * The stylesheet to load for this element

package/element/alchemy_label.js

@@ -30,7 +30,7 @@ AlchemyLabel.setAttribute('for');
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.3
  */
 AlchemyLabel.setMethod(function introduced() {
 
@@ -46,8 +46,14 @@ AlchemyLabel.setMethod(function introduced() {
 			return;
 		}
 
-		element.click();
+		try {
+			// Trigger a click (for buttons & checkboxes)
+			element.click();
 
+			// Focus on the element (for inputs)
+			element.focus();
+		} catch (err) {
+			console.error('Failed to focus element:', err);
+		}
 	});
-
 });

package/element/alchemy_select.js

@@ -244,12 +244,16 @@ AlchemySelect.setProperty(function loaded_items() {
  *
  * @author   Jelle De Loecker <jelle@develry.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.4
  *
  * @type     {Number}
  */
 AlchemySelect.setProperty(function loaded_item_count() {
-	return Object.size(this.options.values);
+	if (this.options.values) {
+		return this.options.values.size;
+	} else {
+		return 0;
+	}
 });
 
 /**
@@ -766,7 +770,7 @@ AlchemySelect.setMethod(function _ensureValueData(value) {
  *
  * @author   Jelle De Loecker <jelle@develry.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.4
  */
 AlchemySelect.setMethod(function _processPreloadedValues() {
 
@@ -784,9 +788,14 @@ AlchemySelect.setMethod(function _processPreloadedValues() {
 	let item,
 	    key;
 
-	for (key in values) {
+	let enum_values = new Classes.Alchemy.Map.Enum(values),
+	    value;
+
+	for (let key of enum_values.keys()) {
+		value = enum_values.get(key);
+
 		response.available++;
-		item = Object.assign({}, values[key]);
+		item = Object.assign({}, value);
 		item.id = key;
 
 		response.items.push(item);
@@ -915,7 +924,7 @@ AlchemySelect.setMethod(function _loadRemote(config) {
  *
  * @author   Jelle De Loecker <jelle@develry.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.4
  */
 AlchemySelect.setMethod(function recreateDropdownElements() {
 
@@ -925,8 +934,8 @@ AlchemySelect.setMethod(function recreateDropdownElements() {
 
 	Hawkejs.removeChildren(this.dropdown_content);
 
-	for (key in items) {
-		item = items[key];
+	for (let key of items.keys()) {
+		item = items.get(key);
 		item = this._makeOption(item.id, item);
 		this.addToDropdown(item);
 	}
@@ -1157,7 +1166,7 @@ AlchemySelect.setMethod(function close(event) {
  *
  * @author   Jelle De Loecker <jelle@develry.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.5
  *
  * @param    {String}   type    "value" or "option"
  * @param    {Mixed}    value   The actual value of this item
@@ -1175,6 +1184,9 @@ AlchemySelect.setMethod(function _makeValueItem(type, value, data) {
 	// Assign the value
 	item.value = value;
 
+	// Add a reference to this element
+	item.alchemy_select = this;
+
 	if (!data) {
 		data = this.getValueData(value);
 	}
@@ -1188,7 +1200,11 @@ AlchemySelect.setMethod(function _makeValueItem(type, value, data) {
 			this.options.values = {};
 		}
 
-		this.options.values[value] = data;
+		if (this.options.values instanceof Classes.Alchemy.Map.Enum) {
+			this.options.values.set(value, data);
+		} else {
+			this.options.values[value] = data;
+		}
 	}
 
 	// And the associated data
@@ -1207,8 +1223,12 @@ AlchemySelect.setMethod(function _makeValueItem(type, value, data) {
 				return
 			}
 
-			if (that.options.values && that.options.values[value]) {
-				data = that.options.values[value];
+			if (that.options.values) {
+				if (that.options.values instanceof Classes.Alchemy.Map.Enum) {
+					data = that.options.values.get(value);
+				} else if (that.options.values[value]) {
+					data = that.options.values[value];
+				}
 			}
 
 			this.data = data;

package/element/alchemy_select_item.js

@@ -53,4 +53,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;
+});

package/element/alchemy_table.js

@@ -126,6 +126,15 @@ Table.setAttribute('page-size', {number: true});
  */
 Table.setAttribute('show-filters', {boolean: true});
 
+/**
+ * Keep track of the loadRemote calls
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.3
+ */
+Table.setProperty('load_remote_counter', 0);
+
 /**
  * Look for changes to the show-filters attribute
  *
@@ -834,7 +843,7 @@ Table.setMethod(function selectRow(row) {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.3
  */
 Table.setMethod(function loadRemoteData() {
 
@@ -859,14 +868,24 @@ Table.setMethod(function loadRemoteData() {
 		body : body
 	};
 
+	let load_remote_id = ++this.load_remote_counter;
+
 	this.delayAssemble(async function() {
 
+		if (load_remote_id != that.load_remote_counter) {
+			return;
+		}
+
 		let result = await that.getResource(options);
 
 		if (!result) {
 			return;
 		}
 
+		if (load_remote_id != that.load_remote_counter) {
+			return;
+		}
+
 		let records = result.records;
 
 		that.records = records;

package/element/number_input.js

@@ -0,0 +1,106 @@
+/**
+ * The alchemy-number-input custom element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.3
+ */
+ var NumberInput = Function.inherits('Alchemy.Element.Form.FeedbackInput', 'NumberInput');
+
+/**
+ * The hawkejs template to use
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.3
+ */
+NumberInput.setTemplateFile('form/elements/number_input');
+
+/**
+ * The value property
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.3
+ */
+NumberInput.setProperty(function value() {
+
+	var input = this.input_el,
+	    value = input.value;
+
+	if (value === '') {
+		return null;
+	}
+
+	return Number(value);
+
+}, function setValue(value) {
+
+	var input = this.input_el;
+
+	if (value == null || value === '') {
+		input.value = '';
+	} else {
+		input.value = value;
+	}
+
+});
+
+/**
+ * The disabled property
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.3
+ */
+NumberInput.setProperty(function disabled() {
+	return this.input_el.disabled;
+}, function setDisabled(value) {
+	return this.input_el.disabled = value;
+});
+
+/**
+ * Added to the DOM for the first time
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.3
+ */
+NumberInput.setMethod(function introduced() {
+
+	var that = this,
+	    minus = this.querySelector('.minus'),
+	    plus  = this.querySelector('.plus'),
+	    input = this.querySelector('.input');
+
+	var accommodations_summary_element = this.accommodations_summary;
+
+	minus.addEventListener('click', function onMinus(e) {
+		e.preventDefault();
+		adjustValue(-1, that);
+	});
+
+	plus.addEventListener('click', function onPlus(e) {
+		e.preventDefault();
+		adjustValue(+1, that);
+	});
+
+	function adjustValue(change, obj) {
+
+		var max = Number(input.getAttribute('max')),
+		    min = Number(input.getAttribute('min')),
+		    val = Number(input.value) || 0;
+
+		val += change;
+
+		if (val > max) {
+			val = max;
+		}
+
+		if (val < min) {
+			val = min;
+		}
+
+		input.value = val;
+	}
+});