Merge branch 'customer-details-view' into 'dev'
Customer Detail Page and Enhance dynamic breadcrumbs See merge request rheinsw/rheinsw-mono-repo!18
This commit was merged in pull request #18.
This commit is contained in:
@@ -53,7 +53,7 @@ public class CustomerController extends AbstractController {
|
||||
}
|
||||
|
||||
@GetMapping("/{id}")
|
||||
public ResponseEntity<Customer> loadById(@PathVariable UUID id) {
|
||||
public ResponseEntity<Customer> loadById(@PathVariable("id") UUID id) {
|
||||
return ResponseEntity.ok(loadCustomerQuery.loadById(id));
|
||||
}
|
||||
|
||||
|
||||
14
internal_frontend/app/api/customers/[id]/route.ts
Normal file
14
internal_frontend/app/api/customers/[id]/route.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import {NextRequest, NextResponse} from "next/server";
|
||||
import {serverCall} from "@/lib/api/serverCall";
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
const id = request.url.split('/').pop();
|
||||
const response = await serverCall(`/customers/${id}`, "GET");
|
||||
|
||||
if (!response.ok) {
|
||||
return NextResponse.json({error: "Customer not found"}, {status: 404});
|
||||
}
|
||||
|
||||
const customer = await response.json();
|
||||
return NextResponse.json(customer);
|
||||
}
|
||||
170
internal_frontend/app/customers/[id]/page.tsx
Normal file
170
internal_frontend/app/customers/[id]/page.tsx
Normal file
@@ -0,0 +1,170 @@
|
||||
"use client";
|
||||
|
||||
import React, {useEffect, useState, useMemo} from "react";
|
||||
import {useParams, useRouter} from "next/navigation";
|
||||
import {ChevronLeft} from "lucide-react";
|
||||
import axios, {AxiosError} from "axios";
|
||||
import {Button} from "@/components/ui/button";
|
||||
import {Dialog} from "@/components/ui/dialog";
|
||||
import {Skeleton} from "@/components/ui/skeleton";
|
||||
import CustomerDetailContent from "@/components/customers/details/CustomerDetailContent";
|
||||
import {Customer} from "@/services/customers/entities/customer";
|
||||
import CustomerInformationContent from "@/components/customers/details/sub/ContactInformationContent";
|
||||
import CustomerPhoneNumberContent from "@/components/customers/details/sub/CustomerPhoneNumberContent";
|
||||
import CustomerNotesContent from "@/components/customers/details/sub/CustomerNotesContent";
|
||||
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || '/api';
|
||||
|
||||
export default function CustomerDetailPage() {
|
||||
const router = useRouter();
|
||||
const {id} = useParams<{ id: string }>();
|
||||
const [customer, setCustomer] = useState<Customer | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [openDialog, setOpenDialog] = useState(false);
|
||||
const [dialogContent, setDialogContent] = useState<React.ReactNode | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) {
|
||||
setError("Keine Kunden-ID angegeben");
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
let isMounted = true;
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
axios
|
||||
.get<Customer>(`${API_BASE_URL}/customers/${id}`)
|
||||
.then((res) => {
|
||||
if (isMounted) {
|
||||
setCustomer(res.data);
|
||||
}
|
||||
})
|
||||
.catch((error: AxiosError) => {
|
||||
if (isMounted) {
|
||||
console.error('Error fetching customer:', error);
|
||||
setCustomer(null);
|
||||
setError(
|
||||
error.response?.status === 404
|
||||
? "Kunde nicht gefunden"
|
||||
: "Fehler beim Laden der Kundendaten"
|
||||
);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
if (isMounted) {
|
||||
setLoading(false);
|
||||
}
|
||||
});
|
||||
|
||||
return () => {
|
||||
isMounted = false;
|
||||
};
|
||||
}, [id]);
|
||||
|
||||
const handleOpenDialog = (content: React.ReactNode) => {
|
||||
setDialogContent(content);
|
||||
setOpenDialog(true);
|
||||
};
|
||||
|
||||
const formatDate = (date: string) => {
|
||||
try {
|
||||
const formattedDate = new Date(date).toLocaleDateString('de-DE', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
return formattedDate === 'Invalid Date' ? '-' : formattedDate;
|
||||
} catch (error) {
|
||||
console.error('Error formatting date:', error);
|
||||
return '-';
|
||||
}
|
||||
};
|
||||
|
||||
const customerMetadata = useMemo(() => ({
|
||||
createdInfo: customer
|
||||
? `Erstellt von ${customer.createdBy || "-"} am ${formatDate(customer.createdAt)}`
|
||||
: "Erstellt von - am -",
|
||||
lastActivityInfo: customer
|
||||
? `Letzte Aktivität: ${customer.updatedBy || "-"} am ${formatDate(customer.updatedAt)}`
|
||||
: "Letzte Aktivität: - am -"
|
||||
}), [customer]);
|
||||
|
||||
const renderMetadata = () => {
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex flex-col items-end gap-1">
|
||||
<div className="space-y-1">
|
||||
<Skeleton className="h-4 w-[250px]"/>
|
||||
<Skeleton className="h-4 w-[280px]"/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-end gap-1 text-xs text-muted-foreground">
|
||||
<div>{customerMetadata.createdInfo}</div>
|
||||
<div>{customerMetadata.lastActivityInfo}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-full w-full p-6 space-y-4 text-sm">
|
||||
<div className="flex justify-between items-start">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => router.push("/customers")}
|
||||
disabled={loading}
|
||||
aria-label="Zurück zur Kundenliste"
|
||||
>
|
||||
<ChevronLeft className="w-4 h-4 mr-1"/>
|
||||
Zurück
|
||||
</Button>
|
||||
|
||||
{renderMetadata()}
|
||||
</div>
|
||||
|
||||
{error ? (
|
||||
<div className="text-center text-red-500 p-4" role="alert">
|
||||
{error}
|
||||
</div>
|
||||
) : (
|
||||
<CustomerDetailContent
|
||||
loading={loading}
|
||||
customer={customer}
|
||||
sections={
|
||||
customer
|
||||
? [
|
||||
<CustomerInformationContent
|
||||
key="customerInformation"
|
||||
customer={customer}
|
||||
handleOpenDialog={handleOpenDialog}
|
||||
/>,
|
||||
<CustomerPhoneNumberContent
|
||||
key="customerPhoneNumberInfo"
|
||||
customer={customer}
|
||||
handleOpenDialog={handleOpenDialog}
|
||||
/>,
|
||||
<CustomerNotesContent
|
||||
key="customerNotes"
|
||||
customer={customer}
|
||||
handleOpenDialog={handleOpenDialog}
|
||||
/>
|
||||
]
|
||||
: []
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Dialog open={openDialog} onOpenChange={setOpenDialog}>
|
||||
{dialogContent}
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -24,36 +24,7 @@ import {motion} from "framer-motion";
|
||||
import {ArrowRight} from "lucide-react";
|
||||
import {NewCustomerModal} from "@/components/customers/modal/NewCustomerModal";
|
||||
import axios from "axios";
|
||||
|
||||
export interface CustomerPhoneNumber {
|
||||
number: string;
|
||||
note: string;
|
||||
creator: string;
|
||||
lastModifier: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export interface CustomerNote {
|
||||
text: string;
|
||||
creator: string;
|
||||
lastModifier: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export interface Customer {
|
||||
id: string;
|
||||
email: string;
|
||||
name: string;
|
||||
companyName: string;
|
||||
phoneNumbers: CustomerPhoneNumber[];
|
||||
street: string;
|
||||
zip: string;
|
||||
city: string;
|
||||
notes: CustomerNote[];
|
||||
createdAt: string;
|
||||
}
|
||||
import {Customer} from "@/services/customers/entities/customer";
|
||||
|
||||
export default function CustomersPage() {
|
||||
const router = useRouter();
|
||||
@@ -64,17 +35,30 @@ export default function CustomersPage() {
|
||||
const pageSize = 15;
|
||||
|
||||
useEffect(() => {
|
||||
axios.get("/api/customers").then((res) => {
|
||||
setCustomers(res.data);
|
||||
setLoading(false);
|
||||
});
|
||||
setLoading(true);
|
||||
axios.get("/api/customers")
|
||||
.then((res) => {
|
||||
setCustomers(res.data);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error fetching customers:', error);
|
||||
setCustomers([]);
|
||||
})
|
||||
.finally(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
return customers.filter(
|
||||
(c) =>
|
||||
c.name.toLowerCase().includes(search.toLowerCase()) ||
|
||||
c.email.toLowerCase().includes(search.toLowerCase())
|
||||
c.email.toLowerCase().includes(search.toLowerCase()) ||
|
||||
c.companyName.toLowerCase().includes(search.toLowerCase()) ||
|
||||
c.street.toLowerCase().includes(search.toLowerCase()) ||
|
||||
c.zip.toLowerCase().includes(search.toLowerCase()) ||
|
||||
c.city.toLowerCase().includes(search.toLowerCase()) ||
|
||||
c.phoneNumbers?.[0]?.number?.toLowerCase().includes(search.toLowerCase())
|
||||
);
|
||||
}, [customers, search]);
|
||||
|
||||
|
||||
@@ -0,0 +1,47 @@
|
||||
import {Card} from "@/components/ui/card";
|
||||
import {Skeleton} from "@/components/ui/skeleton";
|
||||
import {Customer} from "@/services/customers/entities/customer";
|
||||
import React from "react";
|
||||
|
||||
type Props = {
|
||||
loading: boolean;
|
||||
customer: Customer | null;
|
||||
sections: React.ReactNode[];
|
||||
};
|
||||
|
||||
export default function CustomerDetailContent({loading, customer, sections}: Readonly<Props>) {
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 auto-rows-fr">
|
||||
<Card className="p-4 space-y-2">
|
||||
<Skeleton className="h-5 w-40"/>
|
||||
<Skeleton className="h-4 w-64"/>
|
||||
<Skeleton className="h-4 w-44"/>
|
||||
<Skeleton className="h-4 w-72"/>
|
||||
</Card>
|
||||
<Card className="p-4 space-y-2">
|
||||
<Skeleton className="h-5 w-40"/>
|
||||
<Skeleton className="h-14 w-full"/>
|
||||
</Card>
|
||||
<Card className="p-4 space-y-2 md:col-span-2">
|
||||
<Skeleton className="h-5 w-40"/>
|
||||
<Skeleton className="h-20 w-full"/>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!customer) {
|
||||
return (
|
||||
<div className="text-center text-muted-foreground pt-20">
|
||||
<p className="text-lg">Keine Kundendaten gefunden.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 auto-rows-fr">
|
||||
{sections}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,108 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,217 @@
|
||||
import React, {useState} from 'react';
|
||||
import {motion, AnimatePresence} from "framer-motion";
|
||||
import {Card} from "@/components/ui/card";
|
||||
import {Button} from "@/components/ui/button";
|
||||
import {ChevronDown, ChevronRight, Pencil, Plus, Trash2, Notebook} from "lucide-react";
|
||||
import {Customer, CustomerNote} from "@/services/customers/entities/customer";
|
||||
import {
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import {Label} from "@/components/ui/label";
|
||||
import {Textarea} from "@/components/ui/textarea";
|
||||
import {Tooltip, TooltipContent, TooltipTrigger} from "@/components/ui/tooltip";
|
||||
|
||||
type Props = {
|
||||
customer: Customer;
|
||||
handleOpenDialog: (content: React.ReactNode) => void;
|
||||
};
|
||||
|
||||
export default function CustomerNotesContent({customer, handleOpenDialog}: Readonly<Props>) {
|
||||
const [expandedNotes, setExpandedNotes] = useState<number[]>([]);
|
||||
|
||||
const toggleNote = (index: number) => {
|
||||
setExpandedNotes(prev =>
|
||||
prev.includes(index) ? prev.filter(i => i !== index) : [...prev, index]
|
||||
);
|
||||
};
|
||||
|
||||
const handleAddNote = () => {
|
||||
handleOpenDialog(
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Neue Notiz hinzufügen</DialogTitle>
|
||||
<DialogDescription>
|
||||
Füge eine neue Notiz für {customer.name} hinzu.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="note">Notiz</Label>
|
||||
<Textarea
|
||||
id="note"
|
||||
placeholder="Schreib hier deine Notiz..."
|
||||
className="min-h-[150px]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => handleOpenDialog(null)}>
|
||||
Abbrechen
|
||||
</Button>
|
||||
<Button type="submit">
|
||||
Speichern
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
);
|
||||
};
|
||||
|
||||
const handleEditNote = (note: CustomerNote) => {
|
||||
handleOpenDialog(
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Notiz bearbeiten</DialogTitle>
|
||||
<DialogDescription>
|
||||
Bearbeite deine Notiz hier.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="note">Notiz</Label>
|
||||
<Textarea
|
||||
id="note"
|
||||
defaultValue={note.text}
|
||||
className="min-h-[150px]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => handleOpenDialog(null)}>
|
||||
Abbrechen
|
||||
</Button>
|
||||
<Button type="submit">
|
||||
Speichern
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
);
|
||||
};
|
||||
|
||||
const handleDeleteNote = (note: CustomerNote) => {
|
||||
handleOpenDialog(
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Notiz löschen</DialogTitle>
|
||||
<DialogDescription>
|
||||
Willst du diese Notiz von der Firma <strong>{customer.companyName}</strong> wirklich löschen?
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="py-4 text-sm text-muted-foreground">
|
||||
{note.text}
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => handleOpenDialog(null)}>
|
||||
Abbrechen
|
||||
</Button>
|
||||
<Button variant="destructive" onClick={() => {
|
||||
// Handle delete
|
||||
handleOpenDialog(null);
|
||||
}}>
|
||||
Löschen
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="p-4 pb-2 md:col-span-2">
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="flex items-center gap-2">
|
||||
<Notebook className="w-4 h-4 text-muted-foreground"/>
|
||||
<h2 className="text-lg font-semibold">Notizen</h2>
|
||||
</div>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
onClick={handleAddNote}
|
||||
>
|
||||
<Plus className="w-4 h-4"/>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="space-y-1 mt-2">
|
||||
{customer.notes.map((note, 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-start gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="text-muted-foreground mt-1"
|
||||
onClick={() => toggleNote(index)}
|
||||
>
|
||||
{expandedNotes.includes(index) ?
|
||||
<ChevronDown className="w-4 h-4"/> :
|
||||
<ChevronRight className="w-4 h-4"/>
|
||||
}
|
||||
</button>
|
||||
<div className="flex-1">
|
||||
<div className="flex justify-between items-start gap-2">
|
||||
<div
|
||||
className="flex-1 font-medium cursor-pointer"
|
||||
onClick={() => toggleNote(index)}
|
||||
>
|
||||
{note.text}
|
||||
</div>
|
||||
<div
|
||||
className="flex gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity shrink-0">
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
onClick={() => handleEditNote(note)}
|
||||
>
|
||||
<Pencil className="w-4 h-4"/>
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Bearbeiten</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
onClick={() => handleDeleteNote(note)}
|
||||
>
|
||||
<Trash2 className="w-4 h-4 text-destructive"/>
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Löschen</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<AnimatePresence>
|
||||
{expandedNotes.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 text-sm">
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Erstellt von {note.creator} am {" "}
|
||||
{new Date(note.createdAt).toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -1,4 +1,3 @@
|
||||
// components/dynamic-breadcrumb.tsx
|
||||
'use client';
|
||||
|
||||
import {usePathname} from 'next/navigation';
|
||||
@@ -9,29 +8,111 @@ import {
|
||||
BreadcrumbList,
|
||||
BreadcrumbPage,
|
||||
BreadcrumbSeparator,
|
||||
} from "@/components/ui/breadcrumb";
|
||||
import React from 'react';
|
||||
import {getBreadcrumbs} from "@/utils/BreadcrumbUtils";
|
||||
} from '@/components/ui/breadcrumb';
|
||||
import {Skeleton} from "@/components/ui/skeleton";
|
||||
import React, {useEffect, useState} from 'react';
|
||||
import {getBreadcrumbs} from '@/utils/BreadcrumbUtils';
|
||||
import {breadcrumbResolvers} from "@/lib/breadcrumb-map";
|
||||
|
||||
interface ResolvedBreadcrumb {
|
||||
href: string;
|
||||
label: string;
|
||||
isCurrentPage: boolean;
|
||||
}
|
||||
|
||||
export function DynamicBreadcrumb() {
|
||||
const pathname = usePathname();
|
||||
const breadcrumbs = getBreadcrumbs(pathname);
|
||||
const [resolvedBreadcrumbs, setResolvedBreadcrumbs] = useState<ResolvedBreadcrumb[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
// Get initial segments count for skeleton
|
||||
const pathSegments = pathname.split('/').filter(Boolean);
|
||||
|
||||
useEffect(() => {
|
||||
const resolveDynamicLabels = async () => {
|
||||
setIsLoading(true);
|
||||
const raw = getBreadcrumbs(pathname);
|
||||
|
||||
const enhanced = await Promise.all(
|
||||
raw.map(async (b) => {
|
||||
const pathSegments = b.href.split('/').filter(Boolean);
|
||||
const lastSegment = pathSegments[pathSegments.length - 1];
|
||||
const parentSegment = pathSegments[pathSegments.length - 2];
|
||||
|
||||
const isUUID = /^[0-9a-fA-F-]{36}$/.test(lastSegment);
|
||||
const resolve = breadcrumbResolvers[parentSegment];
|
||||
|
||||
if (isUUID && resolve) {
|
||||
try {
|
||||
const dynamicLabel = await resolve(lastSegment);
|
||||
return {
|
||||
href: b.href,
|
||||
label: dynamicLabel,
|
||||
isCurrentPage: b.isCurrentPage ?? false,
|
||||
};
|
||||
} catch {
|
||||
return {
|
||||
href: b.href,
|
||||
label: lastSegment,
|
||||
isCurrentPage: b.isCurrentPage ?? false,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
href: b.href,
|
||||
label: b.label,
|
||||
isCurrentPage: b.isCurrentPage ?? false,
|
||||
};
|
||||
})
|
||||
);
|
||||
|
||||
setResolvedBreadcrumbs(enhanced);
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
resolveDynamicLabels();
|
||||
}, [pathname]);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<Breadcrumb>
|
||||
<BreadcrumbList>
|
||||
{/* Always show Home for empty path */}
|
||||
<BreadcrumbItem className="hidden md:block">
|
||||
<Skeleton className="h-4 w-[60px]"/>
|
||||
</BreadcrumbItem>
|
||||
{pathSegments.length > 0 && <BreadcrumbSeparator className="hidden md:block"/>}
|
||||
|
||||
{/* Show skeleton for each path segment */}
|
||||
{pathSegments.map((_, index) => (
|
||||
<React.Fragment key={index}>
|
||||
<BreadcrumbItem className="hidden md:block">
|
||||
<Skeleton className={`h-4 w-[${index === pathSegments.length - 1 ? '120' : '80'}px]`}/>
|
||||
</BreadcrumbItem>
|
||||
{index < pathSegments.length - 1 && (
|
||||
<BreadcrumbSeparator className="hidden md:block"/>
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</BreadcrumbList>
|
||||
</Breadcrumb>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Breadcrumb>
|
||||
<BreadcrumbList>
|
||||
{breadcrumbs.map((breadcrumb, index) => (
|
||||
{resolvedBreadcrumbs.map((breadcrumb, index) => (
|
||||
<React.Fragment key={breadcrumb.href}>
|
||||
<BreadcrumbItem className="hidden md:block">
|
||||
{breadcrumb.isCurrentPage ? (
|
||||
<BreadcrumbPage>{breadcrumb.label}</BreadcrumbPage>
|
||||
) : (
|
||||
<BreadcrumbLink href={breadcrumb.href}>
|
||||
{breadcrumb.label}
|
||||
</BreadcrumbLink>
|
||||
<BreadcrumbLink href={breadcrumb.href}>{breadcrumb.label}</BreadcrumbLink>
|
||||
)}
|
||||
</BreadcrumbItem>
|
||||
{index < breadcrumbs.length - 1 && (
|
||||
{index < resolvedBreadcrumbs.length - 1 && (
|
||||
<BreadcrumbSeparator className="hidden md:block"/>
|
||||
)}
|
||||
</React.Fragment>
|
||||
|
||||
@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
|
||||
<div
|
||||
data-slot="card"
|
||||
className={cn(
|
||||
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
|
||||
"bg-card text-card-foreground flex flex-col gap-3 rounded-xl border py-6 shadow-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -7,3 +7,14 @@ export const breadcrumbMap: Record<string, string> = {
|
||||
'customers': 'Kundenübersicht',
|
||||
// Add more mappings as needed
|
||||
};
|
||||
|
||||
export const breadcrumbResolvers: Record<string, (id: string) => Promise<string>> = {
|
||||
"customers": async (id: string) => {
|
||||
const res = await fetch(`/api/customers/${id}`, {cache: "no-store"});
|
||||
const customer = await res .json();
|
||||
if (customer.companyName) return `Firma: ${customer.companyName}`;
|
||||
if (customer.name) return `Name: ${customer.name}`;
|
||||
return `ID: ${id}`;
|
||||
},
|
||||
// Add more mappings as needed
|
||||
};
|
||||
|
||||
@@ -1,17 +1,21 @@
|
||||
export interface PhoneNumber {
|
||||
export interface CustomerPhoneNumber {
|
||||
number: string;
|
||||
note: string;
|
||||
createdBy: string;
|
||||
creator: string;
|
||||
createdBy: number;
|
||||
lastModifier: string;
|
||||
updatedBy: number;
|
||||
createdAt: string;
|
||||
updatedBy: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export interface Note {
|
||||
export interface CustomerNote {
|
||||
text: string;
|
||||
createdBy: string;
|
||||
creator: string;
|
||||
createdBy: number;
|
||||
lastModifier: string;
|
||||
updatedBy: number;
|
||||
createdAt: string;
|
||||
updatedBy: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
@@ -20,13 +24,13 @@ export interface Customer {
|
||||
email: string;
|
||||
name: string;
|
||||
companyName: string;
|
||||
phoneNumbers: PhoneNumber[];
|
||||
phoneNumbers: CustomerPhoneNumber[];
|
||||
street: string;
|
||||
zip: string;
|
||||
city: string;
|
||||
notes: Note[];
|
||||
createdBy: string;
|
||||
notes: CustomerNote[];
|
||||
createdBy: number;
|
||||
updatedBy: number;
|
||||
createdAt: string;
|
||||
updatedBy: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
@@ -1,8 +1,8 @@
|
||||
"use server";
|
||||
|
||||
import {callApi} from "@/lib/api/callApi";
|
||||
import {Customer} from "@/app/customers/page";
|
||||
import {customerRoutes} from "@/app/api/customers/customerRoutes";
|
||||
import {Customer} from "@/services/customers/entities/customer";
|
||||
|
||||
export async function validateCustomer(input: {
|
||||
email: string;
|
||||
|
||||
@@ -1,19 +1,18 @@
|
||||
// utils/getBreadcrumbs.ts
|
||||
import {breadcrumbMap} from '@/lib/breadcrumb-map';
|
||||
import {breadcrumbMap} from "@/lib/breadcrumb-map";
|
||||
|
||||
export type Breadcrumb = {
|
||||
label: string;
|
||||
export interface Breadcrumb {
|
||||
href: string;
|
||||
isCurrentPage?: boolean;
|
||||
};
|
||||
label: string;
|
||||
isCurrentPage: boolean;
|
||||
}
|
||||
|
||||
export function getBreadcrumbs(path: string): Breadcrumb[] {
|
||||
const pathSegments = path.split('/').filter(Boolean);
|
||||
|
||||
return pathSegments.map((segment, index) => {
|
||||
const href = `/${pathSegments.slice(0, index + 1).join('/')}`;
|
||||
// Use the mapping if it exists, otherwise format the segment
|
||||
const label = breadcrumbMap[segment.toLowerCase()] ||
|
||||
const label =
|
||||
breadcrumbMap[segment.toLowerCase()] ||
|
||||
segment
|
||||
.split('-')
|
||||
.map(word => word.charAt(0).toUpperCase() + word.slice(1))
|
||||
@@ -22,7 +21,7 @@ export function getBreadcrumbs(path: string): Breadcrumb[] {
|
||||
return {
|
||||
label,
|
||||
href,
|
||||
isCurrentPage: index === pathSegments.length - 1
|
||||
isCurrentPage: index === pathSegments.length - 1,
|
||||
};
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user