NEW: edittable.js script

ui/admin/assets/js/OMGUtils.js

@@ -1,4 +1,4 @@
-const fetchHeaders = {
+export const fetchHeaders = {
 	'Accept': 'text/html',
 	'Content-Type': 'text/html',
 	'X-Requested-With': 'XMLHttpRequest',

ui/admin/assets/js/edittable.js

@@ -0,0 +1,123 @@
+import {AjaxReq, fetchHeaders} from "./OMGUtils";
+
+let CSS_EDITOR_ACTIVE = 'shadow rounded-lg bg-dark text-light';
+
+let tableSelector = null;
+
+function GetTableFieldNames() {
+	let columnNames = [];
+	$(`${tableSelector} thead th`).each(function (i, e) {
+		columnNames.push(e.innerText);
+	});
+
+	return columnNames;
+}
+
+function GetColumnDef(colIndex, name) {
+	return $(`${tableSelector} thead th:eq(${colIndex})`).attr(name);
+}
+
+function cancelEdit(el) {
+	el.innerText = $(el).data('oldvalue');
+	$(el).parent('tr').removeClass('dt-editing-cell bg-warning');
+	$(el).removeClass(CSS_EDITOR_ACTIVE);
+	$('body').focus();
+	el.contentEditable = false;
+}
+
+function EditTableInit(tableRef) {
+
+	tableSelector = tableRef;
+	let tableBodyRef = $(`${tableSelector} tbody`);
+
+	$(tableRef).DataTable({
+		"ajax": {
+			"url": `${BASEURL}/masterdataset`,
+			"type": 'POST',
+			"data": {
+				'action': 'getData'
+			},
+			'dataSrc': function (data) {
+				$(tableSelector).parent('.dataTables_wrapper').parent().removeClass('d-none');
+				return data;
+			}
+		},
+		'lengthChange': false,
+		dom: 'Bfrtip', // for buttons
+		order: [[0, "asc"]],
+		buttons: [
+			{
+				text: 'Save all',
+				action: function (e, dt, node, config) {
+					let postHeadersContentType = fetchHeaders;
+					postHeadersContentType['Content-Type'] = 'application/x-www-form-urlencoded';
+					AjaxReq(`${BASEURL}/masterdataset`, {
+						headers: postHeadersContentType,
+						method: 'POST',
+						body: 'action=saveall'
+					}).fetchPromise()
+						.then(json => alert(`${json.code} - ${json.err}`))
+						.catch(err => alert(err.url, `${err.status} (${err.statusText})`));
+				}
+			}
+		]
+	});
+
+	tableBodyRef.on('click', 'td', function () {
+		let $this = $(this);
+
+		// avoid to edit if aria-editable === 'false'
+		if (GetColumnDef(this.cellIndex, 'aria-editable') === 'false')
+			return;
+
+		this.contentEditable = true;	// enable html edit
+		$this.data('oldvalue', this.innerText);  // backup actual value
+		$this.parent('tr').addClass('dt-editing-cell bg-warning');  // mark the row of current cell
+		$this.addClass(CSS_EDITOR_ACTIVE);
+		$this.focus();
+	});
+
+	tableBodyRef.on('blur', 'td', function (e) {
+		cancelEdit(this);
+	});
+
+	tableBodyRef.on('keydown', 'td', function (e) {
+		// Cancel Edit
+		if (e.keyCode === 27 || e.keyCode === 9) {
+			cancelEdit(this);
+			return false;
+		}
+		// Save Modified Data
+		if (e.keyCode === 13) {
+			$(this).data('oldvalue', this.innerText);
+
+			let ajaxData = new FormData();
+			let fields = GetTableFieldNames();
+
+			$('.dt-editing-cell td').each(function (i, e) {
+				ajaxData.append(fields[i], e.innerText);
+			});
+
+			ajaxData.append('action', 'edit');
+
+			let postHeadersContentType = fetchHeaders;
+			delete postHeadersContentType['Content-Type'];
+
+			AjaxReq(`${BASEURL}/masterdataset`, {
+				headers: postHeadersContentType,
+				method: 'POST',
+				body: ajaxData
+			}).fetchPromise()
+				.then(json => {
+					$(tableRef).DataTable().ajax.reload();
+					alert(`${json.code} - ${json.err}`);
+				})
+				.catch(err => alert(err.url, `${err.status} (${err.statusText})`))
+				.finally(() => this.contentEditable = false);
+
+			return false;
+		}
+	});
+}
+
+export default EditTableInit;