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

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

@ -1,10 +1,12 @@
import { useEffect, type FC } from "react"; import { useEffect, type FC } from "react";
import Breadcrumbs from "@/components/ui/breadcrumbs"; 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 { interface DisplayRole {
name: string; name: string;
description: string; description: string;
permissions: AppPermission[];
} }
interface IPermissionGroupProps { interface IPermissionGroupProps {
@ -15,13 +17,22 @@ interface IPermissionGroupProps {
const RolesGroup: FC<IPermissionGroupProps> = ({ scope, roles }) => { const RolesGroup: FC<IPermissionGroupProps> = ({ scope, roles }) => {
return ( return (
<div className="border dark:border-gray-800 border-gray-300 p-4 rounded mb-4"> <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"> <h2 className="dark:text-gray-300 text-gray-800 text-lg font-semibold mb-4">
{scope} {scope.toUpperCase()} <span className="opacity-45">(scope)</span>
</h2> </h2>
{(roles?.length ?? 0) > 0 && ( {roles?.map((role, index) => (
<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"> <div>
{roles!.map(({ name, description }) => ( <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"> <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"> <div className="flex flex-col gap-1">
<label>{name}</label> <label>{name}</label>
@ -32,15 +43,25 @@ const RolesGroup: FC<IPermissionGroupProps> = ({ scope, roles }) => {
</li> </li>
))} ))}
</ol> </ol>
{index + 1 < roles.length && (
<div className="h-0.5 bg-gray-700 w-full rounded my-6"></div>
)} )}
</div> </div>
))}
</div>
); );
}; };
const AdminRolesGroupsPage: FC = () => { const AdminRolesGroupsPage: FC = () => {
const roles = useRoles((s) => s.roles);
const fetch = useRoles((s) => s.fetch);
useEffect(() => { useEffect(() => {
getRolesApi().then((res) => console.log("roles:", res)); fetch();
}, []); }, [fetch]);
console.log("roles:", roles);
return ( return (
<div className="relative flex flex-col items-stretch w-full"> <div className="relative flex flex-col items-stretch w-full">
@ -58,7 +79,11 @@ const AdminRolesGroupsPage: FC = () => {
]} ]}
/> />
</div> </div>
<div className="px-7"></div> <div className="px-7">
{Object.keys(roles).map((scope) => (
<RolesGroup scope={scope} roles={roles[scope]} />
))}
</div>
</div> </div>
); );
}; };