From c647d2beddcf3532fdb2c2e4fca2cb66ea10856d Mon Sep 17 00:00:00 2001 From: "Orace.A" Date: Wed, 26 Mar 2025 17:53:38 +0100 Subject: [PATCH] feat: add delete implementation on table --- src/app/admin/home/page.tsx | 198 +++++++++++++++--------------------- src/assets/icons/index.ts | 4 +- src/assets/icons/trash.svg | 7 ++ src/types/index.ts | 15 +++ 4 files changed, 108 insertions(+), 116 deletions(-) create mode 100644 src/assets/icons/trash.svg diff --git a/src/app/admin/home/page.tsx b/src/app/admin/home/page.tsx index b2c0f69..3edb10a 100644 --- a/src/app/admin/home/page.tsx +++ b/src/app/admin/home/page.tsx @@ -1,140 +1,108 @@ "use client" +import { icons } from "#/assets/icons" import Statistics from "#/components/stats" import Table from "#/components/table/table" +import { Company } from "#/types" +import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query" import { ColumnDef } from "@tanstack/react-table" +import axios from "axios" import { useSession } from "next-auth/react" -import { string } from "zod" +import Image from "next/image" export default function HomePage () { - const session = useSession() + const {data: session, status} = useSession() + const queryClient = useQueryClient() console.log("Session = ", session) - type Payment = { - id: string - amount: number - status: "pending" | "processing" | "success" | "failed" - email: string - } + 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: Payment[] = [ - { - id: "728ed52f", - amount: 100, - status: "pending", - email: "m@example.com", - }, - { - id: "728ed521", - amount: 200, - status: "pending", - email: "j@example.com", - }, - { - id: "728ed528", - amount: 300, - status: "processing", - email: "f@example.com", - }, - { - id: "728ed52g", - amount: 600, - status: "success", - email: "h@example.com", - }, - { - id: "728ed520", - amount: 50, - status: "failed", - email: "k@example.com", - }, - { - id: "728ed529", - amount: 200, - status: "pending", - email: "l@example.com", - }, - { - id: "728ed526", - amount: 150, - status: "processing", - email: "d@example.com", - }, - { - id: "728ed523", - amount: 100, - status: "success", - email: "o@example.com", - }, - { - id: "728ed52y", - amount: 100, - status: "failed", - email: "v@example.com", - }, - // ... - ] - - - - const columns: ColumnDef[] = [ - // { - // id: "select", - // header: ({ table }) => ( - // table.toggleAllPageRowsSelected(e.target.checked)} type="checkbox" name="" id="" /> - // ), - // cell: ({ row }) => ( - // row.toggleSelected(e.target.checked)} type="checkbox" name="" id="" /> - // ), - // }, - { - accessorKey: "status", - header: "Statut du paiement", - // cell: ({row}) => { - // const value = String(row.getValue("status")) - // return( - //
- // {value} - //
) - // } - }, - { - accessorKey: "email", - header: ({ }) => { - return ( -

Email

+ const { mutate, isPending } = 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}` + } + } ) - }, - }, - { - accessorKey: "amount", - header: () =>
Amount
, - cell: ({ row }) => { - const amount = parseFloat(row.getValue("amount")) - const formatted = new Intl.NumberFormat("en-US", { - style: "currency", - currency: "USD", - }).format(amount) - - return
{formatted}
+ + if(response.status === 200 || response.status === 201) { + console.log('Suppresion réussie !') + } + } catch (error) { + console.error(error) + } }, - + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: ["companies"] }) + + refetch() + } + }) + + const columns: ColumnDef[] = [ + { + accessorKey: "name", + header: "Organisations", + }, + // { + // accessorKey: "Utilisateurs", + // header: "Utilisateurs", + // }, + { + header: "Administrateurs", + cell: ({ row }) => { + const value = String(row.original.owner.first_name) + " " + String(row.original.owner.last_name) + return( +

{value}

+ ) + } }, { - accessorKey: "id", + accessorKey: "owner.email", + header: "Adresse e-mail" + }, + { + accessorKey: "status", + header: "Statut" + }, + { + id: "delete", cell: ({ cell }) => { - const value = String(cell.getValue()) + const id = String(cell.row.original.id) return ( -

{value}

+
{ mutate(id) }} + > + +
) } } @@ -146,7 +114,7 @@ export default function HomePage () { diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts index 0ab2014..9120b8b 100644 --- a/src/assets/icons/index.ts +++ b/src/assets/icons/index.ts @@ -39,6 +39,7 @@ import starIcon from "./star.svg" import arrowUp from "./Vector.svg" import sunIcon from "./sun.svg" import moonIcon from "./moon.svg" +import trash from "./trash.svg" export const icons = { @@ -82,7 +83,8 @@ export const icons = { starIcon, arrowUp, sunIcon, - moonIcon + moonIcon , + trash } diff --git a/src/assets/icons/trash.svg b/src/assets/icons/trash.svg new file mode 100644 index 0000000..12eaba9 --- /dev/null +++ b/src/assets/icons/trash.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/types/index.ts b/src/types/index.ts index 8107563..8b79ca2 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -34,4 +34,19 @@ export interface Stats { documents: number users: number documents_size: number +} + +export interface Company { + id: string + name: string + is_premium: boolean + status: string + owner: Owner +} + +export interface Owner { + id: string + first_name: string + email: string + last_name: string } \ No newline at end of file