ristoo/privatedocs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

reactor

Browse Source
This commit is contained in:
Orace.A 2025-03-27 19:55:12 +01:00
parent 0a0deb6c90
commit 391a2bec39
4 changed files with 375 additions and 395 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

499
src/app/admin/admins/page.tsx
View File

@ -1,237 +1,179 @@
"use client" "use client";
import FloatingLabelInput from "#/components/floatingLabelInput" import { useState } from "react";
import { Modal } from "#/components/modal" import Image from "next/image";
import Table from "#/components/table/table" import { useSession } from "next-auth/react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query" import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { ColumnDef } from "@tanstack/react-table" import { ColumnDef } from "@tanstack/react-table";
import axios from "axios" import axios from "axios";
import Image from "next/image" import { DropdownMenu } from "radix-ui";
import { useSession } from "next-auth/react" import FloatingLabelInput from "#/components/floatingLabelInput";
import { DropdownMenu } from "radix-ui" import { Modal } from "#/components/modal";
import { icons } from "#/assets/icons" import Table from "#/components/table/table";
import { useState } from "react" import Form from "#/components/form/form";
import Form from "#/components/form/form" import { icons } from "#/assets/icons";
import { adminSchema } from "#/schema" import { adminSchema } from "#/schema";
import { Admin } from "#/types" import { Admin } from "#/types";
export default function Admins() { export default function Admins() {
const {data: session, status} = useSession() const { data: session, status } = useSession();
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [openModal, setOpenModal] = useState(false); const [openModal, setOpenModal] = useState(false);
const [openDeleteModal, setOpenDeleteModal] = useState(false); const [openDeleteModal, setOpenDeleteModal] = useState(false);
const [openEditModal, setOpenEditModal] = useState(false); const [openEditModal, setOpenEditModal] = useState(false);
const [selectedAdminId, setSelectedAdminId] = useState<string | null>(null); const [selectedAdminId, setSelectedAdminId] = useState<string | null>(null);
const queryClient = useQueryClient()
const { data: users, refetch, isLoading} = useQuery({ const queryClient = useQueryClient();
enabled: status === 'authenticated',
const {
data: users,
refetch,
isLoading,
} = useQuery({
enabled: status === "authenticated",
queryKey: ["users"], queryKey: ["users"],
queryFn: async () => { queryFn: async () => {
try { try {
const response = await axios.get( const response = await axios.get(
'https://private-docs-api.intside.co/users', { "https://private-docs-api.intside.co/users",
headers: {
'Authorization': `Bearer ${session?.user.access_token}`
}
}
)
if(response.data) {
return response.data.data as Admin[]
}
} catch (error) {
console.error(error)
}
}
})
const mutation = useMutation({
mutationFn: async (data: { last_name: string; first_name: string; email: string }) => {
try {
const result = await axios.post(
`https://private-docs-api.intside.co/users/`,
{ {
last_name: data.last_name, headers: { Authorization: `Bearer ${session?.user.access_token}` },
first_name: data.first_name,
email: data.email,
user_type: "admin"
},
{
headers: {
'Authorization': `Bearer ${session?.user.access_token}`
} }
})
if(result.status === 200 || result.status === 201) {
console.log('ajout réussie !')
setOpenModal(false)
}
} catch (error: any) {
if (error.message.includes("Network Error")) {
console.error("Problème de connexion au serveur");
}
console.error("Autre = ", error);
}
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["users"] })
refetch()
},
onError: (error: Error) => {
console.error(error.message)
},
})
const mutationUpdate = useMutation({
mutationFn: async (data: { id: string, last_name: string; first_name: string; email: string }) => {
try {
const result = await axios.put(
`https://private-docs-api.intside.co/users/${data.id}/`,
{
last_name: data.last_name,
first_name: data.first_name,
email: data.email,
},
{
headers: {
'Authorization': `Bearer ${session?.user.access_token}`
}
})
if(result.status === 200 || result.status === 201) {
console.log('modification réussie !')
setOpenEditModal(false)
}
} catch (error: any) {
if (error.message.includes("Network Error")) {
console.error("Problème de connexion au serveur");
}
console.error("Autre = ", error);
}
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["users"] })
refetch()
},
onError: (error: Error) => {
console.error(error.message)
},
})
const bulkDeleteMutation = useMutation({
mutationFn: async (ids: string[]) => {
try {
const deletePromises = ids.map(id =>
axios.delete(`https://private-docs-api.intside.co/users/${id}/`, {
headers: {
'Authorization': `Bearer ${session?.user.access_token}`
}
})
); );
return response.data.data as Admin[];
await Promise.all(deletePromises);
} catch (error) { } catch (error) {
console.error(error); console.error(error);
return [];
}
},
});
const createMutation = useMutation({
mutationFn: async (data: {
last_name: string;
first_name: string;
email: string;
}) => {
try {
const response = await axios.post(
"https://private-docs-api.intside.co/users/",
{ ...data, user_type: "admin" },
{ headers: { Authorization: `Bearer ${session?.user.access_token}` } }
);
if (response.status === 200 || response.status === 201) {
console.log("ajout réussie !");
setOpenModal(false);
}
} catch (error) {
console.error("Erreur lors de la création", error);
} }
}, },
onSuccess: () => { onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["users"] }); queryClient.invalidateQueries({ queryKey: ["users"] });
refetch(); refetch();
} },
}); });
const { mutate, isPending } = useMutation({ const updateMutation = useMutation({
mutationFn: async (id: string) => { mutationFn: async (data: {
id: string;
last_name: string;
first_name: string;
email: string;
}) => {
try { try {
const response = await axios.delete( const response = await axios.put(
`https://private-docs-api.intside.co/users/${id}/`, { `https://private-docs-api.intside.co/users/${data.id}/`,
headers: { data,
'Authorization': `Bearer ${session?.user.access_token}` { headers: { Authorization: `Bearer ${session?.user.access_token}` } }
} );
}
)
if (response.status === 200 || response.status === 201) { if (response.status === 200 || response.status === 201) {
console.log('Suppresion réussie !') console.log("modification réussie !");
setOpenDeleteModal(false) setOpenEditModal(false);
} }
} catch (error) { } catch (error) {
console.error(error) console.error("Erreur lors de la mise à jour", error);
} }
}, },
onSuccess: () => { onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["users"] }) queryClient.invalidateQueries({ queryKey: ["users"] });
refetch();
},
});
refetch() const deleteMutation = useMutation({
mutationFn: async (id: string) => {
try {
const response = await axios.delete(
`https://private-docs-api.intside.co/users/${id}/`,
{
headers: { Authorization: `Bearer ${session?.user.access_token}` },
} }
);
if (response.status === 200 || response.status === 201) {
console.log("Suppresion réussie !");
setOpenDeleteModal(false);
}
} catch (error) {
console.error("Erreur lors de la suppression", error);
}
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["users"] });
refetch();
},
});
const bulkDeleteMutation = useMutation({
mutationFn: async (ids: string[]) => {
try {
const deletePromises = ids.map((id) =>
axios.delete(`https://private-docs-api.intside.co/users/${id}/`, {
headers: { Authorization: `Bearer ${session?.user.access_token}` },
}) })
);
await Promise.all(deletePromises);
} catch (error) {
console.error("Erreur lors de la suppression groupée", error);
}
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["users"] });
refetch();
},
});
const columns: ColumnDef<Admin>[] = [ const columns: ColumnDef<Admin>[] = [
{ {
header: "Administrateurs", header: "Administrateurs",
cell: ({ row }) => { cell: ({ row }) => {
const value = String(row.original.first_name) + " " + String(row.original.last_name) const fullName = `${row.original.first_name} ${row.original.last_name}`;
const initials = String(row.original.first_name[0]) + String(row.original.last_name[0]) const initials = `${row.original.first_name[0]}${row.original.last_name[0]}`;
return ( return (
<div className="flex space-x-2 items-center"> <div className="flex space-x-2 items-center">
<div className="flex items-center justify-center bg-[#DCDCFE] text-[#246BFD] w-10 h-10 rounded-full"> <div className="flex items-center justify-center bg-[#DCDCFE] text-[#246BFD] w-10 h-10 rounded-full">
{initials} {initials}
</div> </div>
<p>{value}</p> <p>{fullName}</p>
</div> </div>
) );
} },
}, },
{ {
accessorKey: "email", accessorKey: "email",
header: "Adresse e-mail" header: "Adresse e-mail",
}, },
// {
// accessorKey: "status",
// header: "Statut",
// cell: ({ cell }) => {
// const status = String(cell.getValue())
// return (
// <p
// className={`rounded-full px-2 py-1 font-medium text-sm w-20 h-6 text-center
// ${
// status === "active" ? "bg-[#ECF9E8] text-[#49C91E]" :
// status === "inactive" ? "bg-[#E7EBF3] text-[#9FA8BC]" :
// status === "pending" ? "bg-[#EAF7FC] text-[#30B2EA]" :
// status === "blocked" ? "bg-[#FDEBE8] text-[#F33F19]" :
// ""
// }
// `}
// >
// {
// status === "active" ? "Actif" :
// status === "inactive" ? "Inactif" :
// status === "pending" ? "En attente" :
// status === "blocked" ? "Bloquée" :
// ""
// }
// </p>
// )
// }
// },
{ {
id: "delete", id: "actions",
cell: ({ cell }) => { cell: ({ row }) => {
const admin = cell.row.original const admin = row.original;
return ( return (
<div className="flex justify-end p-2 cursor-pointer space-x-2" <div className="flex justify-end p-2 space-x-2">
// onClick={() => { mutate(id) }} {/* Modal d'édition */}
>
<Modal <Modal
open={openEditModal && selectedAdminId === admin.id} open={openEditModal && selectedAdminId === admin.id}
onOpenChange={(isOpen) => { onOpenChange={(isOpen) => {
@ -241,62 +183,63 @@ export default function Admins (){
} }
}} }}
trigger={ trigger={
<div onClick={() =>{ <div
onClick={() => {
setSelectedAdminId(admin.id); setSelectedAdminId(admin.id);
setOpenEditModal(true) setOpenEditModal(true);
}}> }}
<Image alt="" width={24} height={24} src={icons.editIcon} className="hover:text-blue-500" /> >
<Image
alt="Éditer"
width={24}
height={24}
src={icons.editIcon}
className="cursor-pointer"
/>
</div> </div>
} }
title={ title="Modifier un admin"
<p className="font-bold text-3xl">Modifier un admin</p>
}
content={ content={
<>
<Form <Form
fields={[ fields={[
{ { name: "id", type: "hidden", defaultValue: admin.id },
name: "id", // Ajoutez un champ caché pour l'ID
type: "hidden",
defaultValue: admin.id
},
{ {
name: "last_name", name: "last_name",
label: "Nom", label: "Nom",
type: "text", type: "text",
placeholder: "Entrer le nom de l'admin", placeholder: "Entrer le nom de l'admin",
defaultValue: admin.last_name defaultValue: admin.last_name,
}, },
{ {
name: "first_name", name: "first_name",
label: "Prénom", label: "Prénom",
type: "text", type: "text",
placeholder: "Entrer le prénom de l'admin", placeholder: "Entrer le prénom de l'admin",
defaultValue: admin.first_name defaultValue: admin.first_name,
}, },
{ {
name: "email", name: "email",
label: "Adresse e-mail", label: "Adresse e-mail",
type: "text", type: "text",
placeholder: "Entrer l'email de l'admin", placeholder: "Entrer l'email de l'admin",
defaultValue: admin.email defaultValue: admin.email,
}, },
// {
// name: "statut",
// label: "Adresse e-mail",
// type: "select",
// placeholder: "Entrer l'email de l'admin",
// options
// }
]} ]}
submit={mutationUpdate.mutate} submit={updateMutation.mutate}
schema={adminSchema} schema={adminSchema}
child={<button onClick={() => setOpenModal(false)} type="submit" className="btn-auth">{isLoading ? "Chargement..." : "Modifier"}</button>} child={
/></> <button
type="submit"
className="btn-auth mt-4 cursor-pointer"
>
Modifier
</button>
}
/>
} }
/> />
{/* Modal de suppression */}
<Modal <Modal
open={openDeleteModal && selectedAdminId === admin.id} open={openDeleteModal && selectedAdminId === admin.id}
onOpenChange={(isOpen) => { onOpenChange={(isOpen) => {
@ -306,32 +249,36 @@ export default function Admins (){
} }
}} }}
trigger={ trigger={
<div onClick={() => { <div
onClick={() => {
setSelectedAdminId(admin.id); setSelectedAdminId(admin.id);
setOpenDeleteModal(true) setOpenDeleteModal(true);
}}> }}
<Image alt="" src={icons.trash} className=" hover:text-blue-500" /> >
<Image
alt="Supprimer"
src={icons.trash}
className="cursor-pointer"
/>
</div> </div>
} }
title={ title="Supprimer un admin"
<p className="font-bold text-3xl">Supprimer un admin</p>
}
content={ content={
<div> <div>
<p>Voulez-vous vraiment supprimer cet admin ?</p> <p>Voulez-vous vraiment supprimer cet admin ?</p>
<div className="grid grid-cols-2 gap-3 mt-3"> <div className="grid grid-cols-2 gap-3 mt-3">
<button <button
className="bg-blue-100 text-blue-600 py-2 px-4 text-lg rounded-full text-center hover:bg-blue-200" className="bg-blue-100 text-blue-600 py-2 px-4 rounded-full cursor-pointer"
onClick={() => { setOpenDeleteModal(false) }} onClick={() => {
setOpenDeleteModal(false);
}}
> >
Annuler Annuler
</button> </button>
<button <button
className="bg-red-500 text-white py-2 px-4 text-lg rounded-full text-center hover:bg-red-600" className="bg-red-500 text-white py-2 px-4 rounded-full hover:bg-red-600 cursor-pointer"
onClick={() => { onClick={() => {
mutate(admin.id) deleteMutation.mutate(admin.id);
setOpenDeleteModal(false)
}} }}
> >
Supprimer Supprimer
@ -341,32 +288,37 @@ export default function Admins (){
} }
/> />
</div> </div>
) );
} },
} },
] ];
return ( return (
<>
<Table <Table
columns={columns} columns={columns}
data={users || []} data={users || []}
pageSize={5} pageSize={5}
header={(table) => { header={(table) => {
const ids = table.getRowModel().rows.filter((row) => row.getIsSelected()).map(row => row.original.id ) const selectedIds = table
if(bulkDeleteMutation.isSuccess) { .getRowModel()
table.toggleAllPageRowsSelected(false) .rows.filter((row) => row.getIsSelected())
} .map((row) => row.original.id);
return (
<>
<div className="grid grid-cols-1 md:grid-cols-2 md:flex-row w-full">
<div className="flex items-center space-x-3">
<input checked={table.getIsAllPageRowsSelected() ||
(table.getIsSomePageRowsSelected() && undefined)}
onChange={(e) => table.toggleAllPageRowsSelected(e.target.checked)}
type="checkbox" name="" id="" />
<DropdownMenu.Root open={open} onOpenChange={setOpen}> return (
<div className="grid grid-cols-1 lg:grid-cols-2 w-full space-y-3">
<div className="flex items-center space-x-3">
<input
type="checkbox"
checked={
table.getIsAllPageRowsSelected() ||
(table.getIsSomePageRowsSelected() && undefined)
}
onChange={(e) =>
table.toggleAllPageRowsSelected(e.target.checked)
}
/>
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild> <DropdownMenu.Trigger asChild>
<p className="cursor-pointer rounded-full bg-gray-300 text-gray-500 p-2"> <p className="cursor-pointer rounded-full bg-gray-300 text-gray-500 p-2">
Sélectionner une action Sélectionner une action
@ -374,8 +326,14 @@ export default function Admins (){
</DropdownMenu.Trigger> </DropdownMenu.Trigger>
<DropdownMenu.Portal> <DropdownMenu.Portal>
<DropdownMenu.Content className="min-w-[150px] shadow-sm bg-white rounded-md p-1" sideOffset={5}> <DropdownMenu.Content
<DropdownMenu.Item onClick={() => bulkDeleteMutation.mutate(ids)} className="p-2 text-[14px] cursor-pointer hover:bg-blue-100 hover:border-blue-100 hover:text-blue-500 hover:rounded-md outline-none"> className="min-w-[150px] shadow-sm bg-white rounded-md p-1"
sideOffset={5}
>
<DropdownMenu.Item
onClick={() => bulkDeleteMutation.mutate(selectedIds)}
className="p-2 text-[14px] cursor-pointer hover:bg-blue-100 hover:text-blue-500 rounded-md"
>
Supprimer Supprimer
</DropdownMenu.Item> </DropdownMenu.Item>
</DropdownMenu.Content> </DropdownMenu.Content>
@ -383,56 +341,77 @@ export default function Admins (){
</DropdownMenu.Root> </DropdownMenu.Root>
</div> </div>
<div className="flex justify-between md:justify-end space-x-3"> <div className="flex justify-between lg:justify-end space-x-3">
{/* Modal d'ajout */}
<Modal <Modal
title="Ajouter un admin" title="Ajouter un admin"
open={openModal} open={openModal}
trigger={<div onClick={() => setOpenModal(true)} className="cursor-pointer p-3 bg-blue-600 text-white rounded-full"> onOpenChange={(isOpen) => {
if (!isOpen) {
setOpen(false);
}
}}
trigger={
<div
onClick={() => setOpenModal(true)}
className="cursor-pointer p-3 bg-blue-600 text-white rounded-full"
>
Ajouter un admin Ajouter un admin
</div>} </div>
}
content={ content={
<>
<Form <Form
fields={[ fields={[
{ {
name: "last_name", name: "last_name",
label: "Nom", label: "Nom",
type: "text", type: "text",
placeholder: "Entrer le nom de l'admin" placeholder: "Entrer le nom de l'admin",
}, },
{ {
name: "first_name", name: "first_name",
label: "Prénom", label: "Prénom",
type: "text", type: "text",
placeholder: "Entrer le prénom de l'admin" placeholder: "Entrer le prénom de l'admin",
}, },
{ {
name: "email", name: "email",
label: "Adresse e-mail", label: "Adresse e-mail",
type: "text", type: "text",
placeholder: "Entrer l'email de l'admin" placeholder: "Entrer l'email de l'admin",
} },
]} ]}
submit={mutation.mutate} submit={createMutation.mutate}
schema={adminSchema} schema={adminSchema}
child={<button type="submit" className="btn-auth">{isLoading ? "Chargement..." : "Créer le compte"}</button>} child={
/> <button
</> type="submit"
className="btn-auth mt-4 cursor-pointer"
>
Créer le compte
</button>
}
/>
} }
/> />
<FloatingLabelInput name="search" placeholder="Effectuer une recherche" type="search" onChange={(value) => table.setGlobalFilter(value)} <FloatingLabelInput
name="search"
placeholder="Effectuer une recherche"
type="search"
onChange={(value) => table.setGlobalFilter(value)}
button={ button={
<Image alt="" src={icons.filterIcon} className="cursor-pointer" /> <Image
alt="Filtrer"
src={icons.filterIcon}
className="cursor-pointer"
/>
} }
/> />
</div> </div>
</div> </div>
</> );
)
}} }}
/> />
</> );
)
} }

1
src/app/admin/home/page.tsx
View File

@ -55,6 +55,7 @@ export default function HomePage () {
if(response.status === 200 || response.status === 201) { if(response.status === 200 || response.status === 201) {
console.log('Suppresion réussie !') console.log('Suppresion réussie !')
setOpen(false)
} }
} catch (error) { } catch (error) {
console.error(error) console.error(error)

2
src/components/floatingLabelInput.tsx
View File

@ -14,7 +14,7 @@ export default function FloatingLabelInput({
showPasswordToggle = false, showPasswordToggle = false,
name, name,
defaultValue, defaultValue,
onChange onChange,
}: FloatingLabelInputProps) { }: FloatingLabelInputProps) {
const [showPassword, setShowPassword] = useState(false); const [showPassword, setShowPassword] = useState(false);

6
src/components/form/form.tsx
View File

@ -42,12 +42,12 @@ export default function Form({
} }
return ( return (
<form className={className} onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<div className="flex justify-center text-black"> <div className="flex justify-center text-black">
<p className="text-3xl font-bold">{title}</p> <p className="text-3xl font-bold">{title}</p>
</div> </div>
<div className="flex flex-col gap-8 mt-2"> <div className={`space-y-8 my-2 ${className}`}>
{ {
fields.map((item, index) => ( fields.map((item, index) => (
@ -67,8 +67,8 @@ export default function Form({
</div> </div>
)) ))
} }
{child}
</div> </div>
{child}
</form> </form>
) )