189 lines
7.8 KiB
Plaintext
189 lines
7.8 KiB
Plaintext
<div class="tab-content-wrapper">
|
|
<div class="d-flex flex-wrap gap-2 mb-2">
|
|
|
|
<!-- Status dropdown -->
|
|
<div class="search-wrapper" style="min-width:170px; flex:1;">
|
|
<div class="search-inner" style="padding-right:4px;">
|
|
<span class="search-icon">
|
|
<svg width="14" height="14" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor" stroke-width="2.5">
|
|
<path d="M3 6h18M7 12h10M11 18h2" />
|
|
</svg>
|
|
</span>
|
|
<select id="srchStatus" class="search-input" style="cursor:pointer;">
|
|
<option value="">All Statuses</option>
|
|
<!-- populated dynamically from first API response -->
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PR No -->
|
|
<div class="search-wrapper" style="min-width:150px; flex:1;">
|
|
<div class="search-inner">
|
|
<span class="search-icon">
|
|
<svg width="14" height="14" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor" stroke-width="2.5">
|
|
<circle cx="11" cy="11" r="8" />
|
|
<path d="m21 21-4.35-4.35" />
|
|
</svg>
|
|
</span>
|
|
<input id="srchPRNo" class="search-input"
|
|
placeholder="PR Number…" autocomplete="off" />
|
|
<span class="search-clear aprv-search-clear"
|
|
data-target="#srchPRNo" title="Clear">✕</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item Name -->
|
|
<div class="search-wrapper" style="min-width:200px; flex:2;">
|
|
<div class="search-inner">
|
|
<span class="search-icon">
|
|
<svg width="14" height="14" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor" stroke-width="2.5">
|
|
<circle cx="11" cy="11" r="8" />
|
|
<path d="m21 21-4.35-4.35" />
|
|
</svg>
|
|
</span>
|
|
<input id="srchItem" class="search-input"
|
|
placeholder="Item Name…" autocomplete="off" />
|
|
<span class="search-clear aprv-search-clear"
|
|
data-target="#srchItem" title="Clear">✕</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Department -->
|
|
<div class="search-wrapper" style="min-width:170px; flex:1;">
|
|
<div class="search-inner">
|
|
<span class="search-icon">
|
|
<svg width="14" height="14" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor" stroke-width="2.5">
|
|
<circle cx="11" cy="11" r="8" />
|
|
<path d="m21 21-4.35-4.35" />
|
|
</svg>
|
|
</span>
|
|
<input id="srchDept" class="search-input"
|
|
placeholder="Department…" autocomplete="off" />
|
|
<span class="search-clear aprv-search-clear"
|
|
data-target="#srchDept" title="Clear">✕</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<table id="ApprovedPRTable" class="row-border" cellspacing="0" width="100%">
|
|
<thead>
|
|
<tr>
|
|
<th>Status</th>
|
|
<th>Remaining Days</th>
|
|
<th>PRNo</th>
|
|
<th>ItemNo</th>
|
|
<th>ItemName</th>
|
|
<th>Qty</th>
|
|
<th>PR By</th>
|
|
<th>PR Date</th>
|
|
<th>Attested By</th>
|
|
<th>Attested Date</th>
|
|
<th>Approved By</th>
|
|
<th>Approved Date</th>
|
|
<th>Charge To</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<script>
|
|
$(document).ready(function () {
|
|
const reportTitle = `Approved Purchase Request (No PO) - as of ${getFormattedDateTime()}`;
|
|
|
|
var approvedPRTable = $('#ApprovedPRTable').DataTable({
|
|
serverSide: true,
|
|
processing: true,
|
|
searching: false,
|
|
ajax: {
|
|
url: endpoint.GetApprovedPR,
|
|
type: 'GET',
|
|
data: function (d) {
|
|
return {
|
|
draw: d.draw,
|
|
searchPRNo: ($('#srchPRNo').val() || '').trim(),
|
|
searchItemName: ($('#srchItem').val() || '').trim(),
|
|
searchDept: ($('#srchDept').val() || '').trim(),
|
|
searchStatusName: ($('#srchStatus').val() || '').trim(),
|
|
pageNumber: Math.floor(d.start / d.length) + 1,
|
|
pageSize: d.length
|
|
};
|
|
},
|
|
dataSrc: function (json) {
|
|
const $sel = $('#srchStatus');
|
|
if ($sel.find('option').length <= 1 && json.statusList?.length) {
|
|
json.statusList.forEach(function (s) {
|
|
$sel.append(`<option value="${s}">${s}</option>`);
|
|
});
|
|
}
|
|
return json.data;
|
|
},
|
|
beforeSend: function () { loader.show(); },
|
|
complete: function () { loader.hide(); },
|
|
error: function (xhr, error) {
|
|
loader.hide();
|
|
if (typeof toastr !== 'undefined')
|
|
toastr.error('Failed to load data. Please try again.');
|
|
}
|
|
},
|
|
dom: 'lBfrtip',
|
|
buttons: [
|
|
{
|
|
text: '<i class="fas fa-file-csv"></i> CSV',
|
|
className: 'btn btn-sm btn-secondary',
|
|
action: function () { exportAllData('csv', endpoint.GetApprovedPR, loader, reportTitle, colOnApprovedPR); }
|
|
},
|
|
{
|
|
text: '<i class="fas fa-file-excel"></i> Excel',
|
|
className: 'btn btn-sm btn-success',
|
|
action: function () { exportAllData('excel', endpoint.GetApprovedPR, loader, reportTitle, colOnApprovedPR); }
|
|
},
|
|
{
|
|
text: '<i class="fas fa-file-pdf"></i> PDF',
|
|
className: 'btn btn-sm btn-danger',
|
|
action: function () { exportAllData('pdf', endpoint.GetApprovedPR, loader, reportTitle, colOnApprovedPR); }
|
|
}
|
|
],
|
|
columns: colOnApprovedPR,
|
|
order: [[11, 'asc']],
|
|
responsive: true,
|
|
language: { emptyTable: "No approved records available" }
|
|
});
|
|
|
|
function debounce(fn, delay) {
|
|
let t;
|
|
return function (...args) {
|
|
clearTimeout(t);
|
|
t = setTimeout(() => fn.apply(this, args), delay);
|
|
};
|
|
}
|
|
|
|
$('#srchPRNo, #srchItem, #srchDept')
|
|
.on('keyup', debounce(() => approvedPRTable.ajax.reload(), 400));
|
|
|
|
$('#srchStatus').on('change', function () {
|
|
approvedPRTable.ajax.reload();
|
|
});
|
|
|
|
$('.aprv-search-clear').on('click', function () {
|
|
$($(this).data('target')).val('').trigger('change');
|
|
});
|
|
});
|
|
function formatStrDateTime(dateString) {
|
|
if (!dateString || dateString === "None") return "None";
|
|
|
|
let date = new Date(dateString);
|
|
let month = ('0' + (date.getMonth() + 1)).slice(-2);
|
|
let day = ('0' + date.getDate()).slice(-2);
|
|
let year = date.getFullYear();
|
|
let hours = ('0' + date.getHours()).slice(-2);
|
|
let minutes = ('0' + date.getMinutes()).slice(-2);
|
|
let seconds = ('0' + date.getSeconds()).slice(-2);
|
|
return `${month}/${day}/${year} ${hours}:${minutes}:${seconds}`;
|
|
}
|
|
</script> |