300 lines
10 KiB
Vue
300 lines
10 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">
|
|
<NuxtLink :to="`/project/${projectId}`" class="text-decoration-none text-muted me-2">
|
|
<i class="bi bi-arrow-left"></i>
|
|
</NuxtLink>
|
|
<i class="bi bi-git me-2"></i>커밋 내역
|
|
</h4>
|
|
<button class="btn btn-outline-primary" @click="refreshCommits" :disabled="isRefreshing">
|
|
<span v-if="isRefreshing" class="spinner-border spinner-border-sm me-1"></span>
|
|
<i v-else class="bi bi-arrow-clockwise me-1"></i>새로고침
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 필터 -->
|
|
<div class="card mb-4">
|
|
<div class="card-body">
|
|
<div class="row g-3 align-items-end">
|
|
<div class="col-md-2">
|
|
<label class="form-label small">시작일</label>
|
|
<input type="date" class="form-control form-control-sm" v-model="filters.startDate" />
|
|
</div>
|
|
<div class="col-md-2">
|
|
<label class="form-label small">종료일</label>
|
|
<input type="date" class="form-control form-control-sm" v-model="filters.endDate" />
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label class="form-label small">저장소</label>
|
|
<select class="form-select form-select-sm" v-model="filters.repoId">
|
|
<option value="">전체</option>
|
|
<option v-for="r in repositories" :key="r.repoId" :value="r.repoId">
|
|
[{{ r.serverType }}] {{ r.repoName }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label class="form-label small">작성자</label>
|
|
<select class="form-select form-select-sm" v-model="filters.authorId">
|
|
<option value="">전체</option>
|
|
<option v-for="a in authors" :key="a.employeeId" :value="a.employeeId">
|
|
{{ a.employeeName }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<button class="btn btn-primary btn-sm w-100" @click="loadCommits">
|
|
<i class="bi bi-search me-1"></i>검색
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 통계 -->
|
|
<div class="row mb-4" v-if="stats">
|
|
<div class="col-md-3">
|
|
<div class="card text-center">
|
|
<div class="card-body py-3">
|
|
<h3 class="mb-1 text-primary">{{ stats.commitCount }}</h3>
|
|
<small class="text-muted">총 커밋</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card text-center">
|
|
<div class="card-body py-3">
|
|
<h3 class="mb-1 text-success">+{{ formatNumber(stats.totalInsertions) }}</h3>
|
|
<small class="text-muted">추가된 라인</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card text-center">
|
|
<div class="card-body py-3">
|
|
<h3 class="mb-1 text-danger">-{{ formatNumber(stats.totalDeletions) }}</h3>
|
|
<small class="text-muted">삭제된 라인</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card text-center">
|
|
<div class="card-body py-3">
|
|
<h3 class="mb-1 text-info">{{ stats.authorCount }}</h3>
|
|
<small class="text-muted">참여자</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 커밋 목록 -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<strong>커밋 목록</strong>
|
|
<span class="text-muted ms-2" v-if="pagination">({{ pagination.total }}건)</span>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<div v-if="isLoading" class="text-center py-5">
|
|
<div class="spinner-border text-primary"></div>
|
|
</div>
|
|
|
|
<div v-else-if="commits.length === 0" class="text-center py-5 text-muted">
|
|
<i class="bi bi-inbox fs-1 d-block mb-2"></i>
|
|
커밋 내역이 없습니다.
|
|
</div>
|
|
|
|
<div v-else class="table-responsive">
|
|
<table class="table table-hover mb-0">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th style="width:140px">날짜</th>
|
|
<th style="width:150px">저장소</th>
|
|
<th style="width:120px">작성자</th>
|
|
<th>커밋 메시지</th>
|
|
<th style="width:100px" class="text-end">변경</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="c in commits" :key="c.commitId">
|
|
<td class="small">{{ formatDateTime(c.commitDate) }}</td>
|
|
<td>
|
|
<span :class="getServerBadgeClass(c.serverType)" class="me-1">{{ c.serverType }}</span>
|
|
<span class="small">{{ c.repoName }}</span>
|
|
</td>
|
|
<td>
|
|
<span v-if="c.employeeName">{{ c.employeeName }}</span>
|
|
<span v-else class="text-muted small">{{ c.commitAuthor }}</span>
|
|
</td>
|
|
<td>
|
|
<code class="me-2 text-muted">{{ c.commitHash }}</code>
|
|
{{ c.commitMessage }}
|
|
</td>
|
|
<td class="text-end small">
|
|
<span class="text-success" v-if="c.insertions">+{{ c.insertions }}</span>
|
|
<span class="text-danger ms-1" v-if="c.deletions">-{{ c.deletions }}</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 페이지네이션 -->
|
|
<div class="card-footer" v-if="pagination && pagination.totalPages > 1">
|
|
<nav>
|
|
<ul class="pagination pagination-sm justify-content-center mb-0">
|
|
<li class="page-item" :class="{ disabled: pagination.page <= 1 }">
|
|
<a class="page-link" href="#" @click.prevent="goToPage(pagination.page - 1)">이전</a>
|
|
</li>
|
|
<li class="page-item" v-for="p in visiblePages" :key="p" :class="{ active: p === pagination.page }">
|
|
<a class="page-link" href="#" @click.prevent="goToPage(p)">{{ p }}</a>
|
|
</li>
|
|
<li class="page-item" :class="{ disabled: pagination.page >= pagination.totalPages }">
|
|
<a class="page-link" href="#" @click.prevent="goToPage(pagination.page + 1)">다음</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const route = useRoute()
|
|
const projectId = computed(() => parseInt(route.params.id as string))
|
|
|
|
const isLoading = ref(false)
|
|
const isRefreshing = ref(false)
|
|
const commits = ref<any[]>([])
|
|
const pagination = ref<any>(null)
|
|
const stats = ref<any>(null)
|
|
const repositories = ref<any[]>([])
|
|
const authors = ref<any[]>([])
|
|
|
|
// 기본 필터: 최근 2주
|
|
const today = new Date()
|
|
const twoWeeksAgo = new Date(today)
|
|
twoWeeksAgo.setDate(today.getDate() - 14)
|
|
|
|
const filters = ref({
|
|
startDate: twoWeeksAgo.toISOString().split('T')[0],
|
|
endDate: today.toISOString().split('T')[0],
|
|
repoId: '',
|
|
authorId: ''
|
|
})
|
|
|
|
// 저장소 목록 로드
|
|
async function loadRepositories() {
|
|
try {
|
|
const data = await $fetch(`/api/repository/list?projectId=${projectId.value}`)
|
|
repositories.value = data.repositories || []
|
|
} catch (e) {
|
|
console.error('저장소 목록 로드 실패:', e)
|
|
}
|
|
}
|
|
|
|
// 작성자 목록 (프로젝트 멤버)
|
|
async function loadAuthors() {
|
|
try {
|
|
const data = await $fetch(`/api/project/${projectId.value}/members`)
|
|
authors.value = data.members || []
|
|
} catch (e) {
|
|
// 멤버 API가 없을 수 있음
|
|
authors.value = []
|
|
}
|
|
}
|
|
|
|
// 커밋 목록 로드
|
|
async function loadCommits(page = 1) {
|
|
isLoading.value = true
|
|
try {
|
|
const params = new URLSearchParams()
|
|
if (filters.value.startDate) params.append('startDate', filters.value.startDate)
|
|
if (filters.value.endDate) params.append('endDate', filters.value.endDate)
|
|
if (filters.value.repoId) params.append('repoId', filters.value.repoId)
|
|
if (filters.value.authorId) params.append('authorId', filters.value.authorId)
|
|
params.append('page', String(page))
|
|
params.append('limit', '50')
|
|
|
|
const data = await $fetch(`/api/project/${projectId.value}/commits?${params}`)
|
|
commits.value = data.commits || []
|
|
pagination.value = data.pagination
|
|
stats.value = data.stats
|
|
} catch (e: any) {
|
|
console.error('커밋 목록 로드 실패:', e)
|
|
alert(e.data?.message || '커밋 목록을 불러오는데 실패했습니다.')
|
|
} finally {
|
|
isLoading.value = false
|
|
}
|
|
}
|
|
|
|
// 새로고침 (동기화)
|
|
async function refreshCommits() {
|
|
if (!confirm('저장소를 동기화하시겠습니까? 잠시 시간이 걸릴 수 있습니다.')) return
|
|
|
|
isRefreshing.value = true
|
|
try {
|
|
const result = await $fetch(`/api/project/${projectId.value}/commits/refresh`, { method: 'POST' })
|
|
alert(result.message || '동기화 완료')
|
|
await loadCommits()
|
|
} catch (e: any) {
|
|
alert(e.data?.message || '동기화 실패')
|
|
} finally {
|
|
isRefreshing.value = false
|
|
}
|
|
}
|
|
|
|
// 페이지 이동
|
|
function goToPage(page: number) {
|
|
if (page < 1 || (pagination.value && page > pagination.value.totalPages)) return
|
|
loadCommits(page)
|
|
}
|
|
|
|
// 보이는 페이지 번호
|
|
const visiblePages = computed(() => {
|
|
if (!pagination.value) return []
|
|
const total = pagination.value.totalPages
|
|
const current = pagination.value.page
|
|
const pages: number[] = []
|
|
|
|
let start = Math.max(1, current - 2)
|
|
let end = Math.min(total, current + 2)
|
|
|
|
if (end - start < 4) {
|
|
if (start === 1) end = Math.min(total, 5)
|
|
else start = Math.max(1, total - 4)
|
|
}
|
|
|
|
for (let i = start; i <= end; i++) pages.push(i)
|
|
return pages
|
|
})
|
|
|
|
// 포맷터
|
|
function formatDateTime(date: string) {
|
|
if (!date) return '-'
|
|
const d = new Date(date)
|
|
return d.toLocaleString('ko-KR', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
|
|
}
|
|
|
|
function formatNumber(num: number) {
|
|
if (!num) return '0'
|
|
return num.toLocaleString()
|
|
}
|
|
|
|
function getServerBadgeClass(type: string) {
|
|
return type === 'GIT' ? 'badge bg-success' : 'badge bg-warning text-dark'
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadRepositories()
|
|
loadAuthors()
|
|
loadCommits()
|
|
})
|
|
</script>
|