99 lines
4.2 KiB
TypeScript
99 lines
4.2 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";
|
|
import { Button } from "@/shadcn/components/ui/button";
|
|
|
|
export const Route = createLazyFileRoute("/_dashboardLayout/aspect/")({
|
|
component: AspectPage,
|
|
});
|
|
|
|
type DataType = ExtractQueryDataType<typeof aspectQueryOptions>;
|
|
|
|
const columnHelper = createColumnHelper<DataType>();
|
|
|
|
export default function AspectPage() {
|
|
// Function to update URL query string without refreshing
|
|
const updateQueryString = (key: string, value: string) => {
|
|
const searchParams = new URLSearchParams(window.location.search);
|
|
searchParams.set(key, value);
|
|
window.history.pushState({}, "", `?${searchParams.toString()}`);
|
|
};
|
|
|
|
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) => (
|
|
<div className="flex flex-row w-fit items-center rounded gap-2">
|
|
<Button
|
|
variant="ghost"
|
|
className="w-fit items-center hover:bg-gray-300 border"
|
|
onClick={() => updateQueryString("detail", props.row.original.id)}
|
|
>
|
|
<TbEye className="text-black" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
className="w-fit items-center hover:bg-gray-300 border"
|
|
onClick={() => updateQueryString("edit", props.row.original.id)}
|
|
>
|
|
<TbPencil className="text-black" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
className="w-fit items-center hover:bg-gray-300 border"
|
|
onClick={() => updateQueryString("delete", props.row.original.id)}
|
|
>
|
|
<TbTrash className="text-black" />
|
|
</Button>
|
|
</div>
|
|
),
|
|
}),
|
|
]}
|
|
/>
|
|
);
|
|
} |