133 lines
6.5 KiB
JavaScript
133 lines
6.5 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { api } from '../stores/api';
|
|
import PageHeader from '../components/PageHeader';
|
|
import { ORDRES_ASSEMBLEE } from '../utils/datesReunion';
|
|
|
|
const JOURS = ['lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi', 'dimanche'];
|
|
|
|
export default function Parametres() {
|
|
const [groupe, setGroupe] = useState(null);
|
|
const [editing, setEditing] = useState(false);
|
|
const [form, setForm] = useState({});
|
|
const [msg, setMsg] = useState('');
|
|
const [error, setError] = useState('');
|
|
|
|
useEffect(() => {
|
|
api.get('/groupe/').then((data) => {
|
|
setGroupe(data);
|
|
setForm({
|
|
nom: data.nom || '',
|
|
adresse_local: data.adresse_local || '',
|
|
jour_reunion: data.jour_reunion || '',
|
|
heure_reunion: data.heure_reunion || '',
|
|
assemblee_affaires_ordre: data.assemblee_affaires_ordre || 'premiere',
|
|
format_reunion: data.format_reunion || '',
|
|
lien_aa87: data.lien_aa87 || 'https://aa87.org',
|
|
});
|
|
});
|
|
}, []);
|
|
|
|
const sauvegarder = async () => {
|
|
try {
|
|
const updated = await api.patch('/groupe/', form);
|
|
setGroupe(updated);
|
|
setEditing(false);
|
|
setMsg('Paramètres enregistrés ✓');
|
|
setTimeout(() => setMsg(''), 2000);
|
|
} catch (e) {
|
|
setError(e.message);
|
|
}
|
|
};
|
|
|
|
if (!groupe) return <div className="flex items-center justify-center min-h-screen"><p className="text-gray-400">Chargement...</p></div>;
|
|
|
|
const Field = ({ label, value }) => (
|
|
<div className="py-3 border-b border-gray-100">
|
|
<p className="text-xs text-gray-400">{label}</p>
|
|
<p className="text-gray-800 font-medium">{value || '—'}</p>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-100">
|
|
<PageHeader titre="Paramètres du groupe" sousTitre="G9 — Nom, horaire, adresse" />
|
|
|
|
<div className="p-4 space-y-4">
|
|
{msg && <div className="bg-green-50 text-green-700 p-3 rounded-xl text-center text-sm font-medium">{msg}</div>}
|
|
{error && <div className="bg-red-50 text-red-600 p-3 rounded-xl text-center text-sm">{error}</div>}
|
|
|
|
<div className="bg-white rounded-2xl p-4 shadow-sm">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<h2 className="font-bold text-gray-700">Informations du groupe</h2>
|
|
{!editing && (
|
|
<button onClick={() => setEditing(true)} className="text-aa-blue text-sm font-medium">Modifier</button>
|
|
)}
|
|
</div>
|
|
|
|
{!editing ? (
|
|
<>
|
|
<Field label="Nom du groupe" value={groupe.nom} />
|
|
<Field label="District" value={groupe.district} />
|
|
<Field label="Région" value={groupe.region} />
|
|
<Field label="Adresse du local" value={groupe.adresse_local} />
|
|
<Field label="Jour de réunion" value={groupe.jour_reunion} />
|
|
<Field label="Heure" value={groupe.heure_reunion} />
|
|
<Field label="Assemblée d'affaires mensuelle" value={ORDRES_ASSEMBLEE.find(([v]) => v === groupe.assemblee_affaires_ordre)?.[1]} />
|
|
<Field label="Format de réunion" value={groupe.format_reunion} />
|
|
<Field label="Lien aa87.org" value={groupe.lien_aa87} />
|
|
</>
|
|
) : (
|
|
<div className="space-y-3 mt-3">
|
|
<div>
|
|
<label className="text-xs text-gray-400">Nom du groupe</label>
|
|
<input type="text" value={form.nom} onChange={(e) => setForm({ ...form, nom: e.target.value })}
|
|
className="w-full p-3 bg-gray-50 rounded-xl border-0 focus:ring-2 focus:ring-aa-blue" />
|
|
</div>
|
|
<div>
|
|
<label className="text-xs text-gray-400">Adresse du local</label>
|
|
<textarea value={form.adresse_local} onChange={(e) => setForm({ ...form, adresse_local: e.target.value })}
|
|
rows={2} className="w-full p-3 bg-gray-50 rounded-xl border-0 focus:ring-2 focus:ring-aa-blue resize-none" />
|
|
</div>
|
|
<div>
|
|
<label className="text-xs text-gray-400">Jour de réunion</label>
|
|
<select value={form.jour_reunion} onChange={(e) => setForm({ ...form, jour_reunion: e.target.value })}
|
|
className="w-full p-3 bg-gray-50 rounded-xl border-0 focus:ring-2 focus:ring-aa-blue">
|
|
<option value="">—</option>
|
|
{JOURS.map((j) => <option key={j} value={j}>{j.charAt(0).toUpperCase() + j.slice(1)}</option>)}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs text-gray-400">Heure de réunion</label>
|
|
<input type="time" value={form.heure_reunion} onChange={(e) => setForm({ ...form, heure_reunion: e.target.value })}
|
|
className="w-full p-3 bg-gray-50 rounded-xl border-0 focus:ring-2 focus:ring-aa-blue" />
|
|
</div>
|
|
<div>
|
|
<label className="text-xs text-gray-400">Assemblée d'affaires mensuelle</label>
|
|
<select value={form.assemblee_affaires_ordre} onChange={(e) => setForm({ ...form, assemblee_affaires_ordre: e.target.value })}
|
|
className="w-full p-3 bg-gray-50 rounded-xl border-0 focus:ring-2 focus:ring-aa-blue">
|
|
{ORDRES_ASSEMBLEE.map(([value, label]) => <option key={value} value={value}>{label}</option>)}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs text-gray-400">Format de réunion</label>
|
|
<input type="text" placeholder="Discussion ouverte, conférencier, étapes..."
|
|
value={form.format_reunion} onChange={(e) => setForm({ ...form, format_reunion: e.target.value })}
|
|
className="w-full p-3 bg-gray-50 rounded-xl border-0 focus:ring-2 focus:ring-aa-blue" />
|
|
</div>
|
|
<div>
|
|
<label className="text-xs text-gray-400">Lien aa87.org</label>
|
|
<input type="url" value={form.lien_aa87} onChange={(e) => setForm({ ...form, lien_aa87: e.target.value })}
|
|
className="w-full p-3 bg-gray-50 rounded-xl border-0 focus:ring-2 focus:ring-aa-blue" />
|
|
</div>
|
|
|
|
<div className="flex gap-3 pt-2">
|
|
<button onClick={sauvegarder} className="flex-1 p-3 bg-aa-blue text-white rounded-xl font-bold">Enregistrer</button>
|
|
<button onClick={() => setEditing(false)} className="flex-1 p-3 bg-gray-200 text-gray-700 rounded-xl font-bold">Annuler</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|