- fixed issues with jumpy actions for item view

- added AFLOW-23 support for categories and rewrote interface

src/frontend/items.eta.html

@@ -100,7 +100,7 @@
 				<th scope="col" data-field="name" data-sortable="true">Name</th>
 				<th scope="col" data-field="comment" data-sortable="true" data-width="80">Comment</th>
 				<th scope="col" data-field="status" data-sortable="true">Status</th>
-				<th scope="col" data-field="actions" data-searchable="false">Actions</th>
+				<th scope="col" data-field="actions" data-sortable="false" data-searchable="false" data-width="160">Actions</th>
 			</tr>
 		</thead>
 		<% if(it.items.length == 0) { %>

src/frontend/manage/categoryManager.eta.html

@@ -40,31 +40,15 @@
 	</div>
 
 	<!-- Table with all categories -->
-	<table class="table align-middle">
+	<table class="table align-middle" id="itemList" data-sortable="true" data-search-highlight="true" data-pagination="true" data-page-size="25" data-remember-order="true">
 		<thead>
 			<tr>
-				<!-- <th scope="col">#</th> -->
+				<th scope="col" data-field="name" data-sortable="true" data-width="300">Name</th>
-				<th scope="col">Name</th>
+				<th scope="col" data-field="description" data-sortable="true">Description</th>
-				<th scope="col">Description</th>
+				<th scope="col" data-field="actions" data-sortable="false" data-searchable="false" data-width="160">Actions</th>
-				<th scope="col">Action</th>
 			</tr>
 		</thead>
-		<tbody>
+		
-			<% it.items.forEach(function(user){ %>
-			<tr id="listEntry-<%= user.id %>">
-				<td scope="row" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="ID: <%= user.id %>"><%= user.name %></td>
-				<td><%= user.description %></td>
-				<td>
-					<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#editCategoryModal" onclick="primeEdit(); getDataForEdit('<%= user.name %>')">
-						<i class="bi bi-pencil"></i>
-					</button>
-					<button class="btn btn-danger" onclick="preFillDeleteModalNxt('<%= user.name %>','categories','Category', 'name')" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
-						<i class="bi bi-trash"></i>
-					</button>
-				</td>
-			</tr>
-			<% }) %>
-		</tbody>
 	</table>
 </div>
 <script src="/js/editCategory.js"></script>

src/routes/api/v1/categories.ts

@@ -1,14 +1,21 @@
 import { Request, Response } from 'express';
 import { prisma, __path, log } from '../../../index.js';
+import { parseIntOrUndefined, parseDynamicSortBy } from '../../../assets/helper.js';
 
-// Get category.
+// Get category
-function get(req: Request, res: Response) {
+async function get(req: Request, res: Response) {
 	// Check if required fields are present.
-	if (!req.query.name) {
+	if (req.query.sort === undefined) {
-		res.status(400).json({ status: 'ERROR', errorcode: 'VALIDATION_ERROR', message: 'One or more required fields are missing' });
+		req.query.sort = 'id';
-		return;
+	}
+	if (req.query.order === undefined) {
+		req.query.order = 'asc';
+	}
+	if (req.query.search === undefined) {
+		req.query.search = '';
 	}
 
+	if (req.query.name) {
 		prisma.itemCategory
 			.findUnique({
 				where: {
@@ -26,6 +33,65 @@ function get(req: Request, res: Response) {
 				log.db.error(err);
 				res.status(500).json({ status: 'ERROR', errorcode: 'DB_ERROR', error: err, message: 'An error occurred during the database operation' });
 			});
+	} else {
+		// Get all items
+		const itemCountNotFiltered = await prisma.itemCategory.count({});
+
+		// Get all items (filtered)
+		const itemCountFiltered = await prisma.itemCategory.count({
+			where: {
+				OR: [
+					{
+						name: {
+							// @ts-ignore
+							contains: req.query.search.length > 0 ? req.query.search : ''
+						}
+					},
+					{
+						description: {
+							// @ts-ignore
+							contains: req.query.search.length > 0 ? req.query.search : ''
+						}
+					}
+				]
+			},
+			orderBy: parseDynamicSortBy(req.query.sort.toString(), req.query.order.toString())
+		});
+
+		prisma.itemCategory
+			.findMany({
+				take: parseIntOrUndefined(req.query.limit),
+				skip: parseIntOrUndefined(req.query.offset),
+				orderBy: parseDynamicSortBy(req.query.sort.toString(), req.query.order.toString()),
+				where: {
+					OR: [
+						{
+							name: {
+								// @ts-ignore
+								contains: req.query.search.length > 0 ? req.query.search : ''
+							}
+						},
+						{
+							description: {
+								// @ts-ignore
+								contains: req.query.search.length > 0 ? req.query.search : ''
+							}
+						}
+					]
+				},
+			})
+			.then((items) => {
+				if (items) {
+					res.status(200).json({ total: itemCountFiltered, totalNotFiltered: itemCountNotFiltered, items: items });
+				} else {
+					res.status(410).json({ status: 'ERROR', errorcode: 'NOT_EXISTING', message: 'Item does not exist' });
+				}
+			})
+			.catch((err) => {
+				log.db.error(err);
+				res.status(500).json({ status: 'ERROR', errorcode: 'DB_ERROR', error: err, message: 'An error occurred during the database operation' });
+			});
+	}
 }
 
 // Create category.

static/js/editCategory.js

@@ -1,3 +1,5 @@
+const FLAG_supports_new_data_loader = true;
+
 function getDataForEdit(name) {
 	$.ajax({
 		type: 'get',
@@ -37,3 +39,42 @@ function primeEdit() {
 	form.setAttribute('method', 'PATCH');
 	return true;
 }
+
+const itemList = $('#itemList');
+// itemList.empty();
+itemList.bootstrapTable({ url: '/api/v1/categories', search: true, showRefresh: true, responseHandler: dataResponseHandler, sidePagination: 'server', serverSort: true, silentSort: false });
+setTimeout(() => {
+	activateTooltips();
+}, 1000);
+
+function loadPageData() {
+	itemList.bootstrapTable('refresh')
+
+	setTimeout(() => {
+		activateTooltips();
+	}, 1000);
+}
+
+function dataResponseHandler(json) {
+	// console.log(json)
+	totalNotFiltered = json.totalNotFiltered;
+	total = json.total;
+	json = json.items;
+	json.forEach((item) => {
+		item.actions = `
+		<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#editCategoryModal" onclick="primeEdit(); getDataForEdit('${item.name}')">
+					<i class="bi bi-pencil"></i>
+				</button>	
+				<button class="btn btn-danger" onclick="preFillDeleteModalNxt('${item.name}','categories','Category','name')" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
+					<i class="bi bi-trash"></i>
+				</button>`
+	});
+	///// --------------------------------- /////
+	setTimeout(() => {
+		activateTooltips();
+	}, 200);
+	return {"rows": json, total: total, totalNotFiltered: totalNotFiltered, totalRows: total};
+	
+}
+
+loadPageData()

static/js/itemPageHandler.js

@@ -7,15 +7,12 @@ const FLAG_supports_new_data_loader = true;
 
 // Inital thing
 const itemList = $('#itemList');
-	// itemList.empty();
+itemList.bootstrapTable({ url: '/api/v1/items', search: true, showRefresh: true, responseHandler: dataResponseHandler, sidePagination: 'server', serverSort: true, silentSort: false });
-	itemList.bootstrapTable({url: "/api/v1/items", search: true, showRefresh: true, responseHandler: dataResponseHandler, sidePagination: 'server', serverSort: true, silentSort: false})
+setTimeout(() => {
-	setTimeout(() => {
 	activateTooltips();
-	}, 1000);
+}, 1000);
 
 function loadPageData() {
-	const itemList = $('#itemList');
-	// itemList.empty();
 	itemList.bootstrapTable('refresh')
 
 	setTimeout(() => {