NonInventPurchasingSystem/CPRNIMS.WebApps/Views/Components/PRMgmt/PRTabbedTable/DeletedPR.cshtml

163 lines
6.6 KiB
Plaintext

<div class="tab-content-wrapper">
<div class="d-flex flex-wrap gap-2 mb-2">
<div class="search-wrapper" style="min-width:180px; 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 pr-search-clear"
data-target="#srchPRNo" title="Clear">✕</span>
</div>
</div>
<div class="search-wrapper" style="min-width:220px; 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 pr-search-clear"
data-target="#srchItem" title="Clear">✕</span>
</div>
</div>
<div class="search-wrapper" style="min-width:180px; 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 pr-search-clear"
data-target="#srchDept" title="Clear">✕</span>
</div>
</div>
</div>
<table id="DeletedPRTable" class="row-border" cellspacing="0" width="100%">
<thead>
<tr>
<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>
<th>Remarks</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script>
$(document).ready(function () {
const reportTitle = `Deleted Purchase Request - as of ${getFormattedDateTime()}`;
var deletedPRTable = $('#DeletedPRTable').DataTable({
serverSide: true,
processing: true,
searching: false,
ajax: {
url: endpoint.GetDeletedPR,
type: 'GET',
data: function (d) {
return {
draw: d.draw,
searchPRNo: ($('#srchPRNo').val() || '').trim(),
searchItemName:($('#srchItem').val()|| '').trim(),
searchDept: ($('#srchDept').val() || '').trim(),
pageNumber: Math.floor(d.start / d.length) + 1,
pageSize: d.length
};
},
dataSrc: function (json) { return json.data; },
beforeSend: function () { loader.show(); },
complete: function () { loader.hide(); },
error: function (xhr, error) {
loader.hide();
console.error('Error loading data:', error);
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.GetDeletedPR, loader, reportTitle, colOnDeletedPR); }
},
{
text: '<i class="fas fa-file-excel"></i> Excel',
className: 'btn btn-sm btn-success',
action: function () { exportAllData('excel', endpoint.GetDeletedPR, loader, reportTitle, colOnDeletedPR); }
},
{
text: '<i class="fas fa-file-pdf"></i> PDF',
className: 'btn btn-sm btn-danger',
action: function () { exportAllData('pdf', endpoint.GetDeletedPR, loader, reportTitle, colOnDeletedPR); }
}
],
columns: colOnDeletedPR,
rowCallback: rowStatusColorCallback,
responsive: true,
language: {
emptyTable: "No record available",
processing: "Loading…"
},
error: errorHandler
});
function debounce(fn, delay) {
let t;
return function (...args) {
clearTimeout(t);
t = setTimeout(() => fn.apply(this, args), delay);
};
}
$('#srchPRNo, #srchItem, #srchDept')
.on('keyup', debounce(() => deletedPRTable.ajax.reload(), 400));
$('.pr-search-clear').on('click', function () {
const target = $(this).data('target');
$(target).val('');
deletedPRTable.ajax.reload();
});
});
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>