alchemy-form 0.1.10 → 0.1.11

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 0.1.11 (2022-07-23)
+
+* Upgrade to `alchemy-media` v0.6.3
+* Add `purpose` and `mode` attributes to AlchemyForm-based elements for improved field-template getting
+* Add first few `edit_inline` and `view_inline` field templates
+
 ## 0.1.10 (2022-07-14)
 
 * Hide `code-input` contents until it's fully loaded

package/assets/stylesheets/form/alchemy_field.scss

@@ -1,3 +1,36 @@
 alchemy-field {
 	display: block;
+
+	&[field-type="boolean"] {
+		
+		.field {
+			display: flex;
+			justify-content: center;
+		}
+
+		.boolean-wrapper {
+			&.boolean-true {
+				--boolean-color: green;
+				--text-color: white;
+			}
+
+			&.boolean-false {
+				--boolean-color: red;
+				--text-color: white;
+			}
+
+			&.boolean-null {
+				--boolean-color: #f3f3f3;
+				--text-color: #666;
+				font-style: italic;
+			}
+
+			background-color: var(--boolean-color);
+			border-radius: 5px;
+			padding: 4px 8px;
+			min-width: 1rem;
+			color: var(--text-color, white);
+			display: inline-flex;
+		}
+	}
 }

package/element/00_form_base.js

@@ -5,9 +5,7 @@
  * @since    0.1.0
  * @version  0.1.0
  */
-var Base = Function.inherits('Alchemy.Element', 'Alchemy.Element.Form', function Base() {
-	Base.super.call(this);
-});
+var Base = Function.inherits('Alchemy.Element', 'Alchemy.Element.Form', 'Base');
 
 /**
  * Set the custom element prefix
@@ -59,27 +57,67 @@ Base.setStatic(function addParentTypeGetter(name, type) {
 });
 
 /**
- * The view-type determines which type of wrapper/field to use,
- * e.g.: view, list, edit, ...
+ * The purpose determines what the goal of the field is.
+ * Is it for editing or viewing?
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.0
- * @version  0.1.0
+ * @since    0.1.11
+ * @version  0.1.11
  */
-Base.setProperty(function view_type() {
+Base.setAttribute('purpose', function getPurpose(value) {
+
+	if (value) {
+		return value;
+	}
 
-	var value = this.getAttribute('view-type');
+	value = this.getAttribute('view-type');
 
 	if (!value && this.alchemy_form) {
 		value = this.alchemy_form.view_type;
 	}
 
+	// Fallback to the "edit" type
 	if (!value) {
 		value = 'edit';
 	}
 
 	return value;
+});
+
+/**
+ * The mode is used as a hint to how this element should be rendered.
+ * Could be "inline", "standalone", ...
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.11
+ * @version  0.1.11
+ */
+Base.setAttribute('mode');
 
+/**
+ * The view-type determines which type of wrapper/field to use,
+ * e.g.: view, list, edit, ...
+ * 
+ * @deprecated   You should use `purpose` for this
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.0
+ * @version  0.1.11
+ */
+Base.setProperty(function view_type() {
+
+	if (this.hasAttribute('view-type')) {
+		return this.getAttribute('view-type');
+	}
+
+	let purpose = this.purpose,
+	    mode = this.mode;
+	
+	if (mode) {
+		purpose += '_' + mode;
+	}
+
+	return purpose;
 }, function setViewType(value) {
 
 	if (value == null) {
@@ -88,6 +126,7 @@ Base.setProperty(function view_type() {
 		this.setAttribute('view-type', value);
 	}
 
+	return value;
 });
 
 /**

package/element/alchemy_field.js

@@ -349,60 +349,55 @@ Field.setProperty(function model() {
 });
 
 /**
- * Get the view to use for this field
+ * Get the preferred view file to use for this field
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.11
  */
 Field.enforceProperty(function view_file(new_value, old_value) {
 
 	if (!new_value) {
 
-		let config = this.config,
-		    view_type = this.view_type;
-
-		if (config) {
-
-			let field_view;
+		let view_type = this.view_type,
+			field_view = this.field_view || this.field_type;
+		
+		if (!field_view) {
+			let config = this.config;
 
-			if (this.field_view) {
-				field_view = this.field_view;
-			} else {
+			if (config) {
 				field_view = config.constructor.type_name;
 			}
-
-			new_value = 'form/inputs/' + view_type + '/' + field_view;
 		}
+
+		new_value = this.generateTemplatePath('inputs', view_type, field_view);
 	}
 
 	return new_value;
 });
 
-
 /**
- * Get the wrapper to use for this field
+ * Get the preferred wrapper to use for this field
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.11
  */
 Field.enforceProperty(function wrapper_file(new_value, old_value) {
 
 	if (!new_value) {
 
-		let config = this.config,
-		    view_type = this.view_type;
-
 		let wrapper_type = this.wrapper_type;
 
 		if (wrapper_type === false) {
 			return false;
 		}
 
-		if (config) {
-			let field_type = config.constructor.type_name;
-			return 'form/wrappers/' + view_type + '/' + field_type;
+		let field_type = this.getFieldType(),
+		     view_type = this.view_type;
+
+		if (field_type) {
+			return this.generateTemplatePath('wrappers', view_type, field_type);
 		}
 	}
 
@@ -414,7 +409,7 @@ Field.enforceProperty(function wrapper_file(new_value, old_value) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.11
  */
 Field.setProperty(function view_files() {
 
@@ -425,14 +420,20 @@ Field.setProperty(function view_files() {
 		result.push(view_file);
 	}
 
-	let config = this.config,
+	let field_type = this.getFieldType(),
 	    view_type = this.view_type;
 
-	if (config) {
-		let field_type = config.constructor.type_name,
-		    view = 'form/inputs/' + view_type + '/' + field_type;
-
+	if (field_type) {
+		let view = this.generateTemplatePath('inputs', view_type, field_type);
+		
 		result.push(view);
+
+		let purpose = this.purpose;
+
+		if (purpose) {	
+			view = this.generateTemplatePath('inputs', purpose, field_type);
+			result.push(view);
+		}
 	}
 
 	if (result.length == 0) {
@@ -440,7 +441,7 @@ Field.setProperty(function view_files() {
 	}
 
 	// Fallback to a simple string input
-	result.push('form/inputs/' + view_type + '/string');
+	result.push(this.generateTemplatePath('inputs', view_type, 'string'));
 
 	return result;
 });
@@ -450,7 +451,7 @@ Field.setProperty(function view_files() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.11
  */
 Field.setProperty(function wrapper_files() {
 
@@ -466,22 +467,21 @@ Field.setProperty(function wrapper_files() {
 		result.push(wrapper_file);
 	}
 
-	let config = this.config,
+	let field_type = this.getFieldType(),
 	    view_type = this.view_type;
 
-	if (config) {
-		let field_type = config.constructor.type_name,
-		    view = 'form/wrappers/' + view_type + '/' + field_type;
+	if (field_type) {
+		let view = this.generateTemplatePath('wrappers', view_type, field_type);
 
 		result.push(view);
 
-		view = 'form/wrappers/' + view_type + '/default';
+		view = this.generateTemplatePath('wrappers', view_type, 'default');
 		result.push(view);
 
-		view = 'form/wrappers/default/' + field_type;
+		view = this.generateTemplatePath('wrappers', 'default', field_type);
 		result.push(view);
 
-		view = 'form/wrappers/default/default';
+		view = this.generateTemplatePath('wrappers', 'default', 'default');
 		result.push(view);
 	}
 
@@ -584,6 +584,48 @@ Field.setProperty(function value() {
 	}
 });
 
+/**
+ * Get the field type
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.11
+ * @version  0.1.11
+ *
+ * @return   {String}
+ */
+Field.setMethod(function getFieldType() {
+
+	let result = this.field_type;
+
+	if (!result) {
+		let config = this.config;
+
+		if (config) {
+			result = config.constructor.type_name;
+		}
+	}
+
+	return result;
+});
+
+/**
+ * Generate a template path
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.11
+ * @version  0.1.11
+ *
+ * @param    {String}   container_type   The container (inputs/wrappers)
+ * @param    {String}   view_type        The view (edit/view/edit_inline/...)
+ * @param    {String}   field_type       The name of the field (and thus the view)
+ *
+ * @return   {String}
+ */
+Field.setMethod(function generateTemplatePath(container_type, view_type, field_type) {
+	let result = 'form/' + container_type + '/' + view_type + '/' + field_type;
+	return result;
+});
+
 /**
  * Get the rule violations for this field
  *

package/element/alchemy_table.js

@@ -25,7 +25,7 @@ Table.setTemplate(`<header class="aft-header"></header>
 		<tfoot></tfoot>
 	</table>
 </div>
-<footer class="aft-footer"></footer>`, {plain_html: true, render_immediate: true});
+<footer data-he-slot="footer" class="aft-footer"></footer>`, {plain_html: true, render_immediate: true});
 
 /**
  * The stylesheet to load for this element
@@ -126,6 +126,15 @@ Table.setAttribute('page-size', {number: true});
  */
 Table.setAttribute('show-filters', {boolean: true});
 
+/**
+ * Which optional view-type to use for field values
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.11
+ * @version  0.1.11
+ */
+Table.setAttribute('view-type');
+
 /**
  * Keep track of the loadRemote calls
  *
@@ -287,7 +296,7 @@ Table.addObservedAttribute('src', function onSource(src) {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.11
  *
  * @param    {*}   config
  */
@@ -302,7 +311,11 @@ Table.setMethod(function setRecordsource(config) {
 	}
 
 	if (url == '#') {
-		url = ''+this.getCurrentUrl();
+		let current_url = this.getCurrentUrl();
+
+		if (current_url) {
+			url = ''+current_url;
+		}
 	}
 
 	this.src = url;
@@ -350,7 +363,7 @@ Table.setMethod(function clearBody() {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.11
  *
  * @return   {Number}
  */
@@ -365,14 +378,17 @@ Table.setMethod(function getWantedPage() {
 	if (this.id) {
 		let url = this.getCurrentUrl();
 
-		let data = url.param('aft');
+		if (url) {
 
-		if (data && data[this.id]) {
-			page = parseInt(data[this.id].page);
-		}
+			let data = url.param('aft');
+
+			if (data && data[this.id]) {
+				page = parseInt(data[this.id].page);
+			}
 
-		if (isFinite(page) && page > 0) {
-			return page;
+			if (isFinite(page) && page > 0) {
+				return page;
+			}
 		}
 	}
 
@@ -384,7 +400,7 @@ Table.setMethod(function getWantedPage() {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.11
  *
  * @return   {Number}
  */
@@ -405,11 +421,11 @@ Table.setMethod(function getWantedSort() {
 	let url_param = this.getBaseUrlParam() + '[sort]',
 	    url = this.getCurrentUrl();
 
-	if (!result.field) {
+	if (!result.field && url) {
 		result.field = url.param(url_param + '[field]');
 	}
 
-	if (!result.dir) {
+	if (!result.dir && url) {
 		result.dir = url.param(url_param + '[dir]');
 	}
 
@@ -424,7 +440,7 @@ Table.setMethod(function getWantedSort() {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.11
  *
  * @return   {Object}
  */
@@ -433,6 +449,11 @@ Table.setMethod(function getWantedFilters() {
 	if (!this.filters) {
 
 		let url = this.getCurrentUrl();
+
+		if (!url) {
+			return null;
+		}
+
 		let data = url.param('aft');
 		let filters;
 
@@ -486,15 +507,20 @@ Table.setMethod(function getBaseUrlParam() {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.11
  *
  * @return   {RURL}
  */
 Table.setMethod(function getCurrentStateUrl() {
 
+	let url = this.getCurrentUrl();
+
+	if (!url) {
+		return null;
+	}
+
 	let url_param = this.getBaseUrlParam(),
-	    page = this.getWantedPage(),
-	    url = this.getCurrentUrl();
+	    page = this.getWantedPage();
 
 	url.param(url_param + '[page]', page);
 
@@ -513,7 +539,7 @@ Table.setMethod(function getCurrentStateUrl() {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.6
+ * @version  0.1.11
  *
  * @param    {Array}   records
  */
@@ -526,7 +552,7 @@ Table.setMethod(function setRecords(records) {
 	let record;
 
 	for (record of records) {
-		this.table_body.append(this.createDataRow(record));
+		this.addDataRow(record);
 	}
 
 	this.showPagination();
@@ -565,7 +591,7 @@ Table.setMethod(function setFilter(field, value) {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.11
  */
 Table.setMethod(function showPagination() {
 
@@ -575,6 +601,12 @@ Table.setMethod(function showPagination() {
 		return;
 	}
 
+	let url = this.getCurrentUrl();
+
+	if (!url) {
+		return;
+	}
+
 	let pager = this.querySelector('alchemy-pager');
 
 	if (!pager) {
@@ -582,7 +614,7 @@ Table.setMethod(function showPagination() {
 		this.footer.append(pager);
 	}
 
-	pager.src = this.getCurrentUrl();
+	pager.src = url;
 	pager.url_param = this.getBaseUrlParam();
 	pager.page_size = records.page_size;
 
@@ -594,7 +626,7 @@ Table.setMethod(function showPagination() {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.8
- * @version  0.1.10
+ * @version  0.1.11
  *
  * @param    {FieldConfig}   field_config   The config on how to display the field
  * @param    {Object}        container      The container where the field should be in
@@ -603,6 +635,10 @@ Table.setMethod(function showPagination() {
  */
 Table.setMethod(function getFieldConfigView(field_config, container) {
 
+	if (typeof field_config == 'string') {
+		field_config = this.fieldset.get(field_config);
+	}
+
 	let value = field_config.getValueIn(container),
 	    field;
 	
@@ -624,7 +660,10 @@ Table.setMethod(function getFieldConfigView(field_config, container) {
 	}
 
 	let alchemy_field = this.createElement('alchemy-field');
-	alchemy_field.view_type = 'view_inline';
+	alchemy_field.purpose = this.purpose || 'view';
+	alchemy_field.mode = this.mode || 'inline';
+
+	//alchemy_field.view_type = this.view_type || 'view_inline';
 	alchemy_field.field_name = field.name;
 	alchemy_field.config = field;
 	alchemy_field.original_value = value;
@@ -632,6 +671,34 @@ Table.setMethod(function getFieldConfigView(field_config, container) {
 	return alchemy_field;
 });
 
+/**
+ * Create and add a datarow
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.11
+ * @version  0.1.11
+ *
+ * @param    {Object}   entry
+ *
+ * @return   <TR>
+ */
+Table.setMethod(function addDataRow(entry) {
+
+	if (!entry) {
+		entry = {};
+	}
+
+	let tr = this.createDataRow(entry);
+
+	if (!tr) {
+		return;
+	}
+
+	this.table_body.append(tr);
+
+	return tr;
+});
+
 /**
  * Create a datarow
  *
@@ -645,13 +712,19 @@ Table.setMethod(function getFieldConfigView(field_config, container) {
  */
 Table.setMethod(function createDataRow(entry) {
 
+	if (!entry) {
+		throw new Error('Unable to create datarow without data');
+	}
+
 	let field_set_config,
 	    value,
 	    tr = this.createElement('tr'),
 	    td,
 		id = entry.$pk || entry._id || entry.id;
 	
-	tr.dataset.pk = id;
+	if (id) {
+		tr.dataset.pk = id;
+	}
 
 	for (field_set_config of this.fieldset) {
 		td = this.createElement('td');
@@ -899,7 +972,7 @@ Table.setMethod(function onFieldsetAssignment(value, old_value) {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.11
  *
  * @param    {String|RURL}   base_url
  */
@@ -911,6 +984,10 @@ Table.setMethod(function updateAnchors(base_url) {
 		base_url = RURL.parse(base_url);
 	}
 
+	if (!base_url) {
+		return;
+	}
+
 	let anchors = this.querySelectorAll('a.sorting-anchor'),
 	    anchor,
 	    url,
@@ -969,7 +1046,7 @@ Table.setMethod(function onRecordsAssignment(value, old_value) {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.11
  *
  * @param    <TR>
  */
@@ -985,7 +1062,9 @@ Table.setMethod(function selectRow(row) {
 		child.classList.remove('aft-selected');
 	}
 
-	row.classList.add('aft-selected');
+	if (row) {
+		row.classList.add('aft-selected');
+	}
 });
 
 /**

package/element/query_builder_value.js

@@ -121,7 +121,7 @@ QueryBuilderValue.setProperty(function value() {
 
 	return result;
 }, function setValue(value) {
-	this.assigned_data.value = value;
+	this.assignData('value', value);
 });
 
 /**

package/helper/form_actions/url_action.js

@@ -23,7 +23,7 @@ UrlAction.addConfigProperty('url');
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.6
- * @version  0.1.6
+ * @version  0.1.11
  *
  * @return   {HTMLElement}
  */
@@ -35,7 +35,7 @@ UrlAction.setMethod(function _constructElement(renderer) {
 
 	if (this.icon) {
 		let alico = renderer.createElement('al-ico');
-		alico.setAttribute('type', this.icon);
+		alico.setIcon(this.icon);
 		anchor.append(alico);
 	} else {
 		anchor.textContent = this.title || this.name;

package/helper/widgets/alchemy_field_widget.js

@@ -73,7 +73,7 @@ AlchemyField.enforceProperty(function alchemy_form(new_value) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.9
+ * @version  0.1.11
  */
 AlchemyField.setMethod(function populateWidget() {
 
@@ -89,6 +89,14 @@ AlchemyField.setMethod(function populateWidget() {
 
 	field_el.field_name = config.field;
 
+	if (config.purpose) {
+		field_el.purpose = config.purpose;
+	}
+
+	if (config.mode) {
+		field_el.mode = config.mode;
+	}
+
 	if (config.view) {
 		field_el.field_view = config.view;
 	}

package/helper/widgets/alchemy_form_widget.js

@@ -16,7 +16,7 @@ const AlchemyForm = Function.inherits('Alchemy.Widget', 'AlchemyForm');
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.4
+ * @version  0.1.11
  */
 AlchemyForm.setMethod(function populateWidget() {
 
@@ -30,6 +30,14 @@ AlchemyForm.setMethod(function populateWidget() {
 
 	form.classList.add('alchemy-widgets-container');
 
+	if (config.purpose) {
+		form.purpose = config.purpose;
+	}
+
+	if (config.mode) {
+		form.mode = config.mode;
+	}
+
 	if (this.config && this.config.widgets) {
 		let widgets = this.config.widgets.slice(0),
 		    widget,
@@ -59,7 +67,9 @@ AlchemyForm.setMethod(function populateWidget() {
 		form.model = config.model;
 	}
 
-	form.view_type = config.view_type || 'edit';
+	if (config.view_type) {
+		form.view_type = config.view_type;
+	}
 
 	form.append(col.widget);
 

package/helper/widgets/alchemy_table_widget.js

@@ -16,7 +16,7 @@ const AlchemyTable = Function.inherits('Alchemy.Widget', 'AlchemyTable');
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.8
  */
 AlchemyTable.setMethod(function populateWidget() {
 
@@ -46,5 +46,8 @@ AlchemyTable.setMethod(function populateWidget() {
 		table.recordsource = config.recordsource;
 	}
 
+	table.purpose = config.purpose || 'view';
+	table.mode = config.mode || 'inline';
+
 	this.element.append(table);
 });

package/package.json

@@ -1,13 +1,14 @@
 {
 	"name": "alchemy-form",
 	"description": "Form plugin for Alchemy",
-	"version": "0.1.10",
+	"version": "0.1.11",
 	"repository": {
 		"type" : "git",
 		"url"  : "https://github.com/11ways/alchemy-form.git"
 	},
 	"peerDependencies": {
-		"alchemymvc" : ">=1.2.0"
+		"alchemymvc"    : ">=1.2.0",
+		"alchemy-media" : "~0.6.3"
 	},
 	"license": "MIT",
 	"engines": {

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

@@ -0,0 +1,4 @@
+<alchemy-toggle
+	class="alchemy-field-value"
+	#value=<% value %>
+></alchemy-toggle>

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

@@ -0,0 +1,19 @@
+<span
+	class="alchemy-field-value boolean-wrapper"
+>
+	<%
+		new_class = '';
+
+		if (value) {
+			new_class = 'boolean-true';
+		} else if (value === false) {
+			new_class = 'boolean-false';
+		} else {
+			new_class = 'boolean-null';
+			value = 'empty';
+		}
+
+		$0.classList.add(new_class);
+	%>
+	{{ value }}
+</span>

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

@@ -0,0 +1,4 @@
+<time
+	class="alchemy-field-value"
+	datetime={% value.toISOString() %}
+>{{ value.format('Y‑m‑d') }}</time>

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

@@ -0,0 +1 @@
+<code class="alchemy-field-value">{{ value }}</code>

package/view/form/wrappers/edit_inline/default.hwk

@@ -0,0 +1 @@
+<div class="wrapped-inline" data-he-name="field"></div>

package/view/form/wrappers/view_inline/default.hwk

@@ -1 +1 @@
-<div data-he-name="field"></div>
+<div class="wrapped-inline" data-he-name="field"></div>