Starting to implement permissions into frontend
This commit is contained in:
cdricms
209
frontend/app/(auth)/dashboard/settings/roles/page.tsx
Normal file
209
frontend/app/(auth)/dashboard/settings/roles/page.tsx
Normal file
@@ -0,0 +1,209 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
DialogFooter,
|
||||
} from "@/components/ui/dialog";
|
||||
import { ChevronDown, ChevronRight, Plus, Trash2 } from "lucide-react";
|
||||
import { toTitleCase } from "@/lib/utils";
|
||||
import { useApi } from "@/hooks/use-api";
|
||||
|
||||
type Action = "create" | "read" | "update" | "delete";
|
||||
|
||||
interface Permission {
|
||||
resource: string;
|
||||
actions: Action[];
|
||||
}
|
||||
|
||||
interface Role {
|
||||
name: string;
|
||||
permissions: Permission[];
|
||||
}
|
||||
|
||||
// Sample data
|
||||
const initialRoles: Role[] = [
|
||||
{
|
||||
name: "Admin",
|
||||
permissions: [
|
||||
{
|
||||
resource: "users",
|
||||
actions: ["create", "read", "update", "delete"],
|
||||
},
|
||||
{
|
||||
resource: "events",
|
||||
actions: ["create", "read", "update", "delete"],
|
||||
},
|
||||
{
|
||||
resource: "blogs",
|
||||
actions: ["create", "read", "update", "delete"],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Editor",
|
||||
permissions: [
|
||||
{ resource: "users", actions: ["read"] },
|
||||
{ resource: "events", actions: ["create", "read", "update"] },
|
||||
{ resource: "blogs", actions: ["create", "read", "update"] },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
interface PermissionsGrouped {
|
||||
resource: string;
|
||||
actions: string[];
|
||||
}
|
||||
|
||||
export default function RolesAndPermissions() {
|
||||
const [roles, setRoles] = useState<Role[]>(initialRoles);
|
||||
const [newRoleName, setNewRoleName] = useState<string>("");
|
||||
const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false);
|
||||
|
||||
const { data: permissions } = useApi<PermissionsGrouped[]>(
|
||||
"/permissions/grouped",
|
||||
{},
|
||||
true,
|
||||
);
|
||||
|
||||
const addNewRole = () => {
|
||||
if (newRoleName.trim() === "") return;
|
||||
|
||||
const newRole: Role = {
|
||||
name: newRoleName.trim(),
|
||||
permissions: [
|
||||
{ resource: "users", actions: [] },
|
||||
{ resource: "events", actions: [] },
|
||||
{ resource: "blogs", actions: [] },
|
||||
],
|
||||
};
|
||||
setRoles([...roles, newRole]);
|
||||
setNewRoleName("");
|
||||
setIsDialogOpen(false);
|
||||
};
|
||||
|
||||
const deleteRole = (index: number) => {
|
||||
const updatedRoles = roles.filter((_, i) => i !== index);
|
||||
setRoles(updatedRoles);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container mx-auto p-4 space-y-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<h1 className="text-2xl font-bold">Rôles et Permissions</h1>
|
||||
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button>
|
||||
<Plus className="mr-2 h-4 w-4" /> Nouveau rôle
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Nouveau rôle</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="py-4">
|
||||
<Input
|
||||
placeholder="Nom du rôle"
|
||||
value={newRoleName}
|
||||
onChange={(e) => setNewRoleName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
onClick={addNewRole}
|
||||
disabled={newRoleName.trim() === ""}
|
||||
>
|
||||
Ajouter
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
{roles.map((role, index) => (
|
||||
<RoleCard
|
||||
key={index}
|
||||
role={role}
|
||||
onDelete={() => deleteRole(index)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface RoleCardProps {
|
||||
role: Role;
|
||||
onDelete: () => void;
|
||||
}
|
||||
|
||||
function RoleCard({ role, onDelete }: RoleCardProps) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle>{role.name}</CardTitle>
|
||||
<Button variant="destructive" size="icon" onClick={onDelete}>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{role.permissions.map((permission) => (
|
||||
<ResourceSection
|
||||
key={permission.resource}
|
||||
resource={permission.resource}
|
||||
actions={permission.actions}
|
||||
/>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
interface ResourceSectionProps {
|
||||
resource: string;
|
||||
actions: Action[];
|
||||
}
|
||||
|
||||
function ResourceSection({ resource, actions }: ResourceSectionProps) {
|
||||
const [isExpanded, setIsExpanded] = useState<boolean>(false);
|
||||
|
||||
return (
|
||||
<div className="mb-4">
|
||||
<button
|
||||
className="flex items-center text-lg font-semibold mb-2"
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
>
|
||||
{isExpanded ? (
|
||||
<ChevronDown className="mr-2" />
|
||||
) : (
|
||||
<ChevronRight className="mr-2" />
|
||||
)}
|
||||
{toTitleCase(resource)}
|
||||
</button>
|
||||
{isExpanded && (
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2 ml-6">
|
||||
{actions.map((action) => (
|
||||
<div
|
||||
key={action}
|
||||
className="flex items-center space-x-2"
|
||||
>
|
||||
<Checkbox id={`${resource}-${action}`} />
|
||||
<label
|
||||
htmlFor={`${resource}-${action}`}
|
||||
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
{action}
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -12,6 +12,7 @@ import {
|
||||
Calendar,
|
||||
Loader2,
|
||||
Camera,
|
||||
UserRoundCog,
|
||||
} from "lucide-react";
|
||||
|
||||
import { NavMain } from "@/components/nav-main";
|
||||
@@ -103,6 +104,11 @@ const data = {
|
||||
url: "/dashboard/settings/shortcodes",
|
||||
icon: Camera,
|
||||
},
|
||||
{
|
||||
title: "Rôles et Permissions",
|
||||
url: "/dashboard/settings/roles",
|
||||
icon: UserRoundCog,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
@@ -58,10 +58,7 @@ const Planning: React.FC<{
|
||||
csrfToken: false,
|
||||
});
|
||||
if (res.status === "Error") {
|
||||
console.log("Error");
|
||||
}
|
||||
if (res.status === "Success") {
|
||||
calendar?.events?.update(eventSelected);
|
||||
// calendar?.events?.update(oldEvent);
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
@@ -89,9 +86,12 @@ const Planning: React.FC<{
|
||||
onEventClick(event, e) {
|
||||
setEventSelected(event);
|
||||
},
|
||||
async onEventUpdate(event) {
|
||||
console.log(event);
|
||||
await handleEventUpdate(event);
|
||||
// async onBeforeEventUpdate(oldEvent, newEvent) {
|
||||
// await request("/api/me/has-permissions")
|
||||
// },
|
||||
async onEventUpdate(newEvent) {
|
||||
// console.log(event);
|
||||
await handleEventUpdate(newEvent);
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@@ -4,3 +4,7 @@ import { twMerge } from "tailwind-merge";
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
|
||||
export function toTitleCase(str: string) {
|
||||
return str.replace(/\b\w/g, (char) => char.toUpperCase());
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user