DungTT/ManagerAccount
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixx v1

Browse Source
This commit is contained in:
Tran Tien Dung
2026-05-15 09:56:33 +07:00
parent 927317a87e
commit 4aa4ac0d57
4 changed files with 950 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

252
public/js/app.js
View File

@@ -1477,6 +1477,12 @@ class AccountManager {
return rows.filter(item => {
const requestType = this.normalizeAssetRequestType(item.RequestType);
const requestStatus = this.normalizeAssetRequestStatus(item.RequestStatus);
const relatedReturnCount = this.parseNonNegativeInteger(item?.RelatedReturnCount, 0);
if (requestType === 'borrow' && (requestStatus === 'returned' || relatedReturnCount > 0 || this.hasActiveReturnForBorrowRequest(item, rows))) {
return false;
}
const matchesType = !typeFilter || requestType === typeFilter;
if (!matchesType) {
return false;
@@ -1491,9 +1497,11 @@ class AccountManager {
item.AssetCode,
item.AssetName,
this.getAssetRequestTypeMeta(item.RequestType).label,
this.getAssetRequestStatusMeta(item.RequestStatus).label,
this.getAssetRequestStatusMeta(item.RequestStatus, item).label,
item.Unit,
item.BorrowQuantity,
item.ReturnedQuantity,
item.RemainingQuantity,
item.BorrowDate,
item.RequestNote,
item.RejectReason
@@ -1503,6 +1511,56 @@ class AccountManager {
});
}
hasActiveReturnForBorrowRequest(borrowRequest, rows = []) {
const assetId = Number(borrowRequest?.AssetId);
const borrowerName = String(borrowRequest?.BorrowerName || '').trim().toLowerCase();
const createdBy = Number(borrowRequest?.CreatedBy);
const borrowDate = new Date(borrowRequest?.BorrowDate || 0);
const borrowTime = Number.isNaN(borrowDate.getTime()) ? null : borrowDate.getTime();
if (!Number.isFinite(assetId) || assetId <= 0) {
return false;
}
return (Array.isArray(rows) ? rows : []).some(candidate => {
if (!candidate || candidate === borrowRequest) {
return false;
}
if (this.normalizeAssetRequestType(candidate?.RequestType) !== 'return') {
return false;
}
const status = this.normalizeAssetRequestStatus(candidate?.RequestStatus);
if (status !== 'pending' && status !== 'approved') {
return false;
}
if (Number(candidate?.AssetId) !== assetId) {
return false;
}
const candidateCreatedBy = Number(candidate?.CreatedBy);
const sameCreator = Number.isFinite(createdBy)
&& Number.isFinite(candidateCreatedBy)
&& createdBy === candidateCreatedBy;
const sameBorrower = borrowerName
&& String(candidate?.BorrowerName || '').trim().toLowerCase() === borrowerName;
if (!sameCreator && !sameBorrower) {
return false;
}
if (borrowTime === null) {
return true;
}
const returnDate = new Date(candidate?.BorrowDate || 0);
const returnTime = Number.isNaN(returnDate.getTime()) ? null : returnDate.getTime();
return returnTime === null || returnTime >= borrowTime;
});
}
syncSelectedAssetIds() {
if (!(this.selectedAssetIds instanceof Set)) {
this.selectedAssetIds = new Set();
@@ -1919,6 +1977,7 @@ class AccountManager {
normalizeAssetRequestStatus(value) {
const normalized = String(value || '').trim().toLowerCase();
if (normalized === 'approved') return 'approved';
if (normalized === 'returned') return 'returned';
if (normalized === 'rejected') return 'rejected';
return 'pending';
}
@@ -1940,12 +1999,23 @@ class AccountManager {
};
}
getAssetRequestStatusMeta(value) {
getAssetRequestStatusMeta(value, item = null) {
const status = this.normalizeAssetRequestStatus(value);
const requestType = item ? this.normalizeAssetRequestType(item?.RequestType) : '';
const borrowQuantity = this.parseNonNegativeInteger(item?.BorrowQuantity, 0);
const returnedQuantity = this.parseNonNegativeInteger(item?.ReturnedQuantity, 0);
if (status === 'returned' || (requestType === 'borrow' && status === 'approved' && borrowQuantity > 0 && returnedQuantity >= borrowQuantity)) {
return {
value: 'returned',
label: 'Đã trả',
className: 'bg-slate-100 text-slate-700 border border-slate-200'
};
}
if (status === 'approved') {
return {
value: 'approved',
label: 'Chấp nhận',
label: requestType === 'borrow' ? 'Đang mượn' : (requestType === 'return' ? 'Đã trả' : 'Chấp nhận'),
className: 'bg-green-100 text-green-700 border border-green-200'
};
}
@@ -2939,11 +3009,28 @@ class AccountManager {
const assetName = item.AssetName || '-';
const assetCode = item.AssetCode ? `<div class="text-[11px] text-slate-500">${this.escapeHtml(item.AssetCode)}</div>` : '';
const typeMeta = this.getAssetRequestTypeMeta(item.RequestType);
const statusMeta = this.getAssetRequestStatusMeta(item.RequestStatus);
const statusMeta = this.getAssetRequestStatusMeta(item.RequestStatus, item);
const note = String(item?.RequestNote || '').trim();
const rejectReason = String(item?.RejectReason || '').trim();
const canCancel = this.canCurrentUserCancelAssetRequest(item);
const requestId = Number(item?.BorrowId) || 0;
const requestType = this.normalizeAssetRequestType(item?.RequestType);
const returnedQuantity = this.parseNonNegativeInteger(item?.ReturnedQuantity, 0);
const borrowQuantity = this.parseNonNegativeInteger(item?.BorrowQuantity, 0);
const remainingQuantity = this.parseNonNegativeInteger(item?.RemainingQuantity, Math.max(borrowQuantity - returnedQuantity, 0));
const returnProgressHtml = requestType === 'borrow' && returnedQuantity > 0 && statusMeta.value !== 'returned'
? `<div class="mt-1 text-[11px] text-slate-500 whitespace-nowrap">Đã trả ${returnedQuantity}/${borrowQuantity}, còn ${remainingQuantity}</div>`
: '';
const detailActionHtml = `
<button
class="asset-borrow-detail-btn inline-flex h-8 w-8 items-center justify-center rounded-md border border-slate-200 text-slate-500 hover:bg-slate-50 hover:text-primary transition-colors"
data-request-id="${requestId}"
title="Xem chi tiết"
aria-label="Xem chi tiết đơn"
>
<span class="material-symbols-outlined text-base">info</span>
</button>
`;
const cancelActionHtml = canCancel
? `<button class="asset-borrow-cancel-btn px-3 py-1.5 rounded-md bg-red-600 hover:bg-red-700 text-white text-xs font-bold whitespace-nowrap" data-request-id="${requestId}">Hủy đơn</button>`
: `<span class="text-xs text-slate-400">-</span>`;
@@ -2956,17 +3043,19 @@ class AccountManager {
<div>${this.escapeHtml(assetName)}</div>
${assetCode}
</td>
<td class="px-4 py-3 text-sm text-slate-600">
<span class="inline-flex items-center px-2 py-1 rounded-md text-xs font-bold ${typeMeta.className}">${typeMeta.label}</span>
<td class="px-4 py-3 text-sm text-slate-600 whitespace-nowrap">
<span class="inline-flex items-center px-2 py-1 rounded-md text-xs font-bold whitespace-nowrap ${typeMeta.className}">${typeMeta.label}</span>
</td>
<td class="px-4 py-3 text-sm text-slate-600">
<span class="inline-flex items-center px-2 py-1 rounded-md text-xs font-bold ${statusMeta.className}">${statusMeta.label}</span>
${returnProgressHtml}
</td>
<td class="px-4 py-3 text-sm text-slate-600">${this.escapeHtml(item.Unit || '-')}</td>
<td class="px-4 py-3 text-sm text-slate-600">${Number(item.BorrowQuantity) || 0}</td>
<td class="px-4 py-3 text-sm text-slate-600 whitespace-nowrap">${this.formatDateOnly(item.BorrowDate)}</td>
<td class="px-4 py-3 text-sm text-slate-600 max-w-xs">${this.escapeHtml(note || '-')}</td>
<td class="px-4 py-3 text-sm text-slate-600 max-w-xs">${this.escapeHtml(rejectReason || '-')}</td>
<td class="px-4 py-3 text-sm text-slate-600 text-center">${detailActionHtml}</td>
<td class="px-4 py-3 text-sm text-slate-600">${cancelActionHtml}</td>
</tr>
`;
@@ -2993,7 +3082,7 @@ class AccountManager {
buildAssetBorrowEmptyRowHtml() {
return `
<tr>
<td colspan="11" class="px-4 py-8 text-sm text-center text-slate-500">Chưa có đơn mượn/trả tài sản nào.</td>
<td colspan="12" class="px-4 py-8 text-sm text-center text-slate-500">Chưa có đơn mượn/trả tài sản nào.</td>
</tr>
`;
}
@@ -3058,7 +3147,7 @@ class AccountManager {
<div class="flex-1 bg-white rounded-xl border border-slate-200 shadow-sm flex flex-col overflow-hidden min-h-0">
<div class="table-wrap overflow-y-auto overflow-x-auto flex-1">
<table class="w-full text-left border-collapse">
<table class="w-full text-left border-collapse" style="min-width: 1500px;">
<thead class="sticky top-0 z-10 bg-slate-50 border-b border-slate-200">
<tr>
<th class="px-4 py-2.5 text-[10px] font-bold uppercase tracking-wider text-slate-500">STT</th>
@@ -3255,13 +3344,14 @@ class AccountManager {
<th class="px-4 py-2.5 text-[10px] font-bold uppercase tracking-wider text-slate-500">STT</th>
<th class="px-4 py-2.5 text-[10px] font-bold uppercase tracking-wider text-slate-500">Tên đầy đủ</th>
<th class="px-4 py-2.5 text-[10px] font-bold uppercase tracking-wider text-slate-500">Tài sản</th>
<th class="px-4 py-2.5 text-[10px] font-bold uppercase tracking-wider text-slate-500">Danh mục</th>
<th class="px-4 py-2.5 text-[10px] font-bold uppercase tracking-wider text-slate-500 whitespace-nowrap">Danh mục</th>
<th class="px-4 py-2.5 text-[10px] font-bold uppercase tracking-wider text-slate-500">Trạng thái</th>
<th class="px-4 py-2.5 text-[10px] font-bold uppercase tracking-wider text-slate-500">Đơn vị</th>
<th class="px-4 py-2.5 text-[10px] font-bold uppercase tracking-wider text-slate-500">Số lượng</th>
<th class="px-4 py-2.5 text-[10px] font-bold uppercase tracking-wider text-slate-500">Ngày</th>
<th class="px-4 py-2.5 text-[10px] font-bold uppercase tracking-wider text-slate-500">Ghi chú</th>
<th class="px-4 py-2.5 text-[10px] font-bold uppercase tracking-wider text-slate-500">Lý do</th>
<th class="px-4 py-2.5 text-[10px] font-bold uppercase tracking-wider text-slate-500 text-center">Chi tiết</th>
<th class="px-4 py-2.5 text-[10px] font-bold uppercase tracking-wider text-slate-500">Hành động</th>
</tr>
</thead>
@@ -3304,6 +3394,134 @@ class AccountManager {
this.setupAssetBorrowPagerListeners();
this.updatePendingAssetRequestsBadge();
}
async openAssetBorrowDetailsModal(requestId) {
try {
const response = await fetch(`${this.apiBase}/asset-borrows/${requestId}/history`, {
headers: this.getAuthHeaders(false)
});
const data = await response.json();
if (!response.ok || !data.success) {
this.notifyFailure(data.message || 'Không tải được chi tiết đơn.');
return;
}
this.showAssetBorrowDetailsModal(data.data || {});
} catch (err) {
console.error(err);
this.notifyFailure('Không tải được chi tiết đơn.');
}
}
buildAssetBorrowDetailCardHtml(item) {
const typeMeta = this.getAssetRequestTypeMeta(item?.RequestType);
const statusMeta = this.getAssetRequestStatusMeta(item?.RequestStatus, item);
const requestType = this.normalizeAssetRequestType(item?.RequestType);
const dateLabel = requestType === 'return' ? 'Ngày trả' : 'Ngày mượn';
const assetName = `${item?.AssetCode ? `${item.AssetCode} - ` : ''}${item?.AssetName || '-'}`;
const note = String(item?.RequestNote || '').trim();
const rejectReason = String(item?.RejectReason || '').trim();
const returnedQuantity = this.parseNonNegativeInteger(item?.ReturnedQuantity, 0);
const borrowQuantity = this.parseNonNegativeInteger(item?.BorrowQuantity, 0);
const remainingQuantity = this.parseNonNegativeInteger(item?.RemainingQuantity, Math.max(borrowQuantity - returnedQuantity, 0));
const returnSummary = requestType === 'borrow' && returnedQuantity > 0
? `<div><span class="font-bold">Đã trả:</span> ${returnedQuantity}/${borrowQuantity}${remainingQuantity > 0 ? `, còn ${remainingQuantity}` : ''}</div>`
: '';
return `
<div class="w-full min-w-0 overflow-hidden rounded-lg border border-slate-200 bg-white p-4 text-sm text-slate-700 space-y-2 break-words">
<div class="flex flex-wrap items-center gap-2 min-w-0">
<span class="inline-flex items-center px-2 py-1 rounded-md text-xs font-bold ${typeMeta.className}">${typeMeta.label}</span>
<span class="inline-flex items-center px-2 py-1 rounded-md text-xs font-bold ${statusMeta.className}">${statusMeta.label}</span>
<span class="ml-auto text-xs font-extrabold text-slate-500">#${Number(item?.BorrowId) || '-'}</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-1 min-w-0">
<div class="min-w-0"><span class="font-bold">Người tạo:</span> ${this.escapeHtml(item?.BorrowerName || '-')}</div>
<div class="min-w-0"><span class="font-bold">${dateLabel}:</span> ${this.formatDateOnly(item?.BorrowDate)}</div>
<div class="md:col-span-2 min-w-0"><span class="font-bold">Tài sản:</span> ${this.escapeHtml(assetName)}</div>
<div class="min-w-0"><span class="font-bold">Số lượng:</span> ${Number(item?.BorrowQuantity) || 0}</div>
<div class="min-w-0"><span class="font-bold">Đơn vị:</span> ${this.escapeHtml(item?.Unit || '-')}</div>
${returnSummary}
<div class="min-w-0"><span class="font-bold">Ngày xử lý:</span> ${this.formatDateTime(item?.ProcessedDate)}</div>
<div class="min-w-0"><span class="font-bold">Người xử lý:</span> ${this.escapeHtml(item?.ProcessedByName || '-')}</div>
<div class="md:col-span-2 min-w-0"><span class="font-bold">Ghi chú:</span> ${this.escapeHtml(note || '-')}</div>
<div class="md:col-span-2 min-w-0"><span class="font-bold">Lý do:</span> ${this.escapeHtml(rejectReason || '-')}</div>
</div>
</div>
`;
}
showAssetBorrowDetailsModal(history) {
const selected = history?.request || {};
const borrowRequests = Array.isArray(history?.borrowRequests) ? history.borrowRequests : [];
const returnRequests = Array.isArray(history?.returnRequests) ? history.returnRequests : [];
const selectedTypeMeta = this.getAssetRequestTypeMeta(selected?.RequestType);
const selectedStatusMeta = this.getAssetRequestStatusMeta(selected?.RequestStatus, selected);
const assetName = `${selected?.AssetCode ? `${selected.AssetCode} - ` : ''}${selected?.AssetName || '-'}`;
const renderList = (items, emptyText) => items.length
? items.map(item => this.buildAssetBorrowDetailCardHtml(item)).join('')
: `<div class="rounded-lg border border-dashed border-slate-300 px-4 py-8 text-sm text-center text-slate-500">${emptyText}</div>`;
let container = document.getElementById('assetBorrowDetailsModalContainer');
if (!container) {
container = document.createElement('div');
container.id = 'assetBorrowDetailsModalContainer';
document.body.appendChild(container);
}
container.innerHTML = `
<div class="fixed inset-0 bg-black/40 backdrop-blur-sm modal-backdrop open" id="assetBorrowDetailsModal" style="z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;overflow:hidden;">
<div class="modal-content bg-white rounded-xl shadow-2xl border border-slate-200 overflow-hidden flex flex-col" style="position:relative;z-index:1001;width:min(1080px, calc(100vw - 32px));max-height:calc(100vh - 32px);box-sizing:border-box;">
<div class="px-6 py-4 border-b border-slate-100 flex items-center justify-between gap-3 bg-slate-50">
<div class="min-w-0">
<h3 class="text-base font-extrabold text-slate-900">Chi tiết mượn/trả tài sản</h3>
<div class="mt-1 flex flex-wrap items-center gap-2 text-xs text-slate-500 min-w-0">
<span class="font-bold text-slate-700 break-words min-w-0">${this.escapeHtml(assetName)}</span>
<span class="inline-flex items-center px-2 py-0.5 rounded ${selectedTypeMeta.className}">${selectedTypeMeta.label}</span>
<span class="inline-flex items-center px-2 py-0.5 rounded ${selectedStatusMeta.className}">${selectedStatusMeta.label}</span>
</div>
</div>
<button class="p-1.5 rounded-lg hover:bg-slate-200 text-slate-400 transition-colors" onclick="closeAssetBorrowDetailsModal()" title="Đóng">
<span class="material-symbols-outlined">close</span>
</button>
</div>
<div class="p-4 md:p-6 overflow-y-auto overflow-x-hidden bg-slate-50/60">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 min-w-0">
<section class="space-y-3 min-w-0">
<div class="flex items-center justify-between">
<h4 class="text-sm font-extrabold text-blue-700">Lịch sử đơn mượn</h4>
<span class="text-xs font-bold text-slate-500">${borrowRequests.length}</span>
</div>
${renderList(borrowRequests, 'Không tìm thấy đơn mượn liên quan.')}
</section>
<section class="space-y-3 min-w-0">
<div class="flex items-center justify-between">
<h4 class="text-sm font-extrabold text-emerald-700">Lịch sử đơn trả</h4>
<span class="text-xs font-bold text-slate-500">${returnRequests.length}</span>
</div>
${renderList(returnRequests, 'Chưa có đơn trả liên quan.')}
</section>
</div>
</div>
<div class="p-4 border-t border-slate-100 bg-white flex justify-end">
<button type="button" class="px-4 py-2 text-xs font-bold text-slate-600 border border-slate-200 rounded-lg hover:bg-slate-50" onclick="closeAssetBorrowDetailsModal()">Đóng</button>
</div>
</div>
</div>
`;
const modal = document.getElementById('assetBorrowDetailsModal');
if (modal) {
modal.addEventListener('click', event => {
if (event.target === modal) {
closeAssetBorrowDetailsModal();
}
});
}
}
setupAssetBorrowPagerListeners() {
document.querySelectorAll('.asset-borrow-page-btn').forEach(btn => {
btn.addEventListener('click', () => {
@@ -3350,6 +3568,15 @@ class AccountManager {
const tableBody = document.querySelector('.asset-borrows-table-body');
if (tableBody && tableBody.dataset.boundActions !== 'true') {
tableBody.addEventListener('click', (event) => {
const detailButton = event.target.closest('.asset-borrow-detail-btn');
if (detailButton) {
const requestId = Number(detailButton.dataset.requestId);
if (Number.isFinite(requestId) && requestId > 0) {
this.openAssetBorrowDetailsModal(requestId);
}
return;
}
const cancelButton = event.target.closest('.asset-borrow-cancel-btn');
if (!cancelButton) {
return;
@@ -7523,6 +7750,13 @@ function closeAssetPendingRequestsModal() {
}
}
function closeAssetBorrowDetailsModal() {
const modal = document.getElementById('assetBorrowDetailsModal');
if (modal) {
modal.classList.remove('open');
}
}
function closeAssetRequestRejectModal() {
const modal = document.getElementById('assetRequestRejectModal');
if (modal) {