basic profile
This commit is contained in:
Nicola Malizia
56
packages/frontend/package-lock.json
generated
56
packages/frontend/package-lock.json
generated
@@ -9,7 +9,8 @@
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"react": "^19.1.1",
|
||||
"react-dom": "^19.1.1"
|
||||
"react-dom": "^19.1.1",
|
||||
"react-router-dom": "^7.9.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.36.0",
|
||||
@@ -1628,6 +1629,15 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/cookie": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
|
||||
"integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/cross-spawn": {
|
||||
"version": "7.0.6",
|
||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
|
||||
@@ -2503,6 +2513,44 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-router": {
|
||||
"version": "7.9.4",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.9.4.tgz",
|
||||
"integrity": "sha512-SD3G8HKviFHg9xj7dNODUKDFgpG4xqD5nhyd0mYoB5iISepuZAvzSr8ywxgxKJ52yRzf/HWtVHc9AWwoTbljvA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"cookie": "^1.0.1",
|
||||
"set-cookie-parser": "^2.6.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=18",
|
||||
"react-dom": ">=18"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-router-dom": {
|
||||
"version": "7.9.4",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.9.4.tgz",
|
||||
"integrity": "sha512-f30P6bIkmYvnHHa5Gcu65deIXoA2+r3Eb6PJIAddvsT9aGlchMatJ51GgpU470aSqRRbFX22T70yQNUGuW3DfA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"react-router": "7.9.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=18",
|
||||
"react-dom": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/resolve-from": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
|
||||
@@ -2571,6 +2619,12 @@
|
||||
"semver": "bin/semver.js"
|
||||
}
|
||||
},
|
||||
"node_modules/set-cookie-parser": {
|
||||
"version": "2.7.1",
|
||||
"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
|
||||
"integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/shebang-command": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
|
||||
|
||||
@@ -11,7 +11,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^19.1.1",
|
||||
"react-dom": "^19.1.1"
|
||||
"react-dom": "^19.1.1",
|
||||
"react-router-dom": "^7.9.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.36.0",
|
||||
|
||||
@@ -1,24 +1,20 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import './App.css';
|
||||
// packages/frontend/src/App.jsx
|
||||
|
||||
import { Routes, Route } from 'react-router-dom';
|
||||
import CelebrityList from './components/CelebrityList';
|
||||
import CelebrityProfile from './components/CelebrityProfile';
|
||||
import CelebrityCreate from './components/CelebrityCreate'; // <-- 1. Importa il nuovo componente
|
||||
import './App.css';
|
||||
|
||||
function App() {
|
||||
const [message, setMessage] = useState('Caricamento...');
|
||||
|
||||
useEffect(() => {
|
||||
// Vite espone le variabili d'ambiente prefixate con VITE_
|
||||
// sull'oggetto import.meta.env
|
||||
const apiUrl = import.meta.env.VITE_API_URL || '/api';
|
||||
|
||||
fetch(apiUrl)
|
||||
.then((res) => res.json())
|
||||
.then((data) => setMessage(data.message))
|
||||
.catch((err) => setMessage(`Errore: ${err.message}`));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="App">
|
||||
<h1>Monorepo React + FastAPI</h1>
|
||||
<p>Messaggio dal backend: <strong>{message}</strong></p>
|
||||
<div className="container">
|
||||
<Routes>
|
||||
<Route path="/" element={<CelebrityList />} />
|
||||
{/* 2. Riattiva questa rotta e puntala al nuovo componente */}
|
||||
<Route path="/celebrity/new" element={<CelebrityCreate />} />
|
||||
<Route path="/celebrity/:id" element={<CelebrityProfile />} />
|
||||
</Routes>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
110
packages/frontend/src/components/CelebrityCreate.css
Normal file
110
packages/frontend/src/components/CelebrityCreate.css
Normal file
@@ -0,0 +1,110 @@
|
||||
/* packages/frontend/src/components/CelebrityCreate.css */
|
||||
|
||||
.create-form-container {
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
margin: 2rem auto;
|
||||
padding: 2rem;
|
||||
background-color: #2c2c2c;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #444;
|
||||
}
|
||||
|
||||
.create-form-container h2 {
|
||||
margin-top: 0;
|
||||
color: #d4b996;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
margin-bottom: 2rem;
|
||||
border-top: 1px solid #444;
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
|
||||
.form-section h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select,
|
||||
.form-group textarea {
|
||||
padding: 0.75rem;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #555;
|
||||
background-color: #1e1e1e;
|
||||
color: #f0f0f0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group select:focus {
|
||||
outline: none;
|
||||
border-color: #646cff;
|
||||
box-shadow: 0 0 0 2px rgba(100, 108, 255, 0.5);
|
||||
}
|
||||
|
||||
.form-group-checkbox {
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.form-group-checkbox input {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 1rem;
|
||||
margin-top: 2rem;
|
||||
border-top: 1px solid #444;
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
|
||||
.button-save {
|
||||
background-color: #28a745;
|
||||
}
|
||||
.button-save:hover {
|
||||
background-color: #218838;
|
||||
border-color: #1e7e34;
|
||||
}
|
||||
.button-save:disabled {
|
||||
background-color: #555;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.button-cancel {
|
||||
background-color: #6c757d;
|
||||
padding: 0.6em 1.2em; /* Emula lo stile del bottone */
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
display: inline-block;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.button-cancel:hover {
|
||||
background-color: #5a6268;
|
||||
border-color: #545b62;
|
||||
}
|
||||
177
packages/frontend/src/components/CelebrityCreate.jsx
Normal file
177
packages/frontend/src/components/CelebrityCreate.jsx
Normal file
@@ -0,0 +1,177 @@
|
||||
// packages/frontend/src/components/CelebrityCreate.jsx
|
||||
|
||||
import React, { useState } from 'react'; // <-- ECCO LA CORREZIONE
|
||||
import { useNavigate, Link } from 'react-router-dom';
|
||||
import { createCelebrity } from '../services/api';
|
||||
import './CelebrityCreate.css'; // Stile dedicato per questo form
|
||||
|
||||
// Stato iniziale pulito per il form
|
||||
const initialFormState = {
|
||||
name: '',
|
||||
gender: 'female',
|
||||
birth_date: '',
|
||||
height_cm: '',
|
||||
weight_kg: '',
|
||||
bust_cm: '',
|
||||
waist_cm: '',
|
||||
hips_cm: '',
|
||||
bra_band_size: '',
|
||||
bra_cup_size: '',
|
||||
bra_size_system: 'US',
|
||||
boobs_are_natural: true,
|
||||
birth_place: '',
|
||||
nationality: '',
|
||||
ethnicity: '',
|
||||
sexuality: '',
|
||||
hair_color: '',
|
||||
eye_color: '',
|
||||
biography: '',
|
||||
};
|
||||
|
||||
function CelebrityCreate() {
|
||||
const navigate = useNavigate();
|
||||
const [formData, setFormData] = useState(initialFormState);
|
||||
const [error, setError] = useState(null);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { name, value, type, checked } = e.target;
|
||||
setFormData({
|
||||
...formData,
|
||||
[name]: type === 'checkbox' ? checked : value,
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
setIsSubmitting(true);
|
||||
|
||||
// "Pulisce" i dati: converte le stringhe vuote dei campi numerici in `null`
|
||||
// per evitare errori di validazione nel backend.
|
||||
const payload = { ...formData };
|
||||
Object.keys(payload).forEach(key => {
|
||||
if (payload[key] === '') {
|
||||
payload[key] = null;
|
||||
}
|
||||
});
|
||||
|
||||
try {
|
||||
await createCelebrity(payload);
|
||||
alert('Celebrità creata con successo!');
|
||||
navigate('/'); // Torna alla lista dopo la creazione
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="create-form-container">
|
||||
<h2>Aggiungi Nuova Celebrità</h2>
|
||||
<p>Compila i campi sottostanti per aggiungere un nuovo profilo al catalogo.</p>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="form-section">
|
||||
<h3>Anagrafica</h3>
|
||||
<div className="form-grid">
|
||||
<div className="form-group">
|
||||
<label>Nome *</label>
|
||||
<input type="text" name="name" value={formData.name} onChange={handleChange} required />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Genere</label>
|
||||
<select name="gender" value={formData.gender} onChange={handleChange}>
|
||||
<option value="female">Female</option>
|
||||
<option value="male">Male</option>
|
||||
<option value="other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Data di Nascita</label>
|
||||
<input type="date" name="birth_date" value={formData.birth_date} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Luogo di Nascita</label>
|
||||
<input type="text" name="birth_place" value={formData.birth_place} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Nazionalità</label>
|
||||
<input type="text" name="nationality" value={formData.nationality} onChange={handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-section">
|
||||
<h3>Misure e Aspetto</h3>
|
||||
<div className="form-grid">
|
||||
<div className="form-group">
|
||||
<label>Altezza (cm)</label>
|
||||
<input type="number" name="height_cm" value={formData.height_cm} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Peso (kg)</label>
|
||||
<input type="number" name="weight_kg" value={formData.weight_kg} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Seno (cm)</label>
|
||||
<input type="number" name="bust_cm" value={formData.bust_cm} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Vita (cm)</label>
|
||||
<input type="number" name="waist_cm" value={formData.waist_cm} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Fianchi (cm)</label>
|
||||
<input type="number" name="hips_cm" value={formData.hips_cm} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Colore Capelli</label>
|
||||
<input type="text" name="hair_color" value={formData.hair_color} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Colore Occhi</label>
|
||||
<input type="text" name="eye_color" value={formData.eye_color} onChange={handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-section">
|
||||
<h3>Reggiseno</h3>
|
||||
<div className="form-grid">
|
||||
<div className="form-group">
|
||||
<label>Misura Fascia</label>
|
||||
<input type="number" name="bra_band_size" value={formData.bra_band_size} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Coppa</label>
|
||||
<input type="text" name="bra_cup_size" value={formData.bra_cup_size} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Sistema</label>
|
||||
<select name="bra_size_system" value={formData.bra_size_system} onChange={handleChange}>
|
||||
<option value="US">US</option> <option value="UK">UK</option> <option value="EU">EU</option> <option value="FR">FR</option>
|
||||
<option value="AU">AU</option> <option value="IT">IT</option> <option value="JP">JP</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group-checkbox">
|
||||
<label>Seno Naturale?</label>
|
||||
<input type="checkbox" name="boobs_are_natural" checked={formData.boobs_are_natural} onChange={handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && <p className="error-message">Errore: {error}</p>}
|
||||
|
||||
<div className="form-actions">
|
||||
<Link to="/" className="button-cancel">Annulla</Link>
|
||||
<button type="submit" className="button-save" disabled={isSubmitting}>
|
||||
{isSubmitting ? 'Salvataggio...' : 'Salva Profilo'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default CelebrityCreate;
|
||||
85
packages/frontend/src/components/CelebrityList.jsx
Normal file
85
packages/frontend/src/components/CelebrityList.jsx
Normal file
@@ -0,0 +1,85 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { getCelebrities, deleteCelebrity } from '../services/api';
|
||||
|
||||
function CelebrityList() {
|
||||
const [celebrities, setCelebrities] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
fetchCelebrities();
|
||||
}, []);
|
||||
|
||||
const fetchCelebrities = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const data = await getCelebrities();
|
||||
setCelebrities(data);
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (id) => {
|
||||
if (window.confirm('Sei sicuro di voler eliminare questa celebrità?')) {
|
||||
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}`);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
export default CelebrityList;
|
||||
138
packages/frontend/src/components/CelebrityProfile.css
Normal file
138
packages/frontend/src/components/CelebrityProfile.css
Normal file
@@ -0,0 +1,138 @@
|
||||
/* packages/frontend/src/components/CelebrityProfile.css */
|
||||
|
||||
.profile-container {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.profile-sidebar {
|
||||
flex: 0 0 300px; /* Larghezza fissa per la colonna sinistra */
|
||||
}
|
||||
|
||||
.profile-main-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 1rem;
|
||||
border: 1px solid #444;
|
||||
}
|
||||
|
||||
.thumbnails {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.thumbnail img {
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #444;
|
||||
}
|
||||
|
||||
.profile-content {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.profile-header {
|
||||
border-bottom: 1px solid #555;
|
||||
padding-bottom: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.profile-header h1 {
|
||||
margin: 0;
|
||||
font-size: 2.5rem;
|
||||
color: #f0e6d2;
|
||||
}
|
||||
|
||||
.profile-header .editable-field {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.profile-section {
|
||||
background-color: #2c2c2c;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
border: 1px solid #444;
|
||||
}
|
||||
|
||||
.profile-section h2 {
|
||||
margin-top: 0;
|
||||
border-bottom: 1px solid #555;
|
||||
padding-bottom: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #d4b996;
|
||||
}
|
||||
|
||||
.profile-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* Stile per i campi editabili */
|
||||
.editable-field {
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.editable-field:hover {
|
||||
background-color: #3a3a3a;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
display: block;
|
||||
font-size: 0.8rem;
|
||||
color: #aaa;
|
||||
margin-bottom: 4px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.field-value {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.editable-field input,
|
||||
.editable-field select,
|
||||
.editable-field textarea {
|
||||
width: 100%;
|
||||
padding: 6px;
|
||||
font-size: 1rem;
|
||||
border: 1px solid #646cff;
|
||||
border-radius: 4px;
|
||||
background-color: #1a1a1a;
|
||||
color: #fff;
|
||||
box-sizing: border-box; /* Assicura che padding non alteri la larghezza */
|
||||
}
|
||||
|
||||
.profile-actions {
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.button-delete {
|
||||
background-color: #b22222;
|
||||
color: white;
|
||||
}
|
||||
.button-delete:hover {
|
||||
background-color: #dc143c;
|
||||
border-color: #dc143c;
|
||||
}
|
||||
|
||||
.button-back {
|
||||
background-color: #444;
|
||||
}
|
||||
.button-back:hover {
|
||||
background-color: #555;
|
||||
border-color: #666;
|
||||
}
|
||||
148
packages/frontend/src/components/CelebrityProfile.jsx
Normal file
148
packages/frontend/src/components/CelebrityProfile.jsx
Normal file
@@ -0,0 +1,148 @@
|
||||
// packages/frontend/src/components/CelebrityProfile.jsx
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useParams, useNavigate, Link } from 'react-router-dom';
|
||||
import { getCelebrityById, updateCelebrity, deleteCelebrity } from '../services/api';
|
||||
import EditableField from './EditableField';
|
||||
import './CelebrityProfile.css'; // Importa il nuovo CSS
|
||||
|
||||
function CelebrityProfile() {
|
||||
const { id } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const [celebrity, setCelebrity] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
// Ignoriamo la modalità "new", questa pagina è solo per visualizzare/modificare
|
||||
if (id) {
|
||||
setLoading(true);
|
||||
getCelebrityById(id)
|
||||
.then((data) => {
|
||||
// Formatta la data per l'input type="date"
|
||||
if (data.birth_date) {
|
||||
data.birth_date = data.birth_date.split('T')[0];
|
||||
}
|
||||
setCelebrity(data);
|
||||
})
|
||||
.catch((err) => setError(err.message))
|
||||
.finally(() => setLoading(false));
|
||||
} else {
|
||||
navigate('/'); // Se non c'è id, torna alla home
|
||||
}
|
||||
}, [id, navigate]);
|
||||
|
||||
const handleFieldSave = async (fieldName, newValue) => {
|
||||
// Converte stringa vuota a null per il backend
|
||||
const valueToSend = newValue === '' ? null : newValue;
|
||||
const payload = { [fieldName]: valueToSend };
|
||||
|
||||
try {
|
||||
const updatedCelebrity = await updateCelebrity(id, payload);
|
||||
// Aggiorna lo stato locale per un feedback immediato
|
||||
setCelebrity((prev) => ({ ...prev, [fieldName]: newValue }));
|
||||
console.log('Salvataggio riuscito:', updatedCelebrity);
|
||||
} catch (err) {
|
||||
setError(`Errore durante il salvataggio del campo ${fieldName}: ${err.message}`);
|
||||
// Potresti voler ripristinare il valore precedente in caso di errore
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (window.confirm(`Sei sicuro di voler eliminare ${celebrity.name}? L'azione è irreversibile.`)) {
|
||||
try {
|
||||
await deleteCelebrity(id);
|
||||
alert(`${celebrity.name} è stato eliminato con successo.`);
|
||||
navigate('/');
|
||||
} catch (err) {
|
||||
setError(`Errore durante l'eliminazione: ${err.message}`);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) return <p>Caricamento profilo...</p>;
|
||||
if (error) return <p className="error-message">Errore: {error}</p>;
|
||||
if (!celebrity) return <p>Nessuna celebrità trovata.</p>;
|
||||
|
||||
// Opzioni per i campi <select>
|
||||
const genderOptions = [
|
||||
{ value: 'female', label: 'Female' }, { value: 'male', label: 'Male' }, { value: 'other', label: 'Other' },
|
||||
];
|
||||
const braSystemOptions = [
|
||||
{ value: 'US', label: 'US' }, { value: 'UK', label: 'UK' }, { value: 'EU', label: 'EU' },
|
||||
{ value: 'FR', label: 'FR' }, { value: 'AU', label: 'AU' }, { value: 'IT', label: 'IT' }, { value: 'JP', label: 'JP' },
|
||||
];
|
||||
const booleanOptions = [
|
||||
{ value: 'true', label: 'Sì' }, { value: 'false', label: 'No' },
|
||||
];
|
||||
|
||||
|
||||
return (
|
||||
<div className="profile-container">
|
||||
<div className="profile-sidebar">
|
||||
{/* Immagine del profilo (placeholder) */}
|
||||
<img src={`https://i.pravatar.cc/300?u=${id}`} alt={celebrity.name} className="profile-main-image" />
|
||||
<div className="thumbnails">
|
||||
{/* Placeholder per le miniature */}
|
||||
<div className="thumbnail"><img src={`https://i.pravatar.cc/150?u=${id}a`} alt="thumbnail" /></div>
|
||||
<div className="thumbnail"><img src={`https://i.pravatar.cc/150?u=${id}b`} alt="thumbnail" /></div>
|
||||
<div className="thumbnail"><img src={`https://i.pravatar.cc/150?u=${id}c`} alt="thumbnail" /></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="profile-content">
|
||||
<div className="profile-header">
|
||||
<h1>{celebrity.name}</h1>
|
||||
<EditableField label="Nome completo / Alias" name="name" value={celebrity.name} onSave={handleFieldSave} />
|
||||
</div>
|
||||
|
||||
<section className="profile-section">
|
||||
<h2>Dati Personali</h2>
|
||||
<div className="profile-grid">
|
||||
<EditableField label="Data di nascita" name="birth_date" value={celebrity.birth_date} type="date" onSave={handleFieldSave} />
|
||||
<EditableField label="Luogo di nascita" name="birth_place" value={celebrity.birth_place} onSave={handleFieldSave} />
|
||||
<EditableField label="Nazionalità" name="nationality" value={celebrity.nationality} onSave={handleFieldSave} />
|
||||
<EditableField label="Etnia" name="ethnicity" value={celebrity.ethnicity} onSave={handleFieldSave} />
|
||||
<EditableField label="Genere" name="gender" value={celebrity.gender} type="select" options={genderOptions} onSave={handleFieldSave} />
|
||||
<EditableField label="Sessualità" name="sexuality" value={celebrity.sexuality} onSave={handleFieldSave} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="profile-section">
|
||||
<h2>Aspetto Fisico</h2>
|
||||
<div className="profile-grid">
|
||||
<EditableField label="Colore Capelli" name="hair_color" value={celebrity.hair_color} onSave={handleFieldSave} />
|
||||
<EditableField label="Colore Occhi" name="eye_color" value={celebrity.eye_color} onSave={handleFieldSave} />
|
||||
<EditableField label="Altezza (cm)" name="height_cm" value={celebrity.height_cm} type="number" onSave={handleFieldSave} />
|
||||
<EditableField label="Peso (kg)" name="weight_kg" value={celebrity.weight_kg} type="number" onSave={handleFieldSave} />
|
||||
<EditableField label="Seno (cm)" name="bust_cm" value={celebrity.bust_cm} type="number" onSave={handleFieldSave} />
|
||||
<EditableField label="Vita (cm)" name="waist_cm" value={celebrity.waist_cm} type="number" onSave={handleFieldSave} />
|
||||
<EditableField label="Fianchi (cm)" name="hips_cm" value={celebrity.hips_cm} type="number" onSave={handleFieldSave} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="profile-section">
|
||||
<h2>Reggiseno</h2>
|
||||
<div className="profile-grid">
|
||||
<EditableField label="Misura Fascia" name="bra_band_size" value={celebrity.bra_band_size} type="number" onSave={handleFieldSave} />
|
||||
<EditableField label="Coppa" name="bra_cup_size" value={celebrity.bra_cup_size} onSave={handleFieldSave} />
|
||||
<EditableField label="Sistema" name="bra_size_system" value={celebrity.bra_size_system} type="select" options={braSystemOptions} onSave={handleFieldSave} />
|
||||
<EditableField label="Seno Naturale?" name="boobs_are_natural" value={String(celebrity.boobs_are_natural)} type="select" options={booleanOptions} onSave={handleFieldSave} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="profile-section">
|
||||
<h2>Biografia</h2>
|
||||
<EditableField label="Note biografiche" name="biography" value={celebrity.biography} type="textarea" onSave={handleFieldSave} />
|
||||
</section>
|
||||
|
||||
<div className="profile-actions">
|
||||
<Link to="/" className="button-back">Torna alla Lista</Link>
|
||||
<button onClick={handleDelete} className="button-delete">Elimina Profilo</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default CelebrityProfile;
|
||||
82
packages/frontend/src/components/EditableField.jsx
Normal file
82
packages/frontend/src/components/EditableField.jsx
Normal file
@@ -0,0 +1,82 @@
|
||||
// packages/frontend/src/components/EditableField.jsx
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
function EditableField({
|
||||
label,
|
||||
name,
|
||||
value,
|
||||
onSave,
|
||||
type = 'text',
|
||||
options = [], // Per i campi <select>
|
||||
}) {
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
// Usiamo un valore interno per non scatenare re-render del genitore ad ogni tasto premuto
|
||||
const [currentValue, setCurrentValue] = useState(value);
|
||||
|
||||
// Aggiorna il valore interno se il prop 'value' cambia dall'esterno
|
||||
useEffect(() => {
|
||||
setCurrentValue(value);
|
||||
}, [value]);
|
||||
|
||||
const handleSave = () => {
|
||||
// Salva solo se il valore è cambiato
|
||||
if (currentValue !== value) {
|
||||
onSave(name, currentValue);
|
||||
}
|
||||
setIsEditing(false);
|
||||
};
|
||||
|
||||
const handleKeyDown = (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
handleSave();
|
||||
} else if (e.key === 'Escape') {
|
||||
// Annulla le modifiche e chiudi
|
||||
setCurrentValue(value);
|
||||
setIsEditing(false);
|
||||
}
|
||||
};
|
||||
|
||||
const renderInputField = () => {
|
||||
const commonProps = {
|
||||
name,
|
||||
value: currentValue || '',
|
||||
onChange: (e) => setCurrentValue(e.target.value),
|
||||
onBlur: handleSave,
|
||||
onKeyDown: handleKeyDown,
|
||||
autoFocus: true,
|
||||
};
|
||||
|
||||
if (type === 'select') {
|
||||
return (
|
||||
<select {...commonProps}>
|
||||
{options.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
);
|
||||
}
|
||||
|
||||
if (type === 'textarea') {
|
||||
return <textarea {...commonProps} rows="5" />;
|
||||
}
|
||||
|
||||
// Default per 'text', 'number', 'date', etc.
|
||||
return <input type={type} {...commonProps} />;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="editable-field" onClick={() => !isEditing && setIsEditing(true)}>
|
||||
<span className="field-label">{label}</span>
|
||||
{isEditing ? (
|
||||
renderInputField()
|
||||
) : (
|
||||
<span className="field-value">{value || 'N/A'}</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default EditableField;
|
||||
@@ -1,10 +1,13 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import App from './App.jsx'
|
||||
import { StrictMode } from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import { BrowserRouter } from 'react-router-dom'; // <-- Importa
|
||||
import './index.css';
|
||||
import App from './App.jsx';
|
||||
|
||||
createRoot(document.getElementById('root')).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
)
|
||||
<BrowserRouter> {/* <-- Avvolgi l'App con il Router */}
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
</StrictMode>
|
||||
);
|
||||
48
packages/frontend/src/services/api.js
Normal file
48
packages/frontend/src/services/api.js
Normal file
@@ -0,0 +1,48 @@
|
||||
const API_BASE_URL = import.meta.env.VITE_API_URL || '/api';
|
||||
|
||||
const handleResponse = async (response) => {
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json();
|
||||
throw new Error(errorData.detail || 'Si è verificato un errore');
|
||||
}
|
||||
return response.json();
|
||||
};
|
||||
|
||||
export const getCelebrities = async () => {
|
||||
const response = await fetch(`${API_BASE_URL}/celebrities/`);
|
||||
return handleResponse(response);
|
||||
};
|
||||
|
||||
export const getCelebrityById = async (id) => {
|
||||
const response = await fetch(`${API_BASE_URL}/celebrities/${id}`);
|
||||
return handleResponse(response);
|
||||
};
|
||||
|
||||
export const createCelebrity = async (celebrityData) => {
|
||||
const response = await fetch(`${API_BASE_URL}/celebrities/`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(celebrityData),
|
||||
});
|
||||
return handleResponse(response);
|
||||
};
|
||||
|
||||
export const updateCelebrity = async (id, celebrityData) => {
|
||||
const response = await fetch(`${API_BASE_URL}/celebrities/${id}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(celebrityData),
|
||||
});
|
||||
return handleResponse(response);
|
||||
};
|
||||
|
||||
export const deleteCelebrity = async (id) => {
|
||||
const response = await fetch(`${API_BASE_URL}/celebrities/${id}`, {
|
||||
method: 'DELETE',
|
||||
});
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json();
|
||||
throw new Error(errorData.detail || 'Errore durante l\'eliminazione');
|
||||
}
|
||||
return response.json(); // O un messaggio di successo
|
||||
};
|
||||
Reference in New Issue
Block a user