- fixed issues with jumpy actions for item view

- added AFLOW-23 support for categories and rewrote interface
This commit is contained in:
Sören Oesterwind 2023-07-10 17:50:31 +02:00
parent 94186a3a18
commit ea80b4bf2b
5 changed files with 137 additions and 49 deletions

View File

@ -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) { %>

View File

@ -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">Name</th>
<th scope="col">Description</th>
<th scope="col">Action</th>
<th scope="col" data-field="name" data-sortable="true" data-width="300">Name</th>
<th scope="col" data-field="description" data-sortable="true">Description</th>
<th scope="col" data-field="actions" data-sortable="false" data-searchable="false" data-width="160">Actions</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>

View File

@ -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.
function get(req: Request, res: Response) {
// Get category
async function get(req: Request, res: Response) {
// Check if required fields are present.
if (!req.query.name) {
res.status(400).json({ status: 'ERROR', errorcode: 'VALIDATION_ERROR', message: 'One or more required fields are missing' });
return;
if (req.query.sort === undefined) {
req.query.sort = 'id';
}
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.

View File

@ -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()

View File

@ -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(() => {
activateTooltips();
}, 1000);
function loadPageData() {
const itemList = $('#itemList');
// itemList.empty();
itemList.bootstrapTable('refresh')
setTimeout(() => {