hskwon
ee9e645290
- 역할 목록: 테넌트/Guard 컬럼 추가, Guard 필터 드롭다운 추가 - 역할 등록/수정: Guard 선택 기능 추가 (API/Web) - 권한 선택 UI를 메뉴 기반 매트릭스로 변경 (7가지 권한 유형) - 테넌트 미선택 시 역할 등록 차단 - pagination.js 디버그 로그 제거
225 lines
12 KiB
PHP
225 lines
12 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', '역할 수정')
|
|
|
|
@section('content')
|
|
<div class="container mx-auto max-w-6xl">
|
|
<!-- 페이지 헤더 -->
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h1 class="text-2xl font-bold text-gray-800">역할 수정</h1>
|
|
<a href="{{ route('roles.index') }}" class="text-gray-600 hover:text-gray-800">
|
|
← 목록으로
|
|
</a>
|
|
</div>
|
|
|
|
<!-- 폼 영역 -->
|
|
<div class="bg-white rounded-lg shadow-sm p-6">
|
|
<form id="roleForm"
|
|
hx-post="/api/admin/roles/{{ $role->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-1 md: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="text" name="name" required maxlength="100"
|
|
value="{{ old('name', $role->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">
|
|
<p class="text-xs text-gray-500 mt-1">최대 100자까지 입력 가능합니다.</p>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">
|
|
Guard <span class="text-red-500">*</span>
|
|
</label>
|
|
<select name="guard_name" required
|
|
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="api" {{ $role->guard_name === 'api' ? 'selected' : '' }}>API</option>
|
|
<option value="web" {{ $role->guard_name === 'web' ? 'selected' : '' }}>Web</option>
|
|
</select>
|
|
<p class="text-xs text-gray-500 mt-1">API: REST API용, Web: 웹 인증용</p>
|
|
</div>
|
|
<div class="md:col-span-2">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">설명</label>
|
|
<textarea name="description" rows="2" maxlength="500"
|
|
placeholder="역할에 대한 설명을 입력하세요"
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">{{ old('description', $role->description) }}</textarea>
|
|
<p class="text-xs text-gray-500 mt-1">최대 500자까지 입력 가능합니다.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 권한 선택 (메뉴 기반 매트릭스) -->
|
|
<div class="mb-8">
|
|
<h2 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b">권한 선택</h2>
|
|
@if($menus->isEmpty())
|
|
<div class="text-center py-8 text-gray-500">
|
|
<p>선택 가능한 메뉴가 없습니다.</p>
|
|
<p class="text-sm mt-2">테넌트를 선택하거나 메뉴를 먼저 생성해주세요.</p>
|
|
</div>
|
|
@else
|
|
<!-- 일괄 선택 버튼 -->
|
|
<div class="mb-4 flex gap-2">
|
|
<button type="button" onclick="selectAllPermissions()"
|
|
class="px-3 py-1 text-sm bg-blue-100 text-blue-700 rounded hover:bg-blue-200 transition">
|
|
전체 선택
|
|
</button>
|
|
<button type="button" onclick="deselectAllPermissions()"
|
|
class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition">
|
|
전체 해제
|
|
</button>
|
|
<button type="button" onclick="selectViewOnly()"
|
|
class="px-3 py-1 text-sm bg-green-100 text-green-700 rounded hover:bg-green-200 transition">
|
|
조회만 선택
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 권한 매트릭스 테이블 -->
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th class="px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider" style="width: 50px;">#</th>
|
|
<th class="px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">메뉴명</th>
|
|
<th class="px-4 py-3 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider" style="width: 60px;">조회</th>
|
|
<th class="px-4 py-3 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider" style="width: 60px;">생성</th>
|
|
<th class="px-4 py-3 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider" style="width: 60px;">수정</th>
|
|
<th class="px-4 py-3 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider" style="width: 60px;">삭제</th>
|
|
<th class="px-4 py-3 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider" style="width: 60px;">승인</th>
|
|
<th class="px-4 py-3 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider" style="width: 70px;">내보내기</th>
|
|
<th class="px-4 py-3 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider" style="width: 60px;">관리</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
@foreach($menus as $index => $menu)
|
|
<tr class="{{ ($menu->depth ?? 0) === 0 ? 'bg-gray-50' : '' }}">
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">
|
|
{{ $index + 1 }}
|
|
</td>
|
|
<td class="px-4 py-3 whitespace-nowrap">
|
|
<div class="flex items-center text-sm text-gray-900" style="padding-left: {{ ($menu->depth ?? 0) * 20 }}px;">
|
|
@if(($menu->depth ?? 0) > 0)
|
|
<span class="mr-2 text-gray-400">└</span>
|
|
@endif
|
|
<span class="{{ ($menu->depth ?? 0) === 0 ? 'font-medium' : '' }}">{{ $menu->name }}</span>
|
|
</div>
|
|
</td>
|
|
@foreach($permissionTypes as $type)
|
|
<td class="px-4 py-3 whitespace-nowrap text-center">
|
|
<input type="checkbox"
|
|
name="menu_permissions[{{ $menu->id }}][]"
|
|
value="{{ $type }}"
|
|
data-menu-id="{{ $menu->id }}"
|
|
data-permission-type="{{ $type }}"
|
|
{{ isset($permissions[$menu->id][$type]) && $permissions[$menu->id][$type] ? 'checked' : '' }}
|
|
class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer permission-checkbox">
|
|
</td>
|
|
@endforeach
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
@endif
|
|
</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 md:grid-cols-4 gap-4 text-sm">
|
|
<div>
|
|
<span class="text-gray-600">역할 ID:</span>
|
|
<span class="font-medium ml-1">#{{ $role->id }}</span>
|
|
</div>
|
|
<div>
|
|
<span class="text-gray-600">Guard:</span>
|
|
<span class="font-medium ml-1 px-2 py-0.5 text-xs rounded {{ $role->guard_name === 'api' ? 'bg-blue-100 text-blue-700' : 'bg-green-100 text-green-700' }}">
|
|
{{ strtoupper($role->guard_name) }}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<span class="text-gray-600">생성일:</span>
|
|
<span class="font-medium ml-1">{{ $role->created_at->format('Y-m-d H:i') }}</span>
|
|
</div>
|
|
<div>
|
|
<span class="text-gray-600">수정일:</span>
|
|
<span class="font-medium ml-1">{{ $role->updated_at->format('Y-m-d H:i') }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 버튼 영역 -->
|
|
<div class="flex justify-end gap-3">
|
|
<a href="{{ route('roles.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>
|
|
// 전체 선택
|
|
function selectAllPermissions() {
|
|
document.querySelectorAll('.permission-checkbox').forEach(checkbox => {
|
|
checkbox.checked = true;
|
|
});
|
|
}
|
|
|
|
// 전체 해제
|
|
function deselectAllPermissions() {
|
|
document.querySelectorAll('.permission-checkbox').forEach(checkbox => {
|
|
checkbox.checked = false;
|
|
});
|
|
}
|
|
|
|
// 조회만 선택
|
|
function selectViewOnly() {
|
|
document.querySelectorAll('.permission-checkbox').forEach(checkbox => {
|
|
checkbox.checked = (checkbox.dataset.permissionType === 'view');
|
|
});
|
|
}
|
|
|
|
// HTMX 응답 처리
|
|
document.body.addEventListener('htmx:afterRequest', function(event) {
|
|
if (event.detail.target.id === 'roleForm') {
|
|
const response = JSON.parse(event.detail.xhr.response);
|
|
if (response.success) {
|
|
alert(response.message);
|
|
window.location.href = response.redirect;
|
|
} else {
|
|
alert('오류: ' + (response.message || '역할 수정에 실패했습니다.'));
|
|
}
|
|
}
|
|
});
|
|
|
|
// 에러 처리
|
|
document.body.addEventListener('htmx:responseError', function(event) {
|
|
if (event.detail.xhr.status === 422) {
|
|
const errors = JSON.parse(event.detail.xhr.response).errors;
|
|
let errorMsg = '입력 오류:\n';
|
|
for (let field in errors) {
|
|
errorMsg += '- ' + errors[field].join('\n') + '\n';
|
|
}
|
|
alert(errorMsg);
|
|
} else {
|
|
alert('서버 오류가 발생했습니다.');
|
|
}
|
|
});
|
|
</script>
|
|
@endpush
|