359 lines
18 KiB
PHP
359 lines
18 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', '사원 등록')
|
|
|
|
@section('content')
|
|
<div class="container mx-auto px-4 py-6 max-w-2xl">
|
|
{{-- 페이지 헤더 --}}
|
|
<div class="mb-6">
|
|
<a href="{{ route('hr.employees.index') }}" class="text-sm text-gray-500 hover:text-gray-700 inline-flex items-center gap-1 mb-2">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
|
|
</svg>
|
|
사원 목록으로
|
|
</a>
|
|
<h1 class="text-2xl font-bold text-gray-800">사원 등록</h1>
|
|
</div>
|
|
|
|
{{-- 등록 폼 --}}
|
|
<div class="bg-white rounded-lg shadow-sm p-6">
|
|
<form id="employeeForm"
|
|
hx-post="{{ route('api.admin.hr.employees.store') }}"
|
|
hx-headers='{"X-CSRF-TOKEN": "{{ csrf_token() }}", "Accept": "application/json"}'
|
|
hx-target="#form-message"
|
|
hx-swap="innerHTML"
|
|
class="space-y-6">
|
|
|
|
<div id="form-message"></div>
|
|
|
|
{{-- 기존 직원 불러오기 --}}
|
|
<div x-data="userSearch()" class="border border-blue-200 bg-blue-50 rounded-lg p-4">
|
|
<h3 class="text-sm font-semibold text-blue-800 mb-3">기존 직원 불러오기</h3>
|
|
|
|
<template x-if="!selectedUser">
|
|
<div class="relative">
|
|
<div class="relative">
|
|
<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
|
|
</svg>
|
|
<input type="text"
|
|
x-model="query"
|
|
@input.debounce.300ms="search()"
|
|
@focus="onFocus()"
|
|
@click.outside="showDropdown = false"
|
|
placeholder="이름, 이메일, 연락처로 검색..."
|
|
class="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white text-sm">
|
|
</div>
|
|
|
|
{{-- 검색 결과 드롭다운 --}}
|
|
<div x-show="showDropdown"
|
|
x-transition
|
|
class="absolute z-10 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-60 overflow-y-auto">
|
|
<template x-if="loading">
|
|
<div class="px-4 py-3 text-sm text-gray-500 text-center">검색 중...</div>
|
|
</template>
|
|
<template x-if="!loading && users.length === 0">
|
|
<div class="px-4 py-3 text-sm text-gray-500 text-center">검색 결과가 없습니다</div>
|
|
</template>
|
|
<template x-for="user in users" :key="user.id">
|
|
<button type="button"
|
|
@click="selectUser(user)"
|
|
class="w-full text-left px-4 py-2.5 hover:bg-blue-50 border-b border-gray-100 last:border-0 transition-colors">
|
|
<div class="text-sm font-medium text-gray-800" x-text="user.name"></div>
|
|
<div class="text-xs text-gray-500">
|
|
<span x-show="user.email" x-text="user.email"></span>
|
|
<span x-show="user.email && user.phone"> · </span>
|
|
<span x-show="user.phone" x-text="user.phone"></span>
|
|
</div>
|
|
</button>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
{{-- 선택된 사용자 표시 --}}
|
|
<template x-if="selectedUser">
|
|
<div class="flex items-center justify-between bg-white border border-green-300 rounded-lg px-4 py-2.5">
|
|
<div class="flex items-center gap-2">
|
|
<svg class="w-5 h-5 text-green-600 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
<div>
|
|
<span class="text-sm font-medium text-gray-800" x-text="selectedUser.name"></span>
|
|
<span class="text-xs text-gray-500 ml-1" x-text="selectedUser.email"></span>
|
|
</div>
|
|
</div>
|
|
<button type="button" @click="clearSelection()"
|
|
class="text-xs text-red-500 hover:text-red-700 font-medium shrink-0">
|
|
선택 해제
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<input type="hidden" name="existing_user_id" :value="selectedUser ? selectedUser.id : ''">
|
|
<p class="text-xs text-blue-600 mt-2">이미 시스템에 등록된 사용자를 사원으로 추가할 수 있습니다.</p>
|
|
</div>
|
|
|
|
{{-- 기본 정보 --}}
|
|
<div class="border-b border-gray-200 pb-4 mb-4">
|
|
<h2 class="text-lg font-semibold text-gray-700">기본 정보</h2>
|
|
</div>
|
|
|
|
{{-- 이름 --}}
|
|
<div>
|
|
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">
|
|
이름 <span class="text-red-500">*</span>
|
|
</label>
|
|
<input type="text" name="name" id="name" required
|
|
placeholder="홍길동"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
</div>
|
|
|
|
{{-- 이메일 / 연락처 --}}
|
|
<div class="flex gap-4" style="flex-wrap: wrap;">
|
|
<div style="flex: 1 1 200px;">
|
|
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">이메일</label>
|
|
<input type="email" name="email" id="email"
|
|
placeholder="user@example.com"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
</div>
|
|
<div style="flex: 1 1 200px;">
|
|
<label for="phone" class="block text-sm font-medium text-gray-700 mb-1">연락처</label>
|
|
<input type="text" name="phone" id="phone"
|
|
placeholder="010-1234-5678"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 근무 정보 --}}
|
|
<div class="border-b border-gray-200 pb-4 mb-4 mt-8">
|
|
<h2 class="text-lg font-semibold text-gray-700">근무 정보</h2>
|
|
</div>
|
|
|
|
{{-- 부서 --}}
|
|
<div>
|
|
<label for="department_id" class="block text-sm font-medium text-gray-700 mb-1">부서</label>
|
|
<select name="department_id" id="department_id"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
<option value="">선택하세요</option>
|
|
@foreach($departments as $dept)
|
|
<option value="{{ $dept->id }}">{{ $dept->name }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
{{-- 직급 / 직책 --}}
|
|
<div class="flex gap-4" style="flex-wrap: wrap;">
|
|
<div style="flex: 1 1 200px;">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">직급</label>
|
|
<div class="flex gap-2">
|
|
<select name="position_key" id="position_key"
|
|
class="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
<option value="">선택하세요</option>
|
|
@foreach($ranks as $rank)
|
|
<option value="{{ $rank->key }}">{{ $rank->name }}</option>
|
|
@endforeach
|
|
</select>
|
|
<button type="button" onclick="openPositionModal('rank')"
|
|
class="shrink-0 w-9 h-9 flex items-center justify-center border border-gray-300 rounded-lg text-gray-500 hover:bg-blue-50 hover:text-blue-600 hover:border-blue-300 transition-colors"
|
|
title="직급 추가">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div style="flex: 1 1 200px;">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">직책</label>
|
|
<div class="flex gap-2">
|
|
<select name="job_title_key" id="job_title_key"
|
|
class="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
<option value="">선택하세요</option>
|
|
@foreach($titles as $title)
|
|
<option value="{{ $title->key }}">{{ $title->name }}</option>
|
|
@endforeach
|
|
</select>
|
|
<button type="button" onclick="openPositionModal('title')"
|
|
class="shrink-0 w-9 h-9 flex items-center justify-center border border-gray-300 rounded-lg text-gray-500 hover:bg-blue-50 hover:text-blue-600 hover:border-blue-300 transition-colors"
|
|
title="직책 추가">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 입사일 / 퇴직일 / 상태 --}}
|
|
<div class="flex gap-4" style="flex-wrap: wrap;">
|
|
<div style="flex: 1 1 150px;">
|
|
<label for="hire_date" class="block text-sm font-medium text-gray-700 mb-1">입사일</label>
|
|
<input type="date" name="hire_date" id="hire_date"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
</div>
|
|
<div style="flex: 1 1 150px;">
|
|
<label for="resign_date" class="block text-sm font-medium text-gray-700 mb-1">퇴직일</label>
|
|
<input type="date" name="resign_date" id="resign_date"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
</div>
|
|
<div style="flex: 1 1 150px;">
|
|
<label for="employee_status" class="block text-sm font-medium text-gray-700 mb-1">재직상태</label>
|
|
<select name="employee_status" id="employee_status"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
<option value="active" selected>재직</option>
|
|
<option value="leave">휴직</option>
|
|
<option value="resigned">퇴직</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 주소 --}}
|
|
<div>
|
|
<label for="address" class="block text-sm font-medium text-gray-700 mb-1">주소</label>
|
|
<input type="text" name="address" id="address"
|
|
placeholder="주소를 입력하세요"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
</div>
|
|
|
|
{{-- 비상연락처 --}}
|
|
<div>
|
|
<label for="emergency_contact" class="block text-sm font-medium text-gray-700 mb-1">비상연락처</label>
|
|
<input type="text" name="emergency_contact" id="emergency_contact"
|
|
placeholder="긴급 시 연락할 전화번호"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
</div>
|
|
|
|
{{-- 버튼 --}}
|
|
<div class="flex justify-end gap-3 pt-4 border-t">
|
|
<a href="{{ route('hr.employees.index') }}"
|
|
class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">
|
|
취소
|
|
</a>
|
|
<button type="submit"
|
|
class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors">
|
|
등록
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{{-- 직급/직책 추가 모달 --}}
|
|
@include('hr.employees.partials.position-add-modal')
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
function userSearch() {
|
|
return {
|
|
query: '',
|
|
users: [],
|
|
selectedUser: null,
|
|
showDropdown: false,
|
|
loading: false,
|
|
|
|
async search() {
|
|
this.loading = true;
|
|
this.showDropdown = true;
|
|
try {
|
|
const res = await fetch(`{{ route('api.admin.hr.employees.search-users') }}?q=${encodeURIComponent(this.query)}`, {
|
|
headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
|
|
});
|
|
const json = await res.json();
|
|
this.users = json.data || [];
|
|
} catch (e) {
|
|
this.users = [];
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
},
|
|
|
|
onFocus() {
|
|
if (this.users.length === 0) this.search();
|
|
else this.showDropdown = true;
|
|
},
|
|
|
|
selectUser(user) {
|
|
this.selectedUser = user;
|
|
this.showDropdown = false;
|
|
this.query = '';
|
|
|
|
const nameEl = document.getElementById('name');
|
|
const emailEl = document.getElementById('email');
|
|
const phoneEl = document.getElementById('phone');
|
|
|
|
nameEl.value = user.name || '';
|
|
emailEl.value = user.email || '';
|
|
phoneEl.value = user.phone || '';
|
|
|
|
[nameEl, emailEl, phoneEl].forEach(el => {
|
|
el.readOnly = true;
|
|
el.classList.add('bg-gray-100', 'text-gray-500');
|
|
});
|
|
},
|
|
|
|
clearSelection() {
|
|
this.selectedUser = null;
|
|
|
|
const nameEl = document.getElementById('name');
|
|
const emailEl = document.getElementById('email');
|
|
const phoneEl = document.getElementById('phone');
|
|
|
|
[nameEl, emailEl, phoneEl].forEach(el => {
|
|
el.value = '';
|
|
el.readOnly = false;
|
|
el.classList.remove('bg-gray-100', 'text-gray-500');
|
|
});
|
|
}
|
|
};
|
|
}
|
|
|
|
document.body.addEventListener('htmx:afterRequest', function(event) {
|
|
if (event.detail.elt.id !== 'employeeForm') return;
|
|
|
|
const xhr = event.detail.xhr;
|
|
try {
|
|
const response = JSON.parse(xhr.responseText);
|
|
|
|
if (response.success) {
|
|
showToast(response.message || '사원이 등록되었습니다.', 'success');
|
|
window.location.href = '{{ route('hr.employees.index') }}';
|
|
return;
|
|
}
|
|
|
|
// 서버에서 success: false 응답
|
|
let msg = response.message || '저장에 실패했습니다.';
|
|
if (response.error) msg += '\n' + response.error;
|
|
showToast(msg, 'error', 5000);
|
|
} catch (e) {
|
|
if (!event.detail.successful) {
|
|
showToast('서버 오류가 발생했습니다. (HTTP ' + xhr.status + ')', 'error', 5000);
|
|
}
|
|
}
|
|
});
|
|
|
|
// Validation 에러 (422) 처리
|
|
document.body.addEventListener('htmx:responseError', function(event) {
|
|
if (event.detail.elt.id !== 'employeeForm') return;
|
|
|
|
const xhr = event.detail.xhr;
|
|
try {
|
|
const response = JSON.parse(xhr.responseText);
|
|
|
|
if (xhr.status === 422 && response.errors) {
|
|
const messages = [];
|
|
for (const field in response.errors) {
|
|
messages.push(response.errors[field].join(', '));
|
|
}
|
|
showToast(messages.join('\n'), 'error', 6000);
|
|
} else {
|
|
let msg = response.message || '오류가 발생했습니다.';
|
|
if (response.error) msg += '\n' + response.error;
|
|
showToast(msg, 'error', 5000);
|
|
}
|
|
} catch (e) {
|
|
showToast('서버 오류가 발생했습니다. (HTTP ' + xhr.status + ')', 'error', 5000);
|
|
}
|
|
});
|
|
</script>
|
|
@endpush
|