- introduced table view with client side loading

- improved /items/ with support for pagination
- improved helper functions for tooltips and popovers
- removed console log residue from handleSidebarTriangles
- introduction of version route

static/js/formHandler.js

@@ -1,4 +1,13 @@
 var amountOfForms = $('.frontendForm').length;
+
+function isNewDataLoaderAvailable() {
+	try {
+		return FLAG_supports_new_data_loader;
+	} catch (error) {
+		return false;
+	}
+}
+
 $('.frontendForm').each(function () {
 	// TODO Handle empty strings as null or undefined, not as ''
 	$(this).on('submit', function (e) {
@@ -26,7 +35,12 @@ $('.frontendForm').each(function () {
 				// Clear all fields
 				form.find('input, textarea').val('');
 				// Create toast
-				createNewToast('<i class="bi bi-check2"></i> Changes saved successfully.', "text-bg-success")
+				if(isNewDataLoaderAvailable()) {
+					createNewToast('<i class="bi bi-check2"></i> Changes saved successfully.', "text-bg-success", undefined, false)
+				} else {
+					createNewToast('<i class="bi bi-check2"></i> Changes saved successfully.', "text-bg-success")
+				}
+				
 			},
 			error: function (data) {
 				console.log('error');

static/js/handleSidebarTriangles.js

@@ -10,7 +10,6 @@ trinagles.each(function () {
 		$(this).addClass('rotate');
 	}
 
-	console.log('target', target);
 	target.on('show.bs.collapse', function () {
 		$(triTar).addClass('rotate');
 		$(triTar).removeClass('derotate');

static/js/itemPageHandler.js

@@ -0,0 +1,58 @@
+const FLAG_supports_new_data_loader = true;
+
+/**
+ * Should we ever implement items in items, have a look at this: 
+ * https://examples.bootstrap-table.com/index.html?extensions/treegrid.html#extensions/treegrid.html
+ */
+
+function loadPageData() {
+	const itemList = $('#itemList');
+	// itemList.empty();
+	itemList.bootstrapTable('destroy')
+	itemList.bootstrapTable({url: "/api/v1/items", search: true, showRefresh: true, responseHandler: dataResponseHandler, sidePagination: 'server', serverSort: true})
+	setTimeout(() => {
+		activateTooltips();
+	}, 1000);
+}
+
+function dataResponseHandler(res) {
+	json = JSON.parse(res);
+	// console.log(json)
+	totalNotFiltered = json.totalNotFiltered;
+	total = json.total;
+	json = json.items;
+	json.forEach((item) => {
+		colorStatus = '';
+		if(item.SKU == null) item.SKU = '<i>No SKU assigned</i>';
+		switch (item.status) {
+			case 'normal':
+				colorStatus = 'success';
+				break;
+			case 'stolen':
+				colorStatus = 'danger';
+				break;
+			case 'lost':
+				colorStatus = 'warning';
+				break;
+			case 'borrowed':
+				colorStatus = 'info';
+				break;
+			default:
+				colorStatus = 'secondary';
+		}
+		item.status = `<span class="badge text-bg-${colorStatus}">${item.status}</span>`;
+		item.actions = `
+		<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#itemModifyModal" onclick="primeEdit(); getDataForEdit('${item.id}')">
+					<i class="bi bi-pencil"></i>
+				</button>	
+				<button class="btn btn-danger" onclick="preFillDeleteModalNxt('${item.id}','items','Item')" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
+					<i class="bi bi-trash"></i>
+				</button>`
+		item.SKU = `<p data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="ID: ${item.id}">${item.SKU}</p>`
+	});
+	///// --------------------------------- /////
+
+	return {"rows": json, total: total, totalNotFiltered: totalNotFiltered, totalRows: total};
+}
+
+loadPageData()

static/js/toastHandler.js

@@ -26,6 +26,11 @@ function createNewToast(message, colorSelector, autoHideTime = 1500, autoReload
 	targetContainer.appendChild(newToast);
 	currentToasts.push(newToast);
 	$(newToast).toast('show');
+	try {
+		loadPageData();
+	} catch (error) {
+		console.debug("Page does not support new data loading.")
+	}
 	setTimeout(() => {
 		destroyToast(newToast.id);
 		if (autoReload && !forceSkipReload) {