83 lines
5.0 KiB
Vue
83 lines
5.0 KiB
Vue
<script setup>
|
|
import { formatAnalyticsCount } from '~/lib/analytics-display.js'
|
|
const props = defineProps({ memberId: { type: String, required: true } })
|
|
const searchInput = ref('')
|
|
const filters = ref({ q: '', type: 'all', page: 1 })
|
|
const query = computed(() => ({ ...filters.value, pageSize: 10 }))
|
|
const { data, status, error, refresh } = await useFetch(
|
|
() => `/admin/api/members/${props.memberId}/activity`,
|
|
{ query, default: () => ({ items: [], pagination: { page: 1, pageCount: 1, total: 0 } }) }
|
|
)
|
|
|
|
/**
|
|
* 검색어를 적용하고 첫 페이지를 조회한다.
|
|
* @returns {void}
|
|
*/
|
|
const applySearch = () => { filters.value = { ...filters.value, q: searchInput.value.trim(), page: 1 } }
|
|
|
|
/**
|
|
* 작성 종류를 바꾸고 첫 페이지에서 다시 조회한다.
|
|
* @param {Event} event - 종류 선택 이벤트
|
|
* @returns {void}
|
|
*/
|
|
const changeType = (event) => { filters.value = { q: searchInput.value.trim(), type: event.target.value, page: 1 } }
|
|
|
|
/**
|
|
* 통합 검색 결과에서 선택한 페이지를 조회한다.
|
|
* @param {number} page - 페이지 번호
|
|
* @returns {void}
|
|
*/
|
|
const changePage = (page) => { filters.value = { ...filters.value, page } }
|
|
|
|
/**
|
|
* 작성 시각을 짧은 한국어 날짜로 표시한다.
|
|
* @param {string} value - 작성 시각
|
|
* @returns {string} 날짜·시각
|
|
*/
|
|
const formatCreatedAt = (value) => new Intl.DateTimeFormat('ko-KR', {
|
|
year: 'numeric', month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit', timeZone: 'Asia/Seoul'
|
|
}).format(new Date(value))
|
|
</script>
|
|
|
|
<template>
|
|
<section class="admin-member-activity border border-line bg-white p-4" :aria-busy="status === 'pending'">
|
|
<div class="admin-member-activity__toolbar flex flex-wrap items-center justify-between gap-3">
|
|
<h2 class="admin-member-activity__heading text-sm font-semibold">작성한 글 <span class="text-xs font-normal text-muted">{{ formatAnalyticsCount(data?.pagination.total) }}개 · 최신순</span></h2>
|
|
<form class="admin-member-activity__search flex w-full flex-wrap items-center gap-2 sm:w-auto" role="search" @submit.prevent="applySearch">
|
|
<select class="admin-member-activity__type h-10 rounded border border-line bg-white px-3 text-sm" aria-label="작성 종류" :value="filters.type" @change="changeType">
|
|
<option value="all">전체</option>
|
|
<option value="comment">댓글</option>
|
|
<option value="post">게시글</option>
|
|
</select>
|
|
<AdminSearchInput root-class="min-w-0 flex-1" width-class="w-full sm:w-64" :value="searchInput" label="작성한 글 검색" placeholder="게시글 제목·내용 검색" @input="searchInput = $event.target.value" />
|
|
<button type="submit" class="admin-member-activity__search-button h-10 shrink-0 rounded border border-line px-3 text-sm">검색</button>
|
|
</form>
|
|
</div>
|
|
<p v-if="error" class="admin-member-activity__error py-6 text-sm text-red-700" role="alert">목록을 불러오지 못했습니다. <button type="button" class="underline" @click="refresh()">다시 시도</button></p>
|
|
<p v-else-if="status === 'pending'" class="admin-member-activity__loading py-6 text-sm text-muted">목록을 불러오는 중입니다.</p>
|
|
<p v-else-if="!data?.items.length" class="admin-member-activity__empty py-6 text-sm text-muted">{{ filters.q ? '검색 결과가 없습니다.' : '작성한 글이 없습니다.' }}</p>
|
|
<div v-else class="admin-member-activity__table-wrap mt-3 overflow-x-auto">
|
|
<table class="admin-member-activity__table w-full min-w-[600px] table-fixed text-left text-xs">
|
|
<caption class="sr-only">회원이 작성한 게시글과 댓글 목록</caption>
|
|
<thead class="border-b border-line text-muted">
|
|
<tr>
|
|
<th scope="col" class="w-[32%] py-2 pr-3 font-medium">게시글</th>
|
|
<th scope="col" class="py-2 pr-3 font-medium">내용</th>
|
|
<th scope="col" class="w-44 py-2 font-medium">작성일</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-line">
|
|
<tr v-for="item in data.items" :key="`${item.kind}-${item.id}`" class="admin-member-activity__item">
|
|
<td class="py-2 pr-3">
|
|
<NuxtLink :to="item.publicUrl || `/admin/posts/${item.postId}`" :target="item.publicUrl ? '_blank' : undefined" :rel="item.publicUrl ? 'noopener noreferrer' : undefined" class="admin-member-activity__post block truncate font-medium hover:underline" :title="item.postTitle">{{ item.postTitle || '(제목 없음)' }}</NuxtLink>
|
|
</td>
|
|
<td class="py-2 pr-3"><p class="admin-member-activity__body truncate text-muted" :title="item.body">{{ item.body || '—' }}</p></td>
|
|
<td class="whitespace-nowrap py-2 text-muted"><time :datetime="item.createdAt">{{ formatCreatedAt(item.createdAt) }}</time></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<AdminPagination v-if="status !== 'pending' && !error" :page="data?.pagination.page" :page-count="data?.pagination.pageCount" label="작성한 글 페이지" @update:page="changePage" />
|
|
</section>
|
|
</template>
|