Customer Detail Page and Enhance dynamic breadcrumbs
This commit is contained in:
@@ -0,0 +1,230 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user