aliases
This commit is contained in:
@@ -1,36 +1,43 @@
|
||||
// packages/frontend/src/components/CelebrityList.jsx
|
||||
|
||||
import React, { useState, useEffect, useMemo } from 'react';
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
import { getCelebrities, deleteCelebrity } from '../services/api';
|
||||
import './CelebrityList.css'; // Importa il nuovo CSS
|
||||
import './CelebrityList.css';
|
||||
|
||||
// Icone SVG semplici per le azioni
|
||||
const EditIcon = () => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>;
|
||||
const DeleteIcon = () => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>;
|
||||
const MoreIcon = () => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>;
|
||||
|
||||
|
||||
function CelebrityList() {
|
||||
const [celebrities, setCelebrities] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
|
||||
// Stato per la paginazione
|
||||
const [debouncedSearchTerm, setDebouncedSearchTerm] = useState(searchTerm);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [itemsPerPage, setItemsPerPage] = useState(10);
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
// Effetto per "debouncare" il termine di ricerca
|
||||
useEffect(() => {
|
||||
const handler = setTimeout(() => {
|
||||
setDebouncedSearchTerm(searchTerm);
|
||||
}, 300); // Attende 300ms dopo l'ultima digitazione prima di aggiornare
|
||||
|
||||
return () => {
|
||||
clearTimeout(handler);
|
||||
};
|
||||
}, [searchTerm]);
|
||||
|
||||
// Effetto per caricare i dati quando il termine di ricerca (debounced) cambia
|
||||
useEffect(() => {
|
||||
fetchCelebrities();
|
||||
}, []);
|
||||
}, [debouncedSearchTerm]);
|
||||
|
||||
const fetchCelebrities = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const data = await getCelebrities();
|
||||
const data = await getCelebrities(debouncedSearchTerm);
|
||||
setCelebrities(data);
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
@@ -51,24 +58,18 @@ function CelebrityList() {
|
||||
}
|
||||
};
|
||||
|
||||
// Memoizzazione dei dati filtrati e paginati per performance
|
||||
const filteredCelebrities = useMemo(() => {
|
||||
return celebrities.filter(c =>
|
||||
c.name.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
);
|
||||
}, [celebrities, searchTerm]);
|
||||
|
||||
// La paginazione ora opera sulla lista (già filtrata) ricevuta dal backend
|
||||
const paginatedCelebrities = useMemo(() => {
|
||||
const startIndex = (currentPage - 1) * itemsPerPage;
|
||||
return filteredCelebrities.slice(startIndex, startIndex + itemsPerPage);
|
||||
}, [filteredCelebrities, currentPage, itemsPerPage]);
|
||||
return celebrities.slice(startIndex, startIndex + itemsPerPage);
|
||||
}, [celebrities, currentPage, itemsPerPage]);
|
||||
|
||||
const totalPages = Math.ceil(filteredCelebrities.length / itemsPerPage);
|
||||
const totalPages = Math.ceil(celebrities.length / itemsPerPage);
|
||||
|
||||
const renderPagination = () => (
|
||||
<div className="pagination-controls">
|
||||
<span>
|
||||
Pagina {currentPage} di {totalPages}
|
||||
Pagina {currentPage} di {totalPages} ({celebrities.length} risultati)
|
||||
</span>
|
||||
<div className="grid">
|
||||
<button onClick={() => setCurrentPage(p => Math.max(1, p - 1))} disabled={currentPage === 1}>
|
||||
@@ -89,8 +90,8 @@ function CelebrityList() {
|
||||
const renderEmptyState = () => (
|
||||
<div className="empty-state">
|
||||
<h3>Nessun Profilo Trovato</h3>
|
||||
<p>La tua lista è vuota. Inizia aggiungendo una nuova celebrità.</p>
|
||||
<Link to="/celebrity/new" role="button" className="primary">+ Aggiungi la prima celebrità</Link>
|
||||
<p>{searchTerm ? "Prova a modificare i termini della ricerca." : "Inizia aggiungendo una nuova celebrità."}</p>
|
||||
<Link to="/celebrity/new" role="button" className="primary">+ Aggiungi una celebrità</Link>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -106,18 +107,18 @@ function CelebrityList() {
|
||||
<div className="list-controls">
|
||||
<input
|
||||
type="search"
|
||||
placeholder="Cerca per nome..."
|
||||
placeholder="Cerca per nome o alias..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => { setSearchTerm(e.target.value); setCurrentPage(1); }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{loading && <article aria-busy="true">Caricamento in corso...</article>}
|
||||
{loading && <article aria-busy="true">Ricerca in corso...</article>}
|
||||
{error && <p className="error-message">Errore: {error}</p>}
|
||||
|
||||
{!loading && !error && (
|
||||
<>
|
||||
{celebrities.length === 0 ? renderEmptyState() : (
|
||||
{paginatedCelebrities.length === 0 ? renderEmptyState() : (
|
||||
<>
|
||||
<div className="table-responsive">
|
||||
<table>
|
||||
@@ -135,7 +136,7 @@ function CelebrityList() {
|
||||
{paginatedCelebrities.map((celeb) => (
|
||||
<tr key={celeb.id}>
|
||||
<td>
|
||||
<img src={`https://i.pravatar.cc/50?u=${celeb.id}`} alt={celeb.name} className="avatar-image" />
|
||||
<img src={celeb.profile_image ? `/api/uploads/${celeb.profile_image.file_path}` : `https://i.pravatar.cc/50?u=${celeb.id}`} alt={celeb.name} className="avatar-image" />
|
||||
</td>
|
||||
<td>
|
||||
<Link to={`/celebrity/${celeb.id}`} className="celeb-link">
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
width: 100%;
|
||||
height: 400px; /* Altezza fissa per l'immagine profilo */
|
||||
object-fit: cover;
|
||||
background-color: var(--pico-muted-background-color); /* Sfondo per immagini trasparenti o in caricamento */
|
||||
background-color: var(--pico-muted-background-color);
|
||||
}
|
||||
|
||||
.profile-sidebar .editable-field-container {
|
||||
@@ -32,7 +32,7 @@
|
||||
}
|
||||
|
||||
.profile-sidebar .editable-field-container label {
|
||||
display: none; /* Nasconde l'etichetta "Nome" sotto la foto */
|
||||
display: none;
|
||||
}
|
||||
.profile-sidebar .display-value {
|
||||
font-size: 1.5rem;
|
||||
@@ -47,7 +47,7 @@
|
||||
}
|
||||
|
||||
.profile-content {
|
||||
flex: 1 1 auto; /* Occupa lo spazio rimanente */
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@@ -81,6 +81,43 @@
|
||||
color: var(--pico-color-red-500);
|
||||
}
|
||||
|
||||
/* --- Stili per Sezione Alias --- */
|
||||
.alias-section {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.alias-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 1.5rem 0;
|
||||
border: 1px solid var(--pico-card-border-color);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
.alias-list li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.5rem 1rem;
|
||||
border-bottom: 1px solid var(--pico-muted-border-color);
|
||||
}
|
||||
.alias-list li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.alias-list li button {
|
||||
padding: 0.1rem 0.5rem;
|
||||
line-height: 1;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
.alias-add-form {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 1rem;
|
||||
align-items: end;
|
||||
}
|
||||
.alias-add-form input, .alias-add-form button {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* --- Stili per Galleria e Upload --- */
|
||||
.gallery-grid {
|
||||
display: grid;
|
||||
@@ -135,7 +172,7 @@
|
||||
border-radius: var(--border-radius);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem; /* Aumentato lo spazio */
|
||||
gap: 1.5rem;
|
||||
}
|
||||
.upload-section h4 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
@@ -144,7 +181,7 @@
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 1rem;
|
||||
margin: 0;
|
||||
align-items: center; /* Allinea verticalmente */
|
||||
align-items: center;
|
||||
}
|
||||
.upload-section input {
|
||||
margin: 0;
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
// packages/frontend/src/components/CelebrityProfile.jsx
|
||||
|
||||
import React, { useState, useEffect, useCallback, useRef } from 'react';
|
||||
import { useParams, useNavigate, Link } from 'react-router-dom';
|
||||
import { getCelebrityById, updateCelebrity, deleteCelebrity, uploadImages, setProfileImage, deleteImage, addImageFromUrl } from '../services/api';
|
||||
import { getCelebrityById, updateCelebrity, deleteCelebrity, uploadImages, setProfileImage, deleteImage, addImageFromUrl, addAlias, deleteAlias } from '../services/api';
|
||||
import EditableField from './EditableField';
|
||||
import './CelebrityProfile.css';
|
||||
|
||||
@@ -13,14 +11,17 @@ function CelebrityProfile() {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
// Stati per la gestione upload
|
||||
const [selectedFiles, setSelectedFiles] = useState(null); // Da file a files
|
||||
const [selectedFiles, setSelectedFiles] = useState(null);
|
||||
const [isUploading, setIsUploading] = useState(false);
|
||||
const [imageUrl, setImageUrl] = useState('');
|
||||
const [isFetchingFromUrl, setIsFetchingFromUrl] = useState(false);
|
||||
const [isDraggingOver, setIsDraggingOver] = useState(false);
|
||||
const fileInputRef = useRef(null);
|
||||
|
||||
// Stati per la gestione degli alias
|
||||
const [newAlias, setNewAlias] = useState('');
|
||||
const [isAddingAlias, setIsAddingAlias] = useState(false);
|
||||
|
||||
const fetchProfile = useCallback(() => {
|
||||
getCelebrityById(id)
|
||||
.then((data) => {
|
||||
@@ -43,12 +44,10 @@ function CelebrityProfile() {
|
||||
}
|
||||
}, [id, navigate, fetchProfile]);
|
||||
|
||||
// Effetto per caricare i file quando `selectedFiles` cambia
|
||||
useEffect(() => {
|
||||
if (selectedFiles && selectedFiles.length > 0) {
|
||||
handleUpload();
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [selectedFiles]);
|
||||
|
||||
const handleFieldSave = async (fieldName, newValue) => {
|
||||
@@ -60,7 +59,7 @@ function CelebrityProfile() {
|
||||
|
||||
try {
|
||||
const updatedCelebrity = await updateCelebrity(id, payload);
|
||||
setCelebrity(prev => ({ ...prev, ...updatedCelebrity })); // Aggiornamento pi├╣ robusto
|
||||
setCelebrity(prev => ({ ...prev, ...updatedCelebrity }));
|
||||
} catch (err) {
|
||||
console.error(`Errore durante il salvataggio del campo ${fieldName}:`, err);
|
||||
throw err;
|
||||
@@ -68,10 +67,10 @@ function CelebrityProfile() {
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (window.confirm(`Sei sicuro di voler eliminare ${celebrity.name}? L'azione è irreversibile.`)) {
|
||||
if (window.confirm(`Sei sicuro di voler eliminare ${celebrity.name}? L'azione è irreversibile.`)) {
|
||||
try {
|
||||
await deleteCelebrity(id);
|
||||
alert(`${celebrity.name} è stato eliminato con successo.`);
|
||||
alert(`${celebrity.name} è stato eliminato con successo.`);
|
||||
navigate('/');
|
||||
} catch (err) {
|
||||
setError(`Errore durante l'eliminazione: ${err.message}`);
|
||||
@@ -79,6 +78,39 @@ function CelebrityProfile() {
|
||||
}
|
||||
};
|
||||
|
||||
// --- Gestori per gli Alias ---
|
||||
const handleAddAlias = async (e) => {
|
||||
e.preventDefault();
|
||||
if (!newAlias.trim()) return;
|
||||
setIsAddingAlias(true);
|
||||
try {
|
||||
const addedAlias = await addAlias(id, newAlias.trim());
|
||||
setCelebrity(prev => ({
|
||||
...prev,
|
||||
aliases: [...prev.aliases, addedAlias].sort((a, b) => a.alias_name.localeCompare(b.alias_name))
|
||||
}));
|
||||
setNewAlias('');
|
||||
} catch (err) {
|
||||
setError(`Errore durante l'aggiunta dell'alias: ${err.message}`);
|
||||
} finally {
|
||||
setIsAddingAlias(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteAlias = async (aliasId) => {
|
||||
if (window.confirm("Sei sicuro di voler eliminare questo alias?")) {
|
||||
try {
|
||||
await deleteAlias(aliasId);
|
||||
setCelebrity(prev => ({
|
||||
...prev,
|
||||
aliases: prev.aliases.filter(a => a.id !== aliasId)
|
||||
}));
|
||||
} catch (err) {
|
||||
setError(`Errore durante l'eliminazione dell'alias: ${err.message}`);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// --- Gestori per le Immagini ---
|
||||
const handleFileChange = (e) => {
|
||||
if (e.target.files.length > 0) {
|
||||
@@ -91,7 +123,7 @@ function CelebrityProfile() {
|
||||
setIsUploading(true);
|
||||
setError(null);
|
||||
try {
|
||||
await uploadImages(id, selectedFiles); // Chiama la nuova funzione plurale
|
||||
await uploadImages(id, selectedFiles);
|
||||
fetchProfile();
|
||||
} catch (err) {
|
||||
setError(`Upload fallito: ${err.message}`);
|
||||
@@ -108,7 +140,7 @@ function CelebrityProfile() {
|
||||
setError(null);
|
||||
try {
|
||||
await addImageFromUrl(id, imageUrl);
|
||||
setImageUrl(''); // Pulisce l'input
|
||||
setImageUrl('');
|
||||
fetchProfile();
|
||||
} catch (err) {
|
||||
setError(`Fetch da URL fallito: ${err.message}`);
|
||||
@@ -120,7 +152,7 @@ function CelebrityProfile() {
|
||||
const handleSetProfileImage = async (imageId) => {
|
||||
try {
|
||||
const updatedCelebrity = await setProfileImage(id, imageId);
|
||||
setCelebrity(updatedCelebrity); // Aggiorna lo stato con i dati freschi dal server
|
||||
setCelebrity(updatedCelebrity);
|
||||
} catch (err) {
|
||||
setError(`Errore nell'impostare l'immagine: ${err.message}`);
|
||||
}
|
||||
@@ -130,17 +162,16 @@ function CelebrityProfile() {
|
||||
if (window.confirm("Sei sicuro di voler eliminare questa immagine?")) {
|
||||
try {
|
||||
await deleteImage(imageId);
|
||||
fetchProfile(); // Ricarica per aggiornare la galleria
|
||||
fetchProfile();
|
||||
} catch (err) {
|
||||
setError(`Errore nell'eliminazione dell'immagine: ${err.message}`);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// --- Gestori per Drag & Drop ---
|
||||
const handleDragEnter = (e) => { e.preventDefault(); e.stopPropagation(); setIsDraggingOver(true); };
|
||||
const handleDragLeave = (e) => { e.preventDefault(); e.stopPropagation(); setIsDraggingOver(false); };
|
||||
const handleDragOver = (e) => { e.preventDefault(); e.stopPropagation(); }; // Necessario per permettere il drop
|
||||
const handleDragOver = (e) => { e.preventDefault(); e.stopPropagation(); };
|
||||
const handleDrop = (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
@@ -151,10 +182,9 @@ function CelebrityProfile() {
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
if (loading) return <article aria-busy="true">Caricamento profilo...</article>;
|
||||
if (error && !celebrity) return <article><p className="error-message">Errore: {error}</p></article>;
|
||||
if (!celebrity) return <p>Nessuna celebrità trovata.</p>;
|
||||
if (!celebrity) return <p>Nessuna celebrità trovata.</p>;
|
||||
|
||||
const profileImageUrl = celebrity.profile_image
|
||||
? `/api/uploads/${celebrity.profile_image.file_path}`
|
||||
@@ -163,7 +193,7 @@ function CelebrityProfile() {
|
||||
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 shoeSystemOptions = [{ value: 'EU', label: 'EU' }, { value: 'US', label: 'US' }, { value: 'UK', label: 'UK' }];
|
||||
const booleanOptions = [{ value: 'true', label: 'Sì' }, { value: 'false', label: 'No' }];
|
||||
const booleanOptions = [{ value: 'true', label: 'Sì' }, { value: 'false', label: 'No' }];
|
||||
|
||||
return (
|
||||
<div className="profile-container">
|
||||
@@ -183,6 +213,33 @@ function CelebrityProfile() {
|
||||
<main className="profile-content">
|
||||
{error && <p className="error-message"><strong>Errore:</strong> {error}</p>}
|
||||
|
||||
<details>
|
||||
<summary><h3>Alias e Pseudonimi ({celebrity.aliases.length})</h3></summary>
|
||||
<div className="alias-section">
|
||||
<ul className="alias-list">
|
||||
{celebrity.aliases.map(alias => (
|
||||
<li key={alias.id}>
|
||||
<span>{alias.alias_name}</span>
|
||||
<button onClick={() => handleDeleteAlias(alias.id)} className="outline secondary button-icon" title="Elimina alias">×</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
{celebrity.aliases.length === 0 && <p><em>Nessun alias registrato.</em></p>}
|
||||
<form onSubmit={handleAddAlias} className="alias-add-form">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Aggiungi nuovo alias..."
|
||||
value={newAlias}
|
||||
onChange={(e) => setNewAlias(e.target.value)}
|
||||
disabled={isAddingAlias}
|
||||
/>
|
||||
<button type="submit" disabled={!newAlias.trim() || isAddingAlias} aria-busy={isAddingAlias}>
|
||||
Aggiungi
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details open>
|
||||
<summary><h3>Galleria e Upload</h3></summary>
|
||||
<div className="gallery-grid">
|
||||
@@ -190,12 +247,8 @@ function CelebrityProfile() {
|
||||
<div key={img.id} className="gallery-item">
|
||||
<img src={`/api/uploads/${img.file_path}`} alt={`Immagine di ${celebrity.name}`} />
|
||||
<div className="gallery-item-actions">
|
||||
<button onClick={() => handleSetProfileImage(img.id)} disabled={celebrity.profile_image_id === img.id} title="Imposta come immagine profilo">
|
||||
Profilo
|
||||
</button>
|
||||
<button onClick={() => handleDeleteImage(img.id)} className="secondary" title="Elimina immagine">
|
||||
X
|
||||
</button>
|
||||
<button onClick={() => handleSetProfileImage(img.id)} disabled={celebrity.profile_image_id === img.id} title="Imposta come immagine profilo">Profilo</button>
|
||||
<button onClick={() => handleDeleteImage(img.id)} className="secondary" title="Elimina immagine">X</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@@ -203,36 +256,16 @@ function CelebrityProfile() {
|
||||
<div className="upload-section">
|
||||
<div>
|
||||
<h4>Carica da File</h4>
|
||||
<div
|
||||
className={`drop-zone ${isDraggingOver ? 'dragging-over' : ''}`}
|
||||
onClick={() => fileInputRef.current.click()}
|
||||
onDrop={handleDrop}
|
||||
onDragOver={handleDragOver}
|
||||
onDragEnter={handleDragEnter}
|
||||
onDragLeave={handleDragLeave}
|
||||
aria-busy={isUploading}
|
||||
>
|
||||
<div className={`drop-zone ${isDraggingOver ? 'dragging-over' : ''}`} onClick={() => fileInputRef.current.click()} onDrop={handleDrop} onDragOver={handleDragOver} onDragEnter={handleDragEnter} onDragLeave={handleDragLeave} aria-busy={isUploading}>
|
||||
<input type="file" ref={fileInputRef} onChange={handleFileChange} hidden multiple />
|
||||
{isUploading
|
||||
? <p>Caricamento di {selectedFiles.length} file...</p>
|
||||
: <p>Trascina i file qui, o <strong>clicca per selezionare</strong>.</p>
|
||||
}
|
||||
{isUploading ? <p>Caricamento di {selectedFiles.length} file...</p> : <p>Trascina i file qui, o <strong>clicca per selezionare</strong>.</p>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4>Aggiungi da URL</h4>
|
||||
<div className="grid">
|
||||
<input
|
||||
type="url"
|
||||
placeholder="https://esempio.com/immagine.jpg"
|
||||
value={imageUrl}
|
||||
onChange={(e) => setImageUrl(e.target.value)}
|
||||
disabled={isFetchingFromUrl}
|
||||
/>
|
||||
<button onClick={handleFetchFromUrl} disabled={!imageUrl || isFetchingFromUrl} aria-busy={isFetchingFromUrl}>
|
||||
{isFetchingFromUrl ? '...' : 'Aggiungi'}
|
||||
</button>
|
||||
<input type="url" placeholder="https://esempio.com/immagine.jpg" value={imageUrl} onChange={(e) => setImageUrl(e.target.value)} disabled={isFetchingFromUrl} />
|
||||
<button onClick={handleFetchFromUrl} disabled={!imageUrl || isFetchingFromUrl} aria-busy={isFetchingFromUrl}>{isFetchingFromUrl ? '...' : 'Aggiungi'}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -243,9 +276,9 @@ function CelebrityProfile() {
|
||||
<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="Nazionalità" name="nationality" value={celebrity.nationality} 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} />
|
||||
<EditableField label="Sessualità" name="sexuality" value={celebrity.sexuality} onSave={handleFieldSave} />
|
||||
</div>
|
||||
<EditableField label="Sito Ufficiale" name="official_website" value={celebrity.official_website} type="url" onSave={handleFieldSave} />
|
||||
</details>
|
||||
|
||||
@@ -3,13 +3,17 @@ 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');
|
||||
throw new Error(errorData.detail || 'Si è verificato un errore');
|
||||
}
|
||||
return response.json();
|
||||
};
|
||||
|
||||
export const getCelebrities = async () => {
|
||||
const response = await fetch(`${API_BASE_URL}/celebrities/`);
|
||||
export const getCelebrities = async (searchTerm = '') => {
|
||||
const params = new URLSearchParams();
|
||||
if (searchTerm) {
|
||||
params.append('search', searchTerm);
|
||||
}
|
||||
const response = await fetch(`${API_BASE_URL}/celebrities/?${params.toString()}`);
|
||||
return handleResponse(response);
|
||||
};
|
||||
|
||||
@@ -47,22 +51,35 @@ export const deleteCelebrity = async (id) => {
|
||||
return response.json(); // O un messaggio di successo
|
||||
};
|
||||
|
||||
// --- NUOVE FUNZIONI PER LE IMMAGINI ---
|
||||
// --- NUOVE FUNZIONI PER GLI ALIAS ---
|
||||
|
||||
export const uploadImage = async (celebrityId, file) => {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
|
||||
const response = await fetch(`${API_BASE_URL}/celebrities/${celebrityId}/images`, {
|
||||
export const addAlias = async (celebrityId, aliasName) => {
|
||||
const response = await fetch(`${API_BASE_URL}/celebrities/${celebrityId}/aliases`, {
|
||||
method: 'POST',
|
||||
body: formData, // Il browser imposta automaticamente l'header Content-Type corretto
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ alias_name: aliasName }),
|
||||
});
|
||||
return handleResponse(response);
|
||||
};
|
||||
|
||||
export const deleteAlias = async (aliasId) => {
|
||||
const response = await fetch(`${API_BASE_URL}/celebrities/aliases/${aliasId}`, {
|
||||
method: 'DELETE',
|
||||
});
|
||||
if (response.status === 204) {
|
||||
return { success: true }; // Nessun contenuto da parsare
|
||||
}
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json();
|
||||
throw new Error(errorData.detail || "Errore durante l'eliminazione dell'alias");
|
||||
}
|
||||
return response.json();
|
||||
};
|
||||
|
||||
// --- FUNZIONI PER LE IMMAGINI ---
|
||||
|
||||
export const uploadImages = async (celebrityId, files) => {
|
||||
const formData = new FormData();
|
||||
// Aggiunge ogni file allo stesso campo 'files'. Il backend lo interpreterà come una lista.
|
||||
files.forEach(file => {
|
||||
formData.append('files', file);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user