diff --git a/src/app/contacts/page.js b/src/app/contacts/page.js index 8af077f..d7a0137 100644 --- a/src/app/contacts/page.js +++ b/src/app/contacts/page.js @@ -365,15 +365,51 @@ export default function ContactsPage() { {contact.phone && ( - - - - - {contact.phone} - +
+ {(() => { + // Handle multiple phones (could be comma-separated or JSON) + let phones = []; + try { + // Try to parse as JSON array first + const parsed = JSON.parse(contact.phone); + phones = Array.isArray(parsed) ? parsed : [contact.phone]; + } catch { + // Fall back to comma-separated string + phones = contact.phone.split(',').map(p => p.trim()).filter(p => p); + } + + const primaryPhone = phones[0]; + const additionalPhones = phones.slice(1); + + return ( + <> + + + + + {primaryPhone} + + {additionalPhones.length > 0 && ( +
+ {additionalPhones.length === 1 ? ( + + {additionalPhones[0]} + + ) : ( + +{additionalPhones.length} więcej + )} +
+ )} + + ); + })()} +
)} @@ -453,16 +489,29 @@ export default function ContactsPage() {

Informacje kontaktowe

- {selectedContact.phone && ( -
- - - - - {selectedContact.phone} - -
- )} + {selectedContact.phone && (() => { + let phones = []; + try { + const parsed = JSON.parse(selectedContact.phone); + phones = Array.isArray(parsed) ? parsed : [selectedContact.phone]; + } catch { + phones = selectedContact.phone.split(',').map(p => p.trim()).filter(p => p); + } + + return phones.map((phone, index) => ( +
+ + + + + {phone} + + {index === 0 && phones.length > 1 && ( + (główny) + )} +
+ )); + })()} {selectedContact.email && (
diff --git a/src/components/ContactForm.js b/src/components/ContactForm.js index b7eb559..9e61765 100644 --- a/src/components/ContactForm.js +++ b/src/components/ContactForm.js @@ -1,6 +1,6 @@ "use client"; -import { useState } from "react"; +import React, { useState } from "react"; import { Card, CardHeader, CardContent } from "@/components/ui/Card"; import Button from "@/components/ui/Button"; import { Input } from "@/components/ui/Input"; @@ -8,7 +8,7 @@ import { Input } from "@/components/ui/Input"; export default function ContactForm({ initialData = null, onSave, onCancel }) { const [form, setForm] = useState({ name: "", - phone: "", + phones: [""], email: "", company: "", position: "", @@ -20,6 +20,28 @@ export default function ContactForm({ initialData = null, onSave, onCancel }) { const [loading, setLoading] = useState(false); const [error, setError] = useState(null); + // Handle initial data with phones + React.useEffect(() => { + if (initialData) { + let phones = [""]; + if (initialData.phone) { + try { + // Try to parse as JSON array first + const parsed = JSON.parse(initialData.phone); + phones = Array.isArray(parsed) ? parsed : [initialData.phone]; + } catch { + // Fall back to comma-separated string + phones = initialData.phone.split(',').map(p => p.trim()).filter(p => p); + } + } + setForm(prev => ({ + ...prev, + ...initialData, + phones: phones.length > 0 ? phones : [""] + })); + } + }, [initialData]); + const isEdit = !!initialData; function handleChange(e) { @@ -30,12 +52,43 @@ export default function ContactForm({ initialData = null, onSave, onCancel }) { })); } + function handlePhoneChange(index, value) { + setForm(prev => ({ + ...prev, + phones: prev.phones.map((phone, i) => i === index ? value : phone) + })); + } + + function addPhone() { + setForm(prev => ({ + ...prev, + phones: [...prev.phones, ""] + })); + } + + function removePhone(index) { + if (form.phones.length > 1) { + setForm(prev => ({ + ...prev, + phones: prev.phones.filter((_, i) => i !== index) + })); + } + } + async function handleSubmit(e) { e.preventDefault(); setLoading(true); setError(null); try { + // Filter out empty phones and prepare data + const filteredPhones = form.phones.filter(phone => phone.trim()); + const submitData = { + ...form, + phone: filteredPhones.length > 1 ? JSON.stringify(filteredPhones) : (filteredPhones[0] || null), + phones: undefined // Remove phones array from submission + }; + const url = isEdit ? `/api/contacts/${initialData.contact_id}` : "/api/contacts"; @@ -44,7 +97,7 @@ export default function ContactForm({ initialData = null, onSave, onCancel }) { const response = await fetch(url, { method, headers: { "Content-Type": "application/json" }, - body: JSON.stringify(form), + body: JSON.stringify(submitData), }); if (!response.ok) { @@ -96,13 +149,44 @@ export default function ContactForm({ initialData = null, onSave, onCancel }) { - +
+ {form.phones.map((phone, index) => ( +
+ handlePhoneChange(index, e.target.value)} + placeholder={index === 0 ? "+48 123 456 789" : "Dodatkowy numer"} + className="flex-1" + /> + {form.phones.length > 1 && ( + + )} +
+ ))} + +