fix: [approval] 완료함 확인 상태 컬럼 추가 및 개별 읽음 처리로 변경

- 일괄 읽음 처리 제거 → 상세 페이지 열람 시에만 개별 읽음 처리
- 확인 컬럼 추가: 확인전(주황) / 확인(회색) 뱃지 표시
- 미확인 행 배경 하이라이트(주황) + 제목 볼드 처리
- 기안자 본인 문서만 확인 상태 표시, 타인 문서는 - 표시
This commit is contained in:
김보곤
2026-03-05 12:53:36 +09:00
parent 280367170a
commit 61e77346de

View File

@@ -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>`;
});