SamProject/sam-manage
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: [employee] 입사일/퇴직일 컬럼 헤더에 정렬 아이콘 추가

Browse Source 
- 입사일/퇴직일 컬럼 클릭 시 오름차순/내림차순 토글
- 현재 정렬 상태를 아이콘으로 표시 (↑ 오름차순, ↓ 내림차순, ↕ 미선택)
- 기본 정렬: 입사일 빠른순(오름차순)
This commit is contained in:
김보곤
2026-02-26 19:41:54 +09:00
parent ce942e8999
commit 5e06f53d2d
2 changed files with 47 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
resources/views/hr/employees/index.blade.php
View File

@@ -101,7 +101,7 @@ class="px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white text-sm rounded-lg tra
{{-- HTMX 테이블 영역 --}}
<div id="employees-table"
hx-get="{{ route('api.admin.hr.employees.index') }}"
hx-get="{{ route('api.admin.hr.employees.index') }}?sort_by=hire_date_asc"
hx-trigger="load"
hx-headers='{"X-CSRF-TOKEN": "{{ csrf_token() }}"}'
class="min-h-[200px]">
@@ -119,5 +119,24 @@ class="min-h-[200px]">
e.preventDefault();
htmx.trigger('#employees-table', 'htmx:trigger');
});
function toggleSort(field) {
const sortSelect = document.querySelector('select[name="sort_by"]');
const current = sortSelect.value;
if (current === field + '_asc') {
sortSelect.value = field + '_desc';
} else {
sortSelect.value = field + '_asc';
}
// HTMX로 테이블 새로고침
const table = document.getElementById('employees-table');
const form = document.getElementById('employeeFilterForm');
const params = new URLSearchParams(new FormData(form)).toString();
const url = '{{ route('api.admin.hr.employees.index') }}?' + params;
htmx.ajax('GET', url, { target: '#employees-table', swap: 'innerHTML' });
}
</script>
@endpush

29
resources/views/hr/employees/partials/table.blade.php
View File

@@ -7,8 +7,33 @@
<th class="px-6 py-3 text-left text-sm font-semibold text-gray-600">부서</th>
<th class="px-6 py-3 text-left text-sm font-semibold text-gray-600">직급/직책</th>
<th class="px-6 py-3 text-center text-sm font-semibold text-gray-600">상태</th>
<th class="px-6 py-3 text-center text-sm font-semibold text-gray-600">입사일</th>
<th class="px-6 py-3 text-center text-sm font-semibold text-gray-600">퇴직일</th>
<th class="px-6 py-3 text-center text-sm font-semibold text-gray-600">
<button type="button" class="inline-flex items-center gap-1 hover:text-blue-600 transition-colors"
onclick="toggleSort('hire_date')">
입사일
@php $sortBy = request('sort_by', 'hire_date_asc'); @endphp
@if($sortBy === 'hire_date_asc')
<svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"/></svg>
@elseif($sortBy === 'hire_date_desc')
<svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
@else
<svg class="w-4 h-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg>
@endif
</button>
</th>
<th class="px-6 py-3 text-center text-sm font-semibold text-gray-600">
<button type="button" class="inline-flex items-center gap-1 hover:text-blue-600 transition-colors"
onclick="toggleSort('resign_date')">
퇴직일
@if($sortBy === 'resign_date_asc')
<svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"/></svg>
@elseif($sortBy === 'resign_date_desc')
<svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
@else
<svg class="w-4 h-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg>
@endif
</button>
</th>
<th class="px-6 py-3 text-center text-sm font-semibold text-gray-600">연락처</th>
<th class="px-6 py-3 text-center text-sm font-semibold text-gray-600">작업</th>
</tr>