weeklyreport/frontend/report/weekly/index.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-journal-text me-2"></i>주간보고
        </h4>
        <div class="d-flex gap-2">
          <NuxtLink v-if="isAdmin" to="/report/summary" class="btn btn-outline-primary">
            <i class="bi bi-collection me-1"></i>취합하기
          </NuxtLink>
          <NuxtLink to="/report/weekly/write" class="btn btn-primary">
            <i class="bi bi-plus me-1"></i>작성하기
          </NuxtLink>
        </div>
      </div>
      
      <!-- 필터 영역 -->
      <div class="card mb-4">
        <div class="card-body">
          <div class="row g-3 align-items-end">
            <!-- 전체보기 (관리자만) -->
            <div class="col-auto" v-if="isAdmin">
              <div class="form-check">
                <input type="checkbox" class="form-check-input" id="viewAll" v-model="filters.viewAll" @change="loadReports">
                <label class="form-check-label" for="viewAll">전체 보기</label>
              </div>
            </div>
            
            <!-- 작성자 -->
            <div class="col-md-2" v-if="isAdmin">
              <label class="form-label small text-muted">작성자</label>
              <select class="form-select form-select-sm" v-model="filters.authorId" @change="loadReports">
                <option value="">전체</option>
                <option v-for="emp in employees" :key="emp.employeeId" :value="emp.employeeId">
                  {{ emp.employeeName }}
                </option>
              </select>
            </div>
            
            <!-- 연도 -->
            <div class="col-md-1">
              <label class="form-label small text-muted">연도</label>
              <select class="form-select form-select-sm" v-model="filters.year" @change="loadReports">
                <option v-for="y in yearOptions" :key="y" :value="y">{{ y }}년</option>
              </select>
            </div>
            
            <!-- 주차 -->
            <div class="col-md-1">
              <label class="form-label small text-muted">주차</label>
              <select class="form-select form-select-sm" v-model="filters.week" @change="loadReports">
                <option value="">전체</option>
                <option v-for="w in weekOptions" :key="w" :value="w">{{ w }}주</option>
              </select>
            </div>
            
            <!-- 초기화 -->
            <div class="col-auto">
              <button class="btn btn-outline-secondary btn-sm" @click="resetFilters">
                <i class="bi bi-arrow-counterclockwise me-1"></i>초기화
              </button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 목록 -->
      <div class="card">
        <div class="card-body p-0">
          <div class="table-responsive">
            <table class="table table-hover mb-0">
              <thead class="table-light">
                <tr>
                  <th style="width: 120px">주차</th>
                  <th style="width: 180px">기간</th>
                  <th v-if="isAdmin" style="width: 120px">작성자</th>
                  <th>프로젝트</th>
                  <th style="width: 90px">상태</th>
                  <th style="width: 100px">제출일</th>
                </tr>
              </thead>
              <tbody>
                <tr v-if="isLoading">
                  <td :colspan="isAdmin ? 6 : 5" class="text-center py-4">
                    <span class="spinner-border spinner-border-sm me-2"></span>로딩 중...
                  </td>
                </tr>
                <tr v-else-if="reports.length === 0">
                  <td :colspan="isAdmin ? 6 : 5" class="text-center py-5 text-muted">
                    <i class="bi bi-inbox display-4"></i>
                    <p class="mt-2 mb-0">조회된 주간보고가 없습니다.</p>
                  </td>
                </tr>
                <tr v-else v-for="r in reports" :key="r.reportId" 
                  @click="router.push(`/report/weekly/${r.reportId}`)" 
                  style="cursor: pointer;">
                  <td>
                    <strong>{{ r.reportYear }}년 {{ r.reportWeek }}주</strong>
                  </td>
                  <td class="small">
                    {{ formatDate(r.weekStartDate) }} ~ {{ formatDate(r.weekEndDate) }}
                  </td>
                  <td v-if="isAdmin">
                    <span class="badge bg-secondary">{{ r.authorName }}</span>
                  </td>
                  <td>
                    <span class="text-truncate d-inline-block" style="max-width: 400px;" :title="r.projectNames">
                      {{ r.projectNames || '-' }}
                    </span>
                    <span class="badge bg-light text-dark ms-1">{{ r.projectCount }}건</span>
                  </td>
                  <td>
                    <span :class="getStatusBadgeClass(r.reportStatus)">
                      {{ getStatusText(r.reportStatus) }}
                    </span>
                  </td>
                  <td class="small">{{ formatDateTime(r.submittedAt || r.createdAt) }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="card-footer text-muted small" v-if="reports.length > 0">
          총 {{ reports.length }}건
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const { fetchCurrentUser } = useAuth()
const router = useRouter()

const reports = ref<any[]>([])
const employees = ref<any[]>([])
const isLoading = ref(true)
const isAdmin = ref(false)

const currentYear = new Date().getFullYear()
const yearOptions = [currentYear, currentYear - 1, currentYear - 2]
const weekOptions = Array.from({ length: 53 }, (_, i) => i + 1)

const filters = ref({
  viewAll: false,
  authorId: '',
  year: currentYear,
  week: ''
})

onMounted(async () => {
  const user = await fetchCurrentUser()
  if (!user) {
    router.push('/login')
    return
  }
  
  isAdmin.value = user.employeeEmail === 'coziny@gmail.com'
  
  // 직원, 프로젝트 목록 로드 (관리자용)
  if (isAdmin.value) {
    await loadFilterOptions()
  }
  
  loadReports()
})

async function loadFilterOptions() {
  try {
    // 직원 목록
    const empRes = await $fetch<any>('/api/employee/list')
    employees.value = empRes.employees || []
    
    // 프로젝트 목록
    const projRes = await $fetch<any>('/api/project/list')
    projects.value = projRes.projects || []
  } catch (e) {
    console.error(e)
  }
}

async function loadReports() {
  isLoading.value = true
  try {
    const params = new URLSearchParams()
    
    if (filters.value.viewAll) params.append('viewAll', 'true')
    if (filters.value.authorId) params.append('authorId', filters.value.authorId)
    if (filters.value.year) params.append('year', String(filters.value.year))
    if (filters.value.week) params.append('week', String(filters.value.week))
    
    const res = await $fetch<any>(`/api/report/weekly/list?${params.toString()}`)
    reports.value = res.reports || []
  } catch (e) {
    console.error(e)
  } finally {
    isLoading.value = false
  }
}

function resetFilters() {
  filters.value = {
    viewAll: false,
    authorId: '',
    year: currentYear,
    week: ''
  }
  loadReports()
}

function formatDate(dateStr: string) {
  if (!dateStr) return ''
  return dateStr.split('T')[0].replace(/-/g, '.')
}

function formatDateTime(dateStr: string) {
  if (!dateStr) return '-'
  const d = new Date(dateStr)
  return `${d.getMonth() + 1}/${d.getDate()}`
}

function getStatusBadgeClass(status: string) {
  const classes: Record<string, string> = {
    'DRAFT': 'badge bg-secondary',
    'SUBMITTED': 'badge bg-success',
    'AGGREGATED': 'badge bg-info'
  }
  return classes[status] || 'badge bg-secondary'
}

function getStatusText(status: string) {
  const texts: Record<string, string> = {
    'DRAFT': '작성중',
    'SUBMITTED': '제출완료',
    'AGGREGATED': '취합완료'
  }
  return texts[status] || status
}
</script>

<style scoped>
.form-label {
  margin-bottom: 0.25rem;
}
</style>