Initial commit
This commit is contained in:
dahoud
355
app/(main)/clients/nouveau/page.tsx
Normal file
355
app/(main)/clients/nouveau/page.tsx
Normal file
@@ -0,0 +1,355 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useRef } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Card } from 'primereact/card';
|
||||
import { Button } from 'primereact/button';
|
||||
import { InputText } from 'primereact/inputtext';
|
||||
import { InputTextarea } from 'primereact/inputtextarea';
|
||||
import { Toast } from 'primereact/toast';
|
||||
import { Message } from 'primereact/message';
|
||||
import { Divider } from 'primereact/divider';
|
||||
import { Checkbox } from 'primereact/checkbox';
|
||||
import { clientService } from '../../../../services/api';
|
||||
import type { Client } from '../../../../types/btp';
|
||||
|
||||
const NouveauClientPage = () => {
|
||||
const router = useRouter();
|
||||
const toast = useRef<Toast>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
|
||||
const [client, setClient] = useState<Client>({
|
||||
id: '',
|
||||
nom: '',
|
||||
prenom: '',
|
||||
entreprise: '',
|
||||
email: '',
|
||||
telephone: '',
|
||||
adresse: '',
|
||||
codePostal: '',
|
||||
ville: '',
|
||||
numeroTVA: '',
|
||||
siret: '',
|
||||
actif: true
|
||||
});
|
||||
|
||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
||||
|
||||
const validateForm = () => {
|
||||
const newErrors: Record<string, string> = {};
|
||||
|
||||
if (!client.nom.trim()) {
|
||||
newErrors.nom = 'Le nom est obligatoire';
|
||||
}
|
||||
|
||||
if (!client.prenom.trim()) {
|
||||
newErrors.prenom = 'Le prénom est obligatoire';
|
||||
}
|
||||
|
||||
if (client.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(client.email)) {
|
||||
newErrors.email = 'Format d\'email invalide';
|
||||
}
|
||||
|
||||
if (client.codePostal && !/^\d{5}$/.test(client.codePostal)) {
|
||||
newErrors.codePostal = 'Le code postal doit contenir 5 chiffres';
|
||||
}
|
||||
|
||||
if (client.siret && !/^\d{14}$/.test(client.siret.replace(/\s/g, ''))) {
|
||||
newErrors.siret = 'Le SIRET doit contenir 14 chiffres';
|
||||
}
|
||||
|
||||
if (client.numeroTVA && !/^[A-Z]{2}\d{11}$/.test(client.numeroTVA.replace(/\s/g, ''))) {
|
||||
newErrors.numeroTVA = 'Format de TVA invalide (ex: FR12345678901)';
|
||||
}
|
||||
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setSubmitted(true);
|
||||
|
||||
if (!validateForm()) {
|
||||
toast.current?.show({
|
||||
severity: 'error',
|
||||
summary: 'Erreur',
|
||||
detail: 'Veuillez corriger les erreurs du formulaire',
|
||||
life: 3000
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
await clientService.create(client);
|
||||
toast.current?.show({
|
||||
severity: 'success',
|
||||
summary: 'Succès',
|
||||
detail: 'Client créé avec succès',
|
||||
life: 3000
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
router.push('/clients');
|
||||
}, 1000);
|
||||
} catch (error: any) {
|
||||
console.error('Erreur lors de la création:', error);
|
||||
|
||||
// Extraire le message d'erreur du backend
|
||||
let errorMessage = 'Impossible de créer le client';
|
||||
if (error.response?.data?.message) {
|
||||
errorMessage = error.response.data.message;
|
||||
} else if (error.response?.data?.error) {
|
||||
errorMessage = error.response.data.error;
|
||||
} else if (error.response?.data) {
|
||||
errorMessage = JSON.stringify(error.response.data);
|
||||
} else if (error.response?.status === 400) {
|
||||
errorMessage = 'Données invalides. Vérifiez que tous les champs obligatoires sont remplis correctement.';
|
||||
}
|
||||
|
||||
toast.current?.show({
|
||||
severity: 'error',
|
||||
summary: 'Erreur',
|
||||
detail: errorMessage,
|
||||
life: 5000
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
router.push('/clients');
|
||||
};
|
||||
|
||||
const onInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, name: string) => {
|
||||
const val = (e.target && e.target.value) || '';
|
||||
let _client = { ...client };
|
||||
(_client as any)[name] = val;
|
||||
setClient(_client);
|
||||
|
||||
// Clear error when user starts typing
|
||||
if (errors[name]) {
|
||||
const newErrors = { ...errors };
|
||||
delete newErrors[name];
|
||||
setErrors(newErrors);
|
||||
}
|
||||
};
|
||||
|
||||
const onCheckboxChange = (e: any) => {
|
||||
setClient(prev => ({ ...prev, actif: e.checked }));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid">
|
||||
<div className="col-12">
|
||||
<Card>
|
||||
<Toast ref={toast} />
|
||||
|
||||
<div className="flex justify-content-between align-items-center mb-4">
|
||||
<h2>Nouveau Client</h2>
|
||||
<Button
|
||||
icon="pi pi-arrow-left"
|
||||
label="Retour"
|
||||
className="p-button-text"
|
||||
onClick={handleCancel}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="p-fluid">
|
||||
<div className="formgrid grid">
|
||||
{/* Informations personnelles */}
|
||||
<div className="col-12">
|
||||
<h3 className="text-primary">Informations personnelles</h3>
|
||||
<Divider />
|
||||
</div>
|
||||
|
||||
<div className="field col-12 md:col-6">
|
||||
<label htmlFor="nom" className="font-bold">
|
||||
Nom <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<InputText
|
||||
id="nom"
|
||||
value={client.nom}
|
||||
onChange={(e) => onInputChange(e, 'nom')}
|
||||
className={errors.nom ? 'p-invalid' : ''}
|
||||
placeholder="Nom du client"
|
||||
/>
|
||||
{errors.nom && <small className="p-error">{errors.nom}</small>}
|
||||
</div>
|
||||
|
||||
<div className="field col-12 md:col-6">
|
||||
<label htmlFor="prenom" className="font-bold">
|
||||
Prénom <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<InputText
|
||||
id="prenom"
|
||||
value={client.prenom}
|
||||
onChange={(e) => onInputChange(e, 'prenom')}
|
||||
className={errors.prenom ? 'p-invalid' : ''}
|
||||
placeholder="Prénom du client"
|
||||
/>
|
||||
{errors.prenom && <small className="p-error">{errors.prenom}</small>}
|
||||
</div>
|
||||
|
||||
<div className="field col-12">
|
||||
<label htmlFor="entreprise" className="font-bold">Entreprise</label>
|
||||
<InputText
|
||||
id="entreprise"
|
||||
value={client.entreprise}
|
||||
onChange={(e) => onInputChange(e, 'entreprise')}
|
||||
placeholder="Nom de l'entreprise"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Contact */}
|
||||
<div className="col-12">
|
||||
<h3 className="text-primary">Contact</h3>
|
||||
<Divider />
|
||||
</div>
|
||||
|
||||
<div className="field col-12 md:col-6">
|
||||
<label htmlFor="email" className="font-bold">Email</label>
|
||||
<InputText
|
||||
id="email"
|
||||
value={client.email}
|
||||
onChange={(e) => onInputChange(e, 'email')}
|
||||
type="email"
|
||||
className={errors.email ? 'p-invalid' : ''}
|
||||
placeholder="email@exemple.com"
|
||||
/>
|
||||
{errors.email && <small className="p-error">{errors.email}</small>}
|
||||
</div>
|
||||
|
||||
<div className="field col-12 md:col-6">
|
||||
<label htmlFor="telephone" className="font-bold">Téléphone</label>
|
||||
<InputText
|
||||
id="telephone"
|
||||
value={client.telephone}
|
||||
onChange={(e) => onInputChange(e, 'telephone')}
|
||||
placeholder="01 23 45 67 89"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Adresse */}
|
||||
<div className="col-12">
|
||||
<h3 className="text-primary">Adresse</h3>
|
||||
<Divider />
|
||||
</div>
|
||||
|
||||
<div className="field col-12">
|
||||
<label htmlFor="adresse" className="font-bold">Adresse</label>
|
||||
<InputTextarea
|
||||
id="adresse"
|
||||
value={client.adresse}
|
||||
onChange={(e) => onInputChange(e, 'adresse')}
|
||||
rows={3}
|
||||
placeholder="Adresse complète"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field col-12 md:col-6">
|
||||
<label htmlFor="codePostal" className="font-bold">Code Postal</label>
|
||||
<InputText
|
||||
id="codePostal"
|
||||
value={client.codePostal}
|
||||
onChange={(e) => onInputChange(e, 'codePostal')}
|
||||
className={errors.codePostal ? 'p-invalid' : ''}
|
||||
placeholder="75000"
|
||||
/>
|
||||
{errors.codePostal && <small className="p-error">{errors.codePostal}</small>}
|
||||
</div>
|
||||
|
||||
<div className="field col-12 md:col-6">
|
||||
<label htmlFor="ville" className="font-bold">Ville</label>
|
||||
<InputText
|
||||
id="ville"
|
||||
value={client.ville}
|
||||
onChange={(e) => onInputChange(e, 'ville')}
|
||||
placeholder="Ville"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Informations légales */}
|
||||
<div className="col-12">
|
||||
<h3 className="text-primary">Informations légales</h3>
|
||||
<Divider />
|
||||
</div>
|
||||
|
||||
<div className="field col-12 md:col-6">
|
||||
<label htmlFor="numeroTVA" className="font-bold">Numéro TVA</label>
|
||||
<InputText
|
||||
id="numeroTVA"
|
||||
value={client.numeroTVA}
|
||||
onChange={(e) => onInputChange(e, 'numeroTVA')}
|
||||
className={errors.numeroTVA ? 'p-invalid' : ''}
|
||||
placeholder="FR12345678901"
|
||||
/>
|
||||
{errors.numeroTVA && <small className="p-error">{errors.numeroTVA}</small>}
|
||||
</div>
|
||||
|
||||
<div className="field col-12 md:col-6">
|
||||
<label htmlFor="siret" className="font-bold">SIRET</label>
|
||||
<InputText
|
||||
id="siret"
|
||||
value={client.siret}
|
||||
onChange={(e) => onInputChange(e, 'siret')}
|
||||
className={errors.siret ? 'p-invalid' : ''}
|
||||
placeholder="12345678901234"
|
||||
/>
|
||||
{errors.siret && <small className="p-error">{errors.siret}</small>}
|
||||
</div>
|
||||
|
||||
{/* Statut */}
|
||||
<div className="col-12">
|
||||
<h3 className="text-primary">Statut</h3>
|
||||
<Divider />
|
||||
</div>
|
||||
|
||||
<div className="field col-12">
|
||||
<div className="flex align-items-center">
|
||||
<Checkbox
|
||||
id="actif"
|
||||
checked={client.actif}
|
||||
onChange={onCheckboxChange}
|
||||
/>
|
||||
<label htmlFor="actif" className="ml-2 font-bold">
|
||||
Client actif
|
||||
</label>
|
||||
</div>
|
||||
<small className="text-600">
|
||||
Un client inactif n'apparaîtra pas dans les listes de sélection
|
||||
</small>
|
||||
</div>
|
||||
|
||||
{/* Boutons */}
|
||||
<div className="col-12">
|
||||
<Divider />
|
||||
<div className="flex justify-content-end gap-2">
|
||||
<Button
|
||||
label="Annuler"
|
||||
icon="pi pi-times"
|
||||
className="p-button-text"
|
||||
onClick={handleCancel}
|
||||
disabled={loading}
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
label="Créer le client"
|
||||
icon="pi pi-check"
|
||||
loading={loading}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NouveauClientPage;
|
||||
Reference in New Issue
Block a user