117 lines
2.8 KiB
TypeScript
117 lines
2.8 KiB
TypeScript
import { format } from "date-fns";
|
|
import { Waypoints } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { Button, type ButtonProps } from "~/components/ui/button";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "~/components/ui/dialog";
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "~/components/ui/table";
|
|
import { UserAvatar } from "~/components/user_avatar";
|
|
import { cn } from "~/lib/utils";
|
|
import type { AnnunciId } from "~/schemas/public/Annunci";
|
|
import { api } from "~/utils/api";
|
|
|
|
export const IncrociDialog = ({
|
|
annuncioId,
|
|
props,
|
|
}: {
|
|
annuncioId: AnnunciId;
|
|
props?: ButtonProps;
|
|
}) => {
|
|
return (
|
|
<Dialog>
|
|
<DialogTrigger asChild>
|
|
<Button
|
|
className={cn("w-full", props?.className)}
|
|
variant={props?.variant || "info"}
|
|
{...props}
|
|
>
|
|
<Waypoints /> Incroci
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent className="sm:max-w-4xl">
|
|
<DialogHeader>
|
|
<DialogTitle>Lista Incroci</DialogTitle>
|
|
<DialogDescription>
|
|
Lista utenti che hanno ricevuto i contatti di questo annuncio
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="max-h-[50vh] w-full overflow-auto">
|
|
<IncrociTable annuncioId={annuncioId} />
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|
|
|
|
const IncrociTable = ({ annuncioId }: { annuncioId: AnnunciId }) => {
|
|
const { data: incroci, isLoading } = api.annunci.getIncrociAnnuncio.useQuery({
|
|
annuncioId,
|
|
});
|
|
|
|
return (
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Utente</TableHead>
|
|
<TableHead>Data</TableHead>
|
|
<TableHead>Note</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{isLoading ? (
|
|
<p>Caricamento...</p>
|
|
) : (
|
|
incroci?.map((incrocio) => (
|
|
<TableRow key={incrocio.servizio_id}>
|
|
<TableCell>
|
|
<Link
|
|
aria-label="Visualizza Utente"
|
|
className="flex items-center gap-2"
|
|
href={`/area-riservata/admin/user-view/ricerca/${incrocio.user_id}`}
|
|
>
|
|
<UserAvatar
|
|
className="size-8"
|
|
userId={incrocio.user_id}
|
|
username={incrocio.username}
|
|
/>
|
|
<span className="font-semibold text-sm">
|
|
{incrocio.username}
|
|
</span>
|
|
</Link>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div>
|
|
<p>
|
|
Aggiunto: {format(incrocio.created_at, "dd/MM/yyyy HH:mm")}
|
|
</p>
|
|
<p>
|
|
Aperto:{" "}
|
|
{incrocio.open_contatti_at
|
|
? format(incrocio.open_contatti_at, "dd/MM/yyyy HH:mm")
|
|
: "Non aperto"}
|
|
</p>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="whitespace-pre-wrap">
|
|
{incrocio.note}
|
|
</TableCell>
|
|
</TableRow>
|
|
))
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
);
|
|
};
|