feat: add ToastClient component and update schemas with description field
This commit is contained in:
parent
28b1e5bf99
commit
01e27dff66
@ -1,41 +1,47 @@
|
||||
"use client"
|
||||
import { icons } from "#/assets/icons"
|
||||
import Image from "next/image"
|
||||
"use client";
|
||||
|
||||
import axios from "axios";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { Company, CompanyById } from "#/types";
|
||||
import FloatingLabelInput from "#/components/floatingLabelInput";
|
||||
import { Admin, Company, CompanyById } from "#/types";
|
||||
import { usePathname } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import Form from "#/components/form/form";
|
||||
import { adminSchema } from "#/schema/loginSchema";
|
||||
import { adminUpdateSchema } from "#/schema/loginSchema";
|
||||
import { Modal } from "#/components/modal";
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export default function Update() {
|
||||
|
||||
const pathname = usePathname();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const segments = pathname.split("/");
|
||||
const uid = segments[segments.length - 2];
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
|
||||
const { data: session, status } = useSession();
|
||||
const [openResetModal, setOpenResetModal] = useState(false);
|
||||
const [openBlockModal, setOpenBlockModal] = useState(false);
|
||||
|
||||
const { data: companyInfos, refetch, isLoading } = useQuery({
|
||||
enabled: status === 'authenticated',
|
||||
queryKey: ["companyStats", session?.user.access_token],
|
||||
const {
|
||||
data: companyInfos,
|
||||
isLoading: companyLoading,
|
||||
refetch,
|
||||
} = useQuery({
|
||||
enabled: status === "authenticated",
|
||||
queryKey: ["company"],
|
||||
queryFn: async () => {
|
||||
try {
|
||||
const response = await axios.get(
|
||||
`https://private-docs-api.intside.co/users/${uid}`, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${session?.user.access_token}`
|
||||
},
|
||||
params: {
|
||||
details: true
|
||||
`https://private-docs-api.intside.co/companies/${uid}`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${session?.user.access_token}`,
|
||||
},
|
||||
params: {
|
||||
details: true,
|
||||
},
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
if (response.data) {
|
||||
@ -44,82 +50,296 @@ export default function Update() {
|
||||
} catch (error: any) {
|
||||
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 { mutate, isPending } = useMutation({
|
||||
mutationFn: async (id: string) => {
|
||||
mutationFn: async (data: { id: string }) => {
|
||||
try {
|
||||
const response = await axios.delete(
|
||||
`https://private-docs-api.intside.co/companies/${id}/`, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${session?.user.access_token}`
|
||||
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('Suppresion réussie !')
|
||||
console.log("Modif réussie !");
|
||||
toast.success("Modification réussie !");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
console.error(error);
|
||||
}
|
||||
},
|
||||
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["companies"] })
|
||||
queryClient.invalidateQueries({ queryKey: ["company"] });
|
||||
refetch();
|
||||
},
|
||||
});
|
||||
|
||||
refetch()
|
||||
}
|
||||
})
|
||||
const blockMutation = useMutation({
|
||||
mutationFn: async (data: { id: string; name: string; status: 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("Statut modifié !");
|
||||
setOpenBlockModal(false);
|
||||
toast.success("Organisation bloquée !");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
},
|
||||
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["company"] });
|
||||
refetch();
|
||||
},
|
||||
});
|
||||
|
||||
const resetMutation = useMutation({
|
||||
mutationFn: async (email: string) => {
|
||||
try {
|
||||
const response = await axios.post(
|
||||
`https://private-docs-api.intside.co/users/reset_password/`,
|
||||
{
|
||||
email: email,
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${session?.user.access_token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
if (response.status === 200 || response.status === 201) {
|
||||
console.log("Reset réussie !");
|
||||
setOpenResetModal(false);
|
||||
toast.success("Email de réinitialisation envoyé !");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
if (status === "loading" && companyLoading) {
|
||||
return <div>Chargement...</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* { company.map() } */}
|
||||
|
||||
|
||||
{/* <Form
|
||||
title="Connexion"
|
||||
className="grid grid-cols-2"
|
||||
fields={[
|
||||
{
|
||||
label: "Nom de l’organisation",
|
||||
name: "company",
|
||||
type: "text",
|
||||
placeholder: "Nom de l'organisation",
|
||||
defaultValue: companyInfos?.name
|
||||
},
|
||||
{
|
||||
label: "Nom de l’admin",
|
||||
name: "last_name",
|
||||
type: "text",
|
||||
placeholder: "Nom de l'admin",
|
||||
defaultValue: companyInfos?.owner.last_name
|
||||
},
|
||||
{
|
||||
label: "Prénom de l’admin",
|
||||
name: "first_name",
|
||||
type: "text",
|
||||
placeholder: "Prénom de l'admin",
|
||||
defaultValue: companyInfos?.owner.first_name
|
||||
}
|
||||
]}
|
||||
submit={mutate}
|
||||
schema={adminSchema}
|
||||
child={<button type="submit" className="btn-auth">Connexion</button>}
|
||||
/> */}
|
||||
|
||||
|
||||
<div className="p-container ">
|
||||
<div className="r-flex-column">
|
||||
<div className="r-flex-between items-center bg-bluegray p-[24px] m-0 ">
|
||||
<div className=""></div>
|
||||
<h2 className="admin-name text-[20px]" >{companyInfos?.name || "Pentatonic"}</h2>
|
||||
<Link href={`http://localhost:3000/admin/organizations/${uid}/`} type="Link" className="cta cancel">
|
||||
<h2 className="admin-name text-[20px]">
|
||||
{companyInfos?.name || "Pentatonic"}
|
||||
</h2>
|
||||
<Link
|
||||
href={`/admin/organizations/${uid}/`}
|
||||
type="Link"
|
||||
className="cta cancel"
|
||||
>
|
||||
Annuler
|
||||
</Link>
|
||||
</div>
|
||||
<div className="r-flex-column p-[32px] r-gap-24">
|
||||
|
||||
<div className="p-4">
|
||||
<Form
|
||||
className="grid grid-cols-2 gap-x-10"
|
||||
fields={[
|
||||
{
|
||||
label: "Nom de l'organisation",
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Nom de l'admin",
|
||||
defaultValue: companyInfos?.name,
|
||||
},
|
||||
{
|
||||
label: "Description",
|
||||
name: "description",
|
||||
type: "text",
|
||||
placeholder: "Description de l'organisation",
|
||||
defaultValue: companyInfos?.description,
|
||||
},
|
||||
{
|
||||
name: "status",
|
||||
label: "Statut",
|
||||
type: "select",
|
||||
defaultValue: companyInfos?.status,
|
||||
options: [
|
||||
{ label: "Actif", value: "active" },
|
||||
{ label: "Inactif", value: "inactive" },
|
||||
{ label: "En attente", value: "pending" },
|
||||
{ label: "Bloqué", value: "blocked" },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "owner",
|
||||
label: "Administrateur",
|
||||
type: "select",
|
||||
defaultValue: companyInfos?.owner.id,
|
||||
options:
|
||||
users?.map((user: { id: string; name: string }) => ({
|
||||
label: user.name,
|
||||
value: user.id,
|
||||
})) || [],
|
||||
},
|
||||
{
|
||||
name: "id",
|
||||
type: "hidden",
|
||||
defaultValue: companyInfos?.id,
|
||||
},
|
||||
]}
|
||||
submit={mutate}
|
||||
schema={adminUpdateSchema}
|
||||
child={
|
||||
<div className="ctas flex gap-4 mt-5">
|
||||
<button type="submit" className="cta" disabled={isPending}>
|
||||
{isPending ? "Modifications en cours..." : "Modifier"}
|
||||
</button>
|
||||
|
||||
<Modal
|
||||
title="Réinitialiser le mot de passe"
|
||||
open={openResetModal}
|
||||
onOpenChange={setOpenResetModal}
|
||||
trigger={
|
||||
<button type="button" className="cta info">
|
||||
Mot de passe
|
||||
</button>
|
||||
}
|
||||
content={
|
||||
<div>
|
||||
<p className="text-center">
|
||||
Voulez-vous envoyer à{" "}
|
||||
<span className="font-bold">
|
||||
{companyInfos?.owner.last_name +
|
||||
" " +
|
||||
companyInfos?.owner.first_name +
|
||||
" "}
|
||||
</span>
|
||||
un lien de réinitialisation de mot de passe à son
|
||||
adresse email ?
|
||||
</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={() => {
|
||||
setOpenResetModal(false);
|
||||
}}
|
||||
>
|
||||
Annuler
|
||||
</button>
|
||||
<button
|
||||
className="bg-red-500 text-white py-2 px-4 rounded-full hover:bg-red-600 cursor-pointer"
|
||||
onClick={() => {
|
||||
if (companyInfos?.owner.email) {
|
||||
resetMutation.mutate(companyInfos.owner.email);
|
||||
}
|
||||
}}
|
||||
disabled={resetMutation.isPending}
|
||||
>
|
||||
{resetMutation.isPending
|
||||
? "Envoi en cours..."
|
||||
: "Envoyer"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
|
||||
<Modal
|
||||
title="Bloquer une organisation"
|
||||
open={openBlockModal}
|
||||
onOpenChange={setOpenBlockModal}
|
||||
trigger={
|
||||
<button type="button" className="cta danger">
|
||||
Bloquer
|
||||
</button>
|
||||
}
|
||||
content={
|
||||
<div>
|
||||
<p className="text-center">
|
||||
Voulez-vous bloquer l'organisation{" "}
|
||||
<span className="font-bold">
|
||||
{companyInfos?.name + " "}
|
||||
</span>{" "}
|
||||
?
|
||||
</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={() => {
|
||||
setOpenBlockModal(false);
|
||||
}}
|
||||
>
|
||||
Annuler
|
||||
</button>
|
||||
<button
|
||||
className="bg-red-500 text-white py-2 px-4 rounded-full hover:bg-red-600 cursor-pointer"
|
||||
onClick={() => {
|
||||
if (companyInfos) {
|
||||
blockMutation.mutate({
|
||||
id: companyInfos.id,
|
||||
name: companyInfos.name,
|
||||
status: "blocked",
|
||||
});
|
||||
}
|
||||
}}
|
||||
disabled={blockMutation.isPending}
|
||||
>
|
||||
{blockMutation.isPending
|
||||
? "En cours..."
|
||||
: companyInfos?.status === "blocked"
|
||||
? "Supprimer"
|
||||
: "Bloquer"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* <div className="r-flex-column p-[32px] r-gap-24">
|
||||
<div className="labels-container ">
|
||||
<div className="label-container">
|
||||
<FloatingLabelInput label="Nom de l’organisation" name="org-name" type="text" placeholder="Intside" defaultValue={companyInfos?.name} />
|
||||
@ -139,9 +359,9 @@ export default function Update() {
|
||||
<button type="button" className="cta info">Mot de passe</button>
|
||||
<button type="button" className="cta danger">Bloquer</button>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
);
|
||||
}
|
||||
@ -4,6 +4,7 @@ import NextTopLoader from "nextjs-toploader";
|
||||
import "../assets/css/ruben-ui.css"
|
||||
import { AuthProvider } from "#/components/provider/authProvider";
|
||||
import { QueryClientProvide } from "#/components/provider/queryClient";
|
||||
import { ToastClient } from "#/components/provider/toastClient";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Private Docs",
|
||||
@ -27,6 +28,7 @@ export default function RootLayout({
|
||||
<QueryClientProvide>
|
||||
<NextTopLoader color="#246BFD" shadow="0" />
|
||||
{children}
|
||||
<ToastClient richColors />
|
||||
</QueryClientProvide>
|
||||
</AuthProvider>
|
||||
</body>
|
||||
|
||||
@ -34,7 +34,7 @@ export default function FloatingLabelInput({
|
||||
<select
|
||||
className="input-form focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
name={name}
|
||||
defaultValue={defaultValue}
|
||||
value={defaultValue}
|
||||
>
|
||||
{options?.map((option, index) => (
|
||||
<option key={index} value={option.value}>{option.label}</option>
|
||||
|
||||
20
src/components/provider/toastClient.tsx
Normal file
20
src/components/provider/toastClient.tsx
Normal file
@ -0,0 +1,20 @@
|
||||
"use client";
|
||||
|
||||
import { ComponentProps } from "react";
|
||||
import { Toaster as Sonner } from "sonner";
|
||||
|
||||
type ToasterProps = ComponentProps<typeof Sonner>;
|
||||
|
||||
const ToastClient = ({ ...props }: ToasterProps) => {
|
||||
|
||||
return (
|
||||
<Sonner
|
||||
style={{
|
||||
right: "50px",
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export { ToastClient };
|
||||
@ -1,3 +1,4 @@
|
||||
import { Description } from "@radix-ui/react-dialog";
|
||||
import { z } from "zod";
|
||||
|
||||
export const loginSchema = z.object({
|
||||
@ -10,5 +11,12 @@ export const adminSchema = z.object({
|
||||
last_name: z.string(),
|
||||
first_name: z.string(),
|
||||
email: z.string().min(1, "L'email est requis").email("Email invalide"),
|
||||
organization: z.string().optional(),
|
||||
});
|
||||
|
||||
export const adminUpdateSchema = z.object({
|
||||
id: z.string().optional(),
|
||||
name: z.string(),
|
||||
description: z.string(),
|
||||
status: z.string(),
|
||||
owner: z.string(),
|
||||
});
|
||||
@ -71,6 +71,7 @@ export interface CompanyById {
|
||||
name: string
|
||||
is_premium: boolean
|
||||
status: string
|
||||
description: string
|
||||
owner: Owner
|
||||
total_users: number
|
||||
total_documents: number
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user