Files
M-Project/frontend/issues-management.html
Hyungi Ahn d450ff3cbc feat: 관리함 개선 - 데이터 필터링 및 탭 구조 개선
📊 Data Filtering Improvements:
- 관리함에서 수신함에서 처리된 항목만 표시 (in_progress, completed)
- 수신함의 pending_review, disposed 상태 제외
- 올바른 워크플로우 데이터만 관리함에서 처리

🎨 UI Simplification:
- 복잡한 필터 제거 (상태, 우선순위, 담당자, 검색)
- 프로젝트 필터만 유지하여 핵심 기능에 집중
- 더 깔끔하고 직관적인 인터페이스

📋 Status Tabs Implementation:
- 프로젝트 선택 아래에 진행 중/완료됨 탭 추가
- 탭 클릭으로 상태별 이슈 분리 표시
- 진행 중(파란색), 완료됨(초록색) 시각적 구분
- 부드러운 전환 애니메이션 적용

🔧 JavaScript Logic Updates:
- currentTab 변수로 현재 선택된 탭 상태 관리
- switchTab() 함수로 탭 전환 및 스타일 업데이트
- filterIssues() 함수에서 review_status 기반 필터링
- 불필요한 필터링 로직 제거로 성능 개선

🚀 User Experience:
- 프로젝트 선택 → 상태 탭 선택으로 단순한 워크플로우
- 진행 중과 완료됨 항목을 명확히 분리
- 관리함 본연의 목적에 맞는 기능 집중

Expected Result:
 수신함에서 처리된 항목만 관리함에 표시
 프로젝트별 진행 중/완료됨 탭으로 분리
 불필요한 필터 제거로 단순화된 UI
 직관적인 탭 기반 상태 관리
2025-10-25 14:37:10 +09:00

634 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">
<!-- 모바일 캘린더 스타일 -->
<link rel="stylesheet" href="/static/css/mobile-calendar.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', sans-serif;
}
.issue-card {
transition: all 0.2s ease;
border-left: 4px solid transparent;
}
.issue-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.priority-high { border-left-color: #ef4444; }
.priority-medium { border-left-color: #f59e0b; }
.priority-low { border-left-color: #10b981; }
.status-new { border-left-color: #3b82f6; }
.status-processing { border-left-color: #f59e0b; }
.status-pending { border-left-color: #8b5cf6; }
.status-completed { border-left-color: #10b981; }
.action-btn {
transition: all 0.2s ease;
}
.action-btn:hover {
transform: scale(1.05);
}
.modal {
backdrop-filter: blur(4px);
}
.badge {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 500;
}
.badge-new { background: #dbeafe; color: #1e40af; }
.badge-processing { background: #fef3c7; color: #92400e; }
.badge-pending { background: #ede9fe; color: #7c3aed; }
.badge-completed { background: #d1fae5; color: #065f46; }
</style>
</head>
<body class="bg-gray-50 min-h-screen">
<!-- 공통 헤더가 여기에 자동으로 삽입됩니다 -->
<!-- Main Content -->
<main class="container mx-auto px-4 py-8" style="padding-top: 80px;">
<!-- 페이지 헤더 -->
<div class="bg-white rounded-xl shadow-sm p-6 mb-6">
<div class="flex items-center justify-between mb-4">
<div>
<h1 class="text-2xl font-bold text-gray-900 flex items-center">
<i class="fas fa-cog text-green-500 mr-3"></i>
관리함
</h1>
<p class="text-gray-600 mt-1">부적합 사항을 처리하고 상태를 관리하세요</p>
</div>
<div class="flex items-center space-x-3">
<button onclick="bulkAction()" class="px-4 py-2 bg-purple-500 text-white rounded-lg hover:bg-purple-600 transition-colors">
<i class="fas fa-tasks mr-2"></i>
일괄 처리
</button>
<button onclick="exportData()" class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors">
<i class="fas fa-download mr-2"></i>
내보내기
</button>
</div>
</div>
<!-- 관리 통계 -->
<div class="grid grid-cols-1 md:grid-cols-5 gap-4">
<div class="bg-blue-50 p-4 rounded-lg">
<div class="flex items-center">
<i class="fas fa-exclamation-circle text-blue-500 text-xl mr-3"></i>
<div>
<p class="text-sm text-blue-600">처리 필요</p>
<p class="text-2xl font-bold text-blue-700" id="needActionCount">0</p>
</div>
</div>
</div>
<div class="bg-yellow-50 p-4 rounded-lg">
<div class="flex items-center">
<i class="fas fa-spinner text-yellow-500 text-xl mr-3"></i>
<div>
<p class="text-sm text-yellow-600">처리 중</p>
<p class="text-2xl font-bold text-yellow-700" id="processingCount">0</p>
</div>
</div>
</div>
<div class="bg-purple-50 p-4 rounded-lg">
<div class="flex items-center">
<i class="fas fa-pause-circle text-purple-500 text-xl mr-3"></i>
<div>
<p class="text-sm text-purple-600">대기 중</p>
<p class="text-2xl font-bold text-purple-700" id="pendingCount">0</p>
</div>
</div>
</div>
<div class="bg-green-50 p-4 rounded-lg">
<div class="flex items-center">
<i class="fas fa-check-circle text-green-500 text-xl mr-3"></i>
<div>
<p class="text-sm text-green-600">완료</p>
<p class="text-2xl font-bold text-green-700" id="completedCount">0</p>
</div>
</div>
</div>
<div class="bg-gray-50 p-4 rounded-lg">
<div class="flex items-center">
<i class="fas fa-chart-pie text-gray-500 text-xl mr-3"></i>
<div>
<p class="text-sm text-gray-600">전체</p>
<p class="text-2xl font-bold text-gray-700" id="totalCount">0</p>
</div>
</div>
</div>
</div>
</div>
<!-- 프로젝트 필터 및 상태 탭 -->
<div class="bg-white rounded-xl shadow-sm p-6 mb-6">
<div class="space-y-4">
<!-- 프로젝트 선택 -->
<div class="max-w-md">
<label class="block text-sm font-medium text-gray-700 mb-2">📁 프로젝트</label>
<select id="projectFilter" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500" onchange="filterIssues()">
<option value="">전체 프로젝트</option>
</select>
</div>
<!-- 상태 탭 -->
<div class="flex space-x-1 bg-gray-100 p-1 rounded-lg max-w-md">
<button id="inProgressTab"
class="flex-1 px-4 py-2 text-sm font-medium rounded-md transition-colors duration-200 bg-blue-500 text-white"
onclick="switchTab('in_progress')">
<i class="fas fa-cog mr-2"></i>진행 중
</button>
<button id="completedTab"
class="flex-1 px-4 py-2 text-sm font-medium rounded-md transition-colors duration-200 text-gray-600 hover:text-gray-900"
onclick="switchTab('completed')">
<i class="fas fa-check-circle mr-2"></i>완료됨
</button>
</div>
</div>
</div>
<!-- 부적합 관리 목록 -->
<div class="bg-white rounded-xl shadow-sm">
<div class="p-6 border-b border-gray-200">
<div class="flex items-center justify-between">
<h2 class="text-lg font-semibold text-gray-800">부적합 관리</h2>
<div class="flex items-center space-x-4">
<label class="flex items-center">
<input type="checkbox" id="selectAll" onchange="toggleSelectAll()" class="mr-2">
<span class="text-sm text-gray-600">전체 선택</span>
</label>
<select id="sortOrder" class="text-sm border border-gray-300 rounded px-2 py-1" onchange="sortIssues()">
<option value="priority">우선순위</option>
<option value="newest">최신순</option>
<option value="oldest">오래된순</option>
<option value="status">상태순</option>
</select>
</div>
</div>
</div>
<div id="issuesList" class="divide-y divide-gray-200">
<!-- 부적합 목록이 여기에 동적으로 생성됩니다 -->
</div>
<!-- 빈 상태 -->
<div id="emptyState" class="hidden p-12 text-center">
<i class="fas fa-cog text-6xl text-gray-300 mb-4"></i>
<h3 class="text-lg font-medium text-gray-900 mb-2">관리할 부적합이 없습니다</h3>
<p class="text-gray-500">처리가 필요한 부적합이 있으면 여기에 표시됩니다.</p>
</div>
</div>
</main>
<!-- 상태 변경 모달 -->
<div id="statusModal" class="fixed inset-0 bg-black bg-opacity-50 modal hidden z-50">
<div class="flex items-center justify-center min-h-screen p-4">
<div class="bg-white rounded-xl max-w-md w-full p-6">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold text-gray-900">상태 변경</h3>
<button onclick="closeStatusModal()" class="text-gray-400 hover:text-gray-600">
<i class="fas fa-times"></i>
</button>
</div>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">새 상태</label>
<select id="newStatus" class="w-full px-3 py-2 border border-gray-300 rounded-lg">
<option value="processing">처리 중</option>
<option value="pending">대기 중</option>
<option value="completed">완료</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">처리 메모</label>
<textarea id="statusNote" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg"
placeholder="상태 변경 사유나 처리 내용을 입력하세요..."></textarea>
</div>
<div class="flex justify-end space-x-3">
<button onclick="closeStatusModal()" class="px-4 py-2 text-gray-600 hover:text-gray-800">
취소
</button>
<button onclick="updateStatus()" class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600">
변경
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Scripts -->
<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 issues = [];
let projects = [];
let filteredIssues = [];
let selectedIssues = new Set();
let currentIssueId = null;
let currentTab = 'in_progress'; // 기본값: 진행 중
// API 로드 후 초기화 함수
async function initializeManagement() {
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, 'issues_management');
// 페이지 접근 권한 체크
setTimeout(() => {
if (!canAccessPage('issues_management')) {
alert('관리함 페이지에 접근할 권한이 없습니다.');
window.location.href = '/index.html';
return;
}
}, 500);
// 데이터 로드
await loadProjects();
await loadIssues();
} catch (error) {
console.error('인증 실패:', error);
localStorage.removeItem('access_token');
localStorage.removeItem('currentUser');
window.location.href = '/index.html';
}
}
// 프로젝트 로드
async function loadProjects() {
try {
const response = await fetch('/api/projects/', {
headers: {
'Authorization': `Bearer ${localStorage.getItem('access_token')}`,
'Content-Type': 'application/json'
}
});
if (response.ok) {
projects = await response.json();
updateProjectFilter();
}
} catch (error) {
console.error('프로젝트 로드 실패:', error);
}
}
// 부적합 목록 로드 (관리자는 모든 부적합 조회)
async function loadIssues() {
try {
let endpoint = '/api/issues/admin/all';
const response = await fetch(endpoint, {
headers: {
'Authorization': `Bearer ${localStorage.getItem('access_token')}`,
'Content-Type': 'application/json'
}
});
if (response.ok) {
const allIssues = await response.json();
// 관리함에서는 진행 중(in_progress)과 완료됨(completed) 상태만 표시
issues = allIssues.filter(issue =>
issue.review_status === 'in_progress' || issue.review_status === 'completed'
);
filterIssues();
updateStatistics();
} else {
throw new Error('부적합 목록을 불러올 수 없습니다.');
}
} catch (error) {
console.error('부적합 로드 실패:', error);
alert('부적합 목록을 불러오는데 실패했습니다.');
}
}
// 탭 전환 함수
function switchTab(tab) {
currentTab = tab;
// 탭 버튼 스타일 업데이트
const inProgressTab = document.getElementById('inProgressTab');
const completedTab = document.getElementById('completedTab');
if (tab === 'in_progress') {
inProgressTab.className = 'flex-1 px-4 py-2 text-sm font-medium rounded-md transition-colors duration-200 bg-blue-500 text-white';
completedTab.className = 'flex-1 px-4 py-2 text-sm font-medium rounded-md transition-colors duration-200 text-gray-600 hover:text-gray-900';
} else {
inProgressTab.className = 'flex-1 px-4 py-2 text-sm font-medium rounded-md transition-colors duration-200 text-gray-600 hover:text-gray-900';
completedTab.className = 'flex-1 px-4 py-2 text-sm font-medium rounded-md transition-colors duration-200 bg-green-500 text-white';
}
filterIssues();
}
// 필터링 및 표시 함수들
function filterIssues() {
const projectFilter = document.getElementById('projectFilter').value;
filteredIssues = issues.filter(issue => {
// 현재 탭에 따른 상태 필터링
if (issue.review_status !== currentTab) return false;
// 프로젝트 필터링
if (projectFilter && issue.project_id != projectFilter) return false;
return true;
});
sortIssues();
displayIssues();
}
function sortIssues() {
const sortOrder = document.getElementById('sortOrder').value;
filteredIssues.sort((a, b) => {
switch (sortOrder) {
case 'priority':
const priorityOrder = { 'high': 3, 'medium': 2, 'low': 1 };
return (priorityOrder[b.priority] || 1) - (priorityOrder[a.priority] || 1);
case 'newest':
return new Date(b.report_date) - new Date(a.report_date);
case 'oldest':
return new Date(a.report_date) - new Date(b.report_date);
case 'status':
const statusOrder = { 'new': 4, 'processing': 3, 'pending': 2, 'completed': 1 };
return (statusOrder[b.status] || 0) - (statusOrder[a.status] || 0);
default:
return new Date(b.report_date) - new Date(a.report_date);
}
});
}
function displayIssues() {
const container = document.getElementById('issuesList');
const emptyState = document.getElementById('emptyState');
if (filteredIssues.length === 0) {
container.innerHTML = '';
emptyState.classList.remove('hidden');
return;
}
emptyState.classList.add('hidden');
container.innerHTML = filteredIssues.map(issue => {
const project = projects.find(p => p.id === issue.project_id);
const createdDate = new Date(issue.created_at).toLocaleDateString('ko-KR');
const isSelected = selectedIssues.has(issue.id);
return `
<div class="issue-card p-6 status-${issue.status} ${isSelected ? 'bg-blue-50' : ''}"
onclick="toggleIssueSelection(${issue.id})">
<div class="flex items-start justify-between">
<div class="flex items-start space-x-3 flex-1">
<input type="checkbox" ${isSelected ? 'checked' : ''}
onchange="toggleIssueSelection(${issue.id})"
onclick="event.stopPropagation()"
class="mt-1">
<div class="flex-1">
<div class="flex items-center space-x-3 mb-2">
<span class="badge badge-${getStatusBadgeClass(issue.status)}">${getStatusText(issue.status)}</span>
${getPriorityBadge(issue.priority)}
${project ? `<span class="text-sm text-gray-500">${project.project_name}</span>` : ''}
</div>
<h3 class="text-lg font-medium text-gray-900 mb-2">${issue.description}</h3>
<div class="flex items-center text-sm text-gray-500 space-x-4">
<span><i class="fas fa-user mr-1"></i>${issue.reporter?.username || '알 수 없음'}</span>
<span><i class="fas fa-calendar mr-1"></i>${createdDate}</span>
${issue.category ? `<span><i class="fas fa-tag mr-1"></i>${getCategoryText(issue.category)}</span>` : ''}
</div>
</div>
</div>
<div class="flex items-center space-x-2 ml-4">
<button onclick="event.stopPropagation(); openStatusModal(${issue.id})"
class="action-btn px-3 py-1 bg-green-500 text-white rounded hover:bg-green-600 transition-colors">
<i class="fas fa-edit mr-1"></i>상태 변경
</button>
<button onclick="event.stopPropagation(); viewIssueDetail(${issue.id})"
class="action-btn px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors">
<i class="fas fa-eye mr-1"></i>상세
</button>
</div>
</div>
</div>
`;
}).join('');
}
// 통계 업데이트
function updateStatistics() {
const needAction = issues.filter(issue => issue.status === 'new').length;
const processing = issues.filter(issue => issue.status === 'processing').length;
const pending = issues.filter(issue => issue.status === 'pending').length;
const completed = issues.filter(issue => issue.status === 'completed').length;
document.getElementById('needActionCount').textContent = needAction;
document.getElementById('processingCount').textContent = processing;
document.getElementById('pendingCount').textContent = pending;
document.getElementById('completedCount').textContent = completed;
document.getElementById('totalCount').textContent = issues.length;
}
// 선택 관리
function toggleIssueSelection(issueId) {
if (selectedIssues.has(issueId)) {
selectedIssues.delete(issueId);
} else {
selectedIssues.add(issueId);
}
displayIssues();
}
function toggleSelectAll() {
const selectAll = document.getElementById('selectAll').checked;
if (selectAll) {
filteredIssues.forEach(issue => selectedIssues.add(issue.id));
} else {
selectedIssues.clear();
}
displayIssues();
}
// 상태 변경 모달
function openStatusModal(issueId) {
currentIssueId = issueId;
document.getElementById('statusModal').classList.remove('hidden');
}
function closeStatusModal() {
currentIssueId = null;
document.getElementById('statusModal').classList.add('hidden');
document.getElementById('newStatus').value = 'processing';
document.getElementById('statusNote').value = '';
}
async function updateStatus() {
if (!currentIssueId) return;
const newStatus = document.getElementById('newStatus').value;
const note = document.getElementById('statusNote').value;
try {
const response = await fetch(`/api/issues/${currentIssueId}`, {
method: 'PUT',
headers: {
'Authorization': `Bearer ${localStorage.getItem('access_token')}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({
status: newStatus,
note: note
})
});
if (response.ok) {
await loadIssues();
closeStatusModal();
alert('상태가 성공적으로 변경되었습니다.');
} else {
throw new Error('상태 변경에 실패했습니다.');
}
} catch (error) {
console.error('상태 변경 실패:', error);
alert('상태 변경에 실패했습니다.');
}
}
// 기타 함수들
function bulkAction() {
if (selectedIssues.size === 0) {
alert('처리할 부적합을 선택해주세요.');
return;
}
// 일괄 처리 로직 구현
alert(`${selectedIssues.size}개의 부적합을 일괄 처리합니다.`);
}
function exportData() {
// 데이터 내보내기 로직 구현
alert('데이터를 내보냅니다.');
}
function viewIssueDetail(issueId) {
window.location.href = `/issue-view.html#detail-${issueId}`;
}
// 유틸리티 함수들
function updateProjectFilter() {
const projectFilter = document.getElementById('projectFilter');
projectFilter.innerHTML = '<option value="">전체 프로젝트</option>';
projects.forEach(project => {
const option = document.createElement('option');
option.value = project.id;
option.textContent = project.project_name;
projectFilter.appendChild(option);
});
}
function getStatusBadgeClass(status) {
const statusMap = {
'new': 'new',
'processing': 'processing',
'pending': 'pending',
'completed': 'completed'
};
return statusMap[status] || 'new';
}
function getStatusText(status) {
const statusMap = {
'new': '새 부적합',
'processing': '처리 중',
'pending': '대기 중',
'completed': '완료'
};
return statusMap[status] || status;
}
function getPriorityBadge(priority) {
const priorityMap = {
'high': { text: '높음', class: 'bg-red-100 text-red-800' },
'medium': { text: '보통', class: 'bg-yellow-100 text-yellow-800' },
'low': { text: '낮음', class: 'bg-green-100 text-green-800' }
};
const p = priorityMap[priority] || { text: '보통', class: 'bg-gray-100 text-gray-800' };
return `<span class="badge ${p.class}">${p.text}</span>`;
}
function getCategoryText(category) {
const categoryMap = {
'material_missing': '자재 누락',
'design_error': '설계 오류',
'incoming_defect': '반입 불량',
'inspection_miss': '검사 누락',
'etc': '기타'
};
return categoryMap[category] || category;
}
// API 스크립트 동적 로딩
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 스크립트 로드 완료 (issues-management.html)');
initializeManagement();
};
script.onerror = function() {
console.error('❌ API 스크립트 로드 실패');
};
document.head.appendChild(script);
</script>
</body>
</html>