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