268 lines
9.3 KiB
Vue
268 lines
9.3 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
open: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
job: {
|
|
type: Object,
|
|
default: null
|
|
},
|
|
deleting: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['close', 'refresh', 'delete'])
|
|
|
|
/**
|
|
* 날짜·시간을 관리자 화면용 문자열로 변환한다.
|
|
* @param {string|null} value - ISO 날짜 문자열
|
|
* @returns {string} 표시 문자열
|
|
*/
|
|
const formatDateTime = (value) => {
|
|
if (!value) {
|
|
return '-'
|
|
}
|
|
|
|
const date = new Date(value)
|
|
|
|
if (Number.isNaN(date.getTime())) {
|
|
return '-'
|
|
}
|
|
|
|
return new Intl.DateTimeFormat('ko-KR', {
|
|
year: 'numeric',
|
|
month: '2-digit',
|
|
day: '2-digit',
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
}).format(date)
|
|
}
|
|
|
|
/**
|
|
* Import 작업 진행률을 계산한다.
|
|
* @param {Object|null} job - Import 작업
|
|
* @returns {number} 진행률
|
|
*/
|
|
const getProgressPercent = (job) => {
|
|
const totalCount = Number(job?.totalCount || 0)
|
|
|
|
if (job?.status === 'ready') {
|
|
return 100
|
|
}
|
|
|
|
if (totalCount <= 0) {
|
|
return job?.status === 'processing' ? 5 : 0
|
|
}
|
|
|
|
return Math.min(Math.round((Number(job.processedCount || 0) / totalCount) * 100), 100)
|
|
}
|
|
|
|
/**
|
|
* Import 작업 진행 라벨을 만든다.
|
|
* @param {Object|null} job - Import 작업
|
|
* @returns {string} 진행 라벨
|
|
*/
|
|
const getProgressLabel = (job) => {
|
|
const processedCount = Number(job?.processedCount || 0)
|
|
const totalCount = Number(job?.totalCount || 0)
|
|
|
|
if (totalCount <= 0) {
|
|
return '준비 중'
|
|
}
|
|
|
|
return `${processedCount.toLocaleString()} / ${totalCount.toLocaleString()}`
|
|
}
|
|
|
|
/**
|
|
* Import 상태 라벨을 반환한다.
|
|
* @param {string} status - 상태
|
|
* @returns {string} 상태 라벨
|
|
*/
|
|
const getStatusLabel = (status) => ({
|
|
queued: '대기',
|
|
processing: '진행중',
|
|
ready: '완료',
|
|
skipped: '스킵',
|
|
failed: '오류',
|
|
pending: '대기'
|
|
})[status] || '대기'
|
|
|
|
/**
|
|
* Import 상태 스타일을 반환한다.
|
|
* @param {string} status - 상태
|
|
* @returns {string} 클래스 문자열
|
|
*/
|
|
const getStatusClass = (status) => ({
|
|
queued: 'bg-[#eef3ff] text-[#2458b8]',
|
|
processing: 'bg-[#eef3ff] text-[#2458b8]',
|
|
ready: 'bg-[#eefbf3] text-[#147a45]',
|
|
skipped: 'bg-[#f3f5f7] text-[#657080]',
|
|
failed: 'bg-[#fff1f2] text-[#c01f32]',
|
|
pending: 'bg-[#f3f5f7] text-[#657080]'
|
|
})[status] || 'bg-[#f3f5f7] text-[#657080]'
|
|
|
|
/**
|
|
* Import 작업 삭제 가능 여부를 확인한다.
|
|
* @returns {boolean} 삭제 가능 여부
|
|
*/
|
|
const canDeleteJob = computed(() => Boolean(props.job)
|
|
&& props.job.status !== 'queued'
|
|
&& props.job.status !== 'processing'
|
|
&& !props.deleting)
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
v-if="open"
|
|
class="admin-post-import-job-modal fixed inset-0 z-50 flex items-start justify-center bg-black/35 px-4 py-8"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="admin-post-import-job-modal-title"
|
|
>
|
|
<div class="flex max-h-[calc(100vh-4rem)] w-full max-w-5xl flex-col overflow-hidden rounded-xl bg-white shadow-xl">
|
|
<header class="flex shrink-0 items-center justify-between gap-4 border-b border-[#eceff2] px-5 py-4">
|
|
<div class="min-w-0">
|
|
<h2 id="admin-post-import-job-modal-title" class="text-base font-semibold text-[#15171a]">
|
|
게시물 가져오기 작업 센터
|
|
</h2>
|
|
<p class="mt-1 truncate text-xs text-[#657080]">
|
|
{{ job?.originalFileName || '최근 작업' }}
|
|
</p>
|
|
</div>
|
|
<button
|
|
class="grid size-8 shrink-0 cursor-pointer place-items-center rounded-md text-[#657080] transition hover:bg-[#f3f5f7] hover:text-[#15171a]"
|
|
type="button"
|
|
aria-label="닫기"
|
|
@click="emit('close')"
|
|
>
|
|
<svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<path d="M18 6 6 18" />
|
|
<path d="m6 6 12 12" />
|
|
</svg>
|
|
</button>
|
|
</header>
|
|
|
|
<div v-if="job" class="grid min-h-0 gap-4 overflow-auto px-5 py-4">
|
|
<div class="grid gap-3 rounded-lg border border-[#e6e8eb] bg-[#fbfcfd] p-4">
|
|
<div class="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<span
|
|
class="inline-flex rounded-full px-2 py-1 text-xs font-semibold"
|
|
:class="getStatusClass(job.status)"
|
|
>
|
|
{{ getStatusLabel(job.status) }}
|
|
</span>
|
|
<span class="text-sm font-semibold text-[#15171a]">
|
|
{{ getProgressLabel(job) }}
|
|
</span>
|
|
<span class="text-sm text-[#657080]">
|
|
완료 {{ job.importedCount }} · 스킵 {{ job.skippedCount }} · 오류 {{ job.failedCount }}
|
|
</span>
|
|
</div>
|
|
<span class="text-xs text-[#657080]">
|
|
마지막 갱신: {{ formatDateTime(job.updatedAt) }}
|
|
</span>
|
|
</div>
|
|
<div class="h-2 overflow-hidden rounded-full bg-[#e8edf2]">
|
|
<div
|
|
class="h-full rounded-full bg-[#15171a] transition-[width] duration-500"
|
|
:style="{ width: `${getProgressPercent(job)}%` }"
|
|
/>
|
|
</div>
|
|
<p v-if="job.message" class="text-xs text-[#657080]">
|
|
{{ job.message }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="overflow-hidden rounded-lg border border-[#e6e8eb]">
|
|
<div class="grid min-w-[680px] grid-cols-[minmax(0,1fr)_220px_110px] gap-4 border-b border-[#eceff2] bg-[#fbfcfd] px-4 py-3 text-xs font-semibold text-[#394047]">
|
|
<span>게시물 제목</span>
|
|
<span>프로세스</span>
|
|
<span>상태</span>
|
|
</div>
|
|
<div v-if="job.items.length > 0" class="max-h-[52vh] overflow-auto">
|
|
<div
|
|
v-for="item in job.items"
|
|
:key="item.id"
|
|
class="grid min-w-[680px] grid-cols-[minmax(0,1fr)_220px_110px] gap-4 border-b border-[#edf0f3] px-4 py-3 last:border-b-0"
|
|
>
|
|
<div class="min-w-0">
|
|
<p class="truncate text-sm font-semibold text-[#15171a]">
|
|
{{ item.title || item.sourcePath }}
|
|
</p>
|
|
<p class="mt-1 truncate text-xs text-[#8a94a3]">
|
|
{{ item.slug || item.sourcePath }}
|
|
</p>
|
|
</div>
|
|
<div class="grid content-center gap-1">
|
|
<div class="h-1.5 overflow-hidden rounded-full bg-[#e8edf2]">
|
|
<div
|
|
class="h-full rounded-full transition-[width] duration-500"
|
|
:class="item.status === 'failed' ? 'bg-[#d64545]' : item.status === 'skipped' ? 'bg-[#9aa3ad]' : 'bg-[#20a04b]'"
|
|
:style="{ width: `${Number(item.progress || 0)}%` }"
|
|
/>
|
|
</div>
|
|
<p class="truncate text-xs text-[#657080]">
|
|
{{ Number(item.progress || 0) }}% {{ item.message || getStatusLabel(item.status) }}
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<span
|
|
class="inline-flex rounded-full px-2 py-1 text-xs font-semibold"
|
|
:class="getStatusClass(item.status)"
|
|
>
|
|
{{ getStatusLabel(item.status) }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="px-4 py-10 text-center text-sm text-[#657080]">
|
|
게시물 목록을 준비하는 중입니다.
|
|
</div>
|
|
</div>
|
|
|
|
<details
|
|
v-if="job.status === 'failed' && job.errorDetail"
|
|
class="rounded-lg border border-[#ffd5d5] bg-[#fff7f7] p-3 text-xs text-[#8f2d2d]"
|
|
>
|
|
<summary class="cursor-pointer font-semibold">
|
|
실패 원인 보기
|
|
</summary>
|
|
<pre class="mt-2 max-h-40 overflow-auto whitespace-pre-wrap break-words font-mono text-[11px] leading-relaxed">{{ job.errorDetail }}</pre>
|
|
</details>
|
|
</div>
|
|
|
|
<footer class="flex shrink-0 items-center justify-between gap-3 border-t border-[#eceff2] px-5 py-4">
|
|
<button
|
|
class="inline-flex h-9 cursor-pointer items-center justify-center rounded-md border border-[#dce0e5] bg-white px-3 text-xs font-semibold text-[#15171a] transition hover:bg-[#f4f6f8]"
|
|
type="button"
|
|
@click="emit('refresh')"
|
|
>
|
|
새로고침
|
|
</button>
|
|
<div class="flex items-center gap-2">
|
|
<button
|
|
v-if="job"
|
|
class="inline-flex h-9 cursor-pointer items-center justify-center rounded-md border border-[#ffd5d5] bg-white px-3 text-xs font-semibold text-[#d64545] transition hover:bg-[#fff3f3] disabled:cursor-not-allowed disabled:border-[#e1e5ea] disabled:text-[#a6b0bb]"
|
|
type="button"
|
|
:disabled="!canDeleteJob"
|
|
@click="emit('delete', job)"
|
|
>
|
|
{{ deleting ? '삭제 중' : '완료 삭제' }}
|
|
</button>
|
|
<button
|
|
class="inline-flex h-9 cursor-pointer items-center justify-center rounded-md bg-[#15171a] px-4 text-xs font-semibold text-white transition hover:bg-black"
|
|
type="button"
|
|
@click="emit('close')"
|
|
>
|
|
닫기
|
|
</button>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
</template>
|