feat: add admin contact details dialog and streamline cache invalidation in AnnuncioEditForm

apps/infoalloggi/src/components/servizio/annuncio_card.tsx

@@ -1,9 +1,19 @@
-import { Toolbox } from "lucide-react";
+import { Info, Toolbox } from "lucide-react";
 import Image from "next/image";
 import {
 	AdminActions,
 	UserActions,
 } from "~/components/servizio/annuncio_actions";
+import {
+	AlertDialog,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from "~/components/ui/alert-dialog";
 import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
 import { handleConsegna } from "~/lib/annuncio_details";
 import { getStorageUrl } from "~/lib/storage_utils";
@@ -11,6 +21,7 @@ import { cn, formatCurrency } from "~/lib/utils";
 import { useTranslation } from "~/providers/I18nProvider";
 import { useServizio, useServizioAnnuncio } from "~/providers/ServizioProvider";
 import type { AnnuncioRicerca } from "~/server/controllers/annunci.controller";
+import { api } from "~/utils/api";
 import { Button } from "../ui/button";
 import {
 	Collapsible,
@@ -97,6 +108,7 @@ export const AnnuncioDisplay = ({
 	data: AnnuncioRicerca;
 	className?: string;
 }) => {
+	const { isAdmin } = useServizio();
 	const { t } = useTranslation();
 
 	return (
@@ -146,9 +158,71 @@ export const AnnuncioDisplay = ({
 					{formatCurrency(data.prezzo / 1e2)}
 				</span>
 			</div>
-			<div className="col-span-2 w-full max-w-xl md:col-span-1 md:pr-8">
+			<div
+				className={cn(
+					"col-span-2 grid w-full max-w-xl items-center gap-2 md:col-span-1 md:pr-8",
+					isAdmin && "grid-cols-2",
+				)}
+			>
 				<AnnuncioDettaglio data={data} />
+				{isAdmin && <AdminAnnuncioContatti />}
 			</div>
 		</div>
 	);
 };
+
+const AdminAnnuncioContatti = () => {
+	const { data } = useServizioAnnuncio();
+	const { data: annuncio, isLoading } = api.annunci.getAnnuncioFull.useQuery({
+		id: data.id,
+	});
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<Button className="" variant="outline">
+					<Info />
+					<span>Dati Contatto</span>
+				</Button>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Contatti Annuncio {data.codice}</AlertDialogTitle>
+					<AlertDialogDescription className="sr-only">
+						desc
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<div className="flex w-full flex-col gap-4">
+					<div>
+						<span className="font-semibold">Contatti Aperti il: </span>
+						{data.open_contatti_at
+							? new Date(data.open_contatti_at).toLocaleString("it-IT")
+							: "Non ancora aperti"}
+					</div>
+					{isLoading ? (
+						<div className="flex h-24 w-full items-center justify-center">
+							Loading...
+						</div>
+					) : (
+						<>
+							<div>
+								<span className="font-semibold">Locatore/Incaricato: </span>
+								{annuncio?.locatore || "N/A"}
+							</div>
+							<div>
+								<span className="font-semibold">Email: </span>
+								{annuncio?.email || "N/A"}
+							</div>
+							<div>
+								<span className="font-semibold">Telefono: </span>
+								{annuncio?.numero || "N/A"}
+							</div>
+						</>
+					)}
+				</div>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Chiudi</AlertDialogCancel>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};

apps/infoalloggi/src/forms/FormEditAnnuncio.tsx

@@ -120,11 +120,8 @@ export const AnnuncioEditForm = ({ data }: { data: AnnunciWithMedia }) => {
 
 	const { mutate: edit } = api.annunci.editAnnuncio.useMutation({
 		onSettled: async () => {
-			await utils.annunci.getAnnuncio.invalidate({ cod: data.codice });
-			await utils.annunci.getAnnuncioById_rawImgUrls.invalidate({
-				id: data.id,
-			});
-			await utils.annunci.getAnnunciList.invalidate();
+			await utils.annunci.invalidate();
+
 			toast.success("Annuncio modificato con successo");
 		},
 	});
@@ -132,10 +129,7 @@ export const AnnuncioEditForm = ({ data }: { data: AnnunciWithMedia }) => {
 	const { mutateAsync: revalidate } =
 		api.revalidation.revalidateAnnuncio.useMutation({
 			onSettled: async () => {
-				await utils.annunci.getAnnuncio.invalidate({ cod: data.codice });
-				await utils.annunci.getAnnuncioById_rawImgUrls.invalidate({
-					id: data.id,
-				});
+				await utils.annunci.invalidate();
 				toast.success("Revalidazione completata");
 			},
 		});
@@ -147,10 +141,7 @@ export const AnnuncioEditForm = ({ data }: { data: AnnunciWithMedia }) => {
 			});
 		},
 		onSettled: async () => {
-			await utils.annunci.getAnnuncio.invalidate({ cod: data.codice });
-			await utils.annunci.getAnnuncioById_rawImgUrls.invalidate({
-				id: data.id,
-			});
+			await utils.annunci.invalidate();
 			toast.success("Aggiornamento completato", {
 				id: "update-annuncio",
 			});

apps/infoalloggi/src/server/api/routers/annunci.ts

@@ -52,7 +52,7 @@ export const annunciRouter = createTRPCRouter({
 	getAnnunciOptions: publicProcedure.query(async () => {
 		return await getOptions_AnnunciHandler();
 	}),
-
+	/** TODO da limitare per evitare leak */
 	getAnnuncio: publicProcedure
 		.input(
 			z.object({
@@ -62,6 +62,19 @@ export const annunciRouter = createTRPCRouter({
 		.query(async ({ input }) => {
 			return await getAnnunciByCod({ ...input });
 		}),
+	getAnnuncioFull: adminProcedure
+		.input(
+			z.object({
+				id: zAnnuncioId,
+			}),
+		)
+		.query(async ({ input }) => {
+			return await db
+				.selectFrom("annunci")
+				.selectAll()
+				.where("id", "=", input.id)
+				.executeTakeFirst();
+		}),
 	getAnnuncioById_rawImgUrls: publicProcedure
 		.input(
 			z.object({