feat: enhance UserViewHeader with responsive utility and navigation buttons
This commit is contained in:
parent
00979ecdac
commit
cca50a2c6a
1 changed files with 152 additions and 107 deletions
|
|
@ -1,7 +1,9 @@
|
|||
import { format } from "date-fns";
|
||||
import {
|
||||
ChevronDown,
|
||||
CloudSync,
|
||||
ExternalLink,
|
||||
type LucideIcon,
|
||||
Mail,
|
||||
MessagesSquare,
|
||||
NotebookPen,
|
||||
|
|
@ -26,7 +28,10 @@ import {
|
|||
DialogTrigger,
|
||||
} from "~/components/ui/dialog";
|
||||
import { Textarea } from "~/components/ui/textarea";
|
||||
import { useMediaQuery } from "~/hooks/use-media-query";
|
||||
import { useUserViewContext } from "~/lib/userViewContext";
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
import { api } from "~/utils/api";
|
||||
import { Confirm } from "../confirm";
|
||||
import { WhatsAppIcon2 } from "../svgs";
|
||||
|
|
@ -55,121 +60,161 @@ export const UserViewHeader = () => {
|
|||
});
|
||||
},
|
||||
});
|
||||
const isDesktop = useMediaQuery("(min-width: 640px)");
|
||||
|
||||
const links: { label: string; slug: string; icon: LucideIcon }[] = [
|
||||
{
|
||||
label: "Profilo",
|
||||
slug: "edit-user",
|
||||
icon: UserCog,
|
||||
},
|
||||
{
|
||||
label: "Ricerca",
|
||||
slug: "ricerca",
|
||||
icon: Search,
|
||||
},
|
||||
{
|
||||
label: "Comunicazioni",
|
||||
slug: "comunicazioni",
|
||||
icon: Mail,
|
||||
},
|
||||
{
|
||||
label: "Ordini",
|
||||
slug: "ordini",
|
||||
icon: ShoppingBag,
|
||||
},
|
||||
{
|
||||
label: "Allegati",
|
||||
slug: "allegati",
|
||||
icon: Paperclip,
|
||||
},
|
||||
];
|
||||
useEffect(() => {
|
||||
setUtilOpen(isDesktop);
|
||||
setNavOpen(isDesktop);
|
||||
}, [isDesktop]);
|
||||
const [utilOpen, setUtilOpen] = useState(isDesktop);
|
||||
const [navOpen, setNavOpen] = useState(isDesktop);
|
||||
|
||||
if (!data) return <div>Errore</div>;
|
||||
return (
|
||||
<div className="mb-5 flex flex-col space-y-5">
|
||||
<div className="flex flex-row flex-wrap items-center gap-3">
|
||||
<div className="text-3xl">{data.username}</div>
|
||||
|
||||
<Link href={`https://wa.me/${data.telefono}`} target="_blank">
|
||||
<Button size="sm" variant="success">
|
||||
<WhatsAppIcon2 className="size-4 fill-white" />
|
||||
WhatsApp
|
||||
</Button>
|
||||
</Link>
|
||||
{data.codice_fiscale ? (
|
||||
<IntestazioneMaker />
|
||||
) : (
|
||||
<Button disabled size="sm">
|
||||
<UserPen /> Intestazione
|
||||
</Button>
|
||||
)}
|
||||
<Confirm
|
||||
description={`Verrà inviata un'email di invito al sito all'indirizzo ${data.email}`}
|
||||
onConfirm={async () => {
|
||||
await sendInvite({ id: data.id });
|
||||
}}
|
||||
title="Vuoi mandare l'email di invito al sito?"
|
||||
>
|
||||
<Button size="sm" variant="info">
|
||||
<Mail /> Invita al sito
|
||||
</Button>
|
||||
</Confirm>
|
||||
<NoteUtenteDialog />
|
||||
<OverseerButton />
|
||||
</div>
|
||||
<div className="flex flex-row flex-wrap gap-2">
|
||||
<Link href={`/area-riservata/admin/user-view/edit-user/${data.id}`}>
|
||||
<Button
|
||||
className="border"
|
||||
size="sm"
|
||||
variant={pathname.includes("edit-user") ? "secondary" : "outline"}
|
||||
>
|
||||
<UserCog /> Profilo
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href={`/area-riservata/admin/user-view/ricerca/${data.id}`}>
|
||||
<Button
|
||||
className="border"
|
||||
size="sm"
|
||||
variant={pathname.includes("ricerca") ? "secondary" : "outline"}
|
||||
>
|
||||
<Search /> Ricerca
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href={`/area-riservata/admin/user-view/comunicazioni/${data.id}`}>
|
||||
<Button
|
||||
className="border"
|
||||
size="sm"
|
||||
variant={
|
||||
pathname.includes("comunicazioni") ? "secondary" : "outline"
|
||||
}
|
||||
>
|
||||
<Mail /> Comunicazioni
|
||||
</Button>
|
||||
</Link>
|
||||
|
||||
<Link href={`/area-riservata/admin/user-view/ordini/${data.id}`}>
|
||||
<Button
|
||||
className="border"
|
||||
size="sm"
|
||||
variant={pathname.includes("ordini") ? "secondary" : "outline"}
|
||||
>
|
||||
<ShoppingBag /> Ordini
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href={`/area-riservata/admin/user-view/allegati/${data.id}`}>
|
||||
<Button
|
||||
className="border"
|
||||
size="sm"
|
||||
variant={pathname.includes("allegati") ? "secondary" : "outline"}
|
||||
>
|
||||
<Paperclip /> Allegati
|
||||
</Button>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href={
|
||||
data.chatid
|
||||
? {
|
||||
pathname: "/area-riservata/admin/chats",
|
||||
query: { chatid: data.chatid },
|
||||
}
|
||||
: "/area-riservata/admin/chats"
|
||||
}
|
||||
target="_blank"
|
||||
>
|
||||
<Button
|
||||
className="border"
|
||||
size="sm"
|
||||
variant={!data.chatid ? "ghost" : "outline"}
|
||||
>
|
||||
<MessagesSquare /> Chat
|
||||
</Button>
|
||||
</Link>
|
||||
<div className="mb-5 flex flex-col gap-y-3">
|
||||
<div className="text-3xl">{data.username}</div>
|
||||
|
||||
<div className="grid grid-cols-2 items-center gap-2 sm:hidden">
|
||||
<Button
|
||||
className="flex gap-2"
|
||||
onClick={() =>
|
||||
swap({
|
||||
id: data.id,
|
||||
})
|
||||
}
|
||||
className="w-full"
|
||||
onClick={() => {
|
||||
if (utilOpen) {
|
||||
setUtilOpen(false);
|
||||
return;
|
||||
}
|
||||
if (navOpen) {
|
||||
setNavOpen(false);
|
||||
}
|
||||
setUtilOpen(true);
|
||||
}}
|
||||
size="sm"
|
||||
variant="outline"
|
||||
>
|
||||
<ExternalLink /> Login
|
||||
Utilità
|
||||
<ChevronDown className={cn(utilOpen && "rotate-180")} />
|
||||
</Button>
|
||||
<Button
|
||||
className="w-full"
|
||||
onClick={() => {
|
||||
if (navOpen) {
|
||||
setNavOpen(false);
|
||||
return;
|
||||
}
|
||||
if (utilOpen) {
|
||||
setUtilOpen(false);
|
||||
}
|
||||
setNavOpen(true);
|
||||
}}
|
||||
size="sm"
|
||||
variant="outline"
|
||||
>
|
||||
Navigazione <ChevronDown className={cn(navOpen && "rotate-180")} />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{utilOpen && (
|
||||
<div className="flex flex-row flex-wrap gap-2">
|
||||
<Link href={`https://wa.me/${data.telefono}`} target="_blank">
|
||||
<Button size="sm" variant="success">
|
||||
<WhatsAppIcon2 className="size-4 fill-white" />
|
||||
WhatsApp
|
||||
</Button>
|
||||
</Link>
|
||||
{data.codice_fiscale ? (
|
||||
<IntestazioneMaker />
|
||||
) : (
|
||||
<Button disabled size="sm">
|
||||
<UserPen /> Intestazione
|
||||
</Button>
|
||||
)}
|
||||
<Confirm
|
||||
description={`Verrà inviata un'email di invito al sito all'indirizzo ${data.email}`}
|
||||
onConfirm={async () => {
|
||||
await sendInvite({ id: data.id });
|
||||
}}
|
||||
title="Vuoi mandare l'email di invito al sito?"
|
||||
>
|
||||
<Button size="sm" variant="info">
|
||||
<Mail /> Invita al sito
|
||||
</Button>
|
||||
</Confirm>
|
||||
<NoteUtenteDialog />
|
||||
<OverseerButton />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{navOpen && (
|
||||
<div className="flex flex-row flex-wrap gap-2">
|
||||
{links.map((link) => (
|
||||
<Link
|
||||
href={`/area-riservata/admin/user-view/${link.slug}/${data.id}`}
|
||||
key={link.slug}
|
||||
>
|
||||
<Button
|
||||
size="sm"
|
||||
variant={pathname.includes(link.slug) ? "secondary" : "outline"}
|
||||
>
|
||||
{<link.icon />} {link.label}
|
||||
</Button>
|
||||
</Link>
|
||||
))}
|
||||
|
||||
<Link
|
||||
href={
|
||||
data.chatid
|
||||
? {
|
||||
pathname: "/area-riservata/admin/chats",
|
||||
query: { chatid: data.chatid },
|
||||
}
|
||||
: "/area-riservata/admin/chats"
|
||||
}
|
||||
target="_blank"
|
||||
>
|
||||
<Button size="sm" variant={!data.chatid ? "ghost" : "outline"}>
|
||||
<MessagesSquare /> Chat
|
||||
</Button>
|
||||
</Link>
|
||||
|
||||
<Button
|
||||
onClick={() =>
|
||||
swap({
|
||||
id: data.id,
|
||||
})
|
||||
}
|
||||
size="sm"
|
||||
>
|
||||
<ExternalLink /> Login
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Separator />
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue