feat: enhance contact phone handling to support multiple numbers and improve form submission

2025-12-03 21:06:42 +01:00
parent 9dd208d168
commit 5b794a59bc
2 changed files with 162 additions and 29 deletions
--- a/src/app/contacts/page.js
+++ b/src/app/contacts/page.js
@@ -365,15 +365,51 @@ export default function ContactsPage() {
 										</td>
 										<td className="px-4 py-3">
 											{contact.phone && (
+												<div className="space-y-1">
+													{(() => {
+														// 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 (
+															<>
 																<a
-													href={`tel:${contact.phone}`}
+																	href={`tel:${primaryPhone}`}
 																	className="flex items-center gap-1 text-sm text-blue-600 hover:underline"
 																>
 																	<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 																		<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
 																	</svg>
-													{contact.phone}
+																	{primaryPhone}
 																</a>
+																{additionalPhones.length > 0 && (
+																	<div className="text-xs text-gray-500 pl-5">
+																		{additionalPhones.length === 1 ? (
+																			<a
+																				href={`tel:${additionalPhones[0]}`}
+																				className="text-blue-600 hover:underline"
+																			>
+																				{additionalPhones[0]}
+																			</a>
+																		) : (
+																			<span>+{additionalPhones.length} więcej</span>
+																		)}
+																	</div>
+																)}
+															</>
+														);
+													})()}
+												</div>
 											)}
 										</td>
 										<td className="px-4 py-3">
@@ -453,16 +489,29 @@ export default function ContactsPage() {
 							<div>
 								<h3 className="font-semibold text-gray-900 mb-3">Informacje kontaktowe</h3>
 								<div className="space-y-2">
-									{selectedContact.phone && (
-										<div className="flex items-center gap-3">
+									{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) => (
+											<div key={index} className="flex items-center gap-3">
 												<svg className="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 													<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
 												</svg>
-											<a href={`tel:${selectedContact.phone}`} className="text-blue-600 hover:underline">
-												{selectedContact.phone}
+												<a href={`tel:${phone}`} className="text-blue-600 hover:underline">
+													{phone}
 												</a>
-										</div>
+												{index === 0 && phones.length > 1 && (
+													<span className="text-xs text-gray-500">(główny)</span>
 												)}
+											</div>
+										));
+									})()}
 									{selectedContact.email && (
 										<div className="flex items-center gap-3">
 											<svg className="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
--- 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 }) {
 							<label className="block text-sm font-medium text-gray-700 mb-2">
 								Telefon
 							</label>
+							<div className="space-y-2">
+								{form.phones.map((phone, index) => (
+									<div key={index} className="flex gap-2">
 										<Input
 											type="tel"
-								name="phone"
-								value={form.phone}
-								onChange={handleChange}
-								placeholder="+48 123 456 789"
+											value={phone}
+											onChange={(e) => handlePhoneChange(index, e.target.value)}
+											placeholder={index === 0 ? "+48 123 456 789" : "Dodatkowy numer"}
+											className="flex-1"
 										/>
+										{form.phones.length > 1 && (
+											<Button
+												type="button"
+												variant="danger"
+												size="sm"
+												onClick={() => removePhone(index)}
+												className="px-2"
+											>
+												<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+													<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+												</svg>
+											</Button>
+										)}
+									</div>
+								))}
+								<Button
+									type="button"
+									variant="secondary"
+									size="sm"
+									onClick={addPhone}
+									className="w-full"
+								>
+									<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+										<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+									</svg>
+									Dodaj kolejny numer
+								</Button>
+							</div>
 						</div>

 						<div>