generated from alphane/template
68 lines
1.7 KiB
Vue
68 lines
1.7 KiB
Vue
<template>
|
|
<v-skeleton-loader
|
|
v-if="isEmpty(publicBlogPosts) && isLoading"
|
|
type="list-item-three-line"
|
|
/>
|
|
<v-empty-state
|
|
v-else-if="isEmpty(publicBlogPosts) && !isLoading"
|
|
text="No blog posts found."
|
|
/>
|
|
<template v-else>
|
|
<BlogPostListItemCard
|
|
v-for="blogPost in publicBlogPosts"
|
|
:key="blogPost.id"
|
|
:blog-post="blogPost"
|
|
/>
|
|
</template>
|
|
<EnhancedPagination
|
|
v-model="page"
|
|
v-model:per-page="perPage"
|
|
:total-count="totalCount"
|
|
/>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from "vue"
|
|
import { isEmpty } from "lodash"
|
|
|
|
import useRouteQueryPagination from "@/use/utils/use-route-query-pagination"
|
|
import usePublicBlogPosts, {
|
|
type PublicBlogPostFiltersOptions,
|
|
type PublicBlogPostQueryOptions,
|
|
type PublicBlogPostWhereOptions,
|
|
} from "@/use/use-public-blog-posts"
|
|
|
|
import EnhancedPagination from "@/components/common/EnhancedPagination.vue"
|
|
import BlogPostListItemCard from "@/components/blog-posts/BlogPostListItemCard.vue"
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
filters?: PublicBlogPostFiltersOptions
|
|
where?: PublicBlogPostWhereOptions
|
|
routeQuerySuffix?: string
|
|
waiting?: boolean
|
|
}>(),
|
|
{
|
|
filters: () => ({}),
|
|
where: () => ({}),
|
|
routeQuerySuffix: "BlogPosts",
|
|
waiting: false,
|
|
}
|
|
)
|
|
|
|
const { page, perPage } = useRouteQueryPagination({ routeQuerySuffix: props.routeQuerySuffix })
|
|
const blogPostQueryOptions = computed<PublicBlogPostQueryOptions>(() => ({
|
|
where: props.where,
|
|
filters: props.filters,
|
|
page: page.value,
|
|
perPage: perPage.value,
|
|
}))
|
|
|
|
const { publicBlogPosts, totalCount, isLoading, refresh } = usePublicBlogPosts(
|
|
blogPostQueryOptions,
|
|
{ skipWatchIf: () => props.waiting }
|
|
)
|
|
|
|
defineExpose({ refresh })
|
|
</script>
|