126 lines
2.7 KiB
TypeScript
126 lines
2.7 KiB
TypeScript
import { createColumnHelper } from "@tanstack/react-table";
|
|
import { Badge, Flex, Group, Avatar, Text, Anchor } from "@mantine/core";
|
|
import { TbEye, TbPencil, TbTrash } from "react-icons/tb";
|
|
import CrudPermissions from "@/modules/dashboard/types/CrudPermissions";
|
|
import stringToColorHex from "@/core/utils/stringToColorHex";
|
|
import Link from "next/link";
|
|
import createActionButtons from "@/modules/dashboard/utils/createActionButton";
|
|
|
|
export interface UserRow {
|
|
id: string;
|
|
name: string | null;
|
|
email: string | null;
|
|
photoUrl: string | null;
|
|
roles: string[]
|
|
}
|
|
|
|
interface ColumnOptions {
|
|
permissions: Partial<CrudPermissions>;
|
|
actions: {
|
|
detail: (id: string) => void;
|
|
edit: (id: string) => void;
|
|
delete: (id: string, name: string) => void;
|
|
};
|
|
}
|
|
|
|
const createColumns = (options: ColumnOptions) => {
|
|
const columnHelper = createColumnHelper<UserRow>();
|
|
|
|
const columns = [
|
|
columnHelper.display({
|
|
id: "sequence",
|
|
header: "#",
|
|
cell: (props) => props.row.index + 1,
|
|
size: 1,
|
|
}),
|
|
|
|
columnHelper.accessor("name", {
|
|
header: "Name",
|
|
cell: (props) => (
|
|
<Group>
|
|
<Avatar
|
|
color={stringToColorHex(props.row.original.id)}
|
|
src={props.row.original.photoUrl}
|
|
size={26}
|
|
>
|
|
{props.getValue()?.[0].toUpperCase()}
|
|
</Avatar>
|
|
<Text size="sm" fw={500}>
|
|
{props.getValue()}
|
|
</Text>
|
|
</Group>
|
|
),
|
|
}),
|
|
|
|
columnHelper.accessor("email", {
|
|
header: "Email",
|
|
cell: (props) => (
|
|
<Anchor
|
|
href={`mailto:${props.getValue()}`}
|
|
size="sm"
|
|
component={Link}
|
|
>
|
|
{props.getValue()}
|
|
</Anchor>
|
|
),
|
|
}),
|
|
|
|
columnHelper.accessor("roles", {
|
|
header: "Role",
|
|
cell: (props) => <Text>{props.getValue()[0]}</Text>
|
|
}),
|
|
|
|
columnHelper.display({
|
|
id: "status",
|
|
header: "Status",
|
|
cell: (props) => <Badge color="green">Active</Badge>,
|
|
}),
|
|
|
|
columnHelper.display({
|
|
id: "actions",
|
|
header: "Actions",
|
|
size: 10,
|
|
meta: {
|
|
className: "w-fit",
|
|
},
|
|
cell: (props) => (
|
|
<Flex gap="xs">
|
|
{createActionButtons([
|
|
{
|
|
label: "Detail",
|
|
permission: options.permissions.read,
|
|
action: () =>
|
|
options.actions.detail(props.row.original.id),
|
|
color: "green",
|
|
icon: <TbEye />,
|
|
},
|
|
{
|
|
label: "Edit",
|
|
permission: options.permissions.update,
|
|
action: () =>
|
|
options.actions.edit(props.row.original.id),
|
|
color: "yellow",
|
|
icon: <TbPencil />,
|
|
},
|
|
{
|
|
label: "Delete",
|
|
permission: options.permissions.delete,
|
|
action: () =>
|
|
options.actions.delete(
|
|
props.row.original.id,
|
|
props.row.original.name ?? ""
|
|
),
|
|
color: "red",
|
|
icon: <TbTrash />,
|
|
},
|
|
])}
|
|
</Flex>
|
|
),
|
|
}),
|
|
];
|
|
|
|
return columns;
|
|
};
|
|
|
|
export default createColumns;
|