migrating to pico.css
This commit is contained in:
@@ -24,11 +24,10 @@ function CelebrityList() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (id) => {
|
||||
if (window.confirm('Sei sicuro di voler eliminare questa celebrità?')) {
|
||||
const handleDelete = async (id, name) => {
|
||||
if (window.confirm(`Sei sicuro di voler eliminare ${name}?`)) {
|
||||
try {
|
||||
await deleteCelebrity(id);
|
||||
// Rimuovi la celebrità dalla lista senza ricaricare i dati
|
||||
setCelebrities(celebrities.filter((c) => c.id !== id));
|
||||
} catch (err) {
|
||||
alert(`Errore: ${err.message}`);
|
||||
@@ -36,48 +35,57 @@ function CelebrityList() {
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) return <p>Caricamento in corso...</p>;
|
||||
if (error) return <p>Errore: {error}</p>;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>Catalogo Celebrità</h1>
|
||||
<Link to="/celebrity/new" className="button-new">
|
||||
+ Aggiungi Nuova Celebrità
|
||||
</Link>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nome</th>
|
||||
<th>Seno (cm)</th>
|
||||
<th>Vita (cm)</th>
|
||||
<th>Fianchi (cm)</th>
|
||||
<th>Taglia Reggiseno</th>
|
||||
<th>Naturali?</th>
|
||||
<th>Azioni</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{celebrities.map((celeb) => (
|
||||
<tr key={celeb.id}>
|
||||
<td>{celeb.name}</td>
|
||||
<td>{celeb.bust_cm || 'N/A'}</td>
|
||||
<td>{celeb.waist_cm || 'N/A'}</td>
|
||||
<td>{celeb.hips_cm || 'N/A'}</td>
|
||||
<td>
|
||||
{celeb.bra_band_size && celeb.bra_cup_size
|
||||
? `${celeb.bra_band_size}${celeb.bra_cup_size} (${celeb.bra_size_system})`
|
||||
: 'N/A'}
|
||||
</td>
|
||||
<td>{celeb.boobs_are_natural === null ? 'N/A' : celeb.boobs_are_natural ? 'Sì' : 'No'}</td>
|
||||
<td>
|
||||
<Link to={`/celebrity/${celeb.id}`} className="button-edit">Modifica</Link>
|
||||
<button onClick={() => handleDelete(celeb.id)} className="button-delete">Elimina</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<h1>Catalogo Celebrità</h1>
|
||||
<Link to="/celebrity/new" role="button" style={{ marginBottom: '1rem' }}>
|
||||
+ Aggiungi
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{loading && <p aria-busy="true">Caricamento in corso...</p>}
|
||||
{error && <p>Errore: {error}</p>}
|
||||
|
||||
{!loading && (
|
||||
<figure>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Nome</th>
|
||||
<th scope="col">Seno (cm)</th>
|
||||
<th scope="col">Vita (cm)</th>
|
||||
<th scope="col">Fianchi (cm)</th>
|
||||
<th scope="col">Taglia Reggiseno</th>
|
||||
<th scope="col">Naturali?</th>
|
||||
<th scope="col">Azioni</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{celebrities.map((celeb) => (
|
||||
<tr key={celeb.id}>
|
||||
<td><strong>{celeb.name}</strong></td>
|
||||
<td>{celeb.bust_cm || 'N/A'}</td>
|
||||
<td>{celeb.waist_cm || 'N/A'}</td>
|
||||
<td>{celeb.hips_cm || 'N/A'}</td>
|
||||
<td>
|
||||
{celeb.bra_band_size && celeb.bra_cup_size
|
||||
? `${celeb.bra_band_size}${celeb.bra_cup_size} (${celeb.bra_size_system})`
|
||||
: 'N/A'}
|
||||
</td>
|
||||
<td>{celeb.boobs_are_natural === null ? 'N/A' : celeb.boobs_are_natural ? 'Sì' : 'No'}</td>
|
||||
<td>
|
||||
<div role="group" style={{ margin: 0, padding: 0 }}>
|
||||
<Link to={`/celebrity/${celeb.id}`} role="button" className="outline">Modifica</Link>
|
||||
<button className="secondary" onClick={() => handleDelete(celeb.id, celeb.name)}>Elimina</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</figure>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user