69 lines
1.6 KiB
TypeScript
69 lines
1.6 KiB
TypeScript
import { groupPermissions } from "@/lib/groupPermission";
|
|
import { Anchor, Flex, Stack, Text } from "@mantine/core";
|
|
import { useState } from "react";
|
|
|
|
interface Node {
|
|
label: string;
|
|
children: any;
|
|
actions: string[];
|
|
}
|
|
|
|
function RenderNode({ node }: { node: Node }) {
|
|
const sub = Object.values(node.children || {});
|
|
|
|
return (
|
|
<Stack pl="md" gap={6}>
|
|
{/* Title */}
|
|
<Text size="sm">- {node.label}</Text>
|
|
|
|
{/* Children */}
|
|
{sub.map((child: any, i) => (
|
|
<RenderNode key={i} node={child} />
|
|
))}
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
function RenderNode2({ node }: { node: Node }) {
|
|
const sub = Object.values(node.children || {});
|
|
|
|
return (
|
|
<Flex direction={"row"} wrap={"wrap"} gap={6}>
|
|
{/* Title */}
|
|
<Text size="sm">{node.label},</Text>
|
|
|
|
{/* Children */}
|
|
{sub.map((child: any, i) => (
|
|
<RenderNode2 key={i} node={child} />
|
|
))}
|
|
</Flex>
|
|
);
|
|
}
|
|
|
|
export default function PermissionRole({
|
|
permissions,
|
|
}: {
|
|
permissions: string[];
|
|
}) {
|
|
const [showAll, setShowAll] = useState(false);
|
|
if (!permissions?.length) return <Text c="dimmed">-</Text>;
|
|
|
|
const groups = groupPermissions(permissions);
|
|
const rootNodes = Object.values(groups);
|
|
|
|
return (
|
|
<Stack gap="sm">
|
|
{showAll
|
|
? rootNodes.map((node: any, idx) => (
|
|
<RenderNode key={idx} node={node} />
|
|
))
|
|
: rootNodes
|
|
.slice(0, 2)
|
|
.map((node: any, idx) => <RenderNode2 key={idx} node={node} />)}
|
|
<Anchor size="xs" onClick={() => setShowAll(!showAll)}>
|
|
{showAll ? "View less" : "View more"}
|
|
</Anchor>
|
|
</Stack>
|
|
);
|
|
}
|