104 lines
2.9 KiB
TypeScript
104 lines
2.9 KiB
TypeScript
import { Building, ChevronDown, ChevronUp } from "lucide-react";
|
|
import { useState } from "react";
|
|
import { LoadingPage } from "~/components/loading";
|
|
import { ServizioContent } from "~/components/servizio/main";
|
|
import {
|
|
Collapsible,
|
|
CollapsibleContent,
|
|
CollapsibleTrigger,
|
|
} from "~/components/ui/collapsible";
|
|
import { cn } from "~/lib/utils";
|
|
import { ServizioProvider } from "~/providers/ServizioProvider";
|
|
import type { UsersId } from "~/schemas/public/Users";
|
|
import type { ServizioData } from "~/server/controllers/servizio.controller";
|
|
import { api } from "~/utils/api";
|
|
|
|
export const TabRicerca = ({
|
|
userId,
|
|
isAdmin,
|
|
}: {
|
|
userId: UsersId;
|
|
isAdmin: boolean;
|
|
}) => {
|
|
const { data, isLoading } = api.servizio.getAllServizioAnnunci.useQuery({
|
|
userId,
|
|
});
|
|
|
|
if (isLoading) return <LoadingPage />;
|
|
if (!data || data.length === 0) {
|
|
return (
|
|
<div className="m-4 rounded-md bg-yellow-100 p-4 text-yellow-900">
|
|
Nessun servizio attualmente inserito
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const first_choice = data.findIndex((s) => !s.isInterrotto && s.isOkAcconto);
|
|
const second_choice = data.findIndex((s) => !s.isInterrotto);
|
|
const getDefaultOpen = (idx: number) => {
|
|
if (first_choice !== -1) return idx === first_choice;
|
|
if (second_choice !== -1) return idx === second_choice;
|
|
return idx === 0;
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col gap-8">
|
|
{data.map((servizio, idx) => {
|
|
return (
|
|
<Row
|
|
defaultOpen={getDefaultOpen(idx)}
|
|
isAdmin={isAdmin}
|
|
key={servizio.servizio_id}
|
|
servizio={servizio}
|
|
userId={userId}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const Row = ({
|
|
servizio,
|
|
userId,
|
|
isAdmin,
|
|
defaultOpen = false,
|
|
}: {
|
|
servizio: ServizioData;
|
|
userId: UsersId;
|
|
isAdmin: boolean;
|
|
defaultOpen: boolean;
|
|
}) => {
|
|
const [isOpen, setIsOpen] = useState(defaultOpen);
|
|
return (
|
|
<ServizioProvider
|
|
isAdmin={isAdmin}
|
|
servizio={servizio}
|
|
servizioId={servizio.servizio_id}
|
|
userId={userId}
|
|
>
|
|
<Collapsible onOpenChange={setIsOpen} open={isOpen}>
|
|
<div
|
|
className={cn(
|
|
"flex items-center rounded-md border border-primary bg-secondary py-2 shadow-sm hover:shadow-md",
|
|
isOpen && "rounded-b-none",
|
|
)}
|
|
>
|
|
<CollapsibleTrigger className="flex w-full cursor-pointer items-center justify-between gap-4 px-3 sm:px-4">
|
|
<div className="flex items-center gap-2 font-semibold text-primary sm:text-lg">
|
|
<Building className="size-6 fill-background" />
|
|
Affitto {servizio.tipologia}
|
|
</div>
|
|
<div className="float-end flex items-center justify-start pl-2 text-primary">
|
|
{isOpen ? <ChevronUp /> : <ChevronDown />}
|
|
</div>
|
|
</CollapsibleTrigger>
|
|
</div>
|
|
|
|
<CollapsibleContent className="mt-0 overflow-hidden transition-all duration-300 ease-in-out data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
|
|
<ServizioContent />
|
|
</CollapsibleContent>
|
|
</Collapsible>
|
|
</ServizioProvider>
|
|
);
|
|
};
|