fix: [hr] 통합 근태관리 탭2/3 컨테이너 HTML 추가 및 정렬 지원

This commit is contained in:
김보곤
2026-03-04 00:06:01 +09:00
parent 092bcbd66c
commit 6b7eb29ebe

View File

@@ -71,10 +71,86 @@ class="px-4 py-2.5 text-sm font-medium border-b-2 transition-colors border-trans
</div>
{{-- 2: 신청/결재 (lazy load) --}}
<div id="content-requests" class="hidden"></div>
<div id="content-requests" class="hidden">
{{-- 필터 --}}
<div class="bg-white rounded-lg border border-gray-200 p-4 mb-4">
<div class="flex flex-wrap items-end gap-3">
<div style="flex: 1 1 180px; max-width: 220px;">
<label class="block text-xs font-medium text-gray-600 mb-1">이름검색</label>
<input type="text" id="req-search" placeholder="이름 검색..."
class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
onkeydown="if(event.key==='Enter') loadRequests()">
</div>
<div style="flex: 0 0 130px;">
<label class="block text-xs font-medium text-gray-600 mb-1">유형</label>
<select id="req-type" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg" onchange="loadRequests()">
<option value="">전체</option>
@foreach($leaveTypeMap as $code => $label)
<option value="{{ $code }}">{{ $label }}</option>
@endforeach
</select>
</div>
<div style="flex: 0 0 130px;">
<label class="block text-xs font-medium text-gray-600 mb-1">상태</label>
<select id="req-status" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg" onchange="loadRequests()">
<option value="">전체</option>
@foreach($leaveStatusMap as $code => $label)
<option value="{{ $code }}">{{ $label }}</option>
@endforeach
</select>
</div>
<div style="flex: 0 0 150px;">
<label class="block text-xs font-medium text-gray-600 mb-1">시작일</label>
<input type="date" id="req-date-from" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg" onchange="loadRequests()">
</div>
<div style="flex: 0 0 150px;">
<label class="block text-xs font-medium text-gray-600 mb-1">종료일</label>
<input type="date" id="req-date-to" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg" onchange="loadRequests()">
</div>
<div class="shrink-0">
<button onclick="loadRequests()" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-medium rounded-lg transition-colors">
검색
</button>
</div>
</div>
</div>
{{-- 신청 목록 테이블 --}}
<div id="requests-table-container">
<div class="flex items-center justify-center py-12 text-gray-400">
<svg class="w-5 h-5 animate-spin mr-2" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
불러오는 ...
</div>
</div>
</div>
{{-- 3: 연차잔여 (lazy load) --}}
<div id="content-balance" class="hidden"></div>
<div id="content-balance" class="hidden">
{{-- 필터 --}}
<div class="bg-white rounded-lg border border-gray-200 p-4 mb-4">
<div class="flex flex-wrap items-end gap-3">
<div style="flex: 0 0 130px;">
<label class="block text-xs font-medium text-gray-600 mb-1">연도</label>
<select id="balance-year" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg" onchange="loadBalance()">
@for($y = now()->year; $y >= now()->year - 2; $y--)
<option value="{{ $y }}" @if($y === now()->year) selected @endif>{{ $y }}</option>
@endfor
</select>
</div>
<div class="shrink-0">
<button onclick="loadBalance()" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-medium rounded-lg transition-colors">
조회
</button>
</div>
</div>
</div>
{{-- 잔여연차 테이블 --}}
<div id="balance-table-container">
<div class="flex items-center justify-center py-12 text-gray-400">
<svg class="w-5 h-5 animate-spin mr-2" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
불러오는 ...
</div>
</div>
</div>
</div>
</div>
@@ -169,9 +245,13 @@ function loadRequests(page) {
// =========================================================================
// 연차잔여 탭
// =========================================================================
function loadBalance() {
function loadBalance(sort, direction) {
const year = document.getElementById('balance-year')?.value || new Date().getFullYear();
htmx.ajax('GET', '/api/admin/hr/leaves/balance?year=' + year, {
const params = new URLSearchParams({ year });
if (sort) params.set('sort', sort);
if (direction) params.set('direction', direction);
htmx.ajax('GET', '/api/admin/hr/leaves/balance?' + params.toString(), {
target: '#balance-table-container',
swap: 'innerHTML'
});