a5abd950f2
- 직급: "조직 내 서열" 설명 (사원, 대리, 과장 등) - 직책: "맡은 역할/책임" 설명 (팀장, 실장 등) - hover 시 tooltip 표시 (group/invisible 패턴)
324 lines
18 KiB
PHP
324 lines
18 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', '사용자 수정')
|
|
|
|
@section('content')
|
|
<div class="container mx-auto max-w-4xl">
|
|
<!-- 페이지 헤더 -->
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h1 class="text-2xl font-bold text-gray-800">👥 사용자 수정</h1>
|
|
<a href="{{ route('users.index') }}" class="text-gray-600 hover:text-gray-800">
|
|
← 목록으로
|
|
</a>
|
|
</div>
|
|
|
|
<!-- 폼 영역 -->
|
|
<div class="bg-white rounded-lg shadow-sm p-6">
|
|
<form id="userForm"
|
|
hx-post="/api/admin/users/{{ $user->id }}"
|
|
hx-headers='{"X-CSRF-TOKEN": "{{ csrf_token() }}"}'
|
|
hx-swap="none">
|
|
<input type="hidden" name="_method" value="PUT">
|
|
|
|
<!-- 기본 정보 -->
|
|
<div class="mb-8">
|
|
<h2 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b">기본 정보</h2>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">
|
|
사용자 ID
|
|
</label>
|
|
<input type="text" name="user_id" maxlength="50"
|
|
value="{{ old('user_id', $user->user_id) }}"
|
|
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>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">
|
|
이름 <span class="text-red-500">*</span>
|
|
</label>
|
|
<input type="text" name="name" required maxlength="100"
|
|
value="{{ old('name', $user->name) }}"
|
|
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>
|
|
</div>
|
|
|
|
<!-- 계정 정보 -->
|
|
<div class="mb-8">
|
|
<h2 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b">계정 정보</h2>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">
|
|
이메일 <span class="text-red-500">*</span>
|
|
</label>
|
|
<input type="email" name="email" required maxlength="255"
|
|
value="{{ old('email', $user->email) }}"
|
|
placeholder="user@example.com"
|
|
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>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">
|
|
연락처
|
|
</label>
|
|
<input type="text" name="phone" maxlength="20"
|
|
value="{{ old('phone', $user->phone) }}"
|
|
placeholder="010-1234-5678"
|
|
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>
|
|
</div>
|
|
|
|
<!-- 직급/직책 -->
|
|
<div class="mb-8">
|
|
<h2 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b">직급/직책</h2>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="flex items-center gap-1 text-sm font-medium text-gray-700 mb-1">
|
|
직급
|
|
<span class="relative group">
|
|
<svg class="w-4 h-4 text-gray-400 hover:text-blue-500 cursor-help transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
<span class="invisible group-hover:visible absolute z-10 left-1/2 -translate-x-1/2 top-6 w-56 px-3 py-2 text-xs font-normal text-white bg-gray-800 rounded-lg shadow-lg whitespace-normal leading-relaxed">
|
|
<b>직급</b>은 조직 내 서열을 나타냅니다.<br>예: 사원, 대리, 과장, 차장, 부장
|
|
</span>
|
|
</span>
|
|
</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 }}" {{ ($profile?->position_key ?? '') === $rank->key ? 'selected' : '' }}>
|
|
{{ $rank->name }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
<button type="button" onclick="openPositionModal('rank')"
|
|
class="px-3 py-2 bg-gray-100 hover:bg-gray-200 text-gray-600 rounded-lg transition text-sm font-bold"
|
|
title="직급 추가">+</button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="flex items-center gap-1 text-sm font-medium text-gray-700 mb-1">
|
|
직책
|
|
<span class="relative group">
|
|
<svg class="w-4 h-4 text-gray-400 hover:text-blue-500 cursor-help transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
<span class="invisible group-hover:visible absolute z-10 left-1/2 -translate-x-1/2 top-6 w-56 px-3 py-2 text-xs font-normal text-white bg-gray-800 rounded-lg shadow-lg whitespace-normal leading-relaxed">
|
|
<b>직책</b>은 맡은 역할/책임을 나타냅니다.<br>예: 팀장, 실장, 본부장, 대표이사
|
|
</span>
|
|
</span>
|
|
</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 }}" {{ ($profile?->job_title_key ?? '') === $title->key ? 'selected' : '' }}>
|
|
{{ $title->name }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
<button type="button" onclick="openPositionModal('title')"
|
|
class="px-3 py-2 bg-gray-100 hover:bg-gray-200 text-gray-600 rounded-lg transition text-sm font-bold"
|
|
title="직책 추가">+</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@include('hr.employees.partials.position-add-modal')
|
|
|
|
<!-- 비밀번호 초기화 -->
|
|
<div class="mb-8">
|
|
<h2 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b">비밀번호</h2>
|
|
<div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-sm text-gray-700 font-medium">비밀번호 초기화</p>
|
|
<p class="text-sm text-gray-500 mt-1">임시 비밀번호가 생성되어 사용자 이메일로 발송됩니다.</p>
|
|
</div>
|
|
<button type="button" id="resetPasswordBtn"
|
|
class="px-4 py-2 bg-orange-500 hover:bg-orange-600 text-white text-sm font-medium rounded-lg transition flex items-center gap-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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
|
|
</svg>
|
|
비밀번호 초기화
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 역할 설정 -->
|
|
<div class="mb-8">
|
|
<h2 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b">역할 설정</h2>
|
|
@if($roles->isNotEmpty())
|
|
<div class="grid grid-cols-2 md:grid-cols-3 gap-3">
|
|
@foreach($roles as $role)
|
|
<label class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
|
|
<input type="checkbox" name="role_ids[]" value="{{ $role->id }}"
|
|
{{ in_array($role->id, old('role_ids', $userRoleIds)) ? 'checked' : '' }}
|
|
class="h-4 w-4 text-blue-600 rounded focus:ring-2 focus:ring-blue-500">
|
|
<span class="ml-2 text-sm text-gray-700">{{ $role->name }}</span>
|
|
<span class="ml-1 px-1.5 py-0.5 text-xs rounded {{ $role->guard_name === 'web' ? 'bg-blue-100 text-blue-600' : 'bg-green-100 text-green-600' }}">{{ $role->guard_name }}</span>
|
|
</label>
|
|
@endforeach
|
|
</div>
|
|
@else
|
|
<p class="text-sm text-gray-500">선택 가능한 역할이 없습니다.</p>
|
|
@endif
|
|
</div>
|
|
|
|
<!-- 부서 설정 -->
|
|
<div class="mb-8">
|
|
<h2 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b">부서 설정</h2>
|
|
@if($departments->isNotEmpty())
|
|
<div class="grid grid-cols-2 md:grid-cols-3 gap-3">
|
|
@foreach($departments as $department)
|
|
<label class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
|
|
<input type="checkbox" name="department_ids[]" value="{{ $department->id }}"
|
|
{{ in_array($department->id, old('department_ids', $userDepartmentIds)) ? 'checked' : '' }}
|
|
class="h-4 w-4 text-green-600 rounded focus:ring-2 focus:ring-green-500">
|
|
<span class="ml-2 text-sm text-gray-700">{{ $department->name }}</span>
|
|
</label>
|
|
@endforeach
|
|
</div>
|
|
<p class="text-xs text-gray-500 mt-2">첫 번째로 선택한 부서가 주 부서로 설정됩니다.</p>
|
|
@else
|
|
<p class="text-sm text-gray-500">선택 가능한 부서가 없습니다.</p>
|
|
@endif
|
|
</div>
|
|
|
|
<!-- 계정 상태 -->
|
|
<div class="mb-8">
|
|
<h2 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b">계정 상태</h2>
|
|
<div class="flex items-center gap-6">
|
|
<label class="flex items-center">
|
|
{{-- 체크박스 해제 시에도 값이 전송되도록 hidden 필드 추가 --}}
|
|
<input type="hidden" name="is_active" value="0">
|
|
<input type="checkbox" name="is_active" value="1"
|
|
{{ old('is_active', $user->is_active) ? 'checked' : '' }}
|
|
class="h-4 w-4 text-blue-600 rounded focus:ring-2 focus:ring-blue-500">
|
|
<span class="ml-2 text-sm text-gray-700">활성 상태</span>
|
|
</label>
|
|
@if(auth()->user()?->is_super_admin)
|
|
<label class="flex items-center">
|
|
{{-- 체크박스 해제 시에도 값이 전송되도록 hidden 필드 추가 --}}
|
|
<input type="hidden" name="is_super_admin" value="0">
|
|
<input type="checkbox" name="is_super_admin" value="1"
|
|
{{ old('is_super_admin', $user->is_super_admin) ? 'checked' : '' }}
|
|
class="h-4 w-4 text-red-600 rounded focus:ring-2 focus:ring-red-500">
|
|
<span class="ml-2 text-sm text-gray-700">슈퍼 관리자</span>
|
|
</label>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 사용자 정보 -->
|
|
<div class="mb-8">
|
|
<h2 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b">사용자 정보</h2>
|
|
<div class="grid grid-cols-2 gap-4 text-sm">
|
|
<div>
|
|
<span class="text-gray-600">생성일:</span>
|
|
<span class="font-medium">{{ $user->created_at?->format('Y-m-d H:i') ?? '-' }}</span>
|
|
</div>
|
|
<div>
|
|
<span class="text-gray-600">수정일:</span>
|
|
<span class="font-medium">{{ $user->updated_at?->format('Y-m-d H:i') ?? '-' }}</span>
|
|
</div>
|
|
<div>
|
|
<span class="text-gray-600">마지막 로그인:</span>
|
|
<span class="font-medium">{{ $user->last_login_at?->format('Y-m-d H:i') ?? '없음' }}</span>
|
|
</div>
|
|
<div>
|
|
<span class="text-gray-600">사용자 ID:</span>
|
|
<span class="font-medium">#{{ $user->id }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 버튼 영역 -->
|
|
<div class="flex justify-end gap-3">
|
|
<a href="{{ route('users.index') }}"
|
|
class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition">
|
|
취소
|
|
</a>
|
|
<button type="submit"
|
|
class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition">
|
|
수정
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
|
|
<script>
|
|
// HTMX 응답 처리
|
|
document.body.addEventListener('htmx:afterRequest', function(event) {
|
|
if (event.detail.target.id === 'userForm') {
|
|
const response = JSON.parse(event.detail.xhr.response);
|
|
if (response.success) {
|
|
showToast(response.message, 'success');
|
|
window.location.href = response.redirect;
|
|
} else {
|
|
showToast(response.message || '사용자 수정에 실패했습니다.', 'error');
|
|
}
|
|
}
|
|
});
|
|
|
|
// 에러 처리
|
|
document.body.addEventListener('htmx:responseError', function(event) {
|
|
if (event.detail.xhr.status === 422) {
|
|
const errors = JSON.parse(event.detail.xhr.response).errors;
|
|
let errorMsg = '입력 오류: ';
|
|
for (let field in errors) {
|
|
errorMsg += errors[field].join(', ') + ' ';
|
|
}
|
|
showToast(errorMsg, 'error');
|
|
} else {
|
|
showToast('서버 오류가 발생했습니다.', 'error');
|
|
}
|
|
});
|
|
|
|
// 비밀번호 초기화 버튼 처리
|
|
document.getElementById('resetPasswordBtn').addEventListener('click', function() {
|
|
showConfirm('비밀번호를 초기화하시겠습니까?<br><br>임시 비밀번호가 생성되어 사용자 이메일({{ $user->email }})로 발송됩니다.', () => {
|
|
const btn = document.getElementById('resetPasswordBtn');
|
|
btn.disabled = true;
|
|
btn.innerHTML = '<svg class="animate-spin w-4 h-4" 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> 처리중...';
|
|
|
|
fetch('/api/admin/users/{{ $user->id }}/reset-password', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}',
|
|
'Accept': 'application/json'
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
showToast(data.message, 'success');
|
|
} else {
|
|
showToast(data.message || '비밀번호 초기화에 실패했습니다.', 'error');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
showToast('서버 오류가 발생했습니다.', 'error');
|
|
console.error(error);
|
|
})
|
|
.finally(() => {
|
|
btn.disabled = false;
|
|
btn.innerHTML = '<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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg> 비밀번호 초기화';
|
|
});
|
|
}, { title: '비밀번호 초기화', icon: 'warning' });
|
|
});
|
|
</script>
|
|
@endpush |