Olivier CROGUENNEC
197 lines
9.0 KiB
React
197 lines
9.0 KiB
React
import { useState, useEffect } from 'react';
|
|
import { api } from '../../api.js';
|
|
|
|
export default function SecteursInvSection() {
|
|
const [secteursInv, setSecteursInv] = useState([]);
|
|
const [err, setErr] = useState(null);
|
|
const [selectedSectInv, setSelectedSectInv] = useState(null);
|
|
const [editingSectInv, setEditingSectInv] = useState(null);
|
|
const [editingNomSectInv, setEditingNomSectInv] = useState('');
|
|
const [newSectInvNom, setNewSectInvNom] = useState('');
|
|
const [showNewSectInv, setShowNewSectInv] = useState(false);
|
|
const [sectGlobalOpen, setSectGlobalOpen] = useState(false);
|
|
const [sectPrivateOpen, setSectPrivateOpen] = useState(true);
|
|
|
|
useEffect(() => {
|
|
api.get('/secteurs-inv').then(data => {
|
|
setSecteursInv(data.sort((a, b) => b.is_global - a.is_global || a.nom.localeCompare(b.nom)));
|
|
}).catch(() => {});
|
|
}, []);
|
|
|
|
const saveSectInv = async (nom) => {
|
|
if (!nom.trim()) return;
|
|
try {
|
|
const row = await api.post('/secteurs-inv', { nom: nom.trim() });
|
|
setSecteursInv(prev => [...prev, row].sort((a, b) =>
|
|
b.is_global - a.is_global || a.nom.localeCompare(b.nom)));
|
|
setShowNewSectInv(false); setNewSectInvNom(''); setErr(null);
|
|
} catch (e) { setErr(e.message || 'Erreur'); }
|
|
};
|
|
const renameSectInv = async (id, nom) => {
|
|
if (!nom.trim()) return;
|
|
try {
|
|
await api.put(`/secteurs-inv/${id}`, { nom: nom.trim() });
|
|
setSecteursInv(prev => prev.map(s => s.id === id ? { ...s, nom: nom.trim() } : s));
|
|
setEditingSectInv(null);
|
|
} catch (e) { setErr(e.message || 'Erreur'); }
|
|
};
|
|
const delSectInv = async (id) => {
|
|
try {
|
|
await api.del(`/secteurs-inv/${id}`);
|
|
setSecteursInv(prev => prev.filter(s => s.id !== id));
|
|
if (selectedSectInv?.id === id) setSelectedSectInv(null);
|
|
} catch (e) { setErr(e.message || 'Erreur'); }
|
|
};
|
|
|
|
const globalSects = secteursInv.filter(s => s.is_global);
|
|
const privateSects = secteursInv.filter(s => !s.is_global);
|
|
|
|
return (
|
|
<div>
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
|
|
<h3 style={{ margin: 0 }}>Mes secteurs d'investissement</h3>
|
|
</div>
|
|
{err && <div className="error" style={{ marginBottom: 12 }}>{err}</div>}
|
|
|
|
{/* Accordéon — Secteurs globalement définis */}
|
|
<div className="card" style={{ marginBottom: 10 }}>
|
|
<button type="button"
|
|
onClick={() => setSectGlobalOpen(o => !o)}
|
|
style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
|
|
background: 'none', border: 'none', cursor: 'pointer', padding: 0, color: 'var(--text)' }}>
|
|
<span style={{ fontWeight: 600, fontSize: 'var(--fs-base)' }}>
|
|
Secteurs globalement définis
|
|
<span style={{ marginLeft: 8, fontWeight: 400, fontSize: 'var(--fs-sm)', color: 'var(--text-muted)' }}>
|
|
({globalSects.length})
|
|
</span>
|
|
</span>
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"
|
|
strokeLinecap="round" strokeLinejoin="round"
|
|
style={{ transform: sectGlobalOpen ? 'rotate(180deg)' : 'none', transition: 'transform .2s', flexShrink: 0 }}>
|
|
<polyline points="6 9 12 15 18 9"/>
|
|
</svg>
|
|
</button>
|
|
{sectGlobalOpen && (
|
|
<div style={{ marginTop: 14 }}>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Nom</th>
|
|
<th className="num">Plateformes</th>
|
|
<th className="num">Investissements</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{globalSects.length === 0 && (
|
|
<tr><td colSpan={3} className="text-muted" style={{ textAlign: 'center', padding: 24 }}>Aucun secteur global</td></tr>
|
|
)}
|
|
{globalSects.map(s => (
|
|
<tr key={s.id}>
|
|
<td><span style={{ fontWeight: 600 }}>{s.nom}</span></td>
|
|
<td className="num">{s.nb_plateformes > 0 ? s.nb_plateformes : <span className="text-muted">—</span>}</td>
|
|
<td className="num">{s.nb_investissements > 0 ? s.nb_investissements : <span className="text-muted">—</span>}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Accordéon — Mes propres secteurs */}
|
|
<div className="card">
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
|
<button type="button"
|
|
onClick={() => setSectPrivateOpen(o => !o)}
|
|
style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 8,
|
|
background: 'none', border: 'none', cursor: 'pointer', padding: 0, color: 'var(--text)', textAlign: 'left' }}>
|
|
<span style={{ fontWeight: 600, fontSize: 'var(--fs-base)' }}>
|
|
Mes propres secteurs
|
|
<span style={{ marginLeft: 8, fontWeight: 400, fontSize: 'var(--fs-sm)', color: 'var(--text-muted)' }}>
|
|
({privateSects.length})
|
|
</span>
|
|
</span>
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"
|
|
strokeLinecap="round" strokeLinejoin="round"
|
|
style={{ transform: sectPrivateOpen ? 'rotate(180deg)' : 'none', transition: 'transform .2s', flexShrink: 0 }}>
|
|
<polyline points="6 9 12 15 18 9"/>
|
|
</svg>
|
|
</button>
|
|
{sectPrivateOpen && (
|
|
<button className="primary" type="button" style={{ marginLeft: 12, flexShrink: 0 }}
|
|
onClick={() => { setSectPrivateOpen(true); setShowNewSectInv(true); setNewSectInvNom(''); setErr(null); }}>
|
|
+ Ajouter
|
|
</button>
|
|
)}
|
|
</div>
|
|
{sectPrivateOpen && (
|
|
<div style={{ marginTop: 14 }}>
|
|
{showNewSectInv && (
|
|
<div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
|
|
<input autoFocus style={{ flex: 1 }} placeholder="Nom du secteur"
|
|
value={newSectInvNom} onChange={e => setNewSectInvNom(e.target.value)}
|
|
onKeyDown={e => { if (e.key === 'Enter') saveSectInv(newSectInvNom); if (e.key === 'Escape') setShowNewSectInv(false); }} />
|
|
<button className="primary" onClick={() => saveSectInv(newSectInvNom)}>Créer</button>
|
|
<button onClick={() => setShowNewSectInv(false)}>Annuler</button>
|
|
</div>
|
|
)}
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Nom</th>
|
|
<th className="num">Plateformes</th>
|
|
<th className="num">Investissements</th>
|
|
<th style={{ width: 80 }}></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{privateSects.length === 0 && (
|
|
<tr><td colSpan={4} className="text-muted" style={{ textAlign: 'center', padding: 24 }}>Aucun secteur personnel</td></tr>
|
|
)}
|
|
{privateSects.map(s => (
|
|
<tr key={s.id}>
|
|
<td>
|
|
{editingSectInv === s.id ? (
|
|
<div style={{ display: 'flex', gap: 6 }}>
|
|
<input autoFocus style={{ flex: 1 }} value={editingNomSectInv}
|
|
onChange={e => setEditingNomSectInv(e.target.value)}
|
|
onKeyDown={e => { if (e.key === 'Enter') renameSectInv(s.id, editingNomSectInv); if (e.key === 'Escape') setEditingSectInv(null); }} />
|
|
<button className="primary" onClick={() => renameSectInv(s.id, editingNomSectInv)}>OK</button>
|
|
<button onClick={() => setEditingSectInv(null)}>✕</button>
|
|
</div>
|
|
) : (
|
|
<span style={{ fontWeight: 600 }}>{s.nom}</span>
|
|
)}
|
|
</td>
|
|
<td className="num">{s.nb_plateformes > 0 ? s.nb_plateformes : <span className="text-muted">—</span>}</td>
|
|
<td className="num">{s.nb_investissements > 0 ? s.nb_investissements : <span className="text-muted">—</span>}</td>
|
|
<td>
|
|
{editingSectInv !== s.id && (
|
|
<div style={{ display: 'flex', gap: 4, justifyContent: 'flex-end' }}>
|
|
<button style={{ fontSize: 12, padding: '2px 8px' }}
|
|
onClick={() => { setEditingSectInv(s.id); setEditingNomSectInv(s.nom); setErr(null); }}>
|
|
Renommer
|
|
</button>
|
|
<button style={{ fontSize: 12, padding: '2px 8px', color: 'var(--danger)', borderColor: 'var(--danger)' }}
|
|
onClick={() => setConfirmDelete({
|
|
title: 'Supprimer le secteur',
|
|
message: `Supprimer le secteur "${s.nom}" ? Il sera retiré de toutes les plateformes et investissements.`,
|
|
confirmLabel: 'Supprimer',
|
|
onConfirm: () => { delSectInv(s.id); setConfirmDelete(null); }
|
|
})}>
|
|
Supprimer
|
|
</button>
|
|
</div>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|