cut-to-pack-service/src/main/resources/templates/reporting/po-report.html

210 lines
10 KiB
HTML

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml"
xmlns:ctp="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head('PO Report')"></head>
<body>
<div class="container-fluid">
<header class="row page-header" th:replace="_fragments :: page-header"></header>
<main class="row page-main">
<aside class="col-sm-2" th:replace="/reporting/po-report-sidebar :: sidebar"></aside>
<div class="col-lg-10 col-sm-10">
<h3>All PO's </h3>
<table th:if="${ #lists != null && #lists.size(allPOs) != 0 }" class="table table-striped font-sm"
data-order="[[ 0, &quot;asc&quot; ]]">
<thead>
<tr>
<th>PO Number</th>
<th>PO Article</th>
<th>PO Quantity</th>
<th>Req+ Excess</th>
<th>Cutting</th>
<th>Cutting Balance</th>
<th>Stitching</th>
<th>Stitching Balance</th>
<th>End Line QC</th>
<th>End Line QC Balance</th>
<th>Finishing Items</th>
<th>Finishing Items Balance</th>
<th>A Grade Items</th>
<th>Reject Items In Store</th>
<th></th>
<th>PO Status</th>
<th>Generate PDF</th>
</tr>
</thead>
<tbody>
<!-- Dummy data for testing purposes -->
<tr th:each="poDetail : ${allPOs}">
<td><a class="text-reset" th:href="@{'/po-status/po-report-view/' + ${poDetail.poId}}"
th:text="${poDetail.poNumber}"></a></td>
<td th:text="${poDetail.articleTitle}"></td>
<td th:text="${poDetail.poQuantity}"></td>
<td th:text="${poDetail.poRequiredQuantity}"></td>
<td th:text="${poDetail.totalCutting}"></td>
<td th:text="${poDetail.remainingCutting}"></td>
<td th:text="${poDetail.totalStitching}"></td>
<td th:text="${poDetail.remainingStitching}"></td>
<td th:text="${poDetail.totalEndLineQC}"></td>
<td th:text="${poDetail.remainingEndLineQC}"></td>
<td th:text="${poDetail.totalFinishing}"></td>
<td th:text="${poDetail.remainingFinishing}"></td>
<td th:text="${poDetail.totalAGradeItem}"></td>
<td th:text="${poDetail.totalBGradeItem}"></td>
<td data-show-dropdown-transactions
th:data-po-id="${poDetail.poId}"
title="Store-Items">
<span data-dropdown-icon-transactions class="bi bi-caret-right-fill"></span>
</td>
<td>
<span class="badge font-sm badge-danger" th:if="*{poDetail.poStatus}" th:text="'CLOSE'"></span>
<span class="badge font-sm badge-ACTIVE" th:if="*{!poDetail.poStatus}" th:text="'OPEN'"></span>
</td>
<td>
<form th:action="@{/po-status/generate-po-pdf}" method="get" target="_blank"
th:id="'form-' + ${poDetail.poId}">
<!-- Hidden inputs for all fields -->
<input type="hidden" name="poId" th:value="${poDetail.poId}"/>
<input type="hidden" name="poNumber" th:value="${poDetail.poNumber}"/>
<input type="hidden" name="articleTitle" th:value="${poDetail.articleTitle}"/>
<input type="hidden" name="poQuantity" th:value="${poDetail.poQuantity}"/>
<input type="hidden" name="poRequiredQuantity" th:value="${poDetail.poRequiredQuantity}"/>
<input type="hidden" name="totalCutting" th:value="${poDetail.totalCutting}"/>
<input type="hidden" name="remainingCutting" th:value="${poDetail.remainingCutting}"/>
<input type="hidden" name="totalStitching" th:value="${poDetail.totalStitching}"/>
<input type="hidden" name="remainingStitching" th:value="${poDetail.remainingStitching}"/>
<input type="hidden" name="totalEndLineQC" th:value="${poDetail.totalEndLineQC}"/>
<input type="hidden" name="remainingEndLineQC" th:value="${poDetail.remainingEndLineQC}"/>
<input type="hidden" name="totalFinishing" th:value="${poDetail.totalFinishing}"/>
<input type="hidden" name="remainingFinishing" th:value="${poDetail.remainingFinishing}"/>
<input type="hidden" name="totalAGradeItem" th:value="${poDetail.totalAGradeItem}"/>
<input type="hidden" name="totalBGradeItem" th:value="${poDetail.totalBGradeItem}"/>
<input type="hidden" name="poStatus" th:value="${poDetail.poStatus}"/>
<a href="javascript:void(0);"
th:onclick="'showPdfOptions(' + ${poDetail.poId} + ')'"
class="btn btn-sm btn-secondary"
title="Generate PDF">
<i class="bi bi-filetype-pdf"></i>
</a>
</form>
</td>
</tr>
</tbody>
</table>
<h4 th:if="${#lists.size(allPOs) == 0 }">No PO found.</h4>
</div>
<div class="modal fade" id="pdfOptionsModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Select PDF Options</h5>
</div>
<div class="modal-body">
<!-- <div class="form-check">-->
<!-- <input class="form-check-input" type="checkbox" id="includeJobCard" name="includeJobCard" value="true" checked>-->
<!-- <label class="form-check-label" for="includeJobCard">-->
<!-- Include Job Card Details-->
<!-- </label>-->
<!-- </div>-->
<div class="form-check">
<input class="form-check-input" type="checkbox" id="includeStoreDetails" name="includeStoreDetails" value="true" checked>
<label class="form-check-label" for="includeStoreDetails">
Include Store Details
</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="submitPdfForm()">Generate PDF</button>
</div>
</div>
</div>
</div>
</main>
</div>
<div th:replace="_fragments :: page-footer-scripts"></div>
<script>
// PDF Generation Functions
let currentPoIdForPdf = null;
function showPdfOptions(poId) {
currentPoIdForPdf = poId;
$('#pdfOptionsModal').modal('show');
}
function submitPdfForm() {
if (!currentPoIdForPdf) return;
const form = document.getElementById('form-' + currentPoIdForPdf);
// Remove existing options if they exist
const existingJobCard = form.querySelector('input[name="includeJobCard"]');
const existingStoreDetails = form.querySelector('input[name="includeStoreDetails"]');
if (existingJobCard) form.removeChild(existingJobCard);
if (existingStoreDetails) form.removeChild(existingStoreDetails);
// Add params to show store details in pdf
const includeStoreDetails = document.createElement('input');
includeStoreDetails.type = 'hidden';
includeStoreDetails.name = 'includeStoreDetails';
includeStoreDetails.value = document.getElementById('includeStoreDetails').checked;
form.appendChild(includeStoreDetails);
form.submit();
$('#pdfOptionsModal').modal('hide');
}
// DataTable and Dropdown Initialization
$(document).ready(function() {
const $body = $('body');
// Initialize DataTables for each individual table
$('table[data-account-table]').each(function () {
$(this).DataTable({
paging: false,
pageLength: 100,
searching: false,
lengthChange: false,
processing: false,
dom: `
<'row'<'col-sm-3'B><'col-sm-4'f>>
<'row'<'col-sm-6't>>
<'row'<'col-sm-3'i><'col-sm-4'p>>`,
buttons: [{
extend: 'excel',
text: '',
className: 'bi bi-file-earmark-spreadsheet btn-sm d-none'
}]
});
});
// Dropdown transactions toggle
$body.on('click', '[data-show-dropdown-transactions]', function (e) {
e.preventDefault();
const $this = $(this);
const $tr = $this.closest('tr');
const $table = $this.closest('table');
const dataTable = $table.DataTable();
const $row = dataTable.row($tr);
const $spanDropdown = $this.find('[data-dropdown-icon-transactions]');
const poId = $this.data('po-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/purchase-order/store-items/${poId}`,
success: function (data) {
$row.child(data).show();
}
});
}
});
});
</script>
</body>
</html>