phpengine/ui/admin/assets/js/edittable.js

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;