134 lines
4.1 KiB
JavaScript
134 lines
4.1 KiB
JavaScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { useGetCategoriesQuery, useGetSlidersQuery } from '@/store/services'
|
|
import { useTitle, useUrlQuery } from '@/hooks'
|
|
import { ResponsiveImage, EmptyCustomList, PageContainer, TableSkeleton } from '@/components'
|
|
|
|
const SlidersPage = () => {
|
|
const query = useUrlQuery()
|
|
const category_id = query?.category_id
|
|
const category_name = query?.category_name
|
|
|
|
//? Queries
|
|
//* Get Categories
|
|
const { categories, isLoading: isLoading_get_categories } = useGetCategoriesQuery(undefined, {
|
|
selectFromResult: ({ data, isLoading }) => ({
|
|
categories: data?.data?.categories
|
|
.filter(category => category.level < 2)
|
|
.sort((a, b) => a.level - b.level),
|
|
isLoading,
|
|
skip: !!category_id,
|
|
}),
|
|
})
|
|
|
|
//* Get Sliders
|
|
const { data: sliders, isLoading: isLoadingGetSliders } = useGetSlidersQuery(
|
|
{ category: category_id },
|
|
{ skip: !!!category_id }
|
|
)
|
|
|
|
//? Render(s)
|
|
const title = category_name ? `分类滑块管理 - ${category_name}` : '滑块管理'
|
|
|
|
useTitle(title)
|
|
|
|
const renderContent = () => {
|
|
if (isLoading_get_categories || isLoadingGetSliders) {
|
|
return (
|
|
<tr>
|
|
<td colSpan="4">
|
|
<TableSkeleton />
|
|
</td>
|
|
</tr>
|
|
)
|
|
}
|
|
|
|
if (categories && !category_id) {
|
|
return categories.map(category => (
|
|
<tr
|
|
className="text-xs text-center transition-colors border-b border-gray-100 md:text-sm hover:bg-gray-50/50"
|
|
key={category._id}
|
|
>
|
|
<td className="w-3/4 px-2 py-4">{category.name}</td>
|
|
<td className="px-2 py-4">
|
|
<Link
|
|
href={`/admin/sliders?category_id=${category._id}&category_name=${category.name}`}
|
|
className="bg-rose-50 text-rose-500 rounded-sm py-1 px-1.5 mx-1.5 inline-block"
|
|
>
|
|
子集
|
|
</Link>
|
|
</td>
|
|
</tr>
|
|
))
|
|
}
|
|
|
|
if (sliders && sliders.data && sliders.data.length > 0) {
|
|
return sliders.data.map(slider => (
|
|
<tr
|
|
className="text-xs text-center transition-colors border-b border-gray-100 md:text-sm hover:bg-gray-50/50"
|
|
key={slider._id}
|
|
>
|
|
<td className="px-2 py-4">
|
|
<ResponsiveImage
|
|
dimensions="h-7 w-32"
|
|
className="mx-auto"
|
|
src={slider.image?.url}
|
|
alt=""
|
|
/>
|
|
</td>
|
|
<td className="w-2/4 px-2 py-4">{slider.title}</td>
|
|
<td className="px-2 py-4">
|
|
<Link
|
|
href={`/admin/sliders/edit/${slider._id}?slider_name=${slider.title}`}
|
|
className="bg-rose-50 text-rose-500 rounded-sm py-1 px-1.5 mx-1.5 inline-block"
|
|
>
|
|
编辑
|
|
</Link>
|
|
</td>
|
|
</tr>
|
|
))
|
|
} else
|
|
return (
|
|
<tr>
|
|
<td colSpan="4">
|
|
<EmptyCustomList />
|
|
</td>
|
|
</tr>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<main>
|
|
<PageContainer title={title}>
|
|
<section className="p-3 mx-auto mb-10 space-y-8">
|
|
{category_id && (
|
|
<Link
|
|
href={`sliders/create?category_id=${category_id}&category_name=${category_name}`}
|
|
className="flex items-center px-3 py-2 text-red-600 border-2 border-red-600 rounded-lg max-w-max gap-x-3"
|
|
>
|
|
添加新滑块
|
|
</Link>
|
|
)}
|
|
<div className="mx-3 overflow-x-auto mt-7 lg:mx-5 xl:mx-10">
|
|
<table className="w-full whitespace-nowrap">
|
|
<thead className="h-9 bg-emerald-50">
|
|
<tr className="text-emerald-500">
|
|
{category_name && <th className="border-gray-100 border-x-2">图片</th>}
|
|
<th className="px-2 border-gray-100 border-x-2">
|
|
{category_name ? '标题' : '分类名称'}
|
|
</th>
|
|
<th className="border-gray-100 border-x-2">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="text-gray-600">{renderContent()}</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
</PageContainer>
|
|
</main>
|
|
)
|
|
}
|
|
|
|
export default SlidersPage
|