378 lines
10 KiB
Vue
378 lines
10 KiB
Vue
<script setup lang="ts">
|
|
import { t, formatNumber } from '@/i18n'
|
|
|
|
import { computed, onMounted, ref, watch } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { useLocalizedToast } from '@/i18n/presentation'
|
|
import DashboardShell from '@/components/DashboardShell.vue'
|
|
import ArticleStatusBadge from '@/components/ArticleStatusBadge.vue'
|
|
import NewArticleModal from '@/components/NewArticleModal.vue'
|
|
import RecentActivityCard from '@/components/RecentActivityCard.vue'
|
|
import UpdateBanner from '@/components/UpdateBanner.vue'
|
|
import { useArticles, type Article } from '@/composables/useArticles'
|
|
import { useSessionStore } from '@/stores/session'
|
|
import { useUpdateStore } from '@/stores/update'
|
|
import { accountName } from '@/lib/accountName'
|
|
import { formatRelativeDate } from '@/lib/relativeDate'
|
|
import { displayVersion } from '@/lib/updateFormat'
|
|
|
|
const SKELETON_DELAY_MS = 150
|
|
const RECENT_LIST_SIZE = 5
|
|
|
|
type LoadState = 'loading' | 'default' | 'empty' | 'error'
|
|
|
|
const router = useRouter()
|
|
const toast = useLocalizedToast()
|
|
const session = useSessionStore()
|
|
const update = useUpdateStore()
|
|
const { listArticles } = useArticles()
|
|
|
|
const loadState = ref<LoadState>('loading')
|
|
const articles = ref<Article[]>([])
|
|
const showSkeleton = ref(false)
|
|
const newArticleModalOpen = ref(false)
|
|
let skeletonTimer: ReturnType<typeof setTimeout> | null = null
|
|
|
|
function greetingForHour(hour: number) {
|
|
if (hour < 12) {
|
|
return t('Good morning')
|
|
}
|
|
if (hour < 18) {
|
|
return t('Good afternoon')
|
|
}
|
|
return t('Good evening')
|
|
}
|
|
|
|
const greeting = computed(() => {
|
|
const timeOfDayGreeting = greetingForHour(new Date().getHours())
|
|
const name = accountName(session.session?.username ?? '', session.session?.displayName)
|
|
return name ? `${timeOfDayGreeting}, ${name}` : timeOfDayGreeting
|
|
})
|
|
|
|
const subtitle = computed(() =>
|
|
loadState.value === 'empty'
|
|
? t('Welcome to RenewCMS.')
|
|
: t("Here's where things stand on your site."),
|
|
)
|
|
|
|
const stats = computed(() => {
|
|
const online = articles.value.filter((article) => article.is_online).length
|
|
return {
|
|
total: articles.value.length,
|
|
online,
|
|
drafts: articles.value.length - online,
|
|
}
|
|
})
|
|
|
|
const statTiles = computed(() => [
|
|
{
|
|
get label() {
|
|
return t('articles')
|
|
},
|
|
value: stats.value.total,
|
|
},
|
|
{
|
|
get label() {
|
|
return t('online')
|
|
},
|
|
value: stats.value.online,
|
|
},
|
|
{
|
|
get label() {
|
|
return t('drafts')
|
|
},
|
|
value: stats.value.drafts,
|
|
},
|
|
])
|
|
|
|
const recentArticles = computed(() =>
|
|
[...articles.value]
|
|
.sort((a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime())
|
|
.slice(0, RECENT_LIST_SIZE),
|
|
)
|
|
|
|
function clearSkeletonTimer() {
|
|
if (skeletonTimer !== null) {
|
|
clearTimeout(skeletonTimer)
|
|
skeletonTimer = null
|
|
}
|
|
}
|
|
|
|
async function loadArticles() {
|
|
loadState.value = 'loading'
|
|
showSkeleton.value = false
|
|
clearSkeletonTimer()
|
|
skeletonTimer = setTimeout(() => {
|
|
showSkeleton.value = true
|
|
}, SKELETON_DELAY_MS)
|
|
|
|
try {
|
|
const result = await listArticles()
|
|
articles.value = result
|
|
loadState.value = result.length === 0 ? 'empty' : 'default'
|
|
} catch {
|
|
loadState.value = 'error'
|
|
} finally {
|
|
clearSkeletonTimer()
|
|
showSkeleton.value = false
|
|
}
|
|
}
|
|
|
|
function openNewArticleModal() {
|
|
newArticleModalOpen.value = true
|
|
}
|
|
|
|
function onArticleCreated(article: Article) {
|
|
router.push(`/article/${article.id}/edit`)
|
|
toast.add(() => ({
|
|
id: `article-created-${article.id}`,
|
|
color: 'success',
|
|
icon: 'i-lucide-circle-check',
|
|
get title() {
|
|
return t('Draft created')
|
|
},
|
|
get description() {
|
|
return t('\u0022{0}\u0022 is saved as a draft.', [article.title])
|
|
},
|
|
}))
|
|
}
|
|
|
|
const readyBannerDismissed = ref(false)
|
|
|
|
const bannerState = computed(() => {
|
|
if (update.readyToInstall) {
|
|
return readyBannerDismissed.value ? null : 'ready'
|
|
}
|
|
return update.bannerVisible ? 'available' : null
|
|
})
|
|
|
|
function dismissBanner() {
|
|
if (bannerState.value === 'ready') {
|
|
readyBannerDismissed.value = true
|
|
return
|
|
}
|
|
update.dismissBanner()
|
|
}
|
|
|
|
watch(
|
|
() => update.isOwner,
|
|
(isOwner) => {
|
|
if (isOwner) {
|
|
update.load()
|
|
}
|
|
},
|
|
{ immediate: true },
|
|
)
|
|
|
|
onMounted(loadArticles)
|
|
</script>
|
|
|
|
<template>
|
|
<DashboardShell>
|
|
<template #navbar-right>
|
|
<UButton
|
|
icon="i-lucide-plus"
|
|
color="neutral"
|
|
variant="ghost"
|
|
class="size-11 justify-center text-highlighted sm:hidden"
|
|
:ui="{ leadingIcon: 'size-5' }"
|
|
:aria-label="t('New article')"
|
|
@click="openNewArticleModal"
|
|
/>
|
|
</template>
|
|
|
|
<div class="flex flex-col gap-5 lg:gap-7">
|
|
<div class="flex flex-wrap items-end gap-4">
|
|
<div class="flex min-w-50 flex-1 flex-col gap-1">
|
|
<h1 data-testid="greeting" class="text-2xl font-semibold text-highlighted">
|
|
{{ greeting }}
|
|
</h1>
|
|
<p class="text-base/5 text-muted">{{ subtitle }}</p>
|
|
</div>
|
|
<UButton
|
|
icon="i-lucide-plus"
|
|
class="hidden px-3 sm:flex"
|
|
@click="openNewArticleModal"
|
|
>
|
|
{{ t('New article') }}
|
|
</UButton>
|
|
</div>
|
|
|
|
<UpdateBanner
|
|
v-if="bannerState && update.status"
|
|
:state="bannerState"
|
|
:version="displayVersion(update.status.latest)"
|
|
@go-to-settings="router.push('/settings')"
|
|
@dismiss="dismissBanner"
|
|
/>
|
|
|
|
<div
|
|
class="grid grid-cols-1 gap-4 lg:grid-cols-[minmax(0,1fr)_--spacing(105)] lg:items-start"
|
|
>
|
|
<RecentActivityCard class="lg:order-2" />
|
|
<div class="flex min-w-0 flex-col gap-5 lg:order-1 lg:gap-7">
|
|
<template
|
|
v-if="(loadState === 'loading' && showSkeleton) || loadState === 'default'"
|
|
>
|
|
<div class="grid grid-cols-3 gap-3">
|
|
<div
|
|
v-for="tile in statTiles"
|
|
:key="tile.label"
|
|
data-testid="stat-tile"
|
|
class="flex flex-col gap-1 border border-default bg-default p-4"
|
|
>
|
|
<template v-if="loadState === 'loading'">
|
|
<USkeleton class="h-7 w-10 rounded-none bg-accented" />
|
|
<USkeleton class="h-3 w-17.5 rounded-none bg-accented" />
|
|
</template>
|
|
<template v-else>
|
|
<span class="text-2xl font-semibold text-highlighted">{{
|
|
formatNumber(tile.value)
|
|
}}</span>
|
|
<span class="text-muted">{{ tile.label }}</span>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<section class="flex flex-col gap-2.5">
|
|
<div class="flex items-baseline justify-between">
|
|
<h2 class="text-lg font-semibold text-highlighted">
|
|
{{ t('Recently updated') }}
|
|
</h2>
|
|
<RouterLink
|
|
to="/article"
|
|
class="text-toned underline underline-offset-3"
|
|
>
|
|
{{ t('All articles') }}
|
|
</RouterLink>
|
|
</div>
|
|
<div
|
|
v-if="loadState === 'loading'"
|
|
aria-busy="true"
|
|
class="border border-default bg-default"
|
|
>
|
|
<div
|
|
v-for="n in RECENT_LIST_SIZE"
|
|
:key="n"
|
|
class="flex min-h-13 items-center gap-3 border-t border-muted px-3 py-2 lg:min-h-11"
|
|
>
|
|
<USkeleton
|
|
class="h-3 max-w-[60%] flex-1 rounded-none bg-accented"
|
|
/>
|
|
<USkeleton class="h-5 w-14 rounded-none bg-accented" />
|
|
</div>
|
|
</div>
|
|
<ul
|
|
v-else
|
|
data-testid="recent-list"
|
|
class="border border-default bg-default"
|
|
>
|
|
<li v-for="article in recentArticles" :key="article.id">
|
|
<RouterLink
|
|
:to="`/article/${article.id}/edit`"
|
|
class="flex min-h-13 items-center gap-3 border-t border-muted px-3 py-2 lg:min-h-11"
|
|
>
|
|
<span
|
|
class="min-w-0 flex-1 truncate font-medium text-highlighted"
|
|
>
|
|
{{ article.title }}
|
|
</span>
|
|
<ArticleStatusBadge :online="article.is_online" />
|
|
<span class="hidden w-27.5 text-right text-muted lg:inline">
|
|
{{ formatRelativeDate(article.updated_at) }}
|
|
</span>
|
|
</RouterLink>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</template>
|
|
|
|
<UEmpty
|
|
v-else-if="loadState === 'empty'"
|
|
variant="outline"
|
|
icon="i-lucide-file-text"
|
|
:title="t('Write your first article')"
|
|
:description="
|
|
t(
|
|
'It starts as a draft, so nothing appears on your site until you publish it.',
|
|
)
|
|
"
|
|
:ui="{
|
|
root: 'gap-3 rounded-none border border-default px-6 py-12 ring-0 sm:px-6 sm:py-12 lg:px-6 lg:py-12',
|
|
header: 'max-w-none gap-3',
|
|
avatar: 'mb-0 size-11 rounded-none bg-elevated text-xl text-toned',
|
|
title: 'text-[1.125rem] font-semibold',
|
|
description: 'max-w-85 text-base text-wrap text-muted',
|
|
body: 'max-w-none',
|
|
}"
|
|
>
|
|
<template #actions>
|
|
<UButton
|
|
icon="i-lucide-plus"
|
|
class="h-11 px-4 lg:h-8"
|
|
@click="openNewArticleModal"
|
|
>
|
|
{{ t('New article') }}
|
|
</UButton>
|
|
</template>
|
|
</UEmpty>
|
|
|
|
<UAlert
|
|
v-else-if="loadState === 'error'"
|
|
role="alert"
|
|
color="error"
|
|
variant="soft"
|
|
orientation="vertical"
|
|
:close="false"
|
|
icon="i-lucide-circle-x"
|
|
:title="t('Couldn\'t load your articles')"
|
|
:description="t('Check your connection and try again.')"
|
|
:ui="{ actions: 'mt-2' }"
|
|
>
|
|
<template #actions>
|
|
<UButton
|
|
color="neutral"
|
|
variant="outline"
|
|
icon="i-lucide-rotate-cw"
|
|
class="h-7 bg-default px-2.5 text-xs text-highlighted"
|
|
:ui="{ leadingIcon: 'size-3.5' }"
|
|
@click="loadArticles"
|
|
>
|
|
{{ t('Try again') }}
|
|
</UButton>
|
|
</template>
|
|
</UAlert>
|
|
|
|
<div class="flex items-start gap-3.5 border border-default bg-default p-4">
|
|
<div
|
|
class="flex size-9 shrink-0 items-center justify-center bg-secondary-200 text-primary-900 dark:bg-secondary-300"
|
|
>
|
|
<UIcon name="i-lucide-plug" class="size-4.5" />
|
|
</div>
|
|
<div class="flex flex-1 flex-col gap-1">
|
|
<h2 class="text-base/5 font-semibold text-highlighted">
|
|
{{ t('Connect your website') }}
|
|
</h2>
|
|
<p class="text-pretty text-muted">
|
|
{{
|
|
t(
|
|
'Your site reads published articles from RenewCMS. Share this guide with whoever builds it.',
|
|
)
|
|
}}
|
|
</p>
|
|
<RouterLink
|
|
to="/integration"
|
|
class="mt-1 self-start font-medium text-highlighted underline underline-offset-3"
|
|
>
|
|
{{ t('Open the guide') }}
|
|
</RouterLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<NewArticleModal v-model:open="newArticleModalOpen" @created="onArticleCreated" />
|
|
</DashboardShell>
|
|
</template>
|