61e77346de
- 일괄 읽음 처리 제거 → 상세 페이지 열람 시에만 개별 읽음 처리 - 확인 컬럼 추가: 확인전(주황) / 확인(회색) 뱃지 표시 - 미확인 행 배경 하이라이트(주황) + 제목 볼드 처리 - 기안자 본인 문서만 확인 상태 표시, 타인 문서는 - 표시
138 lines
6.7 KiB
PHP
138 lines
6.7 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', '완료함')
|
|
|
|
@section('content')
|
|
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-6">
|
|
<h1 class="text-2xl font-bold text-gray-800">완료함</h1>
|
|
</div>
|
|
|
|
<x-filter-collapsible id="filterForm">
|
|
<form id="filterForm" class="flex flex-wrap gap-2 sm:gap-4">
|
|
<div class="flex-1 min-w-0 w-full sm:w-auto">
|
|
<input type="text" name="search" placeholder="제목, 문서번호 검색..."
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
</div>
|
|
<div class="w-full sm:w-36">
|
|
<select name="status" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
<option value="">전체</option>
|
|
<option value="approved">승인</option>
|
|
<option value="rejected">반려</option>
|
|
</select>
|
|
</div>
|
|
<button type="submit" class="bg-gray-600 hover:bg-gray-700 text-white px-6 py-2 rounded-lg transition w-full sm:w-auto">
|
|
검색
|
|
</button>
|
|
</form>
|
|
</x-filter-collapsible>
|
|
|
|
<div id="approval-table" class="bg-white rounded-lg shadow-sm overflow-hidden">
|
|
<div class="flex justify-center items-center p-12">
|
|
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="pagination-area" class="mt-4"></div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
const currentUserId = {{ auth()->id() }};
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
loadCompleted();
|
|
document.getElementById('filterForm').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
loadCompleted();
|
|
});
|
|
});
|
|
|
|
function loadCompleted(page = 1) {
|
|
const form = document.getElementById('filterForm');
|
|
const params = new URLSearchParams(new FormData(form));
|
|
params.set('page', page);
|
|
params.set('per_page', 15);
|
|
|
|
fetch(`/api/admin/approvals/completed?${params}`, {
|
|
headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => renderTable(data.data || [], data))
|
|
.catch(() => {
|
|
document.getElementById('approval-table').innerHTML = '<div class="p-8 text-center text-gray-500">데이터를 불러올 수 없습니다.</div>';
|
|
});
|
|
}
|
|
|
|
function renderTable(items, pagination) {
|
|
const container = document.getElementById('approval-table');
|
|
|
|
if (!items.length) {
|
|
container.innerHTML = '<div class="p-8 text-center text-gray-500">처리한 결재 문서가 없습니다.</div>';
|
|
document.getElementById('pagination-area').innerHTML = '';
|
|
return;
|
|
}
|
|
|
|
const statusBadge = (status) => {
|
|
const map = {
|
|
approved: '<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">완료</span>',
|
|
rejected: '<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-700">반려</span>',
|
|
pending: '<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700">진행</span>',
|
|
cancelled: '<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-700">회수</span>',
|
|
};
|
|
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">
|
|
<tr>
|
|
<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-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>
|
|
<tbody class="bg-white divide-y divide-gray-200">`;
|
|
|
|
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="${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">${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>`;
|
|
});
|
|
|
|
html += '</tbody></table></div>';
|
|
container.innerHTML = html;
|
|
|
|
const area = document.getElementById('pagination-area');
|
|
if (!pagination.last_page || pagination.last_page <= 1) { area.innerHTML = ''; return; }
|
|
let pHtml = '<div class="flex justify-center gap-1">';
|
|
for (let i = 1; i <= pagination.last_page; i++) {
|
|
const active = i === pagination.current_page ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-100';
|
|
pHtml += `<button onclick="loadCompleted(${i})" class="px-3 py-1 rounded border text-sm ${active}">${i}</button>`;
|
|
}
|
|
pHtml += '</div>';
|
|
area.innerHTML = pHtml;
|
|
}
|
|
</script>
|
|
@endpush
|