5ed34ca27b
- 기안함과 동일한 UI 패턴 적용 - 페이지당 표시 건수 선택 (15/50/100/200/500) - 전체선택/개별선택 체크박스 + 선택삭제 - 슈퍼관리자 영구삭제 컬럼 추가
244 lines
12 KiB
PHP
244 lines
12 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 class="flex items-center justify-between mb-2">
|
|
<div>
|
|
<button id="bulkDeleteBtn" onclick="bulkDelete()" class="hidden bg-red-500 hover:bg-red-600 text-white px-4 py-1.5 rounded-lg text-sm font-medium transition">
|
|
선택삭제 (<span id="selectedCount">0</span>건)
|
|
</button>
|
|
</div>
|
|
<div class="flex items-center gap-2 text-sm text-gray-600">
|
|
<span>페이지당</span>
|
|
<select id="perPageSelect" onchange="loadCompleted(1)" class="px-2 py-1 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm">
|
|
<option value="15" selected>15</option>
|
|
<option value="50">50</option>
|
|
<option value="100">100</option>
|
|
<option value="200">200</option>
|
|
<option value="500">500</option>
|
|
</select>
|
|
<span>건</span>
|
|
</div>
|
|
</div>
|
|
|
|
<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 isSuperAdmin = @json(auth()->user()->isSuperAdmin());
|
|
const currentUserId = {{ auth()->id() }};
|
|
let selectedIds = new Set();
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
loadCompleted();
|
|
document.getElementById('filterForm').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
loadCompleted();
|
|
});
|
|
});
|
|
|
|
function loadCompleted(page = 1) {
|
|
selectedIds.clear();
|
|
updateBulkDeleteBtn();
|
|
|
|
const form = document.getElementById('filterForm');
|
|
const params = new URLSearchParams(new FormData(form));
|
|
params.set('page', page);
|
|
params.set('per_page', document.getElementById('perPageSelect').value);
|
|
|
|
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 toggleSelectAll(checkbox) {
|
|
const checkboxes = document.querySelectorAll('.row-checkbox');
|
|
checkboxes.forEach(cb => {
|
|
cb.checked = checkbox.checked;
|
|
const id = parseInt(cb.value);
|
|
if (checkbox.checked) selectedIds.add(id); else selectedIds.delete(id);
|
|
});
|
|
updateBulkDeleteBtn();
|
|
}
|
|
|
|
function toggleRowCheckbox(checkbox) {
|
|
const id = parseInt(checkbox.value);
|
|
if (checkbox.checked) selectedIds.add(id); else selectedIds.delete(id);
|
|
const allCb = document.getElementById('selectAllCheckbox');
|
|
const rowCbs = document.querySelectorAll('.row-checkbox');
|
|
if (allCb) allCb.checked = rowCbs.length > 0 && [...rowCbs].every(cb => cb.checked);
|
|
updateBulkDeleteBtn();
|
|
}
|
|
|
|
function updateBulkDeleteBtn() {
|
|
const btn = document.getElementById('bulkDeleteBtn');
|
|
const count = document.getElementById('selectedCount');
|
|
if (selectedIds.size > 0) { btn.classList.remove('hidden'); count.textContent = selectedIds.size; }
|
|
else { btn.classList.add('hidden'); }
|
|
}
|
|
|
|
function bulkDelete() {
|
|
if (selectedIds.size === 0) return;
|
|
if (!confirm(`선택한 ${selectedIds.size}건의 문서를 삭제하시겠습니까?`)) return;
|
|
|
|
fetch('/api/admin/approvals/bulk-delete', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
|
|
body: JSON.stringify({ ids: [...selectedIds] }),
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if (data.success) { if (typeof showToast === 'function') showToast(data.message, 'success'); loadCompleted(); }
|
|
else { if (typeof showToast === 'function') showToast(data.message || '삭제 실패', 'error'); }
|
|
})
|
|
.catch(() => { if (typeof showToast === 'function') showToast('삭제 중 오류가 발생했습니다.', 'error'); });
|
|
}
|
|
|
|
function escapeHtml(str) {
|
|
if (!str) return '';
|
|
const div = document.createElement('div');
|
|
div.textContent = str;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
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 resubmitBadge = (item) => {
|
|
const count = item.resubmit_count || 0;
|
|
if (count === 0) return '<span class="text-xs text-gray-400">-</span>';
|
|
const label = count === 1 ? '재상신' : `재상신(${count}차)`;
|
|
return `<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-700">${label}</span>`;
|
|
};
|
|
|
|
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-2 py-3 text-center" style="width: 40px;">
|
|
<input type="checkbox" id="selectAllCheckbox" onchange="toggleSelectAll(this)" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
|
|
</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-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-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>
|
|
${isSuperAdmin ? '<th class="px-4 py-3 text-center 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-2 py-3 text-center" onclick="event.stopPropagation();">
|
|
<input type="checkbox" class="row-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500" value="${item.id}" onchange="toggleRowCheckbox(this)">
|
|
</td>
|
|
<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">${resubmitBadge(item)}</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>
|
|
${isSuperAdmin ? `<td class="px-4 py-3 text-center"><button onclick="event.stopPropagation(); confirmForceDelete(${item.id}, '${escapeHtml(item.title)}')" class="text-xs text-red-500 hover:text-red-700 font-medium whitespace-nowrap">영구삭제</button></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;
|
|
}
|
|
|
|
function confirmForceDelete(id, title) {
|
|
if (!confirm(`"${title}" 문서를 영구삭제하시겠습니까?\n\n이 작업은 되돌릴 수 없습니다.`)) return;
|
|
|
|
fetch(`/api/admin/approvals/${id}/force`, {
|
|
method: 'DELETE',
|
|
headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' }
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if (data.success) { showToast(data.message, 'success'); loadCompleted(); }
|
|
else { showToast(data.message, 'error'); }
|
|
});
|
|
}
|
|
</script>
|
|
@endpush
|