135 lines
6.5 KiB
HTML
135 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml"
|
|
xmlns:uind="http://www.w3.org/1999/xhtml" xmlns:ctp="http://www.w3.org/1999/xhtml">
|
|
<head th:replace="_fragments :: head('Stitching Inventory Accounts')"></head>
|
|
<body>
|
|
<div class="container-fluid">
|
|
<header class="row page-header" th:replace="_fragments :: page-header"></header>
|
|
<main class="row page-main">
|
|
<!-- sidebar starts -->
|
|
<aside class="col-sm-2" th:replace="/cutting/_cutting-inventory-account-sidebar :: sidebar"></aside>
|
|
<!-- sidebar ends -->
|
|
<!--header starts-->
|
|
<div class="col-sm">
|
|
<div th:replace="_notices :: page-notices"></div>
|
|
<div class="mb-4 d-flex justify-content-between">
|
|
<h3>Stitching Inventory Accounts</h3>
|
|
</div>
|
|
<div th:replace="_fragments :: table-loading-skeleton"></div>
|
|
<table class="table table-striped" data-account-table data-order="[[ 0, "asc" ]]">
|
|
<thead>
|
|
<tr>
|
|
<th></th>
|
|
<th></th>
|
|
<th>ID</th>
|
|
<th>Title</th>
|
|
<th>Parent Type</th>
|
|
<th>Active</th>
|
|
<th>Created By</th>
|
|
<th>Created At</th>
|
|
<th>Location</th>
|
|
<th>Note</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr th:each="account : ${accounts}" th:object="${account}">
|
|
<td data-show-dropdown-transactions
|
|
th:data-account-id="${account.id}" title="Transactions">
|
|
<span data-dropdown-icon-transactions class="bi bi-caret-right-fill"></span>
|
|
</td>
|
|
<td data-show-dropdown-summary
|
|
th:data-account-id="${account.id}" title="Summary">
|
|
<span data-dropdown-icon-summary class="bi bi-caret-right"></span>
|
|
</td>
|
|
<td th:text="*{id}"></td>
|
|
<td th:text="*{title}"></td>
|
|
<td th:text="*{parentEntityType}"></td>
|
|
<td>
|
|
<span class="badge badge-ACTIVE" th:if="*{active}">ACTIVE</span>
|
|
<span class="badge badge-danger" th:unless="*{active}" >INACTIVE</span>
|
|
</td>
|
|
<td th:text="*{createdBy}"></td>
|
|
<td ctp:formatdatetime="*{createdAt}"></td>
|
|
<td >
|
|
<th:block th:switch="*{locationSiteId}">
|
|
<span th:each="location: ${locations}" th:case="${location.id}" th:text="${location.title}"></span>
|
|
</th:block>
|
|
</td>
|
|
<td class="font-italic" th:text="*{notes}"></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<div th:replace="_fragments :: page-footer-scripts"></div>
|
|
<script>
|
|
const $body = $( 'body' );
|
|
// custom data table config
|
|
const dataTableConfig = {
|
|
pageLength: 100,
|
|
searching: true,
|
|
lengthChange: false,
|
|
processing: false,
|
|
dom: `
|
|
<'row'<'col-sm-5'B><'col-sm-7'f>>
|
|
<'row'<'col-sm-12't>>
|
|
<'row'<'col-sm-5'i><'col-sm-7'p>>`,
|
|
buttons: [{
|
|
extend: 'excel',
|
|
text: '',
|
|
className: 'bi bi-file-earmark-spreadsheet btn-sm'
|
|
}]
|
|
|
|
}
|
|
const accTable = $( '[data-account-table]' ).DataTable( dataTableConfig );
|
|
|
|
// handle click on dropdown
|
|
$body.on( 'click', '[data-show-dropdown-transactions]', function( e ) {
|
|
e.preventDefault();
|
|
const $this = $( this );
|
|
const $tr = $this.closest( 'tr' );
|
|
const $row = accTable.row( $tr );
|
|
const $spanDropdown = $tr.find( '[data-dropdown-icon-transactions]' );
|
|
const accountId= $this.data( 'account-id' );
|
|
$spanDropdown.toggleClass( 'bi-caret-right-fill bi-caret-down-fill' );
|
|
if( $row.child.isShown() ){
|
|
$row.child.hide();
|
|
}
|
|
else {
|
|
$row.child(`<span class="spinner-border text-center spinner-border-md" role="status"></span>`).show();
|
|
$.ajax({
|
|
url: `/ctp/inventory-transactions?account-id=${accountId}`,
|
|
success: function( data ){
|
|
// show fetched page
|
|
$row.child( data ).show();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
$body.on( 'click', '[data-show-dropdown-summary]', function( e ) {
|
|
e.preventDefault();
|
|
const $this = $( this );
|
|
const $tr = $this.closest( 'tr' );
|
|
const $row = accTable.row( $tr );
|
|
const $spanDropdown = $tr.find( '[data-dropdown-icon-summary]' );
|
|
const accountId= $this.data( 'account-id' );
|
|
$spanDropdown.toggleClass( 'bi-caret-right bi-caret-down' );
|
|
if( $row.child.isShown() ){
|
|
$row.child.hide();
|
|
}
|
|
else {
|
|
$row.child(`<span class="spinner-border text-center spinner-border-md" role="status"></span>`).show();
|
|
$.ajax({
|
|
url: `/ctp/inventory-summary?account-id=${accountId}`,
|
|
success: function( data ){
|
|
// show fetched page
|
|
$row.child( data ).show();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |