This commit is contained in:
Orace.A 2025-03-27 19:55:12 +01:00 committed by Ruben
parent f860fed456
commit c7489f6a23
4 changed files with 429 additions and 449 deletions

View File

@ -1,237 +1,179 @@
"use client"
"use client";
import FloatingLabelInput from "#/components/floatingLabelInput"
import { Modal } from "#/components/modal"
import Table from "#/components/table/table"
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
import { ColumnDef } from "@tanstack/react-table"
import axios from "axios"
import Image from "next/image"
import { useSession } from "next-auth/react"
import { DropdownMenu } from "radix-ui"
import { icons } from "#/assets/icons"
import { useState } from "react"
import Form from "#/components/form/form"
import { adminSchema } from "#/schema"
import { Admin } from "#/types"
import { useState } from "react";
import Image from "next/image";
import { useSession } from "next-auth/react";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { ColumnDef } from "@tanstack/react-table";
import axios from "axios";
import { DropdownMenu } from "radix-ui";
import FloatingLabelInput from "#/components/floatingLabelInput";
import { Modal } from "#/components/modal";
import Table from "#/components/table/table";
import Form from "#/components/form/form";
import { icons } from "#/assets/icons";
import { adminSchema } from "#/schema";
import { Admin } from "#/types";
export default function Admins() {
const {data: session, status} = useSession()
const { data: session, status } = useSession();
const [open, setOpen] = useState(false);
const [openModal, setOpenModal] = useState(false);
const [openDeleteModal, setOpenDeleteModal] = useState(false);
const [openEditModal, setOpenEditModal] = useState(false);
const [selectedAdminId, setSelectedAdminId] = useState<string | null>(null);
const queryClient = useQueryClient()
const { data: users, refetch, isLoading} = useQuery({
enabled: status === 'authenticated',
const queryClient = useQueryClient();
const {
data: users,
refetch,
isLoading,
} = useQuery({
enabled: status === "authenticated",
queryKey: ["users"],
queryFn: async () => {
try {
const response = await axios.get(
'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/`,
"https://private-docs-api.intside.co/users",
{
last_name: data.last_name,
first_name: data.first_name,
email: data.email,
user_type: "admin"
},
{
headers: {
'Authorization': `Bearer ${session?.user.access_token}`
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}`
}
})
);
await Promise.all(deletePromises);
return response.data.data as Admin[];
} catch (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: () => {
queryClient.invalidateQueries({ queryKey: ["users"] });
refetch();
}
},
});
const { mutate, isPending } = useMutation({
mutationFn: async (id: string) => {
const updateMutation = useMutation({
mutationFn: async (data: {
id: string;
last_name: string;
first_name: string;
email: string;
}) => {
try {
const response = await axios.delete(
`https://private-docs-api.intside.co/users/${id}/`, {
headers: {
'Authorization': `Bearer ${session?.user.access_token}`
}
}
)
const response = await axios.put(
`https://private-docs-api.intside.co/users/${data.id}/`,
data,
{ headers: { Authorization: `Bearer ${session?.user.access_token}` } }
);
if (response.status === 200 || response.status === 201) {
console.log('Suppresion réussie !')
setOpenDeleteModal(false)
console.log("modification réussie !");
setOpenEditModal(false);
}
} catch (error) {
console.error(error)
console.error("Erreur lors de la mise à jour", error);
}
},
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>[] = [
{
header: "Administrateurs",
cell: ({ row }) => {
const value = String(row.original.first_name) + " " + String(row.original.last_name)
const initials = String(row.original.first_name[0]) + String(row.original.last_name[0])
const fullName = `${row.original.first_name} ${row.original.last_name}`;
const initials = `${row.original.first_name[0]}${row.original.last_name[0]}`;
return (
<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">
{initials}
</div>
<p>{value}</p>
<p>{fullName}</p>
</div>
)
}
);
},
},
{
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",
cell: ({ cell }) => {
const admin = cell.row.original
id: "actions",
cell: ({ row }) => {
const admin = row.original;
return (
<div className="flex justify-end p-2 cursor-pointer space-x-2"
// onClick={() => { mutate(id) }}
>
<div className="flex justify-end p-2 space-x-2">
{/* Modal d'édition */}
<Modal
open={openEditModal && selectedAdminId === admin.id}
onOpenChange={(isOpen) => {
@ -241,62 +183,63 @@ export default function Admins (){
}
}}
trigger={
<div onClick={() =>{
<div
onClick={() => {
setSelectedAdminId(admin.id);
setOpenEditModal(true)
}}>
<Image alt="" width={24} height={24} src={icons.editIcon} className="hover:text-blue-500" />
setOpenEditModal(true);
}}
>
<Image
alt="Éditer"
width={24}
height={24}
src={icons.editIcon}
className="cursor-pointer"
/>
</div>
}
title={
<p className="font-bold text-3xl">Modifier un admin</p>
}
title="Modifier un admin"
content={
<>
<Form
fields={[
{
name: "id", // Ajoutez un champ caché pour l'ID
type: "hidden",
defaultValue: admin.id
},
{ name: "id", type: "hidden", defaultValue: admin.id },
{
name: "last_name",
label: "Nom",
type: "text",
placeholder: "Entrer le nom de l'admin",
defaultValue: admin.last_name
defaultValue: admin.last_name,
},
{
name: "first_name",
label: "Prénom",
type: "text",
placeholder: "Entrer le prénom de l'admin",
defaultValue: admin.first_name
defaultValue: admin.first_name,
},
{
name: "email",
label: "Adresse e-mail",
type: "text",
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}
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
open={openDeleteModal && selectedAdminId === admin.id}
onOpenChange={(isOpen) => {
@ -306,32 +249,36 @@ export default function Admins (){
}
}}
trigger={
<div onClick={() => {
<div
onClick={() => {
setSelectedAdminId(admin.id);
setOpenDeleteModal(true)
}}>
<Image alt="" src={icons.trash} className=" hover:text-blue-500" />
setOpenDeleteModal(true);
}}
>
<Image
alt="Supprimer"
src={icons.trash}
className="cursor-pointer"
/>
</div>
}
title={
<p className="font-bold text-3xl">Supprimer un admin</p>
}
title="Supprimer un admin"
content={
<div>
<p>Voulez-vous vraiment supprimer cet admin ?</p>
<div className="grid grid-cols-2 gap-3 mt-3">
<button
className="bg-blue-100 text-blue-600 py-2 px-4 text-lg rounded-full text-center hover:bg-blue-200"
onClick={() => { setOpenDeleteModal(false) }}
className="bg-blue-100 text-blue-600 py-2 px-4 rounded-full cursor-pointer"
onClick={() => {
setOpenDeleteModal(false);
}}
>
Annuler
</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={() => {
mutate(admin.id)
setOpenDeleteModal(false)
deleteMutation.mutate(admin.id);
}}
>
Supprimer
@ -341,32 +288,37 @@ export default function Admins (){
}
/>
</div>
)
}
}
]
);
},
},
];
return (
<>
<Table
columns={columns}
data={users || []}
pageSize={5}
header={(table) => {
const ids = table.getRowModel().rows.filter((row) => row.getIsSelected()).map(row => row.original.id )
if(bulkDeleteMutation.isSuccess) {
table.toggleAllPageRowsSelected(false)
}
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="" />
const selectedIds = table
.getRowModel()
.rows.filter((row) => row.getIsSelected())
.map((row) => row.original.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>
<p className="cursor-pointer rounded-full bg-gray-300 text-gray-500 p-2">
Sélectionner une action
@ -374,8 +326,14 @@ export default function Admins (){
</DropdownMenu.Trigger>
<DropdownMenu.Portal>
<DropdownMenu.Content className="min-w-[150px] shadow-sm bg-white rounded-md p-1" sideOffset={5}>
<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">
<DropdownMenu.Content
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
</DropdownMenu.Item>
</DropdownMenu.Content>
@ -383,56 +341,77 @@ export default function Admins (){
</DropdownMenu.Root>
</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
title="Ajouter un admin"
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
</div>}
</div>
}
content={
<>
<Form
fields={[
{
name: "last_name",
label: "Nom",
type: "text",
placeholder: "Entrer le nom de l'admin"
placeholder: "Entrer le nom de l'admin",
},
{
name: "first_name",
label: "Prénom",
type: "text",
placeholder: "Entrer le prénom de l'admin"
placeholder: "Entrer le prénom de l'admin",
},
{
name: "email",
label: "Adresse e-mail",
type: "text",
placeholder: "Entrer l'email de l'admin"
}
placeholder: "Entrer l'email de l'admin",
},
]}
submit={mutation.mutate}
submit={createMutation.mutate}
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={
<Image alt="" src={icons.filterIcon} className="cursor-pointer" />
<Image
alt="Filtrer"
src={icons.filterIcon}
className="cursor-pointer"
/>
}
/>
</div>
</div>
</>
)
);
}}
/>
</>
)
);
}

View File

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

View File

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