feat: add responsive icon class for better image scaling in admin pages
This commit is contained in:
parent
ca8d95f3a3
commit
58f065598f
@ -193,7 +193,7 @@ export default function Admins() {
|
||||
width={24}
|
||||
height={24}
|
||||
src={icons.editIcon}
|
||||
className="cursor-pointer"
|
||||
className="cursor-pointer responsive-icon"
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
@ -258,7 +258,7 @@ export default function Admins() {
|
||||
<Image
|
||||
alt="Supprimer"
|
||||
src={icons.trash}
|
||||
className="cursor-pointer"
|
||||
className="cursor-pointer responsive-icon"
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
|
||||
@ -17,6 +17,7 @@ export default function HomePage () {
|
||||
const {data: session, status} = useSession()
|
||||
const queryClient = useQueryClient()
|
||||
const [open, setOpen] = useState(false);
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
|
||||
console.log("Session = ", session)
|
||||
|
||||
@ -128,55 +129,67 @@ export default function HomePage () {
|
||||
},
|
||||
{
|
||||
id: "delete",
|
||||
cell: ({ cell }) => {
|
||||
const id = String(cell.row.original.id)
|
||||
return (
|
||||
<div className="relative p-2 cursor-pointer"
|
||||
// onClick={() => { mutate(id) }}
|
||||
>
|
||||
<Modal
|
||||
open={open}
|
||||
onOpenChange={(isOpen)=>{
|
||||
if(!isOpen) {
|
||||
setOpen(isOpen)
|
||||
}
|
||||
}}
|
||||
trigger={
|
||||
<div onClick={() => setOpen(true)}>
|
||||
<Image alt="" src={icons.trash} className="absolute right-2 top-[-50%] transform translate-middle-y hover:text-blue-500" />
|
||||
</div>
|
||||
cell: ({ row }) => {
|
||||
const id = String(row.original.id);
|
||||
return (
|
||||
<div className="relative p-2 cursor-pointer">
|
||||
<Modal
|
||||
open={selectedId === id}
|
||||
onOpenChange={(isOpen) => {
|
||||
if (!isOpen) {
|
||||
setSelectedId(null);
|
||||
}
|
||||
title={
|
||||
<p className="font-bold text-3xl">Supprimer une organisation</p>
|
||||
}
|
||||
content={
|
||||
<div>
|
||||
<p className="text-center">Voulez-vous vraiment supprimer cette organisation ?</p>
|
||||
}}
|
||||
trigger={
|
||||
<div
|
||||
onClick={() => {
|
||||
setSelectedId(id);
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
alt=""
|
||||
src={icons.trash}
|
||||
className="cursor-pointer responsive-icon"
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
title={
|
||||
<p className="font-bold text-3xl">
|
||||
Supprimer cette organisation
|
||||
</p>
|
||||
}
|
||||
content={
|
||||
<div>
|
||||
<p className="text-center">
|
||||
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 text-lg rounded-full text-center hover:bg-blue-200"
|
||||
onClick={() => { setOpen(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(id)
|
||||
setOpen(false)
|
||||
}}
|
||||
>
|
||||
Supprimer
|
||||
</button>
|
||||
</div>
|
||||
<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={() => {
|
||||
setSelectedId(null);
|
||||
}}
|
||||
>
|
||||
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(id);
|
||||
setSelectedId(null);
|
||||
}}
|
||||
>
|
||||
Supprimer
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
return(
|
||||
|
||||
@ -99,78 +99,80 @@ export default function Table<TData, TValue>({
|
||||
}
|
||||
|
||||
return(
|
||||
<div>
|
||||
<div className="w-full">
|
||||
{render()}
|
||||
|
||||
<div className="rounded-lg border border-gray-200 w-auto">
|
||||
<table className="w-full overflow-x-auto rounded-lg">
|
||||
<thead className="h-10">
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
<tr key={headerGroup.id} className="rounded-lg">
|
||||
{header
|
||||
?
|
||||
<th className="bg-[#E9F0FF] p-3 text-start first:rounded-tl-lg">
|
||||
|
||||
</th>
|
||||
:
|
||||
<th className="bg-[#E9F0FF] p-3 text-start first:rounded-tl-lg">
|
||||
<input
|
||||
ref={headerCheckboxRef}
|
||||
checked={!!table.getIsAllPageRowsSelected()}
|
||||
onChange={(e) => table.toggleAllPageRowsSelected(e.target.checked)}
|
||||
type="checkbox" name="" id=""
|
||||
/>
|
||||
</th>
|
||||
}
|
||||
{headerGroup.headers.map((header) => {
|
||||
return(
|
||||
<th key={header.id} className="bg-[#E9F0FF] p-3 text-start last:rounded-tr-lg">
|
||||
{flexRender(
|
||||
header.column.columnDef.header,
|
||||
header.getContext()
|
||||
)}
|
||||
</th>
|
||||
)
|
||||
})}
|
||||
</tr>
|
||||
))}
|
||||
</thead>
|
||||
<tbody>
|
||||
{table.getRowModel().rows.length ? (
|
||||
table.getRowModel().rows.map((row) => (
|
||||
<tr key={row.id} className={clsx('hover:bg-gray-100 border-t border-gray-200', { 'bg-gray-300': row.getIsSelected()})}>
|
||||
<td className="p-3 text-start">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full overflow-x-auto rounded-lg">
|
||||
<thead className="h-10">
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
<tr key={headerGroup.id} className="rounded-lg">
|
||||
{header
|
||||
?
|
||||
<th className="bg-[#E9F0FF] p-3 text-start first:rounded-tl-lg">
|
||||
|
||||
</th>
|
||||
:
|
||||
<th className="bg-[#E9F0FF] p-3 text-start first:rounded-tl-lg">
|
||||
<input
|
||||
checked={row.getIsSelected()}
|
||||
onChange={(e) => row.toggleSelected(e.target.checked)}
|
||||
ref={headerCheckboxRef}
|
||||
checked={!!table.getIsAllPageRowsSelected()}
|
||||
onChange={(e) => table.toggleAllPageRowsSelected(e.target.checked)}
|
||||
type="checkbox" name="" id=""
|
||||
/>
|
||||
</td>
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<td key={cell.id} className="p-3 text-start">
|
||||
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||
</td>
|
||||
))}
|
||||
</th>
|
||||
}
|
||||
{headerGroup.headers.map((header) => {
|
||||
return(
|
||||
<th key={header.id} className="bg-[#E9F0FF] p-3 text-start last:rounded-tr-lg">
|
||||
{flexRender(
|
||||
header.column.columnDef.header,
|
||||
header.getContext()
|
||||
)}
|
||||
</th>
|
||||
)
|
||||
})}
|
||||
</tr>
|
||||
))
|
||||
)
|
||||
: isDataLoading ?
|
||||
(
|
||||
<tr>
|
||||
<td colSpan={columns.length} className="h-20 text-center">
|
||||
Chargement...
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
: (
|
||||
<tr>
|
||||
<td colSpan={columns.length} className="h-20 text-center">
|
||||
Aucun résultats
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
))}
|
||||
</thead>
|
||||
<tbody>
|
||||
{table.getRowModel().rows.length ? (
|
||||
table.getRowModel().rows.map((row) => (
|
||||
<tr key={row.id} className={clsx('hover:bg-gray-100 border-t border-gray-200', { 'bg-gray-300': row.getIsSelected()})}>
|
||||
<td className="p-3 text-start">
|
||||
<input
|
||||
checked={row.getIsSelected()}
|
||||
onChange={(e) => row.toggleSelected(e.target.checked)}
|
||||
type="checkbox" name="" id=""
|
||||
/>
|
||||
</td>
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<td key={cell.id} className="p-3 text-start">
|
||||
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))
|
||||
)
|
||||
: isDataLoading ?
|
||||
(
|
||||
<tr>
|
||||
<td colSpan={columns.length} className="h-20 text-center">
|
||||
Chargement...
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
: (
|
||||
<tr>
|
||||
<td colSpan={columns.length} className="h-20 text-center">
|
||||
Aucun résultats
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-end space-x-2 py-4">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user