alchemy-form 0.1.11 → 0.2.0

package/element/{alchemy_table.js → al_table.js}

@@ -1,11 +1,13 @@
+const OLD_ROWS = Symbol('old_rows');
+
 /**
- * The alchemy-table element
+ * The al-table element
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
  * @version  0.1.0
  */
-const Table = Function.inherits('Alchemy.Element.Form.Base', 'Table');
+const Table = Function.inherits('Alchemy.Element.Form.WithDataprovider', 'Table');
 
 /**
  * The template code
@@ -27,15 +29,6 @@ Table.setTemplate(`<header class="aft-header"></header>
 </div>
 <footer data-he-slot="footer" class="aft-footer"></footer>`, {plain_html: true, render_immediate: true});
 
-/**
- * The stylesheet to load for this element
- *
- * @author   Jelle De Loecker <jelle@develry.be>
- * @since    0.1.0
- * @version  0.1.0
- */
-Table.setStylesheetFile('form/alchemy_table');
-
 /**
  * Getter for the header element
  *
@@ -100,31 +93,22 @@ Table.addElementGetter('column_names_row', 'tr.aft-column-names');
 Table.addElementGetter('column_filters_row', 'tr.aft-column-filters');
 
 /**
- * The page attribute
- *
- * @author   Jelle De Loecker <jelle@elevenways.be>
- * @since    0.1.0
- * @version  0.1.0
- */
-Table.setAttribute('page', {number: true});
-
-/**
- * The page-size attribute
+ * Should filters be shown?
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
  * @version  0.1.0
  */
-Table.setAttribute('page-size', {number: true});
+Table.setAttribute('show-filters', {boolean: true});
 
 /**
- * Should filters be shown?
+ * Should the url be used for pagination?
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
- * @since    0.1.0
- * @version  0.1.0
+ * @since    0.2.0
+ * @version  0.2.0
  */
-Table.setAttribute('show-filters', {boolean: true});
+Table.setAttribute('use-url-pagination', {boolean: true});
 
 /**
  * Which optional view-type to use for field values
@@ -136,13 +120,13 @@ Table.setAttribute('show-filters', {boolean: true});
 Table.setAttribute('view-type');
 
 /**
- * Keep track of the loadRemote calls
+ * Should existing rows be re-used when new data is loaded?
  *
- * @author   Jelle De Loecker <jelle@elevenways.be>
- * @since    0.1.3
- * @version  0.1.3
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
  */
-Table.setProperty('load_remote_counter', 0);
+Table.setAttribute('update-existing-rows', {boolean: true});
 
 /**
  * Look for changes to the show-filters attribute
@@ -251,76 +235,15 @@ Table.setAssignedProperty('records');
 Table.setAssignedProperty('filters');
 
 /**
- * The records property
- *
- * @author   Jelle De Loecker <jelle@elevenways.be>
- * @since    0.1.0
- * @version  0.1.0
- */
-Table.setAssignedProperty('recordsource', null, function onRecordsource(value) {
-	this.setRecordsource(value);
-	return value;
-});
-
-/**
- * Look for a new src value
- *
- * @author   Jelle De Loecker <jelle@elevenways.be>
- * @since    0.1.0
- * @version  0.1.0
- */
-Table.enforceProperty(function src(new_value, old_value) {
-
-	if (new_value == old_value) {
-		return new_value;
-	}
-
-	this.setAttributeSilent('src', new_value);
-
-	return new_value;
-});
-
-/**
- * Look for a new src value
+ * Get the active row
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
- * @since    0.1.0
- * @version  0.1.0
+ * @since    0.2.0
+ * @version  0.2.0
  */
-Table.addObservedAttribute('src', function onSource(src) {
-	this.src = src;
-});
-
-/**
- * Clear the header elements
- *
- * @author   Jelle De Loecker <jelle@elevenways.be>
- * @since    0.1.0
- * @version  0.1.11
- *
- * @param    {*}   config
- */
-Table.setMethod(function setRecordsource(config) {
-
-	let url;
-
-	if (typeof config == 'object') {
-		url = alchemy.routeUrl(config.route, config.parameters);
-	} else {
-		url = config;
-	}
-
-	if (url == '#') {
-		let current_url = this.getCurrentUrl();
-
-		if (current_url) {
-			url = ''+current_url;
-		}
-	}
-
-	this.src = url;
-
-	this.loadRemoteData();
+Table.setProperty(function active_row() {
+	let result = this.queryAllNotNested('tr.aft-selected');
+	return result[0];
 });
 
 /**
@@ -358,6 +281,35 @@ Table.setMethod(function clearBody() {
 	Hawkejs.removeChildren(this.table_body);
 });
 
+/**
+ * Get the current rows by their pk
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ *
+ * @return   {Object<string,HTMLTableRowElement>}
+ */
+Table.setMethod(function getTableRowsByPk() {
+
+	let result = {},
+	    rows = this.table_body.queryAllNotNested('tr[data-pk]'),
+	    row,
+	    pk,
+	    i;
+
+	for (i = 0; i < rows.length; i++) {
+		row = rows[i];
+		pk = row.dataset.pk;
+
+		if (pk) {
+			result[pk] = row;
+		}
+	}
+
+	return result;
+});
+
 /**
  * Get the wanted page
  *
@@ -539,7 +491,7 @@ Table.setMethod(function getCurrentStateUrl() {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.11
+ * @version  0.2.0
  *
  * @param    {Array}   records
  */
@@ -547,6 +499,12 @@ Table.setMethod(function setRecords(records) {
 
 	this.assigned_data.records = records;
 
+	if (this.update_existing_rows) {
+		this[OLD_ROWS] = this.getTableRowsByPk();
+	} else {
+		this[OLD_ROWS] = null;
+	}
+
 	this.clearBody();
 
 	let record;
@@ -555,6 +513,10 @@ Table.setMethod(function setRecords(records) {
 		this.addDataRow(record);
 	}
 
+	if (this.update_existing_rows) {
+		this[OLD_ROWS] = null;
+	}
+
 	this.showPagination();
 	this.attachContextMenus();
 });
@@ -591,7 +553,7 @@ Table.setMethod(function setFilter(field, value) {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.11
+ * @version  0.2.0
  */
 Table.setMethod(function showPagination() {
 
@@ -601,21 +563,30 @@ Table.setMethod(function showPagination() {
 		return;
 	}
 
-	let url = this.getCurrentUrl();
+	const use_url_pagination = this.use_url_pagination;
 
-	if (!url) {
-		return;
+	let url;
+
+	if (use_url_pagination) {
+		url = this.getCurrentUrl();
+
+		if (!url) {
+			return;
+		}
 	}
 
-	let pager = this.querySelector('alchemy-pager');
+	let pager = this.querySelector('al-pager');
 
 	if (!pager) {
-		pager = this.createElement('alchemy-pager');
+		pager = this.createElement('al-pager');
 		this.footer.append(pager);
 	}
 
-	pager.src = url;
-	pager.url_param = this.getBaseUrlParam();
+	if (use_url_pagination) {
+		pager.src = url;
+		pager.url_param = this.getBaseUrlParam();
+	}
+
 	pager.page_size = records.page_size;
 
 	pager.showPage(records.page, Math.ceil(records.available / records.page_size));
@@ -626,7 +597,7 @@ Table.setMethod(function showPagination() {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.8
- * @version  0.1.11
+ * @version  0.2.0
  *
  * @param    {FieldConfig}   field_config   The config on how to display the field
  * @param    {Object}        container      The container where the field should be in
@@ -659,10 +630,12 @@ Table.setMethod(function getFieldConfigView(field_config, container) {
 		return Hawkejs.createText(text);
 	}
 
-	let alchemy_field = this.createElement('alchemy-field');
+	let alchemy_field = this.createElement('al-field');
 	alchemy_field.purpose = this.purpose || 'view';
 	alchemy_field.mode = this.mode || 'inline';
 
+	alchemy_field.applyOptions(field_config.options);
+
 	//alchemy_field.view_type = this.view_type || 'view_inline';
 	alchemy_field.field_name = field.name;
 	alchemy_field.config = field;
@@ -704,7 +677,7 @@ Table.setMethod(function addDataRow(entry) {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.8
+ * @version  0.2.0
  *
  * @param    {Object}   entry
  *
@@ -717,49 +690,97 @@ Table.setMethod(function createDataRow(entry) {
 	}
 
 	let field_set_config,
-	    value,
-	    tr = this.createElement('tr'),
-	    td,
-		id = entry.$pk || entry._id || entry.id;
+	    is_existing_row,
+	    tr,
+	    id = entry.$pk || entry._id || entry.id;
+	
+	if (id && this[OLD_ROWS] && this[OLD_ROWS][id]) {
+		tr = this[OLD_ROWS][id];
+		is_existing_row = true;
+	} else {
+		tr = this.createElement('tr');
+	}
 	
 	if (id) {
 		tr.dataset.pk = id;
 	}
 
 	for (field_set_config of this.fieldset) {
-		td = this.createElement('td');
 
-		let element = this.getFieldConfigView(field_set_config, entry);
+		let create_new_contents = true,
+		    td;
+
+		if (is_existing_row && field_set_config.path) {
+			td = tr.querySelector('td[data-path="' + field_set_config.path + '"]');
+
+			if (td) {
+				let checksum = Object.checksum(field_set_config.getValueIn(entry));
+
+				if (td.dataset.checksum == checksum) {
+					create_new_contents = false;
+				} else {
+					Hawkejs.removeChildren(td);
+				}
+			}
+		}
+		
+		if (!td) {
+			td = this.createElement('td');
+			td.dataset.path = field_set_config.path;
+		}
+
+		if (create_new_contents) {
+			let element = this.getFieldConfigView(field_set_config, entry);
+
+			if (element) {
+				if (this.update_existing_rows) {
+					let checksum = Object.checksum(element.original_value);
+					td.dataset.checksum = checksum;
+				}
 
-		if (element) {
-			td.append(element);
+				td.append(element);
+			}
 		}
 
-		tr.append(td);
+		if (!is_existing_row) {
+			tr.append(td);
+		}
 	}
 
 	if (this.has_actions) {
-		td = this.createElement('td');
-		td.classList.add('aft-actions');
-		tr.append(td);
+
+		let td;
+
+		if (is_existing_row) {
+			td = tr.querySelector('td.aft-actions');
+			if (td) {
+				Hawkejs.removeChildren(td);
+			}
+		}
+
+		if (!td) {
+			td = this.createElement('td');
+			td.classList.add('aft-actions');
+			tr.append(td);
+		}
 
 		let actions = this.getEntryActions(entry, 'row');
 
 		if (actions && actions.length) {
 
 			let action,
-			    anchor;
+			    element;
 
 			// Iterate over all the defined actions
 			for (action of actions) {
 
-				anchor = action.constructElement(this);
+				element = action.constructElement(this);
 
-				if (!anchor) {
+				if (!element) {
 					continue;
 				}
 
-				td.append(anchor);
+				td.append(element);
 			}
 		}
 
@@ -886,7 +907,7 @@ Table.setMethod(function attachContextMenus() {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.12
  */
 Table.setMethod(function onFieldsetAssignment(value, old_value) {
 
@@ -920,7 +941,7 @@ Table.setMethod(function onFieldsetAssignment(value, old_value) {
 
 		if (field.options.sortable !== false) {
 			col.classList.add('sortable');
-			icon = this.createElement('al-ico');
+			icon = this.createElement('al-icon');
 			icon.setAttribute('type', 'sorting-arrow');
 
 			// Wrap it in an anchor
@@ -939,18 +960,22 @@ Table.setMethod(function onFieldsetAssignment(value, old_value) {
 		names_row.append(col);
 
 		col = this.createElement('th');
-		input = this.createElement('input');
-		input.dataset.field = field.path;
-		input.classList.add('filter');
-		input.setAttribute('type', 'search');
-		input.setAttribute('aria-label', 'Filter ' + field.title);
-
-		// If filters have been defined already, put it in the value
-		if (this.filters && this.filters[field.path]) {
-			input.setAttribute('value', this.filters[field.path]);
+
+		if (field.options.filter !== false) {
+			input = this.createElement('input');
+			input.dataset.field = field.path;
+			input.classList.add('filter');
+			input.setAttribute('type', 'search');
+			input.setAttribute('aria-label', 'Filter ' + field.title);
+
+			// If filters have been defined already, put it in the value
+			if (this.filters && this.filters[field.path]) {
+				input.setAttribute('value', this.filters[field.path]);
+			}
+
+			col.append(input);
 		}
 
-		col.append(input);
 		filter_row.append(col);
 	}
 
@@ -972,7 +997,7 @@ Table.setMethod(function onFieldsetAssignment(value, old_value) {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.11
+ * @version  0.2.0
  *
  * @param    {String|RURL}   base_url
  */
@@ -1002,7 +1027,7 @@ Table.setMethod(function updateAnchors(base_url) {
 	for (i = 0; i < anchors.length; i++) {
 		anchor = anchors[i];
 
-		ico = anchor.querySelector('al-ico');
+		ico = anchor.querySelector('al-icon');
 
 		ico.classList.remove('up');
 		ico.classList.remove('down');
@@ -1023,7 +1048,7 @@ Table.setMethod(function updateAnchors(base_url) {
 		anchor.setAttribute('href', url);
 	}
 
-	let pager = this.querySelector('alchemy-pager');
+	let pager = this.querySelector('al-pager');
 
 	if (pager) {
 		pager.src = base_url;
@@ -1068,64 +1093,58 @@ Table.setMethod(function selectRow(row) {
 });
 
 /**
- * Load the remote data
+ * Construct the config object used to fetch data
  *
- * @author   Jelle De Loecker <jelle@elevenways.be>
- * @since    0.1.0
- * @version  0.1.3
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
  */
-Table.setMethod(function loadRemoteData() {
+Table.setMethod(function getRemoteFetchConfig() {
 
-	let that = this,
-	    src = this.src;
-
-	let body = {
+	let config = {
 		fields : this.fieldset.toJSON(),
 	};
 
 	if (this.page_size) {
-		body.page_size = this.page_size;
-		body.page = this.getWantedPage();
+		config.page_size = this.page_size;
+		config.page = this.getWantedPage();
 	}
 
-	body.sort = this.getWantedSort();
-	body.filters = this.getWantedFilters();
-
-	let options = {
-		href : this.src,
-		post : true,
-		body : body
-	};
-
-	let load_remote_id = ++this.load_remote_counter;
-
-	this.delayAssemble(async function() {
+	config.sort = this.getWantedSort();
+	config.filters = this.getWantedFilters();
 
-		if (load_remote_id != that.load_remote_counter) {
-			return;
-		}
-
-		let result = await that.getResource(options);
+	return config;
+});
 
-		if (!result) {
-			return;
-		}
+/**
+ * Apply the fetched data
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+Table.setMethod(function applyFetchedData(err, result, config) {
 
-		if (load_remote_id != that.load_remote_counter) {
-			return;
-		}
+	if (err) {
+		console.error(err);
+		return;
+	}
 
-		let records = result.records;
+	let records;
 
-		that.records = records;
+	if (Array.isArray(result)) {
+		records = result;
+	} else {
+		records = result.records;
+	}
 
-		that.updateAnchors();
+	this.records = records;
+	this.updateAnchors();
 
-		if (Blast.isBrowser) {
-			let current_url = that.getCurrentStateUrl();
-			history.pushState(null, document.title, current_url+'');
-		}
-	});
+	if (Blast.isBrowser) {
+		let current_url = this.getCurrentStateUrl();
+		history.pushState(null, document.title, current_url+'');
+	}
 });
 
 /**
@@ -1160,7 +1179,7 @@ Table.setMethod(function sortData() {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.6
+ * @version  0.2.0
  */
 Table.setMethod(function introduced() {
 
@@ -1218,7 +1237,7 @@ Table.setMethod(function introduced() {
 		}
 	}, 300, false, true));
 
-	let pager = this.querySelector('alchemy-pager');
+	let pager = this.querySelector('al-pager');
 
 	if (pager) {
 		pager.addEventListener('pager-request', function requestPage(e) {

package/element/{alchemy_toggle.js → al_toggle.js}

@@ -1,5 +1,5 @@
 /**
- * The alchemy-toggle custom element
+ * The al-toggle custom element
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
@@ -16,15 +16,6 @@ const AlchemyToggle = Function.inherits('Alchemy.Element.Form.Base', 'Toggle');
  */
 AlchemyToggle.setTemplateFile('form/elements/alchemy_toggle');
 
-/**
- * The stylesheet to load for this element
- *
- * @author   Jelle De Loecker <jelle@elevenways.be>
- * @since    0.1.0
- * @version  0.1.0
- */
-AlchemyToggle.setStylesheetFile('form/alchemy_toggle');
-
 /**
  * Get/set the value
  *

package/helper/form_actions/00_form_action.js

@@ -226,15 +226,26 @@ FormAction.setMethod(function constructElement(renderer) {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.6
- * @version  0.1.6
+ * @version  0.2.0
  *
  * @return   {HTMLElement}
  */
 FormAction.setMethod(function _constructElement(renderer) {
 
-	let span = renderer.createElement('span');
-	span.textContent = this.title;
-	return span;
+	let button = renderer.createElement('al-button');
+	button.action_instance = this;
+
+	if (this.icon) {
+		let icon = renderer.createElement('al-icon');
+		icon.icon_name = this.icon;
+		button.append(icon);
+	}
+
+	if (this.title) {
+		button.append(this.title);
+	}
+
+	return button;
 });
 
 /**

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.11
+ * @version  0.2.0
  *
  * @return   {HTMLElement}
  */
@@ -34,7 +34,7 @@ UrlAction.setMethod(function _constructElement(renderer) {
 	anchor.dataset.name = this.name;
 
 	if (this.icon) {
-		let alico = renderer.createElement('al-ico');
+		let alico = renderer.createElement('al-icon');
 		alico.setIcon(this.icon);
 		anchor.append(alico);
 	} else {
@@ -42,6 +42,7 @@ UrlAction.setMethod(function _constructElement(renderer) {
 	}
 
 	anchor.setAttribute('href', this.url);
+	anchor.setAttribute('title', this.title || this.name);
 	
 	return anchor;
 });