108 lines
5.1 KiB
TypeScript
108 lines
5.1 KiB
TypeScript
import {Button} from "@/components/ui/button";
|
|
import {Mail, Pencil, Building, MapPin, User, Copy} from "lucide-react";
|
|
import {Card} from "@/components/ui/card";
|
|
import React from "react";
|
|
import {
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import {Tooltip, TooltipContent, TooltipTrigger} from "@/components/ui/tooltip";
|
|
import {Customer} from "@/services/customers/entities/customer";
|
|
|
|
interface Props {
|
|
customer: Customer,
|
|
handleOpenDialog: (content: React.ReactNode) => void;
|
|
}
|
|
|
|
export default function ContactInformationContent({customer, handleOpenDialog}: Readonly<Props>) {
|
|
const copyToClipboard = async (text: string) => {
|
|
await navigator.clipboard.writeText(text);
|
|
};
|
|
|
|
const handleEditClick = () => {
|
|
handleOpenDialog(
|
|
<DialogContent className="sm:max-w-[425px]">
|
|
<DialogHeader>
|
|
<DialogTitle>Kontaktinformationen bearbeiten</DialogTitle>
|
|
<DialogDescription>
|
|
Bearbeite hier die Kontaktinformationen für {customer.name}.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="space-y-4 py-4">
|
|
{/* Add your form fields here */}
|
|
<p className="text-sm text-muted-foreground italic">Form fields will go here.</p>
|
|
<div className="rounded-lg border bg-muted/40 p-4 space-y-2">
|
|
<p className="text-sm"><span className="text-muted-foreground">Name:</span> {customer.name}</p>
|
|
<p className="text-sm"><span className="text-muted-foreground">E-Mail:</span> {customer.email}
|
|
</p>
|
|
<p className="text-sm"><span
|
|
className="text-muted-foreground">Firma:</span> {customer.companyName}</p>
|
|
<p className="text-sm">
|
|
<span
|
|
className="text-muted-foreground">Adresse:</span> {customer.street}, {customer.zip} {customer.city}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => handleOpenDialog(null)}>Abbrechen</Button>
|
|
<Button type="submit">Speichern</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<Card className="p-4">
|
|
<div className="flex justify-between items-start">
|
|
<div className="flex items-center gap-2">
|
|
<Mail className="w-4 h-4 text-muted-foreground"/>
|
|
<h2 className="text-lg font-semibold">Kontaktinformationen</h2>
|
|
</div>
|
|
<Button
|
|
size="icon"
|
|
variant="ghost"
|
|
onClick={handleEditClick}
|
|
>
|
|
<Pencil className="w-4 h-4"/>
|
|
</Button>
|
|
</div>
|
|
<div className="space-y-3 mt-2">
|
|
{[
|
|
{icon: User, label: "Name", value: customer.name},
|
|
{icon: Mail, label: "E-Mail", value: customer.email, copyable: true},
|
|
{icon: Building, label: "Firma", value: customer.companyName},
|
|
{icon: MapPin, label: "Adresse", value: `${customer.street}, ${customer.zip} ${customer.city}`}
|
|
].map((item, index) => (
|
|
<div key={index}
|
|
className="group flex items-start gap-3 rounded-md p-1.5 hover:bg-muted/50 transition-colors">
|
|
<item.icon className="h-4 w-4 text-muted-foreground mt-0.5"/>
|
|
<div className="flex-1">
|
|
<p className="text-xs text-muted-foreground">{item.label}</p>
|
|
<div className="flex items-center justify-between gap-2">
|
|
<p className="text-sm font-medium">{item.value}</p>
|
|
{item.copyable && (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
size="icon"
|
|
variant="ghost"
|
|
className="opacity-0 group-hover:opacity-100 transition-opacity"
|
|
onClick={() => copyToClipboard(item.value)}
|
|
>
|
|
<Copy className="h-4 w-4"/>
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>Kopieren</TooltipContent>
|
|
</Tooltip>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Card>
|
|
);
|
|
} |