feat: add delete implementation on table
This commit is contained in:
parent
080ab6dd09
commit
c647d2bedd
@ -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<Payment>[] = [
|
||||
// {
|
||||
// id: "select",
|
||||
// header: ({ table }) => (
|
||||
// <input checked={
|
||||
// table.getIsAllPageRowsSelected() ||
|
||||
// (table.getIsSomePageRowsSelected() && undefined)
|
||||
// } onChange={(e) => table.toggleAllPageRowsSelected(e.target.checked)} type="checkbox" name="" id="" />
|
||||
// ),
|
||||
// cell: ({ row }) => (
|
||||
// <input checked={row.getIsSelected()} onChange={(e) => row.toggleSelected(e.target.checked)} type="checkbox" name="" id="" />
|
||||
// ),
|
||||
// },
|
||||
{
|
||||
accessorKey: "status",
|
||||
header: "Statut du paiement",
|
||||
// cell: ({row}) => {
|
||||
// const value = String(row.getValue("status"))
|
||||
// return(
|
||||
// <div className={`${value === "success" ? "text-green-500" : "text-red-500"}`}>
|
||||
// {value}
|
||||
// </div>)
|
||||
// }
|
||||
},
|
||||
{
|
||||
accessorKey: "email",
|
||||
header: ({ }) => {
|
||||
return (
|
||||
<p>Email</p>
|
||||
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: () => <div className="">Amount</div>,
|
||||
cell: ({ row }) => {
|
||||
const amount = parseFloat(row.getValue("amount"))
|
||||
const formatted = new Intl.NumberFormat("en-US", {
|
||||
style: "currency",
|
||||
currency: "USD",
|
||||
}).format(amount)
|
||||
|
||||
return <div className="font-medium">{formatted}</div>
|
||||
|
||||
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<Company>[] = [
|
||||
{
|
||||
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(
|
||||
<p>{value}</p>
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
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 (
|
||||
<p>{value}</p>
|
||||
<div className="relative p-2 cursor-pointer"
|
||||
onClick={() => { mutate(id) }}
|
||||
>
|
||||
<Image alt="" src={icons.trash} className="absolute right-2 top-[-50%] transform translate-middle-y hover:text-blue-500" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -146,7 +114,7 @@ export default function HomePage () {
|
||||
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
data={companies || []}
|
||||
pageSize={5}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
|
||||
|
||||
7
src/assets/icons/trash.svg
Normal file
7
src/assets/icons/trash.svg
Normal file
@ -0,0 +1,7 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M21 5.98001C17.67 5.65001 14.32 5.48001 10.98 5.48001C9 5.48001 7.02 5.58001 5.04 5.78001L3 5.98001" stroke="#9FA8BC" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M8.5 4.97L8.72 3.66C8.88 2.71 9 2 10.69 2H13.31C15 2 15.13 2.75 15.28 3.67L15.5 4.97" stroke="#9FA8BC" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M18.8499 9.14001L18.1999 19.21C18.0899 20.78 17.9999 22 15.2099 22H8.7899C5.9999 22 5.9099 20.78 5.7999 19.21L5.1499 9.14001" stroke="#9FA8BC" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10.3301 16.5H13.6601" stroke="#9FA8BC" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M9.5 12.5H14.5" stroke="#9FA8BC" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 925 B |
@ -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
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user