feat: add contact management functionality
- Implemented ContactForm component for creating and editing contacts. - Added ProjectContactSelector component to manage project-specific contacts. - Updated ProjectForm to include ProjectContactSelector for associating contacts with projects. - Enhanced Card component with a new CardTitle subcomponent for better structure. - Updated Navigation to include a link to the contacts page. - Added translations for contact-related terms in the i18n module. - Initialized contacts database schema and created necessary tables for contact management. - Developed queries for CRUD operations on contacts, including linking and unlinking contacts to projects. - Created a test script to validate contact queries against the database.
This commit is contained in:
212
src/components/ContactForm.js
Normal file
212
src/components/ContactForm.js
Normal file
@@ -0,0 +1,212 @@
|
||||
"use client";
|
||||
|
||||
import { 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: "",
|
||||
phone: "",
|
||||
email: "",
|
||||
company: "",
|
||||
position: "",
|
||||
contact_type: "other",
|
||||
notes: "",
|
||||
is_active: true,
|
||||
...initialData,
|
||||
});
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
const isEdit = !!initialData;
|
||||
|
||||
function handleChange(e) {
|
||||
const { name, value, type, checked } = e.target;
|
||||
setForm((prev) => ({
|
||||
...prev,
|
||||
[name]: type === "checkbox" ? checked : value,
|
||||
}));
|
||||
}
|
||||
|
||||
async function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
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(form),
|
||||
});
|
||||
|
||||
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>
|
||||
<Input
|
||||
type="tel"
|
||||
name="phone"
|
||||
value={form.phone}
|
||||
onChange={handleChange}
|
||||
placeholder="+48 123 456 789"
|
||||
/>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
298
src/components/ProjectContactSelector.js
Normal file
298
src/components/ProjectContactSelector.js
Normal file
@@ -0,0 +1,298 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import Button from "@/components/ui/Button";
|
||||
import Badge from "@/components/ui/Badge";
|
||||
|
||||
export default function ProjectContactSelector({ projectId, onChange }) {
|
||||
const [contacts, setContacts] = useState([]);
|
||||
const [projectContacts, setProjectContacts] = useState([]);
|
||||
const [availableContacts, setAvailableContacts] = useState([]);
|
||||
const [showSelector, setShowSelector] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
fetchAllContacts();
|
||||
if (projectId) {
|
||||
fetchProjectContacts();
|
||||
}
|
||||
}, [projectId]);
|
||||
|
||||
async function fetchAllContacts() {
|
||||
try {
|
||||
const response = await fetch("/api/contacts?is_active=true");
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setContacts(data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching contacts:", error);
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchProjectContacts() {
|
||||
try {
|
||||
const response = await fetch(`/api/projects/${projectId}/contacts`);
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setProjectContacts(data);
|
||||
updateAvailableContacts(data);
|
||||
onChange?.(data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching project contacts:", error);
|
||||
}
|
||||
}
|
||||
|
||||
function updateAvailableContacts(linkedContacts) {
|
||||
const linkedIds = linkedContacts.map((c) => c.contact_id);
|
||||
const available = contacts.filter(
|
||||
(c) => !linkedIds.includes(c.contact_id)
|
||||
);
|
||||
setAvailableContacts(available);
|
||||
}
|
||||
|
||||
async function handleAddContact(contactId) {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await fetch(`/api/projects/${projectId}/contacts`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ contactId }),
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
await fetchProjectContacts();
|
||||
setShowSelector(false);
|
||||
setSearchTerm("");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error adding contact:", error);
|
||||
alert("Nie udało się dodać kontaktu");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleRemoveContact(contactId) {
|
||||
if (!confirm("Czy na pewno chcesz usunąć ten kontakt z projektu?"))
|
||||
return;
|
||||
|
||||
try {
|
||||
const response = await fetch(
|
||||
`/api/projects/${projectId}/contacts?contactId=${contactId}`,
|
||||
{
|
||||
method: "DELETE",
|
||||
}
|
||||
);
|
||||
|
||||
if (response.ok) {
|
||||
await fetchProjectContacts();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error removing contact:", error);
|
||||
alert("Nie udało się usunąć kontaktu");
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSetPrimary(contactId) {
|
||||
try {
|
||||
const response = await fetch(`/api/projects/${projectId}/contacts`, {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ contactId }),
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
await fetchProjectContacts();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error setting primary contact:", error);
|
||||
alert("Nie udało się ustawić głównego kontaktu");
|
||||
}
|
||||
}
|
||||
|
||||
const getContactTypeBadge = (type) => {
|
||||
const types = {
|
||||
project: { label: "Projekt", variant: "primary" },
|
||||
contractor: { label: "Wykonawca", variant: "warning" },
|
||||
office: { label: "Urząd", variant: "info" },
|
||||
supplier: { label: "Dostawca", variant: "success" },
|
||||
other: { label: "Inny", variant: "secondary" },
|
||||
};
|
||||
return types[type] || types.other;
|
||||
};
|
||||
|
||||
const filteredAvailable = searchTerm
|
||||
? availableContacts.filter(
|
||||
(c) =>
|
||||
c.name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
c.phone?.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
c.email?.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
c.company?.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
)
|
||||
: availableContacts;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
Kontakty do projektu
|
||||
</label>
|
||||
{projectId && (
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
onClick={() => setShowSelector(!showSelector)}
|
||||
>
|
||||
{showSelector ? "Anuluj" : "+ Dodaj kontakt"}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Current project contacts */}
|
||||
{projectContacts.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{projectContacts.map((contact) => {
|
||||
const typeBadge = getContactTypeBadge(contact.contact_type);
|
||||
return (
|
||||
<div
|
||||
key={contact.contact_id}
|
||||
className="flex items-center justify-between p-3 bg-gray-50 rounded-md border border-gray-200"
|
||||
>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium text-gray-900">
|
||||
{contact.name}
|
||||
</span>
|
||||
{contact.is_primary === 1 && (
|
||||
<Badge variant="success" size="xs">
|
||||
Główny
|
||||
</Badge>
|
||||
)}
|
||||
<Badge variant={typeBadge.variant} size="xs">
|
||||
{typeBadge.label}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="text-sm text-gray-600 mt-1 space-y-0.5">
|
||||
{contact.phone && <div>📞 {contact.phone}</div>}
|
||||
{contact.email && <div>📧 {contact.email}</div>}
|
||||
{contact.company && (
|
||||
<div className="text-xs">🏢 {contact.company}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{contact.is_primary !== 1 && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleSetPrimary(contact.contact_id)}
|
||||
className="text-xs text-blue-600 hover:text-blue-700 px-2 py-1 rounded hover:bg-blue-50"
|
||||
title="Ustaw jako główny"
|
||||
>
|
||||
Ustaw główny
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleRemoveContact(contact.contact_id)}
|
||||
className="text-red-600 hover:text-red-700 p-1 rounded hover:bg-red-50"
|
||||
title="Usuń kontakt"
|
||||
>
|
||||
<svg
|
||||
className="w-4 h-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-sm text-gray-500 italic p-3 bg-gray-50 rounded-md">
|
||||
{projectId
|
||||
? "Brak powiązanych kontaktów. Dodaj kontakt do projektu."
|
||||
: "Zapisz projekt, aby móc dodać kontakty."}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Contact selector */}
|
||||
{showSelector && projectId && (
|
||||
<div className="border border-gray-300 rounded-md p-4 bg-white">
|
||||
<div className="mb-3">
|
||||
<input
|
||||
type="text"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
placeholder="Szukaj kontaktu..."
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="max-h-60 overflow-y-auto space-y-2">
|
||||
{filteredAvailable.length === 0 ? (
|
||||
<p className="text-sm text-gray-500 text-center py-4">
|
||||
{searchTerm
|
||||
? "Nie znaleziono kontaktów"
|
||||
: "Wszystkie kontakty są już dodane"}
|
||||
</p>
|
||||
) : (
|
||||
filteredAvailable.map((contact) => {
|
||||
const typeBadge = getContactTypeBadge(contact.contact_type);
|
||||
return (
|
||||
<div
|
||||
key={contact.contact_id}
|
||||
className="flex items-center justify-between p-2 hover:bg-gray-50 rounded border border-gray-200"
|
||||
>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium text-sm text-gray-900">
|
||||
{contact.name}
|
||||
</span>
|
||||
<Badge variant={typeBadge.variant} size="xs">
|
||||
{typeBadge.label}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="text-xs text-gray-600 mt-1">
|
||||
{contact.phone && <span>{contact.phone}</span>}
|
||||
{contact.phone && contact.email && (
|
||||
<span className="mx-1">•</span>
|
||||
)}
|
||||
{contact.email && <span>{contact.email}</span>}
|
||||
</div>
|
||||
{contact.company && (
|
||||
<div className="text-xs text-gray-500">
|
||||
{contact.company}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
onClick={() => handleAddContact(contact.contact_id)}
|
||||
disabled={loading}
|
||||
>
|
||||
Dodaj
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -8,6 +8,7 @@ import Button from "@/components/ui/Button";
|
||||
import { Input } from "@/components/ui/Input";
|
||||
import { formatDateForInput } from "@/lib/utils";
|
||||
import { useTranslation } from "@/lib/i18n";
|
||||
import ProjectContactSelector from "@/components/ProjectContactSelector";
|
||||
|
||||
const ProjectForm = forwardRef(function ProjectForm({ initialData = null }, ref) {
|
||||
const { t } = useTranslation();
|
||||
@@ -365,15 +366,8 @@ const ProjectForm = forwardRef(function ProjectForm({ initialData = null }, ref)
|
||||
)}
|
||||
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
{t('projects.contact')}
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
name="contact"
|
||||
value={form.contact || ""}
|
||||
onChange={handleChange}
|
||||
placeholder={t('projects.placeholders.contact')}
|
||||
<ProjectContactSelector
|
||||
projectId={initialData?.project_id}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -27,6 +27,14 @@ const CardHeader = ({ children, className = "" }) => {
|
||||
);
|
||||
};
|
||||
|
||||
const CardTitle = ({ children, className = "" }) => {
|
||||
return (
|
||||
<h3 className={`text-lg font-semibold text-gray-900 dark:text-gray-100 ${className}`}>
|
||||
{children}
|
||||
</h3>
|
||||
);
|
||||
};
|
||||
|
||||
const CardContent = ({ children, className = "" }) => {
|
||||
return <div className={`px-6 py-4 ${className}`}>{children}</div>;
|
||||
};
|
||||
@@ -39,4 +47,4 @@ const CardFooter = ({ children, className = "" }) => {
|
||||
);
|
||||
};
|
||||
|
||||
export { Card, CardHeader, CardContent, CardFooter };
|
||||
export { Card, CardHeader, CardTitle, CardContent, CardFooter };
|
||||
|
||||
@@ -143,6 +143,7 @@ const Navigation = () => {
|
||||
|
||||
const navItems = [
|
||||
{ href: "/projects", label: t('navigation.projects') },
|
||||
{ href: "/contacts", label: t('navigation.contacts') || 'Kontakty' },
|
||||
{ href: "/calendar", label: t('navigation.calendar') || 'Kalendarz' },
|
||||
{ href: "/project-tasks", label: t('navigation.tasks') || 'Tasks' },
|
||||
{ href: "/contracts", label: t('navigation.contracts') },
|
||||
|
||||
Reference in New Issue
Block a user