feat: add organizations data-table page
This commit is contained in:
parent
391a2bec39
commit
24f301fcaa
@ -348,7 +348,7 @@ export default function Admins() {
|
||||
open={openModal}
|
||||
onOpenChange={(isOpen) => {
|
||||
if (!isOpen) {
|
||||
setOpen(false);
|
||||
setOpenModal(false);
|
||||
}
|
||||
}}
|
||||
trigger={
|
||||
|
||||
@ -1,8 +1,433 @@
|
||||
"use client";
|
||||
|
||||
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, companySchema } from "#/schema";
|
||||
import { Admin, Company } from "#/types";
|
||||
|
||||
export default function Organizations (){
|
||||
return (
|
||||
<>
|
||||
</>
|
||||
export default function Organizations() {
|
||||
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: companies,
|
||||
refetch,
|
||||
isLoading,
|
||||
} = useQuery({
|
||||
enabled: status === "authenticated",
|
||||
queryKey: ["companies"],
|
||||
queryFn: async () => {
|
||||
try {
|
||||
const response = await axios.get(
|
||||
"https://private-docs-api.intside.co/companies",
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${session?.user.access_token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
if (response.data) {
|
||||
return response.data.data as Company[];
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const {
|
||||
data: users,
|
||||
} = useQuery({
|
||||
enabled: status === "authenticated",
|
||||
queryKey: ["organizations"],
|
||||
queryFn: async () => {
|
||||
try {
|
||||
const response = await axios.get(
|
||||
"https://private-docs-api.intside.co/users",
|
||||
{
|
||||
headers: { Authorization: `Bearer ${session?.user.access_token}` },
|
||||
}
|
||||
);
|
||||
return response.data.data.map((user: Admin) => ({
|
||||
id: user.id,
|
||||
name: `${user.first_name} ${user.last_name}`,
|
||||
}));
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
return [];
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: async (data: {
|
||||
name: string;
|
||||
description: string;
|
||||
status: string;
|
||||
is_premium: string;
|
||||
owner: string;
|
||||
}) => {
|
||||
try {
|
||||
const response = await axios.post(
|
||||
"https://private-docs-api.intside.co/companies/",
|
||||
data,
|
||||
{ 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: ["organizations"] });
|
||||
refetch();
|
||||
},
|
||||
});
|
||||
|
||||
const updateMutation = useMutation({
|
||||
mutationFn: async (data: {
|
||||
id: string;
|
||||
last_name: string;
|
||||
first_name: string;
|
||||
email: string;
|
||||
}) => {
|
||||
try {
|
||||
const response = await axios.put(
|
||||
`https://private-docs-api.intside.co/companies/${data.id}/`,
|
||||
data,
|
||||
{ headers: { Authorization: `Bearer ${session?.user.access_token}` } }
|
||||
);
|
||||
|
||||
if (response.status === 200 || response.status === 201) {
|
||||
console.log("modification réussie !");
|
||||
setOpenEditModal(false);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Erreur lors de la mise à jour", error);
|
||||
}
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["organizations"] });
|
||||
refetch();
|
||||
},
|
||||
});
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: async (id: string) => {
|
||||
try {
|
||||
const response = await axios.delete(
|
||||
`https://private-docs-api.intside.co/companies/${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: ["organizations"] });
|
||||
refetch();
|
||||
},
|
||||
});
|
||||
|
||||
const bulkDeleteMutation = useMutation({
|
||||
mutationFn: async (ids: string[]) => {
|
||||
try {
|
||||
const deletePromises = ids.map((id) =>
|
||||
axios.delete(`https://private-docs-api.intside.co/companies/${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: ["organizations"] });
|
||||
refetch();
|
||||
},
|
||||
});
|
||||
|
||||
const columns: ColumnDef<Company>[] = [
|
||||
{
|
||||
accessorKey: "name",
|
||||
header: "Organisations",
|
||||
},
|
||||
{
|
||||
accessorKey: "total_users",
|
||||
header: "Utilisateurs",
|
||||
},
|
||||
{
|
||||
header: "Administrateurs",
|
||||
cell: ({ row }) => {
|
||||
const value = String(row.original.owner.first_name) + " " + String(row.original.owner.last_name)
|
||||
const initials = String(row.original.owner.first_name[0]) + String(row.original.owner.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>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
accessorKey: "owner.email",
|
||||
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: ({ row }) => {
|
||||
const company = row.original;
|
||||
return (
|
||||
<div className="flex justify-end p-2 space-x-2"
|
||||
// onClick={() => { mutate(id) }}
|
||||
>
|
||||
|
||||
{/* Modal de suppression */}
|
||||
<Modal
|
||||
open={openDeleteModal && selectedAdminId === company.id}
|
||||
onOpenChange={(isOpen) => {
|
||||
if (!isOpen) {
|
||||
setSelectedAdminId(null);
|
||||
setOpenDeleteModal(false);
|
||||
}
|
||||
}}
|
||||
trigger={
|
||||
<div
|
||||
onClick={() => {
|
||||
setSelectedAdminId(company.id);
|
||||
setOpenDeleteModal(true);
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
alt="Supprimer"
|
||||
src={icons.trash}
|
||||
className="cursor-pointer"
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
title="Supprimer une organisation"
|
||||
content={
|
||||
<div>
|
||||
<p>Voulez-vous vraiment supprimer cette organisation ?</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(company.id);
|
||||
}}
|
||||
>
|
||||
Supprimer
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
data={companies || []}
|
||||
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 une organisation"
|
||||
open={openModal}
|
||||
onOpenChange={(isOpen) => {
|
||||
if (!isOpen) {
|
||||
setOpenModal(false);
|
||||
}
|
||||
}}
|
||||
trigger={
|
||||
<div
|
||||
onClick={() => setOpenModal(true)}
|
||||
className="cursor-pointer p-3 bg-blue-600 text-white rounded-full"
|
||||
>
|
||||
Ajouter une organisation
|
||||
</div>
|
||||
}
|
||||
content={
|
||||
<Form
|
||||
fields={[
|
||||
{
|
||||
name: "name",
|
||||
label: "Nom de l'organisation",
|
||||
type: "text",
|
||||
placeholder: "Entrer le nom de l'organisation",
|
||||
},
|
||||
{
|
||||
name: "description",
|
||||
label: "Description",
|
||||
type: "textarea",
|
||||
placeholder: "Entrer la description de l'organisation",
|
||||
},
|
||||
{
|
||||
name: "status",
|
||||
label: "Statut",
|
||||
type: "select",
|
||||
options: [
|
||||
{ label: "Actif", value: "active" },
|
||||
{ label: "Inactif", value: "inactive" },
|
||||
{ label: "En attente", value: "pending" },
|
||||
{ label: "Bloqué", value: "blocked" },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "owner",
|
||||
label: "Administrateur",
|
||||
type: "select",
|
||||
options: users?.map((user: {id: string, name: string}) => ({
|
||||
label: user.name,
|
||||
value: user.id,
|
||||
})) || [],
|
||||
},
|
||||
]}
|
||||
submit={createMutation.mutate}
|
||||
schema={companySchema}
|
||||
child={
|
||||
<button
|
||||
type="submit"
|
||||
className="btn-auth mt-4 cursor-pointer"
|
||||
>
|
||||
Créer l'organisation
|
||||
</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>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@ -37,7 +37,7 @@ export default function FloatingLabelInput({
|
||||
defaultValue={defaultValue}
|
||||
>
|
||||
{options?.map((option, index) => (
|
||||
<option key={index} value={option}>{option}</option>
|
||||
<option key={index} value={option.value}>{option.label}</option>
|
||||
))}
|
||||
</select>
|
||||
{button && <div className="btn-floating-right">{button}</div>}
|
||||
|
||||
@ -11,3 +11,10 @@ export const adminSchema = z.object({
|
||||
first_name: z.string(),
|
||||
email: z.string().min(1, "L'email est requis").email("Email invalide"),
|
||||
});
|
||||
|
||||
export const companySchema = z.object({
|
||||
name: z.string().min(1, "Le nom est requis"),
|
||||
description: z.string(),
|
||||
status: z.string(),
|
||||
owner: z.string()
|
||||
})
|
||||
@ -1,11 +1,15 @@
|
||||
import { FormEventHandler, ReactNode } from "react";
|
||||
import { ZodSchema } from "zod";
|
||||
export interface Option {
|
||||
label: string
|
||||
value: string
|
||||
}
|
||||
|
||||
export interface FloatingLabelInputProps {
|
||||
label?: string;
|
||||
placeholder?: string;
|
||||
type: 'text' | 'password' | 'select' | 'email' | 'number' | 'hidden' | 'search';
|
||||
options?: string[];
|
||||
type: 'text' | 'password' | 'select' | 'email' | 'number' | 'hidden' | 'search' | 'textarea';
|
||||
options?: Option[];
|
||||
button?: React.ReactNode;
|
||||
showPasswordToggle?: boolean;
|
||||
name: string;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user