hskwon
39ed2ac3e3
사용자 모달 기능: - 사용자 정보 모달 팝업 (조회/삭제/수정) - 권한 요약 정보 (Web/API 권한 카운트) - 2x2 그리드 레이아웃 (테넌트, 역할, 부서, 권한) - 테이블 행 클릭으로 모달 열기 - 권한 관리 링크 클릭 시 해당 사용자 자동 선택 컨텍스트 메뉴 확장: - permission-analyze 페이지 사용자 이름에 컨텍스트 메뉴 - user-permissions 페이지 사용자 버튼에 컨텍스트 메뉴 - 사용자 모달 내 테넌트 칩에 컨텍스트 메뉴 - 헤더 테넌트 배지에 컨텍스트 메뉴 - 테넌트 메뉴에 "이 테넌트로 전환" 기능 추가
130 lines
6.4 KiB
PHP
130 lines
6.4 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', '부서 권한 관리')
|
|
|
|
@section('content')
|
|
<!-- 페이지 헤더 -->
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h1 class="text-2xl font-bold text-gray-800">부서 권한 관리</h1>
|
|
</div>
|
|
|
|
<!-- 부서 선택 -->
|
|
<div class="bg-white rounded-lg shadow-sm mb-6">
|
|
<div class="px-6 py-4">
|
|
@if($departmentsByTenant)
|
|
{{-- 전체 테넌트 선택 시: 테넌트 선택 안내 --}}
|
|
<div class="text-center py-8">
|
|
<div class="text-yellow-500 text-4xl mb-3">⚠️</div>
|
|
<p class="text-gray-700 font-medium mb-2">테넌트를 선택해주세요</p>
|
|
<p class="text-gray-500 text-sm">부서 권한을 관리하려면 상단 헤더에서 특정 테넌트를 선택해야 합니다.</p>
|
|
</div>
|
|
@else
|
|
{{-- 특정 테넌트 선택 시: firstAutoSelect 활성화 --}}
|
|
<div class="flex flex-wrap items-center gap-3">
|
|
<span class="text-sm font-medium text-gray-700">부서 선택:</span>
|
|
@foreach($departments as $department)
|
|
<button
|
|
type="button"
|
|
class="department-button px-4 py-2 text-sm font-medium rounded-lg border transition-colors bg-white text-gray-700 border-gray-300 hover:bg-gray-50"
|
|
data-department-id="{{ $department->id }}"
|
|
data-department-name="{{ $department->name }}"
|
|
data-auto-select="{{ $loop->first ? 'true' : 'false' }}"
|
|
hx-get="/api/admin/department-permissions/matrix"
|
|
hx-target="#permission-matrix"
|
|
hx-vals='{"department_id": {{ $department->id }}, "guard_name": "api"}'
|
|
onclick="selectDepartment(this)"
|
|
>
|
|
{{ $department->name }}
|
|
</button>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 액션 버튼 -->
|
|
<div class="bg-white rounded-lg shadow-sm mb-6" id="action-buttons" style="display: none;">
|
|
<div class="px-6 py-4 border-b border-gray-200">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-sm font-medium text-gray-700" id="selected-department-name">선택된 부서</span>
|
|
<div class="flex items-center gap-2">
|
|
<input type="hidden" name="department_id" id="departmentIdInput" value="">
|
|
<input type="hidden" name="guard_name" value="api">
|
|
|
|
<button
|
|
type="button"
|
|
class="px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-lg hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500"
|
|
hx-post="/api/admin/department-permissions/allow-all"
|
|
hx-target="#permission-matrix"
|
|
hx-include="[name='department_id'],[name='guard_name']"
|
|
>
|
|
전체 허용
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="px-4 py-2 bg-red-600 text-white text-sm font-medium rounded-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500"
|
|
hx-post="/api/admin/department-permissions/deny-all"
|
|
hx-target="#permission-matrix"
|
|
hx-include="[name='department_id'],[name='guard_name']"
|
|
>
|
|
전체 거부
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="px-4 py-2 bg-gray-500 text-white text-sm font-medium rounded-lg hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400"
|
|
hx-post="/api/admin/department-permissions/reset"
|
|
hx-target="#permission-matrix"
|
|
hx-include="[name='department_id'],[name='guard_name']"
|
|
title="모든 메뉴의 조회(view) 권한만 허용"
|
|
>
|
|
초기화
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 권한 매트릭스 테이블 -->
|
|
<div id="permission-matrix" class="bg-white rounded-lg shadow-sm">
|
|
@include('department-permissions.partials.empty-state')
|
|
</div>
|
|
|
|
<script>
|
|
function selectDepartment(button) {
|
|
// 모든 버튼의 활성 상태 제거
|
|
document.querySelectorAll('.department-button').forEach(btn => {
|
|
btn.classList.remove('bg-blue-700', 'text-white', 'border-blue-700', 'hover:bg-blue-800');
|
|
btn.classList.add('bg-white', 'text-gray-700', 'border-gray-300', 'hover:bg-gray-50');
|
|
});
|
|
|
|
// 클릭된 버튼 활성화
|
|
button.classList.remove('bg-white', 'text-gray-700', 'border-gray-300', 'hover:bg-gray-50');
|
|
button.classList.add('bg-blue-700', 'text-white', 'border-blue-700', 'hover:bg-blue-800');
|
|
|
|
// 부서 정보 저장
|
|
const departmentId = button.getAttribute('data-department-id');
|
|
const departmentName = button.getAttribute('data-department-name');
|
|
const tenantName = button.getAttribute('data-tenant-name');
|
|
|
|
document.getElementById('departmentIdInput').value = departmentId;
|
|
const displayName = tenantName ? `[${tenantName}] ${departmentName} 부서` : `${departmentName} 부서`;
|
|
document.getElementById('selected-department-name').textContent = displayName;
|
|
|
|
// 액션 버튼 표시
|
|
document.getElementById('action-buttons').style.display = 'block';
|
|
}
|
|
|
|
// 페이지 로드 시 첫 번째 부서 자동 선택 (특정 테넌트 선택 시에만)
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const autoSelectButton = document.querySelector('.department-button[data-auto-select="true"]');
|
|
if (autoSelectButton) {
|
|
// onclick 핸들러 실행
|
|
selectDepartment(autoSelectButton);
|
|
// HTMX 이벤트 트리거
|
|
htmx.trigger(autoSelectButton, 'click');
|
|
}
|
|
});
|
|
</script>
|
|
<script src="{{ asset('js/menu-tree.js') }}"></script>
|
|
@endsection
|