f6691730ce
목록 관리를 수신함, 관리함, 폐기함 3개 하위 페이지로 세분화하고 각각 별도의 권한 관리가 가능하도록 시스템 구현 Backend Changes: - page_permissions.py: issues_inbox, issues_management, issues_archive 권한 추가 - 수신함: 기본 접근 허용 (true) - 관리함, 폐기함: 관리자 권한 필요 (false) Frontend Changes: - permissions.js: 3개 하위 페이지 권한 정의 추가 - common-header.js: 드롭다운 하위 메뉴 구조 구현 * 데스크톱: 호버 드롭다운 메뉴 * 모바일: 접을 수 있는 하위 메뉴 - admin.html: 권한 관리 UI에 새 페이지들 추가 Features: - 권한별 하위 메뉴 필터링 - 반응형 드롭다운 메뉴 - 개별 페이지별 권한 제어 - 관리자 페이지에서 세부 권한 설정 가능 Next: 실제 페이지 파일 생성 및 기능 구현 예정
672 lines
28 KiB
HTML
672 lines
28 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>관리자 페이지 - 작업보고서</title>
|
|
|
|
<!-- Tailwind CSS -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
<!-- Font Awesome -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
|
<!-- Custom Styles -->
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
|
|
|
body {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #f0f9ff 100%);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.glass-effect {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
backdrop-filter: blur(10px);
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.nav-link {
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 0.5rem;
|
|
color: #4b5563;
|
|
transition: all 0.2s;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.nav-link:hover {
|
|
background-color: #f3f4f6;
|
|
color: #1f2937;
|
|
}
|
|
|
|
.nav-link.active {
|
|
background-color: #3b82f6;
|
|
color: white;
|
|
}
|
|
|
|
.input-field {
|
|
background: white;
|
|
border: 1px solid #e5e7eb;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.input-field:focus {
|
|
outline: none;
|
|
border-color: #60a5fa;
|
|
box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Header -->
|
|
<header class="bg-white shadow-sm sticky top-0 z-50">
|
|
<div class="container mx-auto px-4 py-3">
|
|
<div class="flex justify-between items-center">
|
|
<h1 class="text-xl font-bold text-gray-800">
|
|
<i class="fas fa-clipboard-list mr-2"></i>작업보고서 시스템 - 관리자
|
|
</h1>
|
|
<button onclick="AuthAPI.logout()" class="px-3 py-1 bg-red-500 text-white rounded hover:bg-red-600 transition-colors text-sm">
|
|
<i class="fas fa-sign-out-alt mr-1"></i>로그아웃
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Navigation -->
|
|
<nav class="bg-white border-b">
|
|
<div class="container mx-auto px-4">
|
|
<div class="flex gap-2 py-2 overflow-x-auto">
|
|
<a href="daily-work.html" class="nav-link">
|
|
<i class="fas fa-calendar-check mr-2"></i>일일 공수
|
|
</a>
|
|
<a href="index.html" class="nav-link">
|
|
<i class="fas fa-camera-retro mr-2"></i>부적합 등록
|
|
</a>
|
|
<a href="issue-view.html" class="nav-link">
|
|
<i class="fas fa-search mr-2"></i>부적합 조회
|
|
</a>
|
|
<a href="index.html#list" class="nav-link">
|
|
<i class="fas fa-list mr-2"></i>목록 관리
|
|
</a>
|
|
<a href="index.html#summary" class="nav-link">
|
|
<i class="fas fa-chart-bar mr-2"></i>보고서
|
|
</a>
|
|
<a href="admin.html" class="nav-link active">
|
|
<i class="fas fa-users-cog mr-2"></i>사용자 관리
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main Content -->
|
|
<main class="container mx-auto px-4 py-8 max-w-6xl">
|
|
<div class="grid md:grid-cols-2 gap-6">
|
|
<!-- 사용자 추가 섹션 -->
|
|
<div class="bg-white rounded-xl shadow-sm p-6">
|
|
<h2 class="text-lg font-semibold text-gray-800 mb-4">
|
|
<i class="fas fa-user-plus text-blue-500 mr-2"></i>사용자 추가
|
|
</h2>
|
|
|
|
<form id="addUserForm" class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">사용자 ID</label>
|
|
<input
|
|
type="text"
|
|
id="newUsername"
|
|
class="input-field w-full px-3 py-2 rounded-lg"
|
|
placeholder="한글 가능 (예: 홍길동)"
|
|
required
|
|
>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">이름</label>
|
|
<input
|
|
type="text"
|
|
id="newFullName"
|
|
class="input-field w-full px-3 py-2 rounded-lg"
|
|
placeholder="실명 입력"
|
|
required
|
|
>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">비밀번호</label>
|
|
<input
|
|
type="password"
|
|
id="newPassword"
|
|
class="input-field w-full px-3 py-2 rounded-lg"
|
|
placeholder="초기 비밀번호"
|
|
required
|
|
>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">권한</label>
|
|
<select id="newRole" class="input-field w-full px-3 py-2 rounded-lg">
|
|
<option value="user">일반 사용자</option>
|
|
<option value="admin">관리자</option>
|
|
</select>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
class="w-full px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
|
|
>
|
|
<i class="fas fa-plus mr-2"></i>사용자 추가
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- 사용자 목록 섹션 -->
|
|
<div class="bg-white rounded-xl shadow-sm p-6">
|
|
<h2 class="text-lg font-semibold text-gray-800 mb-4">
|
|
<i class="fas fa-users text-green-500 mr-2"></i>사용자 목록
|
|
</h2>
|
|
|
|
<div id="userList" class="space-y-3">
|
|
<!-- 사용자 목록이 여기에 표시됩니다 -->
|
|
<div class="text-gray-500 text-center py-8">
|
|
<i class="fas fa-spinner fa-spin text-3xl"></i>
|
|
<p>로딩 중...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 페이지 권한 관리 섹션 (관리자용) -->
|
|
<div id="pagePermissionSection" class="mt-6">
|
|
<div class="bg-white rounded-xl shadow-sm p-6">
|
|
<h2 class="text-lg font-semibold text-gray-800 mb-4">
|
|
<i class="fas fa-shield-alt text-purple-500 mr-2"></i>페이지 접근 권한 관리
|
|
</h2>
|
|
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">사용자 선택</label>
|
|
<select id="permissionUserSelect" class="input-field w-full max-w-xs px-3 py-2 rounded-lg">
|
|
<option value="">사용자를 선택하세요</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div id="pagePermissionGrid" class="hidden">
|
|
<h3 class="text-md font-medium text-gray-700 mb-3">페이지별 접근 권한</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
<!-- 페이지 권한 체크박스들이 여기에 동적으로 생성됩니다 -->
|
|
</div>
|
|
|
|
<div class="mt-4 pt-4 border-t">
|
|
<button
|
|
id="savePermissionsBtn"
|
|
class="px-4 py-2 bg-purple-500 text-white rounded-lg hover:bg-purple-600 transition-colors"
|
|
>
|
|
<i class="fas fa-save mr-2"></i>권한 저장
|
|
</button>
|
|
<span id="permissionSaveStatus" class="ml-3 text-sm"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 비밀번호 변경 섹션 (사용자용) -->
|
|
<div id="passwordChangeSection" class="hidden mt-6">
|
|
<div class="bg-white rounded-xl shadow-sm p-6 max-w-md mx-auto">
|
|
<h2 class="text-lg font-semibold text-gray-800 mb-4">
|
|
<i class="fas fa-key text-yellow-500 mr-2"></i>비밀번호 변경
|
|
</h2>
|
|
|
|
<form id="changePasswordForm" class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">현재 비밀번호</label>
|
|
<input
|
|
type="password"
|
|
id="currentPassword"
|
|
class="input-field w-full px-3 py-2 rounded-lg"
|
|
required
|
|
>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">새 비밀번호</label>
|
|
<input
|
|
type="password"
|
|
id="newPasswordChange"
|
|
class="input-field w-full px-3 py-2 rounded-lg"
|
|
required
|
|
>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">새 비밀번호 확인</label>
|
|
<input
|
|
type="password"
|
|
id="confirmPassword"
|
|
class="input-field w-full px-3 py-2 rounded-lg"
|
|
required
|
|
>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
class="w-full px-4 py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition-colors"
|
|
>
|
|
<i class="fas fa-save mr-2"></i>비밀번호 변경
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Scripts -->
|
|
<script>
|
|
const cacheBuster = Date.now() + Math.random() + Math.floor(Math.random() * 1000000);
|
|
const script = document.createElement('script');
|
|
script.src = `/static/js/api.js?v=20251025-2&cb=${cacheBuster}&t=${Date.now()}&r=${Math.random()}`;
|
|
script.setAttribute('cache-control', 'no-cache');
|
|
script.setAttribute('pragma', 'no-cache');
|
|
script.onload = function() {
|
|
console.log('✅ API 스크립트 로드 완료 (admin.html)');
|
|
// API 로드 후 초기화 시작
|
|
initializeAdmin();
|
|
};
|
|
document.head.appendChild(script);
|
|
</script>
|
|
<script src="/static/js/date-utils.js?v=20250917"></script>
|
|
<script src="/static/js/core/permissions.js?v=20251025"></script>
|
|
<script src="/static/js/components/common-header.js?v=20251025"></script>
|
|
<script src="/static/js/core/page-manager.js?v=20251025"></script>
|
|
<script>
|
|
let currentUser = null;
|
|
let users = [];
|
|
|
|
// API 로드 후 초기화 함수
|
|
async function initializeAdmin() {
|
|
const token = localStorage.getItem('access_token');
|
|
if (!token) {
|
|
window.location.href = '/index.html';
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const user = await AuthAPI.getCurrentUser();
|
|
currentUser = user;
|
|
localStorage.setItem('currentUser', JSON.stringify(user));
|
|
|
|
// 공통 헤더 초기화
|
|
await window.commonHeader.init(user, 'users_manage');
|
|
|
|
} catch (error) {
|
|
console.error('인증 실패:', error);
|
|
localStorage.removeItem('access_token');
|
|
localStorage.removeItem('currentUser');
|
|
window.location.href = '/index.html';
|
|
return;
|
|
}
|
|
|
|
// 관리자가 아니면 비밀번호 변경만 표시
|
|
if (currentUser.role !== 'admin') {
|
|
document.querySelector('.grid').style.display = 'none';
|
|
document.getElementById('passwordChangeSection').classList.remove('hidden');
|
|
} else {
|
|
// 관리자면 사용자 목록 로드
|
|
await loadUsers();
|
|
}
|
|
}
|
|
|
|
// 사용자 추가
|
|
document.getElementById('addUserForm').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
|
|
const userData = {
|
|
username: document.getElementById('newUsername').value.trim(),
|
|
full_name: document.getElementById('newFullName').value.trim(),
|
|
password: document.getElementById('newPassword').value,
|
|
role: document.getElementById('newRole').value
|
|
};
|
|
|
|
try {
|
|
await AuthAPI.createUser(userData);
|
|
|
|
// 성공
|
|
alert('사용자가 추가되었습니다.');
|
|
|
|
// 폼 초기화
|
|
document.getElementById('addUserForm').reset();
|
|
|
|
// 목록 새로고침
|
|
await loadUsers();
|
|
|
|
} catch (error) {
|
|
alert(error.message || '사용자 추가에 실패했습니다.');
|
|
}
|
|
});
|
|
|
|
// 비밀번호 변경
|
|
document.getElementById('changePasswordForm').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
|
|
const currentPassword = document.getElementById('currentPassword').value;
|
|
const newPassword = document.getElementById('newPasswordChange').value;
|
|
const confirmPassword = document.getElementById('confirmPassword').value;
|
|
|
|
if (newPassword !== confirmPassword) {
|
|
alert('새 비밀번호가 일치하지 않습니다.');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await AuthAPI.changePassword(currentPassword, newPassword);
|
|
|
|
alert('비밀번호가 변경되었습니다. 다시 로그인해주세요.');
|
|
AuthAPI.logout();
|
|
|
|
} catch (error) {
|
|
alert(error.message || '비밀번호 변경에 실패했습니다.');
|
|
}
|
|
});
|
|
|
|
// 사용자 목록 로드
|
|
async function loadUsers() {
|
|
try {
|
|
// 백엔드 API에서 사용자 목록 로드
|
|
users = await AuthAPI.getUsers();
|
|
displayUsers();
|
|
} catch (error) {
|
|
console.error('사용자 목록 로드 실패:', error);
|
|
// API 실패 시 빈 배열로 초기화
|
|
users = [];
|
|
displayUsers();
|
|
}
|
|
}
|
|
|
|
// 사용자 목록 표시
|
|
function displayUsers() {
|
|
const container = document.getElementById('userList');
|
|
|
|
if (users.length === 0) {
|
|
container.innerHTML = '<p class="text-gray-500 text-center">등록된 사용자가 없습니다.</p>';
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = users.map(user => `
|
|
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
|
|
<div>
|
|
<div class="font-medium text-gray-800">
|
|
<i class="fas fa-user mr-2 text-gray-500"></i>
|
|
${user.full_name || user.username}
|
|
</div>
|
|
<div class="text-sm text-gray-600">
|
|
ID: ${user.username}
|
|
<span class="ml-2 px-2 py-0.5 rounded text-xs ${
|
|
user.role === 'admin'
|
|
? 'bg-red-100 text-red-700'
|
|
: 'bg-blue-100 text-blue-700'
|
|
}">
|
|
${user.role === 'admin' ? '관리자' : '사용자'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<button
|
|
onclick="resetPassword('${user.username}')"
|
|
class="px-3 py-1 bg-yellow-500 text-white rounded hover:bg-yellow-600 transition-colors text-sm"
|
|
>
|
|
<i class="fas fa-key mr-1"></i>비밀번호 초기화
|
|
</button>
|
|
${user.username !== 'hyungi' ? `
|
|
<button
|
|
onclick="deleteUser('${user.username}')"
|
|
class="px-3 py-1 bg-red-500 text-white rounded hover:bg-red-600 transition-colors text-sm"
|
|
>
|
|
<i class="fas fa-trash mr-1"></i>삭제
|
|
</button>
|
|
` : ''}
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
// 비밀번호 초기화
|
|
async function resetPassword(username) {
|
|
if (!confirm(`${username} 사용자의 비밀번호를 "000000"으로 초기화하시겠습니까?`)) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
// 사용자 ID 찾기
|
|
const user = users.find(u => u.username === username);
|
|
if (!user) {
|
|
alert('사용자를 찾을 수 없습니다.');
|
|
return;
|
|
}
|
|
|
|
// 백엔드 API로 비밀번호 초기화
|
|
await AuthAPI.resetPassword(user.id, '000000');
|
|
|
|
alert(`${username} 사용자의 비밀번호가 "000000"으로 초기화되었습니다.`);
|
|
|
|
// 목록 새로고침
|
|
await loadUsers();
|
|
|
|
} catch (error) {
|
|
alert('비밀번호 초기화에 실패했습니다: ' + error.message);
|
|
}
|
|
}
|
|
|
|
// 사용자 삭제
|
|
async function deleteUser(username) {
|
|
if (!confirm(`정말 ${username} 사용자를 삭제하시겠습니까?`)) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await AuthAPI.deleteUser(username);
|
|
alert('사용자가 삭제되었습니다.');
|
|
await loadUsers();
|
|
} catch (error) {
|
|
alert(error.message || '삭제에 실패했습니다.');
|
|
}
|
|
}
|
|
|
|
// 페이지 권한 관리 기능
|
|
let selectedUserId = null;
|
|
let currentPermissions = {};
|
|
|
|
// AuthAPI를 사용하여 사용자 목록 로드
|
|
async function loadUsers() {
|
|
try {
|
|
users = await AuthAPI.getUsers();
|
|
displayUsers();
|
|
updatePermissionUserSelect(); // 권한 관리 드롭다운 업데이트
|
|
|
|
} catch (error) {
|
|
console.error('사용자 로드 실패:', error);
|
|
document.getElementById('userList').innerHTML = `
|
|
<div class="text-red-500 text-center py-8">
|
|
<i class="fas fa-exclamation-triangle text-3xl"></i>
|
|
<p>사용자 목록을 불러올 수 없습니다.</p>
|
|
<p class="text-sm mt-2">오류: ${error.message}</p>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
// 권한 관리 사용자 선택 드롭다운 업데이트
|
|
function updatePermissionUserSelect() {
|
|
const select = document.getElementById('permissionUserSelect');
|
|
select.innerHTML = '<option value="">사용자를 선택하세요</option>';
|
|
|
|
// 일반 사용자만 표시 (admin 제외)
|
|
const regularUsers = users.filter(user => user.role === 'user');
|
|
regularUsers.forEach(user => {
|
|
const option = document.createElement('option');
|
|
option.value = user.id;
|
|
option.textContent = `${user.full_name || user.username} (${user.username})`;
|
|
select.appendChild(option);
|
|
});
|
|
}
|
|
|
|
// 사용자 선택 시 페이지 권한 그리드 표시
|
|
document.getElementById('permissionUserSelect').addEventListener('change', async (e) => {
|
|
selectedUserId = e.target.value;
|
|
|
|
if (selectedUserId) {
|
|
await loadUserPagePermissions(selectedUserId);
|
|
showPagePermissionGrid();
|
|
} else {
|
|
hidePagePermissionGrid();
|
|
}
|
|
});
|
|
|
|
// 사용자의 페이지 권한 로드
|
|
async function loadUserPagePermissions(userId) {
|
|
try {
|
|
// 기본 페이지 목록 가져오기
|
|
const defaultPages = {
|
|
'issues_create': { title: '부적합 등록', defaultAccess: true },
|
|
'issues_view': { title: '부적합 조회', defaultAccess: true },
|
|
'issues_manage': { title: '부적합 관리', defaultAccess: true },
|
|
'issues_inbox': { title: '수신함', defaultAccess: true },
|
|
'issues_management': { title: '관리함', defaultAccess: false },
|
|
'issues_archive': { title: '폐기함', defaultAccess: false },
|
|
'projects_manage': { title: '프로젝트 관리', defaultAccess: false },
|
|
'daily_work': { title: '일일 공수', defaultAccess: false },
|
|
'reports': { title: '보고서', defaultAccess: false }
|
|
};
|
|
|
|
// 기본값으로 초기화
|
|
currentPermissions = {};
|
|
Object.keys(defaultPages).forEach(pageName => {
|
|
currentPermissions[pageName] = defaultPages[pageName].defaultAccess;
|
|
});
|
|
|
|
// 실제 API 호출로 사용자별 설정된 권한 가져오기
|
|
try {
|
|
const response = await fetch(`/api/users/${userId}/page-permissions`, {
|
|
headers: {
|
|
'Authorization': `Bearer ${localStorage.getItem('access_token')}`
|
|
}
|
|
});
|
|
|
|
if (response.ok) {
|
|
const permissions = await response.json();
|
|
permissions.forEach(perm => {
|
|
currentPermissions[perm.page_name] = perm.can_access;
|
|
});
|
|
console.log('사용자 권한 로드 완료:', currentPermissions);
|
|
} else {
|
|
console.warn('사용자 권한 로드 실패, 기본값 사용');
|
|
}
|
|
} catch (apiError) {
|
|
console.warn('API 호출 실패, 기본값 사용:', apiError);
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('페이지 권한 로드 실패:', error);
|
|
}
|
|
}
|
|
|
|
// 페이지 권한 그리드 표시
|
|
function showPagePermissionGrid() {
|
|
const grid = document.getElementById('pagePermissionGrid');
|
|
const gridContainer = grid.querySelector('.grid');
|
|
|
|
// 페이지 권한 체크박스 생성
|
|
const pages = {
|
|
'issues_create': '부적합 등록',
|
|
'issues_view': '부적합 조회',
|
|
'issues_manage': '부적합 관리',
|
|
'projects_manage': '프로젝트 관리',
|
|
'daily_work': '일일 공수',
|
|
'reports': '보고서'
|
|
};
|
|
|
|
gridContainer.innerHTML = Object.entries(pages).map(([pageName, title]) => `
|
|
<div class="flex items-center p-3 border rounded-lg">
|
|
<input
|
|
type="checkbox"
|
|
id="perm_${pageName}"
|
|
${currentPermissions[pageName] ? 'checked' : ''}
|
|
class="mr-3 h-4 w-4 text-purple-600 rounded focus:ring-purple-500"
|
|
>
|
|
<label for="perm_${pageName}" class="text-sm font-medium text-gray-700">
|
|
${title}
|
|
</label>
|
|
</div>
|
|
`).join('');
|
|
|
|
grid.classList.remove('hidden');
|
|
}
|
|
|
|
// 페이지 권한 그리드 숨기기
|
|
function hidePagePermissionGrid() {
|
|
document.getElementById('pagePermissionGrid').classList.add('hidden');
|
|
}
|
|
|
|
// 권한 저장
|
|
document.getElementById('savePermissionsBtn').addEventListener('click', async () => {
|
|
if (!selectedUserId) return;
|
|
|
|
const saveBtn = document.getElementById('savePermissionsBtn');
|
|
const statusSpan = document.getElementById('permissionSaveStatus');
|
|
|
|
saveBtn.disabled = true;
|
|
saveBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>저장 중...';
|
|
statusSpan.textContent = '';
|
|
|
|
try {
|
|
// 체크박스 상태 수집
|
|
const pages = ['issues_create', 'issues_view', 'issues_manage', 'projects_manage', 'daily_work', 'reports'];
|
|
const permissions = {};
|
|
|
|
pages.forEach(pageName => {
|
|
const checkbox = document.getElementById(`perm_${pageName}`);
|
|
permissions[pageName] = checkbox.checked;
|
|
});
|
|
|
|
// 실제 API 호출로 권한 저장
|
|
const permissionArray = Object.entries(permissions).map(([pageName, canAccess]) => ({
|
|
page_name: pageName,
|
|
can_access: canAccess
|
|
}));
|
|
|
|
const response = await fetch('/api/page-permissions/bulk-grant', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Authorization': `Bearer ${localStorage.getItem('access_token')}`
|
|
},
|
|
body: JSON.stringify({
|
|
user_id: parseInt(selectedUserId),
|
|
permissions: permissionArray
|
|
})
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const errorData = await response.json();
|
|
throw new Error(errorData.detail || '권한 저장에 실패했습니다.');
|
|
}
|
|
|
|
const result = await response.json();
|
|
console.log('권한 저장 완료:', result);
|
|
|
|
statusSpan.textContent = '✅ 권한이 저장되었습니다.';
|
|
statusSpan.className = 'ml-3 text-sm text-green-600';
|
|
|
|
setTimeout(() => {
|
|
statusSpan.textContent = '';
|
|
}, 3000);
|
|
|
|
} catch (error) {
|
|
console.error('권한 저장 실패:', error);
|
|
statusSpan.textContent = '❌ 권한 저장에 실패했습니다.';
|
|
statusSpan.className = 'ml-3 text-sm text-red-600';
|
|
} finally {
|
|
saveBtn.disabled = false;
|
|
saveBtn.innerHTML = '<i class="fas fa-save mr-2"></i>권한 저장';
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|