128 lines
3.4 KiB
TypeScript
128 lines
3.4 KiB
TypeScript
import DT, { type Config, type ConfigColumns } from 'datatables.net-dt'
|
|
import DataTable, { type DataTableSlots } from 'datatables.net-react'
|
|
import { Link, useRouteLoaderData } from 'react-router'
|
|
|
|
import type { TCategoryResponse } from '~/apis/common/get-categories'
|
|
import type { TNewsResponse } from '~/apis/common/get-news'
|
|
import type { TTagResponse } from '~/apis/common/get-tags'
|
|
import { Button } from '~/components/ui/button'
|
|
import { UiTable } from '~/components/ui/table'
|
|
import { TitleDashboard } from '~/components/ui/title-dashboard'
|
|
import type { loader } from '~/routes/_admin.lg-admin._dashboard.contents._index'
|
|
import { formatDate } from '~/utils/formatter'
|
|
|
|
export const ContentsPage = () => {
|
|
const loaderData = useRouteLoaderData<typeof loader>(
|
|
'routes/_admin.lg-admin._dashboard.contents._index',
|
|
)
|
|
|
|
DataTable.use(DT)
|
|
const dataTable =
|
|
loaderData?.newsData?.sort(
|
|
(a, b) => new Date(b.live_at).getTime() - new Date(a.live_at).getTime(),
|
|
) || []
|
|
const dataColumns: ConfigColumns[] = [
|
|
{
|
|
title: 'No',
|
|
render: (
|
|
_data: unknown,
|
|
_type: unknown,
|
|
_row: unknown,
|
|
meta: { row: number },
|
|
) => {
|
|
return meta.row + 1
|
|
},
|
|
},
|
|
{
|
|
title: 'Tanggal Live',
|
|
data: 'live_at',
|
|
},
|
|
{
|
|
title: 'Penulis',
|
|
},
|
|
{ title: 'Judul', data: 'title' },
|
|
{
|
|
title: 'Kategori',
|
|
data: 'categories',
|
|
},
|
|
{ title: 'Tag', data: 'tags' },
|
|
{
|
|
title: 'Subscription',
|
|
data: 'is_premium',
|
|
},
|
|
{
|
|
title: 'Action',
|
|
data: 'slug',
|
|
},
|
|
]
|
|
const dataSlot: DataTableSlots = {
|
|
1: (value: string) => formatDate(value),
|
|
2: (_value: unknown, _type: unknown, data: TNewsResponse) => (
|
|
<div>
|
|
<div>{data.author.name}</div>
|
|
<div className="text-sm text-[#7C7C7C]">
|
|
ID: {data.author.id.slice(0, 8)}
|
|
</div>
|
|
</div>
|
|
),
|
|
3: (value: string) => <span className="text-sm">{value}</span>,
|
|
4: (value: TCategoryResponse[]) => (
|
|
<div className="text-xs">{value.map((item) => item.name).join(', ')}</div>
|
|
),
|
|
5: (value: TTagResponse[]) => (
|
|
<div className="text-xs">{value.map((item) => item.name).join(', ')}</div>
|
|
),
|
|
6: (value: string) =>
|
|
value ? (
|
|
<div className="rounded-full bg-[#FFFCAF] px-2 text-center text-[#DBCA6E]">
|
|
Premium
|
|
</div>
|
|
) : (
|
|
<div className="rounded-full bg-[#F5F5F5] px-2 text-center text-[#4C5CA0]">
|
|
Normal
|
|
</div>
|
|
),
|
|
7: (value: string) => (
|
|
<Button
|
|
as="a"
|
|
href={`/lg-admin/contents/update/${encodeURIComponent(value)}`}
|
|
className="text-md rounded-md"
|
|
size="sm"
|
|
>
|
|
Update Artikel
|
|
</Button>
|
|
),
|
|
}
|
|
const dataOptions: Config = {
|
|
paging: true,
|
|
searching: true,
|
|
ordering: true,
|
|
info: true,
|
|
}
|
|
|
|
return (
|
|
<div className="relative">
|
|
<TitleDashboard title="Artikel" />
|
|
<div className="mb-8 flex items-end justify-between gap-5">
|
|
<div className="flex-1">{/* TODO: Filter */}</div>
|
|
<Button
|
|
as={Link}
|
|
to="/lg-admin/contents/create"
|
|
className="text-md h-[42px] rounded-md"
|
|
size="lg"
|
|
>
|
|
Buat Artikel
|
|
</Button>
|
|
</div>
|
|
|
|
<UiTable
|
|
data={dataTable}
|
|
columns={dataColumns}
|
|
slots={dataSlot}
|
|
options={dataOptions}
|
|
title="Daftar Artikel"
|
|
/>
|
|
</div>
|
|
)
|
|
}
|