297 lines
8.0 KiB
JavaScript
297 lines
8.0 KiB
JavaScript
"use client";
|
|
|
|
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";
|
|
|
|
export default function ContactForm({ initialData = null, onSave, onCancel }) {
|
|
const [form, setForm] = useState({
|
|
name: "",
|
|
phones: [""],
|
|
email: "",
|
|
company: "",
|
|
position: "",
|
|
contact_type: "other",
|
|
notes: "",
|
|
is_active: true,
|
|
...initialData,
|
|
});
|
|
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) {
|
|
const { name, value, type, checked } = e.target;
|
|
setForm((prev) => ({
|
|
...prev,
|
|
[name]: type === "checkbox" ? checked : value,
|
|
}));
|
|
}
|
|
|
|
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";
|
|
const method = isEdit ? "PUT" : "POST";
|
|
|
|
const response = await fetch(url, {
|
|
method,
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(submitData),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const data = await response.json();
|
|
throw new Error(data.error || "Failed to save contact");
|
|
}
|
|
|
|
const contact = await response.json();
|
|
onSave?.(contact);
|
|
} catch (err) {
|
|
setError(err.message);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<h2 className="text-xl font-semibold text-gray-900">
|
|
{isEdit ? "Edytuj kontakt" : "Nowy kontakt"}
|
|
</h2>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
{error && (
|
|
<div className="p-3 bg-red-50 border border-red-200 rounded-md text-red-600 text-sm">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
{/* Basic Information */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div className="md:col-span-2">
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Imię i nazwisko <span className="text-red-500">*</span>
|
|
</label>
|
|
<Input
|
|
type="text"
|
|
name="name"
|
|
value={form.name}
|
|
onChange={handleChange}
|
|
placeholder="Wprowadź imię i nazwisko"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<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"
|
|
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>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Email
|
|
</label>
|
|
<Input
|
|
type="email"
|
|
name="email"
|
|
value={form.email}
|
|
onChange={handleChange}
|
|
placeholder="email@example.com"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Firma
|
|
</label>
|
|
<Input
|
|
type="text"
|
|
name="company"
|
|
value={form.company}
|
|
onChange={handleChange}
|
|
placeholder="Nazwa firmy"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Stanowisko
|
|
</label>
|
|
<Input
|
|
type="text"
|
|
name="position"
|
|
value={form.position}
|
|
onChange={handleChange}
|
|
placeholder="Kierownik projektu"
|
|
/>
|
|
</div>
|
|
|
|
<div className="md:col-span-2">
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Typ kontaktu
|
|
</label>
|
|
<select
|
|
name="contact_type"
|
|
value={form.contact_type}
|
|
onChange={handleChange}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
|
|
>
|
|
<option value="project">Kontakt projektowy</option>
|
|
<option value="contractor">Wykonawca</option>
|
|
<option value="office">Urząd</option>
|
|
<option value="supplier">Dostawca</option>
|
|
<option value="other">Inny</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="md:col-span-2">
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Notatki
|
|
</label>
|
|
<textarea
|
|
name="notes"
|
|
value={form.notes}
|
|
onChange={handleChange}
|
|
rows={3}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
|
|
placeholder="Dodatkowe informacje..."
|
|
/>
|
|
</div>
|
|
|
|
{isEdit && (
|
|
<div className="md:col-span-2">
|
|
<label className="flex items-center gap-2">
|
|
<input
|
|
type="checkbox"
|
|
name="is_active"
|
|
checked={form.is_active}
|
|
onChange={handleChange}
|
|
className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
|
|
/>
|
|
<span className="text-sm font-medium text-gray-700">
|
|
Kontakt aktywny
|
|
</span>
|
|
</label>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="flex justify-end gap-3 pt-4 border-t">
|
|
{onCancel && (
|
|
<Button type="button" variant="secondary" onClick={onCancel}>
|
|
Anuluj
|
|
</Button>
|
|
)}
|
|
<Button type="submit" disabled={loading}>
|
|
{loading ? "Zapisywanie..." : isEdit ? "Zapisz zmiany" : "Dodaj kontakt"}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|