Marco/infoalloggi-monorepo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 6 Wiki Activity Actions

feat: replace Popover with Sheet component for announcements display in RichiesteTable

Browse source
This commit is contained in:
Marco Pedone 2026-03-30 11:49:39 +02:00
parent 3455fc8e93
commit b6aa423928
1 changed files with 54 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
apps/infoalloggi/src/components/tables/richieste-table.tsx
View file

@ -24,13 +24,13 @@ import type {
SearchFiltro,
} from "~/components/ui/dataTable-toolbar";
import {
Popover,
PopoverContent,
PopoverDescription,
PopoverHeader,
PopoverTitle,
PopoverTrigger,
} from "~/components/ui/popover";
Sheet,
SheetContent,
SheetDescription,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "~/components/ui/sheet";
import {
Tooltip,
TooltipContent,
@ -48,7 +48,7 @@ type RichiesteTableProps = {
};
export const RichiesteTable = ({ data }: RichiesteTableProps) => {
const tabledata = data;
const tabledata = [...data, ...data, ...data];
const columns_titles = {
id: "ID Ordine",
username: "Utente",
@ -334,8 +334,43 @@ export const RichiesteTable = ({ data }: RichiesteTableProps) => {
cell: ({ row }) => {
const annunci = row.original.annunci_servizio;
return (
<Popover>
<PopoverTrigger asChild>
// <Popover>
// <PopoverTrigger asChild>
// <Button
// className="data-[state=open]:border-primary data-[state=open]:bg-primary/10"
// size="sm"
// variant="outline"
// >
// {annunci.length} Annunci
// </Button>
// </PopoverTrigger>
// <PopoverContent
// align="end"
// className="max-h-[50vh] w-[80vw] overflow-y-auto sm:max-h-220"
// collisionPadding={{
// top: 20,
// }}
// >
// <PopoverHeader>
// <PopoverTitle>Annunci Inseriti</PopoverTitle>
// <PopoverDescription className="sr-only">
// Desc
// </PopoverDescription>
// </PopoverHeader>
// <div className="flex flex-col gap-4 divide-y">
// {annunci.map((a) => (
// <AnnuncioCardRichieste
// data={a}
// key={a.annunci_id}
// tableRef={tableRef}
// />
// ))}
// </div>
// </PopoverContent>
// </Popover>
<Sheet>
<SheetTrigger asChild>
<Button
className="data-[state=open]:border-primary data-[state=open]:bg-primary/10"
size="sm"
@ -343,22 +378,13 @@ export const RichiesteTable = ({ data }: RichiesteTableProps) => {
>
{annunci.length} Annunci
</Button>
</PopoverTrigger>
<PopoverContent
align="end"
className="max-h-[50vh] w-[80vw] overflow-y-auto sm:max-h-220"
collisionPadding={{
top: 20,
bottom: 20,
}}
>
<PopoverHeader>
<PopoverTitle>Annunci Inseriti</PopoverTitle>
<PopoverDescription className="sr-only">
Desc
</PopoverDescription>
</PopoverHeader>
<div className="flex flex-col gap-4 divide-y">
</SheetTrigger>
<SheetContent className="w-4/5 sm:max-w-3xl">
<SheetHeader>
<SheetTitle>Annunci Inseriti</SheetTitle>
<SheetDescription className="sr-only">Desc</SheetDescription>
</SheetHeader>
<div className="flex flex-col gap-4 divide-y overflow-y-auto">
{annunci.map((a) => (
<AnnuncioCardRichieste
data={a}
@ -367,8 +393,8 @@ export const RichiesteTable = ({ data }: RichiesteTableProps) => {
/>
))}
</div>
</PopoverContent>
</Popover>
</SheetContent>
</Sheet>
);
},
header: ({ column }) => (