119 lines
3.5 KiB
TypeScript
119 lines
3.5 KiB
TypeScript
|
|
import React, { useState, useEffect } from 'react';
|
|
import api from '../../shared/utils/api';
|
|
|
|
export interface Site {
|
|
id?: number;
|
|
name: string;
|
|
address?: string;
|
|
city?: string;
|
|
companyId: number;
|
|
isActive?: boolean;
|
|
}
|
|
|
|
|
|
interface SiteFormProps {
|
|
companyId: number;
|
|
site?: Site;
|
|
onSuccess: () => void;
|
|
onCancel: () => void;
|
|
}
|
|
|
|
export const SiteForm: React.FC<SiteFormProps> = ({ companyId, site, onSuccess, onCancel }) => {
|
|
const [formData, setFormData] = useState<Site>({
|
|
name: '',
|
|
address: '',
|
|
city: '',
|
|
companyId: companyId
|
|
});
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (site) {
|
|
setFormData(site);
|
|
} else {
|
|
setFormData(prev => ({ ...prev, companyId }));
|
|
}
|
|
}, [site, companyId]);
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const { name, value } = e.target;
|
|
setFormData(prev => ({ ...prev, [name]: value }));
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setLoading(true);
|
|
|
|
try {
|
|
if (site?.id) {
|
|
await api.put(`/sites/${site.id}`, formData);
|
|
} else {
|
|
await api.post('/sites', formData);
|
|
}
|
|
onSuccess();
|
|
} catch (err) {
|
|
console.error(err);
|
|
alert('Errore salvataggio sede');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-300 mb-1">Nome Sede *</label>
|
|
<input
|
|
type="text"
|
|
name="name"
|
|
required
|
|
value={formData.name}
|
|
onChange={handleChange}
|
|
className="w-full bg-white/5 border border-white/10 rounded-lg p-2.5 text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all outline-none"
|
|
placeholder="Es. Sede Principale, Magazzino A"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-300 mb-1">Indirizzo</label>
|
|
<input
|
|
type="text"
|
|
name="address"
|
|
value={formData.address || ''}
|
|
onChange={handleChange}
|
|
className="w-full bg-white/5 border border-white/10 rounded-lg p-2.5 text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all outline-none"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-300 mb-1">Città</label>
|
|
<input
|
|
type="text"
|
|
name="city"
|
|
value={formData.city || ''}
|
|
onChange={handleChange}
|
|
className="w-full bg-white/5 border border-white/10 rounded-lg p-2.5 text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all outline-none"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex justify-end gap-3 mt-6 pt-4 border-t border-white/10">
|
|
<button
|
|
type="button"
|
|
onClick={onCancel}
|
|
className="px-4 py-2 rounded-lg text-sm font-medium text-gray-300 hover:bg-white/5 transition-colors"
|
|
>
|
|
Annulla
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={loading}
|
|
className="px-4 py-2 rounded-lg text-sm font-medium bg-gradient-to-r from-blue-600 to-blue-500 hover:from-blue-500 hover:to-blue-400 text-white shadow-lg shadow-blue-500/20 transition-all disabled:opacity-50"
|
|
>
|
|
{loading ? 'Salvataggio...' : (site?.id ? 'Aggiorna' : 'Aggiungi Sede')}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
);
|
|
};
|