230 lines
11 KiB
TypeScript
230 lines
11 KiB
TypeScript
import React, {useState} from 'react';
|
|
import {motion, AnimatePresence} from "framer-motion";
|
|
import {Card} from "@/components/ui/card";
|
|
import {Button} from "@/components/ui/button";
|
|
import {Phone, ChevronDown, ChevronRight, Copy, Pencil, Plus, Trash2} from "lucide-react";
|
|
import {
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle
|
|
} from "@/components/ui/dialog";
|
|
import {Input} from "@/components/ui/input";
|
|
import {Label} from "@/components/ui/label";
|
|
import {Textarea} from "@/components/ui/textarea";
|
|
import {Tooltip, TooltipContent, TooltipTrigger} from "@/components/ui/tooltip";
|
|
import {Customer, CustomerPhoneNumber} from "@/services/customers/entities/customer";
|
|
|
|
interface Props {
|
|
customer: Customer,
|
|
handleOpenDialog: (content: React.ReactNode | null) => void;
|
|
}
|
|
|
|
export default function CustomerPhoneNumberContent({customer, handleOpenDialog}: Readonly<Props>) {
|
|
const [expandedPhones, setExpandedPhones] = useState<number[]>([]);
|
|
|
|
const togglePhone = (index: number) => {
|
|
setExpandedPhones(prev =>
|
|
prev.includes(index) ? prev.filter(i => i !== index) : [...prev, index]
|
|
);
|
|
};
|
|
|
|
const copyToClipboard = async (text: string) => {
|
|
await navigator.clipboard.writeText(text);
|
|
};
|
|
|
|
const handleAddPhone = () => {
|
|
handleOpenDialog(
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Neue Telefonnummer</DialogTitle>
|
|
<DialogDescription>
|
|
Füge eine neue Telefonnummer für <strong>{customer.companyName}</strong> hinzu.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="space-y-4 py-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="phone">Telefonnummer</Label>
|
|
<Input id="phone" placeholder="+49 123 456789"/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="note">Notiz</Label>
|
|
<Textarea id="note" placeholder="Optionale Notiz zur Telefonnummer" className="h-20"/>
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => handleOpenDialog(null)}>
|
|
Abbrechen
|
|
</Button>
|
|
<Button type="submit">Speichern</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
);
|
|
};
|
|
|
|
const handleEditPhone = (phone: CustomerPhoneNumber) => {
|
|
handleOpenDialog(
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Telefonnummer bearbeiten</DialogTitle>
|
|
<DialogDescription>
|
|
Bearbeite die Telefonnummer für <strong>{customer.companyName}</strong>.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="space-y-4 py-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="phone">Telefonnummer</Label>
|
|
<Input id="phone" defaultValue={phone.number} placeholder="+49 123 456789"/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="note">Notiz</Label>
|
|
<Textarea
|
|
id="note"
|
|
defaultValue={phone.note}
|
|
placeholder="Optionale Notiz zur Telefonnummer"
|
|
className="h-20"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => handleOpenDialog(null)}>
|
|
Abbrechen
|
|
</Button>
|
|
<Button type="submit">Speichern</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
);
|
|
};
|
|
|
|
const handleDeletePhone = (phone: CustomerPhoneNumber) => {
|
|
handleOpenDialog(
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Telefonnummer löschen</DialogTitle>
|
|
<DialogDescription>
|
|
Willst du die Telefonnummer <strong>{phone.number}</strong> von der
|
|
Firma <strong>{customer.companyName}</strong> löschen?
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => handleOpenDialog(null)}>
|
|
Abbrechen
|
|
</Button>
|
|
<Button variant="destructive" onClick={() => {
|
|
// Add your delete logic here
|
|
handleOpenDialog(null);
|
|
}}>
|
|
Löschen
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<Card className="p-4">
|
|
<div className="flex justify-between items-start">
|
|
<div className="flex items-center gap-2">
|
|
<Phone className="w-4 h-4 text-muted-foreground"/>
|
|
<h2 className="text-lg font-semibold">Telefonnummern</h2>
|
|
</div>
|
|
<Button
|
|
size="icon"
|
|
variant="ghost"
|
|
onClick={handleAddPhone}
|
|
>
|
|
<Plus className="w-4 h-4"/>
|
|
</Button>
|
|
</div>
|
|
<div className="space-y-1 mt-2">
|
|
{customer.phoneNumbers.map((phone, index) => (
|
|
<motion.div
|
|
key={index}
|
|
initial={false}
|
|
className="group rounded-md hover:bg-muted/50 transition-colors"
|
|
>
|
|
<div className="px-2 py-1.5">
|
|
<div className="flex items-center justify-between">
|
|
<button
|
|
type="button"
|
|
className="flex items-center gap-2 flex-1 text-left"
|
|
onClick={() => togglePhone(index)}
|
|
>
|
|
<div className="text-muted-foreground">
|
|
{expandedPhones.includes(index) ?
|
|
<ChevronDown className="w-4 h-4"/> :
|
|
<ChevronRight className="w-4 h-4"/>
|
|
}
|
|
</div>
|
|
<span className="font-medium">{phone.number}</span>
|
|
</button>
|
|
<div className="flex gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
size="icon"
|
|
variant="ghost"
|
|
onClick={() => copyToClipboard(phone.number)}
|
|
>
|
|
<Copy className="w-4 h-4"/>
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>Kopieren</TooltipContent>
|
|
</Tooltip>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
size="icon"
|
|
variant="ghost"
|
|
onClick={() => handleEditPhone(phone)}
|
|
>
|
|
<Pencil className="w-4 h-4"/>
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>Bearbeiten</TooltipContent>
|
|
</Tooltip>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
size="icon"
|
|
variant="ghost"
|
|
onClick={() => handleDeletePhone(phone)}
|
|
>
|
|
<Trash2 className="w-4 h-4 text-destructive"/>
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>Löschen</TooltipContent>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
<AnimatePresence>
|
|
{expandedPhones.includes(index) && (
|
|
<motion.div
|
|
initial={{height: 0, opacity: 0}}
|
|
animate={{height: "auto", opacity: 1}}
|
|
exit={{height: 0, opacity: 0}}
|
|
transition={{duration: 0.2}}
|
|
className="overflow-hidden"
|
|
>
|
|
<div className="pt-2 pl-6 text-sm space-y-1">
|
|
{phone.note && (
|
|
<p className="text-muted-foreground">
|
|
{phone.note}
|
|
</p>
|
|
)}
|
|
<p className="text-xs text-muted-foreground">
|
|
Erstellt von {phone.creator} am {" "}
|
|
{new Date(phone.createdAt).toLocaleDateString()}
|
|
</p>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</Card>
|
|
);
|
|
} |