352 lines
13 KiB
Vue
352 lines
13 KiB
Vue
<template>
|
|
<div>
|
|
<AppHeader />
|
|
|
|
<div class="container-fluid py-4">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h4 class="mb-0"><i class="bi bi-check2-square me-2"></i>TODO 관리</h4>
|
|
<button class="btn btn-primary" @click="openCreateModal">
|
|
<i class="bi bi-plus-lg me-1"></i>새 TODO
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 필터 -->
|
|
<div class="card mb-3">
|
|
<div class="card-body py-2">
|
|
<div class="row g-2 align-items-center">
|
|
<div class="col-1 text-end"><label class="col-form-label">프로젝트</label></div>
|
|
<div class="col-2">
|
|
<select class="form-select form-select-sm" v-model="filter.projectId" @change="loadTodos">
|
|
<option value="">전체</option>
|
|
<option v-for="p in projects" :key="p.projectId" :value="p.projectId">{{ p.projectName }}</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-1 text-end"><label class="col-form-label">담당자</label></div>
|
|
<div class="col-2">
|
|
<select class="form-select form-select-sm" v-model="filter.assigneeId" @change="loadTodos">
|
|
<option value="">전체</option>
|
|
<option v-for="e in employees" :key="e.employeeId" :value="e.employeeId">{{ e.employeeName }}</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-1 text-end"><label class="col-form-label">상태</label></div>
|
|
<div class="col-3">
|
|
<div class="btn-group" role="group">
|
|
<input type="radio" class="btn-check" name="status" id="statusAll" value="" v-model="filter.status" @change="loadTodos">
|
|
<label class="btn btn-outline-secondary btn-sm" for="statusAll">전체</label>
|
|
<input type="radio" class="btn-check" name="status" id="statusPending" value="PENDING" v-model="filter.status" @change="loadTodos">
|
|
<label class="btn btn-outline-secondary btn-sm" for="statusPending">대기</label>
|
|
<input type="radio" class="btn-check" name="status" id="statusProgress" value="IN_PROGRESS" v-model="filter.status" @change="loadTodos">
|
|
<label class="btn btn-outline-secondary btn-sm" for="statusProgress">진행</label>
|
|
<input type="radio" class="btn-check" name="status" id="statusCompleted" value="COMPLETED" v-model="filter.status" @change="loadTodos">
|
|
<label class="btn btn-outline-secondary btn-sm" for="statusCompleted">완료</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-2">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="myOnly" v-model="filter.myOnly" @change="loadTodos">
|
|
<label class="form-check-label" for="myOnly">내 TODO만</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 목록 -->
|
|
<div class="card">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover mb-0">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th style="width: 50px" class="text-center">No</th>
|
|
<th>제목</th>
|
|
<th style="width: 120px">프로젝트</th>
|
|
<th style="width: 80px">담당자</th>
|
|
<th style="width: 100px">마감일</th>
|
|
<th style="width: 80px" class="text-center">상태</th>
|
|
<th style="width: 100px">등록일</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-if="isLoading">
|
|
<td colspan="7" class="text-center py-4"><span class="spinner-border spinner-border-sm"></span></td>
|
|
</tr>
|
|
<tr v-else-if="todos.length === 0">
|
|
<td colspan="7" class="text-center py-5 text-muted">
|
|
<i class="bi bi-inbox display-4"></i>
|
|
<p class="mt-2 mb-0">TODO가 없습니다.</p>
|
|
</td>
|
|
</tr>
|
|
<tr v-else v-for="(todo, idx) in todos" :key="todo.todoId" @click="openEditModal(todo)" style="cursor: pointer">
|
|
<td class="text-center">{{ idx + 1 }}</td>
|
|
<td>
|
|
<div class="fw-bold">{{ todo.todoTitle }}</div>
|
|
<small class="text-muted" v-if="todo.meetingTitle">📋 {{ todo.meetingTitle }}</small>
|
|
</td>
|
|
<td>{{ todo.projectName || '-' }}</td>
|
|
<td>{{ todo.assigneeName || '-' }}</td>
|
|
<td :class="{ 'text-danger': isOverdue(todo) }">{{ formatDate(todo.dueDate) }}</td>
|
|
<td class="text-center">
|
|
<span :class="getStatusBadge(todo.status)">{{ getStatusLabel(todo.status) }}</span>
|
|
</td>
|
|
<td>{{ formatDate(todo.createdAt) }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 생성/수정 모달 -->
|
|
<div class="modal fade" :class="{ show: showModal }" :style="{ display: showModal ? 'block' : 'none' }">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">{{ isEdit ? 'TODO 수정' : '새 TODO' }}</h5>
|
|
<button type="button" class="btn-close" @click="showModal = false"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="mb-3">
|
|
<label class="form-label">제목 <span class="text-danger">*</span></label>
|
|
<input type="text" class="form-control" v-model="form.todoTitle" />
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">내용</label>
|
|
<textarea class="form-control" v-model="form.todoContent" rows="3"></textarea>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<div class="col-6">
|
|
<label class="form-label">프로젝트</label>
|
|
<select class="form-select" v-model="form.projectId">
|
|
<option value="">선택 안함</option>
|
|
<option v-for="p in projects" :key="p.projectId" :value="p.projectId">{{ p.projectName }}</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-6">
|
|
<label class="form-label">담당자</label>
|
|
<select class="form-select" v-model="form.assigneeId">
|
|
<option value="">미지정</option>
|
|
<option v-for="e in employees" :key="e.employeeId" :value="e.employeeId">{{ e.employeeName }}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<div class="col-6">
|
|
<label class="form-label">마감일</label>
|
|
<input type="date" class="form-control" v-model="form.dueDate" />
|
|
</div>
|
|
<div class="col-6">
|
|
<label class="form-label">상태</label>
|
|
<select class="form-select" v-model="form.status">
|
|
<option value="PENDING">대기</option>
|
|
<option value="IN_PROGRESS">진행중</option>
|
|
<option value="COMPLETED">완료</option>
|
|
<option value="CANCELLED">취소</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button v-if="isEdit" type="button" class="btn btn-outline-danger me-auto" @click="deleteTodo">삭제</button>
|
|
<button type="button" class="btn btn-secondary" @click="showModal = false">취소</button>
|
|
<button type="button" class="btn btn-primary" @click="saveTodo" :disabled="isSaving">
|
|
{{ isSaving ? '저장 중...' : '저장' }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-backdrop fade show" v-if="showModal"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { fetchCurrentUser } = useAuth()
|
|
const router = useRouter()
|
|
|
|
interface Todo {
|
|
todoId: number
|
|
todoTitle: string
|
|
todoContent: string
|
|
projectId: number | null
|
|
projectName: string | null
|
|
meetingId: number | null
|
|
meetingTitle: string | null
|
|
assigneeId: number | null
|
|
assigneeName: string | null
|
|
dueDate: string | null
|
|
status: string
|
|
createdAt: string
|
|
}
|
|
|
|
interface Project { projectId: number; projectName: string }
|
|
interface Employee { employeeId: number; employeeName: string }
|
|
|
|
const todos = ref<Todo[]>([])
|
|
const projects = ref<Project[]>([])
|
|
const employees = ref<Employee[]>([])
|
|
const isLoading = ref(false)
|
|
const isSaving = ref(false)
|
|
const showModal = ref(false)
|
|
const isEdit = ref(false)
|
|
const editTodoId = ref<number | null>(null)
|
|
|
|
const filter = ref({
|
|
projectId: '',
|
|
assigneeId: '',
|
|
status: '',
|
|
myOnly: false
|
|
})
|
|
|
|
const form = ref({
|
|
todoTitle: '',
|
|
todoContent: '',
|
|
projectId: '',
|
|
assigneeId: '',
|
|
dueDate: '',
|
|
status: 'PENDING'
|
|
})
|
|
|
|
onMounted(async () => {
|
|
const user = await fetchCurrentUser()
|
|
if (!user) { router.push('/login'); return }
|
|
await Promise.all([loadProjects(), loadEmployees(), loadTodos()])
|
|
})
|
|
|
|
async function loadProjects() {
|
|
try {
|
|
const res = await $fetch<{ projects: Project[] }>('/api/project/list')
|
|
projects.value = res.projects || []
|
|
} catch (e) { console.error(e) }
|
|
}
|
|
|
|
async function loadEmployees() {
|
|
try {
|
|
const res = await $fetch<{ employees: Employee[] }>('/api/employee/list')
|
|
employees.value = res.employees || []
|
|
} catch (e) { console.error(e) }
|
|
}
|
|
|
|
async function loadTodos() {
|
|
isLoading.value = true
|
|
try {
|
|
const res = await $fetch<{ todos: Todo[] }>('/api/todo/list', {
|
|
query: {
|
|
projectId: filter.value.projectId || undefined,
|
|
assigneeId: filter.value.assigneeId || undefined,
|
|
status: filter.value.status || undefined,
|
|
myOnly: filter.value.myOnly || undefined
|
|
}
|
|
})
|
|
todos.value = res.todos || []
|
|
} catch (e) { console.error(e) }
|
|
finally { isLoading.value = false }
|
|
}
|
|
|
|
function openCreateModal() {
|
|
isEdit.value = false
|
|
editTodoId.value = null
|
|
form.value = { todoTitle: '', todoContent: '', projectId: '', assigneeId: '', dueDate: '', status: 'PENDING' }
|
|
showModal.value = true
|
|
}
|
|
|
|
function openEditModal(todo: Todo) {
|
|
isEdit.value = true
|
|
editTodoId.value = todo.todoId
|
|
form.value = {
|
|
todoTitle: todo.todoTitle,
|
|
todoContent: todo.todoContent || '',
|
|
projectId: todo.projectId?.toString() || '',
|
|
assigneeId: todo.assigneeId?.toString() || '',
|
|
dueDate: todo.dueDate?.split('T')[0] || '',
|
|
status: todo.status
|
|
}
|
|
showModal.value = true
|
|
}
|
|
|
|
async function saveTodo() {
|
|
if (!form.value.todoTitle.trim()) {
|
|
alert('제목을 입력해주세요.')
|
|
return
|
|
}
|
|
isSaving.value = true
|
|
try {
|
|
if (isEdit.value && editTodoId.value) {
|
|
await $fetch(`/api/todo/${editTodoId.value}/update`, {
|
|
method: 'PUT',
|
|
body: {
|
|
todoTitle: form.value.todoTitle,
|
|
todoContent: form.value.todoContent || null,
|
|
projectId: form.value.projectId ? Number(form.value.projectId) : null,
|
|
assigneeId: form.value.assigneeId ? Number(form.value.assigneeId) : null,
|
|
dueDate: form.value.dueDate || null,
|
|
status: form.value.status
|
|
}
|
|
})
|
|
} else {
|
|
await $fetch('/api/todo/create', {
|
|
method: 'POST',
|
|
body: {
|
|
todoTitle: form.value.todoTitle,
|
|
todoContent: form.value.todoContent || null,
|
|
projectId: form.value.projectId ? Number(form.value.projectId) : null,
|
|
assigneeId: form.value.assigneeId ? Number(form.value.assigneeId) : null,
|
|
dueDate: form.value.dueDate || null
|
|
}
|
|
})
|
|
}
|
|
showModal.value = false
|
|
await loadTodos()
|
|
} catch (e: any) {
|
|
alert(e.data?.message || '저장에 실패했습니다.')
|
|
} finally {
|
|
isSaving.value = false
|
|
}
|
|
}
|
|
|
|
async function deleteTodo() {
|
|
if (!editTodoId.value) return
|
|
if (!confirm('정말 삭제하시겠습니까?')) return
|
|
try {
|
|
await $fetch(`/api/todo/${editTodoId.value}/delete`, { method: 'DELETE' })
|
|
showModal.value = false
|
|
await loadTodos()
|
|
} catch (e: any) {
|
|
alert(e.data?.message || '삭제에 실패했습니다.')
|
|
}
|
|
}
|
|
|
|
function getStatusBadge(status: string) {
|
|
const badges: Record<string, string> = {
|
|
PENDING: 'badge bg-secondary',
|
|
IN_PROGRESS: 'badge bg-primary',
|
|
COMPLETED: 'badge bg-success',
|
|
CANCELLED: 'badge bg-dark'
|
|
}
|
|
return badges[status] || 'badge bg-secondary'
|
|
}
|
|
|
|
function getStatusLabel(status: string) {
|
|
const labels: Record<string, string> = {
|
|
PENDING: '대기',
|
|
IN_PROGRESS: '진행',
|
|
COMPLETED: '완료',
|
|
CANCELLED: '취소'
|
|
}
|
|
return labels[status] || status
|
|
}
|
|
|
|
function isOverdue(todo: Todo) {
|
|
if (!todo.dueDate || todo.status === 'COMPLETED') return false
|
|
return new Date(todo.dueDate) < new Date()
|
|
}
|
|
|
|
function formatDate(d: string | null) {
|
|
if (!d) return '-'
|
|
return d.split('T')[0]
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.modal.show { background: rgba(0, 0, 0, 0.5); }
|
|
</style>
|