reactor
This commit is contained in:
parent
0a0deb6c90
commit
391a2bec39
@ -1,438 +1,417 @@
|
|||||||
"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 {
|
|
||||||
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/`,
|
|
||||||
{
|
|
||||||
last_name: data.last_name,
|
|
||||||
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 {
|
try {
|
||||||
const deletePromises = ids.map(id =>
|
const response = await axios.get(
|
||||||
axios.delete(`https://private-docs-api.intside.co/users/${id}/`, {
|
"https://private-docs-api.intside.co/users",
|
||||||
headers: {
|
{
|
||||||
'Authorization': `Bearer ${session?.user.access_token}`
|
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
|
||||||
|
open={openEditModal && selectedAdminId === admin.id}
|
||||||
<Modal
|
onOpenChange={(isOpen) => {
|
||||||
open={openEditModal && selectedAdminId === admin.id}
|
if (!isOpen) {
|
||||||
onOpenChange={(isOpen) => {
|
setSelectedAdminId(null);
|
||||||
if (!isOpen) {
|
setOpenEditModal(false);
|
||||||
setSelectedAdminId(null);
|
}
|
||||||
setOpenEditModal(false);
|
}}
|
||||||
}
|
trigger={
|
||||||
}}
|
<div
|
||||||
trigger={
|
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" />
|
>
|
||||||
</div>
|
<Image
|
||||||
}
|
alt="Éditer"
|
||||||
title={
|
width={24}
|
||||||
<p className="font-bold text-3xl">Modifier un admin</p>
|
height={24}
|
||||||
}
|
src={icons.editIcon}
|
||||||
content={
|
className="cursor-pointer"
|
||||||
<>
|
|
||||||
<Form
|
|
||||||
fields={[
|
|
||||||
{
|
|
||||||
name: "id", // Ajoutez un champ caché pour l'ID
|
|
||||||
type: "hidden",
|
|
||||||
defaultValue: admin.id
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "last_name",
|
|
||||||
label: "Nom",
|
|
||||||
type: "text",
|
|
||||||
placeholder: "Entrer le nom de l'admin",
|
|
||||||
defaultValue: admin.last_name
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "first_name",
|
|
||||||
label: "Prénom",
|
|
||||||
type: "text",
|
|
||||||
placeholder: "Entrer le prénom de l'admin",
|
|
||||||
defaultValue: admin.first_name
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "email",
|
|
||||||
label: "Adresse e-mail",
|
|
||||||
type: "text",
|
|
||||||
placeholder: "Entrer l'email de l'admin",
|
|
||||||
defaultValue: admin.email
|
|
||||||
},
|
|
||||||
// {
|
|
||||||
// name: "statut",
|
|
||||||
// label: "Adresse e-mail",
|
|
||||||
// type: "select",
|
|
||||||
// placeholder: "Entrer l'email de l'admin",
|
|
||||||
// options
|
|
||||||
// }
|
|
||||||
]}
|
|
||||||
submit={mutationUpdate.mutate}
|
|
||||||
schema={adminSchema}
|
|
||||||
child={<button onClick={() => setOpenModal(false)} type="submit" className="btn-auth">{isLoading ? "Chargement..." : "Modifier"}</button>}
|
|
||||||
/></>
|
|
||||||
}
|
|
||||||
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Modal
|
|
||||||
open={openDeleteModal && selectedAdminId === admin.id}
|
|
||||||
onOpenChange={(isOpen) => {
|
|
||||||
if (!isOpen) {
|
|
||||||
setSelectedAdminId(null);
|
|
||||||
setOpenDeleteModal(false);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
trigger={
|
|
||||||
<div onClick={() => {
|
|
||||||
setSelectedAdminId(admin.id);
|
|
||||||
setOpenDeleteModal(true)
|
|
||||||
}}>
|
|
||||||
<Image alt="" src={icons.trash} className=" hover:text-blue-500" />
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
title={
|
|
||||||
<p className="font-bold text-3xl">Supprimer un admin</p>
|
|
||||||
}
|
|
||||||
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) }}
|
|
||||||
>
|
|
||||||
Annuler
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
className="bg-red-500 text-white py-2 px-4 text-lg rounded-full text-center hover:bg-red-600"
|
|
||||||
onClick={() => {
|
|
||||||
mutate(admin.id)
|
|
||||||
setOpenDeleteModal(false)
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Supprimer
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</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="" />
|
|
||||||
|
|
||||||
<DropdownMenu.Root open={open} onOpenChange={setOpen}>
|
|
||||||
<DropdownMenu.Trigger asChild>
|
|
||||||
<p className="cursor-pointer rounded-full bg-gray-300 text-gray-500 p-2">
|
|
||||||
Sélectionner une action
|
|
||||||
</p>
|
|
||||||
</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">
|
|
||||||
Supprimer
|
|
||||||
</DropdownMenu.Item>
|
|
||||||
</DropdownMenu.Content>
|
|
||||||
</DropdownMenu.Portal>
|
|
||||||
</DropdownMenu.Root>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex justify-between md:justify-end space-x-3">
|
|
||||||
<Modal
|
|
||||||
title="Ajouter un admin"
|
|
||||||
open={openModal}
|
|
||||||
trigger={<div onClick={() => setOpenModal(true)} className="cursor-pointer p-3 bg-blue-600 text-white rounded-full">
|
|
||||||
Ajouter un admin
|
|
||||||
</div>}
|
|
||||||
content={
|
|
||||||
<>
|
|
||||||
<Form
|
|
||||||
fields={[
|
|
||||||
{
|
|
||||||
name: "last_name",
|
|
||||||
label: "Nom",
|
|
||||||
type: "text",
|
|
||||||
placeholder: "Entrer le nom de l'admin"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "first_name",
|
|
||||||
label: "Prénom",
|
|
||||||
type: "text",
|
|
||||||
placeholder: "Entrer le prénom de l'admin"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "email",
|
|
||||||
label: "Adresse e-mail",
|
|
||||||
type: "text",
|
|
||||||
placeholder: "Entrer l'email de l'admin"
|
|
||||||
}
|
|
||||||
]}
|
|
||||||
submit={mutation.mutate}
|
|
||||||
schema={adminSchema}
|
|
||||||
child={<button type="submit" className="btn-auth">{isLoading ? "Chargement..." : "Créer le compte"}</button>}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
|
|
||||||
/>
|
|
||||||
|
|
||||||
<FloatingLabelInput name="search" placeholder="Effectuer une recherche" type="search" onChange={(value) => table.setGlobalFilter(value)}
|
|
||||||
button={
|
|
||||||
<Image alt="" src={icons.filterIcon} className="cursor-pointer" />
|
|
||||||
}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
}
|
||||||
</>
|
title="Modifier un admin"
|
||||||
)
|
content={
|
||||||
}}
|
<Form
|
||||||
/>
|
fields={[
|
||||||
</>
|
{ 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,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "first_name",
|
||||||
|
label: "Prénom",
|
||||||
|
type: "text",
|
||||||
|
placeholder: "Entrer le prénom de l'admin",
|
||||||
|
defaultValue: admin.first_name,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "email",
|
||||||
|
label: "Adresse e-mail",
|
||||||
|
type: "text",
|
||||||
|
placeholder: "Entrer l'email de l'admin",
|
||||||
|
defaultValue: admin.email,
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
submit={updateMutation.mutate}
|
||||||
|
schema={adminSchema}
|
||||||
|
child={
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="btn-auth mt-4 cursor-pointer"
|
||||||
|
>
|
||||||
|
Modifier
|
||||||
|
</button>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Modal de suppression */}
|
||||||
|
<Modal
|
||||||
|
open={openDeleteModal && selectedAdminId === admin.id}
|
||||||
|
onOpenChange={(isOpen) => {
|
||||||
|
if (!isOpen) {
|
||||||
|
setSelectedAdminId(null);
|
||||||
|
setOpenDeleteModal(false);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
trigger={
|
||||||
|
<div
|
||||||
|
onClick={() => {
|
||||||
|
setSelectedAdminId(admin.id);
|
||||||
|
setOpenDeleteModal(true);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
alt="Supprimer"
|
||||||
|
src={icons.trash}
|
||||||
|
className="cursor-pointer"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
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 rounded-full cursor-pointer"
|
||||||
|
onClick={() => {
|
||||||
|
setOpenDeleteModal(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Annuler
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="bg-red-500 text-white py-2 px-4 rounded-full hover:bg-red-600 cursor-pointer"
|
||||||
|
onClick={() => {
|
||||||
|
deleteMutation.mutate(admin.id);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Supprimer
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Table
|
||||||
|
columns={columns}
|
||||||
|
data={users || []}
|
||||||
|
pageSize={5}
|
||||||
|
header={(table) => {
|
||||||
|
const selectedIds = table
|
||||||
|
.getRowModel()
|
||||||
|
.rows.filter((row) => row.getIsSelected())
|
||||||
|
.map((row) => row.original.id);
|
||||||
|
|
||||||
|
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
|
||||||
|
</p>
|
||||||
|
</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(selectedIds)}
|
||||||
|
className="p-2 text-[14px] cursor-pointer hover:bg-blue-100 hover:text-blue-500 rounded-md"
|
||||||
|
>
|
||||||
|
Supprimer
|
||||||
|
</DropdownMenu.Item>
|
||||||
|
</DropdownMenu.Content>
|
||||||
|
</DropdownMenu.Portal>
|
||||||
|
</DropdownMenu.Root>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-between lg:justify-end space-x-3">
|
||||||
|
{/* Modal d'ajout */}
|
||||||
|
<Modal
|
||||||
|
title="Ajouter un admin"
|
||||||
|
open={openModal}
|
||||||
|
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>
|
||||||
|
}
|
||||||
|
content={
|
||||||
|
<Form
|
||||||
|
fields={[
|
||||||
|
{
|
||||||
|
name: "last_name",
|
||||||
|
label: "Nom",
|
||||||
|
type: "text",
|
||||||
|
placeholder: "Entrer le nom de l'admin",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "first_name",
|
||||||
|
label: "Prénom",
|
||||||
|
type: "text",
|
||||||
|
placeholder: "Entrer le prénom de l'admin",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "email",
|
||||||
|
label: "Adresse e-mail",
|
||||||
|
type: "text",
|
||||||
|
placeholder: "Entrer l'email de l'admin",
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
submit={createMutation.mutate}
|
||||||
|
schema={adminSchema}
|
||||||
|
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)}
|
||||||
|
button={
|
||||||
|
<Image
|
||||||
|
alt="Filtrer"
|
||||||
|
src={icons.filterIcon}
|
||||||
|
className="cursor-pointer"
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|||||||
@ -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)
|
||||||
|
|||||||
@ -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);
|
||||||
|
|
||||||
|
|||||||
@ -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>
|
||||||
|
|
||||||
)
|
)
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user