fix: [approval] 완료함 확인 상태 컬럼 추가 및 개별 읽음 처리로 변경
- 일괄 읽음 처리 제거 → 상세 페이지 열람 시에만 개별 읽음 처리 - 확인 컬럼 추가: 확인전(주황) / 확인(회색) 뱃지 표시 - 미확인 행 배경 하이라이트(주황) + 제목 볼드 처리 - 기안자 본인 문서만 확인 상태 표시, 타인 문서는 - 표시
This commit is contained in:
@@ -37,22 +37,16 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none foc
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
const currentUserId = {{ auth()->id() }};
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
loadCompleted();
|
||||
markCompletedAsRead();
|
||||
document.getElementById('filterForm').addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
loadCompleted();
|
||||
});
|
||||
});
|
||||
|
||||
function markCompletedAsRead() {
|
||||
fetch('/api/admin/approvals/mark-completed-read', {
|
||||
method: 'POST',
|
||||
headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
|
||||
}).catch(() => {});
|
||||
}
|
||||
|
||||
function loadCompleted(page = 1) {
|
||||
const form = document.getElementById('filterForm');
|
||||
const params = new URLSearchParams(new FormData(form));
|
||||
@@ -88,6 +82,15 @@ function renderTable(items, pagination) {
|
||||
return map[status] || status;
|
||||
};
|
||||
|
||||
const confirmBadge = (item) => {
|
||||
const isMyDraft = item.drafter_id === currentUserId;
|
||||
if (!isMyDraft) return '<span class="text-xs text-gray-400">-</span>';
|
||||
if (item.drafter_read_at) {
|
||||
return '<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-500">확인</span>';
|
||||
}
|
||||
return '<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-700 animate-pulse">확인전</span>';
|
||||
};
|
||||
|
||||
let html = `<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
@@ -96,6 +99,7 @@ function renderTable(items, pagination) {
|
||||
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">제목</th>
|
||||
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">기안자</th>
|
||||
<th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">상태</th>
|
||||
<th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">확인</th>
|
||||
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">완료일</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@@ -103,12 +107,15 @@ function renderTable(items, pagination) {
|
||||
|
||||
items.forEach(item => {
|
||||
const completedAt = item.completed_at ? new Date(item.completed_at).toLocaleDateString('ko-KR') : '-';
|
||||
const isUnread = item.drafter_id === currentUserId && !item.drafter_read_at;
|
||||
const rowBg = isUnread ? 'bg-amber-50 hover:bg-amber-100' : 'hover:bg-gray-50';
|
||||
|
||||
html += `<tr class="hover:bg-gray-50 cursor-pointer" onclick="location.href='/approval-mgmt/${item.id}'">
|
||||
html += `<tr class="${rowBg} cursor-pointer" onclick="location.href='/approval-mgmt/${item.id}'">
|
||||
<td class="px-4 py-3 text-sm text-gray-600 whitespace-nowrap">${item.document_number || '-'}</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-800 font-medium">${item.title || '-'}</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-800 font-medium">${isUnread ? '<span class="font-bold">' + (item.title || '-') + '</span>' : (item.title || '-')}</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-600">${item.drafter?.name || '-'}</td>
|
||||
<td class="px-4 py-3 text-center">${statusBadge(item.status)}</td>
|
||||
<td class="px-4 py-3 text-center">${confirmBadge(item)}</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500 whitespace-nowrap">${completedAt}</td>
|
||||
</tr>`;
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user