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