Enhance ServizioActions and TabServizio components: pass userId to AddAnnuncio and integrate AnnunciSection for better announcement management

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

@@ -39,9 +39,11 @@ import {
 
 import { useState } from "react";
 import { useServizio } from "~/providers/ServizioProvider";
+import type { ServizioServizioId } from "~/schemas/public/Servizio";
+import type { UsersId } from "~/schemas/public/Users";
 
 export const ServizioActions = () => {
-  const { servizio, isAdmin } = useServizio();
+  const { servizio, isAdmin, userId } = useServizio();
 
   const canUserEdit =
     servizio.isOkAcconto &&
@@ -59,13 +61,19 @@ export const ServizioActions = () => {
           <InterruzioneServizio />
         </>
       )}
-      {isAdmin && <AddAnnuncio />}
+      {isAdmin && (
+        <AddAnnuncio servizioId={servizio.servizio_id} userId={userId} />
+      )}
     </div>
   );
 };
-const AddAnnuncio = () => {
-  const { servizioId, userId } = useServizio();
-
+export const AddAnnuncio = ({
+  servizioId,
+  userId,
+}: {
+  servizioId: ServizioServizioId;
+  userId: UsersId;
+}) => {
   const { data: codici, isLoading: loading } =
     api.servizio.getAnnunciAvailableToAdd.useQuery({
       servizioId,
@@ -87,6 +95,7 @@ const AddAnnuncio = () => {
       await utils.servizio.getCompatibileAnnunci.invalidate({
         servizioId,
       });
+      await utils.servizio.getUserServizi.invalidate({ userId });
       toast.success("Annuncio aggiunto");
       setOpenModal(false);
       setSelectedAnnunci([]);
@@ -166,6 +175,7 @@ const AddAnnuncio = () => {
     </Dialog>
   );
 };
+
 const InterruzioneServizio = () => {
   const { servizio, userId } = useServizio();
 

apps/infoalloggi/src/components/tables/servizio-table.tsx

@@ -1,5 +1,5 @@
 import toast from "react-hot-toast";
-import type { Servizio } from "~/schemas/public/Servizio";
+import type { Servizio, ServizioServizioId } from "~/schemas/public/Servizio";
 import type { UsersId } from "~/schemas/public/Users";
 import { api } from "~/utils/api";
 import { LoadingPage } from "~/components/loading";
@@ -37,6 +37,13 @@ import { Button } from "~/components/ui/button";
 import { Confirm } from "~/components/confirm";
 import Link from "next/link";
 import { env } from "~/env.mjs";
+import type { AnnunciId } from "~/schemas/public/Annunci";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "~/components/ui/tooltip";
+import { AddAnnuncio } from "~/components/servizio/servizio_actions";
 
 export const TabServizio = ({
   userId,
@@ -94,6 +101,7 @@ export const TabServizio = ({
           <TableHead>Inviato</TableHead>
           <TableHead>Status</TableHead>
           <TableHead></TableHead>
+          <TableHead></TableHead>
         </TableRow>
       </TableHeader>
       <TableBody>
@@ -105,7 +113,7 @@ export const TabServizio = ({
             servizio.decorrenza !== null;
           return (
             <TableRow key={idx}>
-              <TableCell className="font-medium">
+              <TableCell className="max-w-20 truncate font-medium">
                 {servizio.servizio_id}
               </TableCell>
               <TableCell>{servizio.tipologia}</TableCell>
@@ -132,6 +140,13 @@ export const TabServizio = ({
                   <span className="text-neutral-500">Inattivo</span>
                 )}
               </TableCell>
+              <TableCell>
+                <AnnunciSection
+                  selectedAnnunci={servizio.annunci}
+                  servizioId={servizio.servizio_id}
+                  userId={userId}
+                />
+              </TableCell>
               <TableCell>
                 <DropdownMenu>
                   <DropdownMenuTrigger asChild>
@@ -294,3 +309,35 @@ export const TabServizio = ({
     </Table>
   );
 };
+
+const AnnunciSection = ({
+  selectedAnnunci,
+  servizioId,
+  userId,
+}: {
+  selectedAnnunci: { codice: string; annunci_id: AnnunciId }[];
+  servizioId: ServizioServizioId;
+  userId: UsersId;
+}) => {
+  return (
+    <div className="flex items-center gap-3">
+      <Tooltip>
+        <TooltipTrigger className="w-5">
+          {selectedAnnunci?.length}
+        </TooltipTrigger>
+        <TooltipContent>
+          {selectedAnnunci?.length > 0 ? (
+            <ul>
+              {selectedAnnunci?.map((annuncio) => (
+                <li key={annuncio.annunci_id}>{annuncio.codice}</li>
+              ))}
+            </ul>
+          ) : (
+            <span>Nessun annuncio associato</span>
+          )}
+        </TooltipContent>
+      </Tooltip>
+      <AddAnnuncio servizioId={servizioId} userId={userId} />
+    </div>
+  );
+};

apps/infoalloggi/src/server/controllers/servizio.controller.ts

@@ -113,7 +113,21 @@ export const getServiziByUserId = async (userId: UsersId) => {
   try {
     return await db
       .selectFrom("servizio")
-      .selectAll()
+      .selectAll("servizio")
+      .select((eb) => [
+        jsonArrayFrom(
+          eb
+            .selectFrom("servizio_annunci")
+            .select(["servizio_annunci.annunci_id"])
+            .innerJoin("annunci", "annunci.id", "servizio_annunci.annunci_id")
+            .select("annunci.codice")
+            .whereRef(
+              "servizio_annunci.servizio_id",
+              "=",
+              "servizio.servizio_id",
+            ),
+        ).as("annunci"),
+      ])
       .where("user_id", "=", userId)
       .orderBy("created_at", "asc")
       .execute();