alchemy-form 0.3.0-alpha.2 → 0.3.0-alpha.3

package/element/al_field_schema.js

@@ -17,80 +17,87 @@ var FieldSchema = Function.inherits('Alchemy.Element.Form.FieldCustom', 'FieldSc
 FieldSchema.setTemplateFile('form/elements/alchemy_field_schema');
 
 /**
- * Get the actual schema
+ * Get the parent "schema" al-field element.
+ * This is NOT the `al-field[field-type="schema"]` element this
+ * `al-field-schema` is part of, but the one that is part of!
+ *
+ * It is possible this does not use the "schema" type in the HTML attribute.
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.0
- * @version  0.2.9
+ * @since    0.3.0
+ * @version  0.3.0
  */
-FieldSchema.setProperty(function schema() {
-
-	const field_element = this.alchemy_field;
-	const field = field_element?.config;
-
-	if (field?.options) {
-
-		let schema = field.options.schema;
-
-		// If the schema is a string, it's actually a reference to another field
-		// that *should* contain the schema.
-		if (typeof schema == 'string') {
-
-			let parent_schema_value;
+FieldSchema.setProperty(function parent_schema_field() {
 
-			let parent_schema = field_element.queryParents('al-field[field-type="schema"]');
+	// Start looking from the parent element of our own `al-field` element
+	let current = this.alchemy_field?.parentElement;
 
-			if (parent_schema) {
-				parent_schema_value = parent_schema.value;
-			} else {
+	while (current) {
 
-				const form = field_element.alchemy_form;
-
-				let record_value = form.getMainValue();
-				parent_schema_value = record_value;
-			}
+		if (current.nodeName != 'AL-FIELD') {
+			current = current.parentElement;
+			continue;
+		}
 
-			// If this field is inside an array, get the index
-			let array_entry_element = field_element.queryParents('al-field-array-entry');
-			if (array_entry_element) {
-				let index = array_entry_element.index;
+		// If it is using the explicit schema type, return it
+		if (current.field_type == 'schema') {
+			return current;
+		}
 
-				// If it has an index, get the value at that index
-				if (index != null && Array.isArray(parent_schema_value)) {
-					parent_schema_value = parent_schema_value[index];
-				}
-			}
+		let field = current.config;
 
-			return field.getSubschema(parent_schema_value, schema)
+		if (field && field instanceof Classes.Alchemy.Field.Schema) {
+			return current;
 		}
-
-		return schema;
 	}
+
+	return false;
 });
 
 /**
- * Get the actual subschema fields
+ * Get the parent schema value this field is part of
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.0
- * @version  0.1.3
+ * @since    0.3.0
+ * @version  0.3.0
  */
-FieldSchema.setProperty(function sub_fields() {
+FieldSchema.setProperty(function parent_schema_value() {
 
-	let schema = this.schema;
+	const field_element = this.alchemy_field;
 
-	if (schema) {
+	if (!field_element) {
+		return;
+	}
+
+	let parent_schema_value,
+	    parent_schema = this.parent_schema_field;
+
+	if (parent_schema) {
+		parent_schema_value = parent_schema.value;
+	} else {
 
-		if (typeof schema != 'object') {
-			throw new Error('Expected a schema object, but found "' + typeof schema + '" instead');
+		const form = field_element.alchemy_form;
+
+		if (form) {
+			let record_value = form.getMainValue();
+			parent_schema_value = record_value;
+		} else {
+			parent_schema_value = field_element.original_value_container;
 		}
+	}
+
+	// If this field is inside an array, get the index
+	let array_entry_element = field_element.queryParents('al-field-array-entry');
+	if (array_entry_element) {
+		let index = array_entry_element.index;
 
-		if (schema) {
-			return schema.getSorted();
+		// If it has an index, get the value at that index
+		if (index != null && Array.isArray(parent_schema_value)) {
+			parent_schema_value = parent_schema_value[index];
 		}
 	}
 
-	return [];
+	return parent_schema_value;
 });
 
 /**
@@ -118,12 +125,105 @@ FieldSchema.setProperty(function value() {
 	throw new Error('Unable to set value of schema field');
 });
 
+/**
+ * Get the actual schema
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.0
+ * @version  0.3.0
+ *
+ * @return   {Alchemy.Schema|Pledge<Alchemy.Schema>}
+ */
+FieldSchema.setMethod(function getSchema() {
+
+	const field_element = this.alchemy_field,
+	      field = field_element?.config;
+
+	if (!field) {
+		return;
+	}
+
+	if (Classes.Alchemy.Client.Schema.isSchema(field)) {
+		return field;
+	}
+
+	if (field?.options) {
+
+		let schema = field.options.schema;
+
+		// If the schema is a string, it's actually a reference to another field
+		// that *should* contain the schema.
+		if (typeof schema == 'string') {
+
+			let parent_schema_value = this.parent_schema_value;
+
+			let schema_context = new Classes.Alchemy.OperationalContext.Schema();
+			schema_context.setHolder(parent_schema_value);
+			schema_context.setSchema(field.schema);
+
+			return field.getSubSchema(schema_context);
+		}
+
+		return schema;
+	}
+});
+
+/**
+ * Get the actual subschema fields
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.0
+ * @version  0.3.0
+ */
+FieldSchema.setMethod(function getSubFields() {
+
+	let schema = this.getSchema();
+
+	if (Pledge.isThenable(schema)) {
+		let pledge = new Swift();
+
+		Swift.done(schema, (err, result) => {
+
+			if (err) {
+				return pledge.reject(err);
+			}
+
+			pledge.resolve(this.getFieldsFromSchema(result));
+		});
+
+		return pledge;
+	}
+
+	return this.getFieldsFromSchema(schema);
+});
+
+/**
+ * Get the fields from the given schema 
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.0
+ * @version  0.3.0
+ */
+FieldSchema.setMethod(function getFieldsFromSchema(schema) {
+
+	if (!schema) {
+		return [];
+	}
+
+	if (typeof schema != 'object') {
+		throw new Error('Expected a schema object, but found "' + typeof schema + '" instead');
+	}
+
+	// Don't show meta fields by default
+	return schema.getSorted().filter(field => !field.is_meta_field);
+});
+
 /**
  * Get the optional field that is supplying the schema
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.3
- * @version  0.1.3
+ * @version  0.3.0
  */
 FieldSchema.setMethod(function getSchemaSupplierField() {
 
@@ -134,7 +234,12 @@ FieldSchema.setMethod(function getSchemaSupplierField() {
 	let schema = this.alchemy_field.config.options.schema;
 
 	if (typeof schema == 'string') {
-		let other_field_path = this.resolvePath(schema);
+		let other_field_path = this.resolvePathToArray(schema),
+		    schema_path;
+
+		if (schema.includes('.')) {
+			schema_path = other_field_path.pop();
+		}
 
 		schema = null;
 	
@@ -146,6 +251,41 @@ FieldSchema.setMethod(function getSchemaSupplierField() {
 	}
 });
 
+/**
+ * Prepare variables
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+FieldSchema.setMethod(function prepareRenderVariables() {
+
+	let schema = this.getSchema();
+
+	if (Pledge.isThenable(schema)) {
+		let pledge = new Pledge.Swift();
+
+		Pledge.Swift.done(schema, (err, schema) => {
+
+			if (err) {
+				return pledge.reject(err);
+			}
+
+			pledge.resolve({
+				sub_fields: this.getFieldsFromSchema(schema),
+				sub_schema: schema,
+			});
+		});
+
+		return pledge;
+	}
+
+	return {
+		sub_fields: this.getFieldsFromSchema(schema),
+		sub_schema: schema,
+	};
+});
+
 /**
  * Added to the DOM for the first time
  *
@@ -163,6 +303,10 @@ FieldSchema.setMethod(function introduced() {
 		});
 
 		this.rerender();
+	} else {
+		// @TODO: Some fields seem to get added to the DOM for a second
+		// before being removed.
+		//console.warn('Failed to find supplier field for', this, this.parentElement);
 	}
 });
 
@@ -171,18 +315,41 @@ FieldSchema.setMethod(function introduced() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.4
- * @version  0.1.4
+ * @version  0.3.0
  */
 FieldSchema.setProperty(function original_value() {
 
 	let field = this.alchemy_field,
 	    path = this.field_path_in_record;
 
+	let array_entry = this.queryUp('al-field-array-entry'),
+	    original_value_context = field;
+
+	if (array_entry) {
+		if (!array_entry.isConnected || (field && field.contains(array_entry))) {
+			original_value_context = array_entry;
+		}
+	}
+
+	// This is needed for SemanticWiki's metadata fields.
+	// They use al-field-schema elements, but they refer to the main
+	// `al-form` element, and that is not where it can find the original value...
+	if (original_value_context && original_value_context.original_value) {
+		return original_value_context.original_value;
+	}
+
 	if (field && path) {
-		let form = field.alchemy_form || this.alchemy_form || this.field_context.alchemy_form;
+		let form = field.alchemy_form || this.alchemy_form || this.field_context.alchemy_form,
+		    value_container;
 
 		if (form) {
-			return Object.path(form.document, path);
+			value_container = form.document;
+		} else {
+			value_container = field.original_value_container;
+		}
+
+		if (value_container) {
+			return Object.path(value_container, path);
 		}
 	}
 
@@ -193,7 +360,7 @@ FieldSchema.setProperty(function original_value() {
 		data = context.original_value;
 	} else {
 		context = this.field_context.alchemy_form || this.alchemy_field.alchemy_form;
-		data = context.document;
+		data = context?.document;
 	}
 
 	path = this.field_path_in_current_schema;

package/element/al_form.js

@@ -428,7 +428,7 @@ Form.setMethod(async function showViolations(err) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.2.4
+ * @version  0.3.0
  *
  * @param    {String}   path
  *
@@ -441,11 +441,15 @@ Form.setMethod(function findFieldByPath(path) {
 	}
 
 	let current = this,
-	    result,
-	    pieces = path.split('.'),
+	    pieces,
 	    piece,
-	    query,
-	    temp;
+	    query;
+
+	if (Array.isArray(path)) {
+		pieces = path;
+	} else {
+		pieces = path.split('.');
+	}
 
 	for (piece of pieces) {
 
@@ -463,7 +467,6 @@ Form.setMethod(function findFieldByPath(path) {
 	}
 
 	return current;
-
 });
 
 /**

package/element/al_select.js

@@ -957,7 +957,7 @@ AlchemySelect.setMethod(function applyFetchedData(err, result, config) {
 
 	if (err) {
 		this.loading_dropdown = false;
-		alchemy.handleError(err);
+		alchemy.registerError(err);
 		return;
 	}
 
@@ -1165,7 +1165,7 @@ AlchemySelect.setMethod(function open(event) {
 	this.dropdown_content.scrollTop = 0;
 
 	// Make the dropdown the same width
-	this.dropdown.style.width = ~~this.clientWidth + 'px';
+	this.dropdown.style.width = (~~this.clientWidth + 1) + 'px';
 
 	if (event) {
 		if (event.key) {

package/element/al_table.js

@@ -602,7 +602,7 @@ Table.setMethod(function showPagination() {
  * @param    {FieldConfig}   field_config   The config on how to display the field
  * @param    {Object}        container      The container where the field should be in
  *
- * @return   
+ * @return   {Element.AlField}
  */
 Table.setMethod(function getFieldConfigView(field_config, container) {
 
@@ -642,6 +642,11 @@ Table.setMethod(function getFieldConfigView(field_config, container) {
 	alchemy_field.original_value = value;
 	alchemy_field.model = field?.schema?.model_name;
 
+	// Since these fields are not inside a form,
+	// they won't be able to remember their original value container.
+	// So force them to:
+	alchemy_field.rememberOriginalValueContainer(container);
+
 	return alchemy_field;
 });
 

package/helper/field_recompute_handler.js

@@ -30,8 +30,6 @@ alchemy.registerCustomHandler('recompute_field', async function fieldRecomputeHa
 		field      : field.name,
 	};
 
-	console.log(document)
-
 	let helpers;
 
 	if (Blast.isServer) {

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "alchemy-form",
 	"description": "Form plugin for Alchemy",
-	"version": "0.3.0-alpha.2",
+	"version": "0.3.0-alpha.3",
 	"repository": {
 		"type" : "git",
 		"url"  : "https://github.com/11ways/alchemy-form.git"

package/view/form/elements/al_dropdown.hwk

@@ -0,0 +1,21 @@
+<div class="dropdown-trigger-wrapper">
+	<button
+		type="button"
+		:ref={% button_ref %}
+		prop:disabled={% state:disabled{:} %}
+		on:click={% self.toggleDropdown() %}
+	>
+		<slot name="dropdown-trigger"></slot>
+		<slot name="dropdown-trigger-icon" aria-hidden="true">
+			<al-icon icon-name="chevron-down"></al-icon>
+		</slot>
+	</button>
+</div>
+
+<div
+	:ref={% state:items_wrapper %}
+	class="dropdown-items-wrapper"
+	prop:hidden={% not state:is_open{:} %}
+>
+	<slot name="dropdown-items"></slot>
+</div>

package/view/form/elements/al_enum_badge.hwk

@@ -0,0 +1,9 @@
+{% if icon %}
+	<al-icon icon-name={% icon %}></al-icon>
+{% /if %}
+{% if title %}
+	<span class="enum-badge-title">{{ title }}</span>
+{% /if %}
+{% if color %}
+	<% $0.dataset.badgeColorSet = color %>
+{% /if %}

package/view/form/elements/alchemy_field.hwk

@@ -12,6 +12,8 @@
 		<al-field-array
 			#field_context=<% self %>
 			#alchemy_field=<% self %>
+			max-entry-count={% self.max_entry_count %}
+			min-entry-count={% self.min_entry_count %}
 		></al-field-array>
 	<% } else if (view_files && view_files.length) { %>
 		<div class="field">

package/view/form/elements/alchemy_field_array.hwk

@@ -2,13 +2,24 @@
 <% view_files = alchemy_field.view_files %>
 <% values = self.original_value %>
 
-<button class="add-entry">
-	{%t "add-entry" name=alchemy_field.field_name title=alchemy_field.field_title %}
-</button>
+{% if self.field_context.max_entry_count eq 1 %}
+	<%
+		if (!values) {
+			self.original_value = values = [];
+		}
+
+		if (values.length === 0) {
+			values.push(undefined);
+		}
+	%>
+{% else %}
+	<button class="add-entry">
+		{%t "add-entry" name=alchemy_field.field_name title=alchemy_field.field_title %}
+	</button>
+{% /if %}
 
 <div class="entries">
-	{% with values as value %}
-	{% each %}
+	{% each values as value %}
 		<al-field-array-entry
 			#alchemy_field_array=<% self %>
 			#field_context=<% self %>
@@ -18,5 +29,4 @@
 			index=<% $index %>
 		></al-field-array-entry>
 	{% /each %}
-	{% /with %}
 </div>

package/view/form/elements/alchemy_field_array_entry.hwk

@@ -10,8 +10,13 @@
 <div class="field">
 	<% include(view_files, variables) %>
 </div>
-<div class="button">
-	<button class="remove">
-		{%t "remove-entry" name=alchemy_field.field_name title=alchemy_field.field_title %}
-	</button>
-</div>
+
+{% if self.alchemy_field_array.max_entry_count eq 1 %}
+
+{% else %}
+	<div class="button">
+		<button class="remove">
+			{%t "remove-entry" name=alchemy_field.field_name title=alchemy_field.field_title %}
+		</button>
+	</div>
+{% /if %}

package/view/form/elements/alchemy_field_schema.hwk

@@ -1,7 +1,7 @@
-{% each self.sub_fields as sub_field %}
+{% each sub_fields as sub_field %}
 	<al-field
 		#alchemy_field_schema=<% self %>
-		#schema=<% self.schema %>
+		#schema=<% sub_schema %>
 		field-name=<% sub_field.name %>
 	></al-field>
 {% /each %}

package/view/form/inputs/edit/enum.hwk

@@ -1,7 +1,7 @@
 <al-select
 	class="alchemy-field-value"
 ><%
-$0.values = vars.alchemy_field.config.options.values;
+$0.values = alchemy_field?.config?.options?.values;
 $0.value = value;
 $0.name = path;
 %></al-select>

package/view/form/inputs/edit_sw/fallback.hwk

@@ -0,0 +1 @@
+{% include "form/inputs/edit/" + alchemy_field.getFieldType() %}

package/view/form/inputs/view/association_alias.hwk

@@ -0,0 +1,16 @@
+<div>
+	<span class="alchemy-field-value">
+		<% if (value) { %>
+			{{ value.getDisplayTitle() }}
+		<% } else { %>
+			<span class="badge alchemy-field-empty-value-placeholder">
+				{%t
+					"empty-value"
+					field=field_context.config.name
+					path=field_context.config.path_in_document
+					zone=self.zone
+				%}
+			</span>
+		<% } %>
+	</span>
+</div>

package/view/form/inputs/view/schema.hwk

@@ -0,0 +1,4 @@
+<al-field-schema
+	#alchemy_field=<% alchemy_field %>
+	#field_context=<% field_context %>
+></al-field-schema>

package/view/form/inputs/view/string.hwk

@@ -3,7 +3,7 @@
 		<% if (value || value === false) { %>
 			{{ value }}
 		<% } else { %>
-			<span class="alchemy-badge alchemy-field-empty-value-placeholder">
+			<span class="badge alchemy-field-empty-value-placeholder">
 				{%t
 					"empty-value"
 					field=field_context.config.name

package/view/form/inputs/view_inline/belongs_to.hwk

@@ -0,0 +1,16 @@
+<div>
+	<span class="alchemy-field-value">
+		<% if (value || value === false) { %>
+			{{ value }}
+		<% } else { %>
+			<span class="badge alchemy-field-empty-value-placeholder">
+				{%t
+					"empty-value"
+					field=field_context.config.name
+					path=field_context.config.path_in_document
+					zone=self.zone
+				%}
+			</span>
+		<% } %>
+	</span>
+</div>

package/view/form/inputs/view_inline/boolean.hwk

@@ -1,11 +1,11 @@
 {% if (value_is_empty AND self.allow_empty_value_placeholder) %}
 	<span class="alchemy-field-value">
-		<span class="alchemy-badge alchemy-field-empty-value-placeholder">
+		<span class="badge alchemy-field-empty-value-placeholder">
 			{{ self.createEmptyValuePlaceholderText() }}
 		</span>
 	</span>
 {% else %}
-	<span class="alchemy-badge alchemy-field-value">
+	<span class="badge alchemy-field-value">
 		<% $0.classList.add('boolean-' + value) %>
 
 		{% if value %}

package/view/form/inputs/view_inline/datetime.hwk

@@ -1,6 +1,6 @@
 {% if (value_is_empty AND self.allow_empty_value_placeholder) %}
 	<span class="alchemy-field-value">
-		<span class="alchemy-badge alchemy-field-empty-value-placeholder">
+		<span class="badge alchemy-field-empty-value-placeholder">
 			{{ self.createEmptyValuePlaceholderText() }}
 		</span>
 	</span>

package/view/form/inputs/view_inline/enum.hwk

@@ -1,6 +1,6 @@
 {% if (value_is_empty AND self.allow_empty_value_placeholder) %}
 	<span class="alchemy-field-value">
-		<span class="alchemy-badge alchemy-field-empty-value-placeholder">
+		<span class="badge alchemy-field-empty-value-placeholder">
 			{{ self.createEmptyValuePlaceholderText() }}
 		</span>
 	</span>
@@ -8,7 +8,7 @@
 	{% set enum_config to self.config.getValueConfiguration(value) %}
 	{% set display_value to OR enum_config.title OR enum_config.name OR value %}
 
-	<span class="alchemy-badge alchemy-field-value alchemy-field-enum">
+	<span class="badge alchemy-field-value alchemy-field-enum">
 		<% $0.classList.add('enum-' + value) %>
 
 		{% if enum_config.number %}

package/view/form/inputs/view_inline/objectid.hwk

@@ -1,6 +1,6 @@
 {% if (value_is_empty AND self.allow_empty_value_placeholder) %}
 	<span class="alchemy-field-value">
-		<span class="alchemy-badge alchemy-field-empty-value-placeholder">
+		<span class="badge alchemy-field-empty-value-placeholder">
 			{{ self.createEmptyValuePlaceholderText() }}
 		</span>
 	</span>