admin/hspguard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: show roles

Browse Source
This commit is contained in:
Amir Adal
2025-06-29 23:20:59 +02:00
parent eb05f830fe
commit f5c61bb6a0
1 changed files with 45 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
web/src/pages/Admin/RolesGroups/index.tsx
View File

@ -1,10 +1,12 @@
import { useEffect, type FC } from "react";
import Breadcrumbs from "@/components/ui/breadcrumbs";
import { getRolesApi } from "@/api/admin/roles";
import { useRoles } from "@/store/admin/rolesGroups";
import type { AppPermission } from "@/types";
interface DisplayRole {
name: string;
description: string;
permissions: AppPermission[];
}
interface IPermissionGroupProps {
@ -15,32 +17,51 @@ interface IPermissionGroupProps {
const RolesGroup: FC<IPermissionGroupProps> = ({ scope, roles }) => {
return (
<div className="border dark:border-gray-800 border-gray-300 p-4 rounded mb-4">
<h2 className="dark:text-gray-300 text-gray-800 text-lg font-semibold">
{scope}
<h2 className="dark:text-gray-300 text-gray-800 text-lg font-semibold mb-4">
{scope.toUpperCase()} <span className="opacity-45">(scope)</span>
</h2>
{(roles?.length ?? 0) > 0 && (
<ol className="grid gap-4 gap-y-3 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 text-gray-800 dark:text-gray-300 font-medium">
{roles!.map(({ name, description }) => (
<li className="before:w-2 before:h-2 before:block before:translate-y-2 before:bg-gray-400 dark:before:bg-gray-700 before:rounded-xs flex flex-row items-start gap-2">
<div className="flex flex-col gap-1">
<label>{name}</label>
<p className="text-xs text-gray-400 dark:text-gray-500">
{description}
</p>
</div>
</li>
))}
</ol>
)}
{roles?.map((role, index) => (
<div>
<h2 className="dark:text-gray-300 text-gray-800 text-md font-semibold">
{role.name.toUpperCase()} <span className="opacity-45">(role)</span>
</h2>
<p className="text-sm text-gray-400 dark:text-gray-500">
{role.description}
</p>
<ol className="grid gap-4 gap-y-3 grid-cols-1 my-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 text-gray-800 dark:text-gray-300 font-medium">
{role.permissions.map(({ name, description }) => (
<li className="before:w-2 before:h-2 before:block before:translate-y-2 before:bg-gray-400 dark:before:bg-gray-700 before:rounded-xs flex flex-row items-start gap-2">
<div className="flex flex-col gap-1">
<label>{name}</label>
<p className="text-xs text-gray-400 dark:text-gray-500">
{description}
</p>
</div>
</li>
))}
</ol>
{index + 1 < roles.length && (
<div className="h-0.5 bg-gray-700 w-full rounded my-6"></div>
)}
</div>
))}
</div>
);
};
const AdminRolesGroupsPage: FC = () => {
const roles = useRoles((s) => s.roles);
const fetch = useRoles((s) => s.fetch);
useEffect(() => {
getRolesApi().then((res) => console.log("roles:", res));
}, []);
fetch();
}, [fetch]);
console.log("roles:", roles);
return (
<div className="relative flex flex-col items-stretch w-full">
@ -58,7 +79,11 @@ const AdminRolesGroupsPage: FC = () => {
]}
/>
</div>
<div className="px-7"></div>
<div className="px-7">
{Object.keys(roles).map((scope) => (
<RolesGroup scope={scope} roles={roles[scope]} />
))}
</div>
</div>
);
};