97 lines
2.9 KiB
React
97 lines
2.9 KiB
React
|
import { useState } from 'react';
|
||
|
|
import { useReturns } from '../context/ReturnContext';
|
||
|
|
import { getBooks } from '../api/books';
|
||
|
|
import { useEffect } from 'react';
|
||
|
|
|
||
|
|
export default function Returns() {
|
||
|
|
const { returns, addReturn } = useReturns();
|
||
|
|
const [books, setBooks] = useState([]);
|
||
|
|
const [form, setForm] = useState({ bookId: '', customerPhone: '', reason: '' });
|
||
|
|
const [message, setMessage] = useState(null);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
getBooks(0, 100).then(res => setBooks(res.data.content)).catch(console.error);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
function handleChange(e) {
|
||
|
|
const { name, value } = e.target;
|
||
|
|
setForm(f => ({ ...f, [name]: value }));
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleSubmit(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
const book = books.find(b => String(b.isbn) === String(form.bookId));
|
||
|
|
const bookTitle = book ? book.title : form.bookId;
|
||
|
|
addReturn(form.bookId, bookTitle, form.customerPhone, form.reason);
|
||
|
|
setMessage({ success: true, text: 'Retour enregistré avec succès !' });
|
||
|
|
setForm({ bookId: '', customerPhone: '', reason: '' });
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<main>
|
||
|
|
<h1>Gestion des retours</h1>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<h2>Enregistrer un retour</h2>
|
||
|
|
<form onSubmit={handleSubmit}>
|
||
|
|
<label>
|
||
|
|
Livre :
|
||
|
|
<select name="bookId" value={form.bookId} onChange={handleChange} required>
|
||
|
|
<option value="">-- Choisir un livre --</option>
|
||
|
|
{books.map(b => (
|
||
|
|
<option key={b.isbn} value={b.isbn}>{b.title} — {b.author}</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
</label>
|
||
|
|
<label>
|
||
|
|
Téléphone du client :
|
||
|
|
<input
|
||
|
|
name="customerPhone"
|
||
|
|
type="tel"
|
||
|
|
value={form.customerPhone}
|
||
|
|
onChange={handleChange}
|
||
|
|
placeholder="0612345678"
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
</label>
|
||
|
|
<label>
|
||
|
|
Motif :
|
||
|
|
<textarea
|
||
|
|
name="reason"
|
||
|
|
value={form.reason}
|
||
|
|
onChange={handleChange}
|
||
|
|
placeholder="Motif du retour..."
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
</label>
|
||
|
|
<button type="submit">Enregistrer le retour</button>
|
||
|
|
</form>
|
||
|
|
{message && <p style={{ color: message.success ? 'green' : 'red' }}>{message.text}</p>}
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<h2>Historique des retours</h2>
|
||
|
|
{returns.length === 0 ? (
|
||
|
|
<p>Aucun retour enregistré.</p>
|
||
|
|
) : (
|
||
|
|
<ul>
|
||
|
|
{returns.map(r => (
|
||
|
|
<li key={r.returnId}>
|
||
|
|
<strong>{r.bookTitle}</strong>
|
||
|
|
<br />
|
||
|
|
Client : {r.customerPhone}
|
||
|
|
<br />
|
||
|
|
Motif : {r.reason}
|
||
|
|
<br />
|
||
|
|
Statut : {r.status}
|
||
|
|
<br />
|
||
|
|
<small>{new Date(r.returnedAt).toLocaleDateString('fr-FR')}</small>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
)}
|
||
|
|
</section>
|
||
|
|
</main>
|
||
|
|
);
|
||
|
|
}
|