- 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
This commit is contained in:
2023-07-08 00:09:54 +02:00
parent c026b5f1a8
commit 0233453084
15 changed files with 196 additions and 96 deletions

View File

@ -93,13 +93,13 @@
<a href="/settings/category/new" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#itemModifyModal" onclick="primeCreateNew()">Create new item</a>
</div>
</div>
<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">SKU</th>
<th scope="col">Name</th>
<th scope="col">Status</th>
<th scope="col">Actions</th>
<th scope="col" data-field="SKU" class="sku" data-sortable="true">SKU</th>
<th scope="col" data-field="name" data-sortable="true">Name</th>
<th scope="col" data-field="status" data-sortable="true">Status</th>
<th scope="col" data-field="actions" data-searchable="false">Actions</th>
</tr>
</thead>
<% if(it.items.length == 0) { %>
@ -109,49 +109,8 @@
</tr>
</tbody>
<% } %>
<tbody>
<% it.items.forEach(function(user){ %>
<tr>
<td scope="row" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="ID: <%= user.id %>">
<% if (user.SKU == null) { %>
<i>No SKU assigned</i>
<% } else { %> <%= user.SKU %> <% } %></td>
<td><%= user.name %></td>
<% if(user.status == "normal") { %>
<td><span class="badge text-bg-success"><%= user.status %></span></td>
<% } else if(user.status == "stolen") { %>
<td><span class="badge text-bg-danger"><%= user.status %></span></td>
<% } else if(user.status == "lost") { %>
<td><span class="badge text-bg-warning"><%= user.status %></span></td>
<% } else if(user.status == "borrowed") { %>
<td><span class="badge text-bg-info"><%= user.status %></span></td>
<% } %>
<td>
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#itemModifyModal" onclick="primeEdit(); getDataForEdit('<%= user.id %>')">
<i class="bi bi-pencil"></i>
</button>
<button class="btn btn-danger" onclick="preFillDeleteModalNxt('<%= user.id %>','items','Item')" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
<i class="bi bi-trash"></i>
</button>
</td>
</tr>
<% }) %>
</tbody>
</table>
<br />
<% if(it.maxPages > 1) { %>
<nav aria-label="Page selector">
<ul class="pagination justify-content-center">
<li class="page-item <%= it.currentPage-1 < 1 ? 'disabled' : ''%>"><a class="page-link" href="?page=<%= it.currentPage - 1 %>">Previous</a></li>
<% for (var i = 1; i <= it.maxPages; i++) { %>
<li class="page-item <%= it.currentPage == i ? 'active' : ''%>"><a class="page-link" href="?page=<%= i %>"><%= i %></a></li>
<% } %>
<li class="page-item <%= it.currentPage+1 > it.maxPages ? 'disabled' : ''%>"><a class="page-link" href="?page=<%= it.currentPage + 1 %>">Next</a></li>
</ul>
</nav>
<% } %>
</div>
<script src="/js/editItems.js"></script>
<script src="/js/itemPageHandler.js"></script>
<%~ E.includeFile("partials/controlsFoot.eta.html") %> <%~ E.includeFile("partials/foot.eta.html") %>

View File

@ -6,6 +6,17 @@
<script src="/js/handleSidebarTriangles.js"></script>
<script src="/js/formHandler.js"></script>
<script>
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
</script>
function activateTooltips(){
// Enable all bootstrap tooltips.
// https://getbootstrap.com/docs/5.3/components/tooltips/#enable-tooltips
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
}
function activatePopovers(){
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
}
activatePopovers();
activateTooltips();
</script>

View File

@ -1,8 +1,2 @@
<script>
// Enable all bootstrap tooltips.
// https://getbootstrap.com/docs/5.3/components/tooltips/#enable-tooltips
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
</script>
</body>
</html>

View File

@ -8,7 +8,6 @@
<title>AssetFlow - <%= it.title %></title>
<meta name="author" content="[Project-Name-Here]" />
<!--<link rel="icon" href="/favicon.ico" />-->
<link rel="icon" href="/logo/Design_icon.svg" type="image/svg+xml" />
<script src="/js/handleColorMode.js"></script>
@ -21,7 +20,8 @@
<script src="/static/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/static/@popperjs/core/dist/umd/popper.min.js"></script>
<script src="/static/tsparticles-confetti/tsparticles.confetti.bundle.min.js"></script>
<link rel="stylesheet" href="/static/bootstrap-table/dist/bootstrap-table.min.css">
<script src="/static/bootstrap-table/dist/bootstrap-table.min.js"></script>
</head>
<body>
<!-- The body and html tag need to be left open! -->