93 lines
3.8 KiB
TypeScript
93 lines
3.8 KiB
TypeScript
import { aspectQueryOptions } from "@/modules/aspectManagement/queries/aspectQueries";
|
|
import PageTemplate from "@/components/PageTemplate";
|
|
import { createLazyFileRoute } from "@tanstack/react-router";
|
|
import AspectFormModal from "@/modules/aspectManagement/modals/AspectFormModal";
|
|
import ExtractQueryDataType from "@/types/ExtractQueryDataType";
|
|
import { createColumnHelper } from "@tanstack/react-table";
|
|
import { Flex } from "@mantine/core";
|
|
import createActionButtons from "@/utils/createActionButton";
|
|
import { TbEye, TbPencil, TbTrash } from "react-icons/tb";
|
|
import AspectDeleteModal from "@/modules/aspectManagement/modals/AspectDeleteModal";
|
|
|
|
export const Route = createLazyFileRoute("/_dashboardLayout/aspect/")({
|
|
component: AspectPage,
|
|
});
|
|
|
|
type DataType = ExtractQueryDataType<typeof aspectQueryOptions>;
|
|
|
|
const columnHelper = createColumnHelper<DataType>();
|
|
|
|
export default function AspectPage() {
|
|
return (
|
|
<PageTemplate
|
|
title="Manajemen Aspek"
|
|
queryOptions={aspectQueryOptions}
|
|
modals={[<AspectFormModal />, <AspectDeleteModal />]}
|
|
columnDefs={[
|
|
// Number of columns
|
|
columnHelper.display({
|
|
header: "#",
|
|
cell: (props) => props.row.index + 1,
|
|
}),
|
|
|
|
// Aspect columns
|
|
columnHelper.display({
|
|
header: "Nama Aspek",
|
|
cell: (props) => props.row.original.name || "Tidak ada Aspek",
|
|
}),
|
|
|
|
// Sub aspect columns
|
|
columnHelper.display({
|
|
header: "Sub Aspek",
|
|
cell: (props) => {
|
|
const subAspects = props.row.original.subAspects || [];
|
|
return subAspects.length > 0 ? (
|
|
<span>
|
|
{subAspects.map((subAspect, index) => (
|
|
<span key={subAspect.id}>
|
|
{subAspect.name}
|
|
{index < subAspects.length - 1 ? ", " : ""}
|
|
</span>
|
|
))}
|
|
</span>
|
|
) : (
|
|
<span>Tidak ada Sub Aspek</span>
|
|
);
|
|
},
|
|
}),
|
|
|
|
// Actions columns
|
|
columnHelper.display({
|
|
header: "Aksi",
|
|
cell: (props) => (
|
|
<Flex gap="xs">
|
|
{createActionButtons([
|
|
{
|
|
label: "Detail",
|
|
permission: true,
|
|
action: `?detail=${props.row.original.id}`,
|
|
color: "green",
|
|
icon: <TbEye />,
|
|
},
|
|
{
|
|
label: "Edit",
|
|
permission: true,
|
|
action: `?edit=${props.row.original.id}`,
|
|
color: "orange",
|
|
icon: <TbPencil />,
|
|
},
|
|
{
|
|
label: "Hapus",
|
|
permission: true,
|
|
action: `?delete=${props.row.original.id}`,
|
|
color: "red",
|
|
icon: <TbTrash />,
|
|
},
|
|
])}
|
|
</Flex>
|
|
),
|
|
}),
|
|
]}
|
|
/>
|
|
);
|
|
} |