139 lines
4.3 KiB
JavaScript
139 lines
4.3 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { Modal, Button, Form } from 'react-bootstrap';
|
|
import api from '../services/api';
|
|
|
|
const BookModal = ({ show, onHide, bookId, genres, onSave }) => {
|
|
const [formData, setFormData] = useState({
|
|
title: '',
|
|
author: '',
|
|
genreId: '',
|
|
price: '',
|
|
description: '',
|
|
image: ''
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (bookId) {
|
|
api.fetchBook(bookId).then(response => {
|
|
const book = response.data;
|
|
setFormData({
|
|
title: book.title,
|
|
author: book.author,
|
|
genreId: book.genreId,
|
|
price: book.price,
|
|
description: book.description,
|
|
image: book.image?.replace('images/', '') || ''
|
|
});
|
|
});
|
|
} else {
|
|
setFormData({
|
|
title: '',
|
|
author: '',
|
|
genreId: genres[0]?.id || '',
|
|
price: '',
|
|
description: '',
|
|
image: ''
|
|
});
|
|
}
|
|
}, [bookId, genres]);
|
|
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault();
|
|
const bookData = {
|
|
...formData,
|
|
price: Number(formData.price),
|
|
genreId: Number(formData.genreId),
|
|
image: formData.image.startsWith('http')
|
|
? formData.image
|
|
: `images/${formData.image}`
|
|
};
|
|
onSave(bookData);
|
|
};
|
|
|
|
return (
|
|
<Modal show={show} onHide={onHide} size="lg">
|
|
<Modal.Header closeButton>
|
|
<Modal.Title>{bookId ? 'Редактировать книгу' : 'Добавить книгу'}</Modal.Title>
|
|
</Modal.Header>
|
|
<Modal.Body>
|
|
<Form onSubmit={handleSubmit}>
|
|
<Form.Group className="mb-3">
|
|
<Form.Label>Название книги</Form.Label>
|
|
<Form.Control
|
|
type="text"
|
|
value={formData.title}
|
|
onChange={(e) => setFormData({...formData, title: e.target.value})}
|
|
required
|
|
/>
|
|
</Form.Group>
|
|
|
|
<Form.Group className="mb-3">
|
|
<Form.Label>Автор</Form.Label>
|
|
<Form.Control
|
|
type="text"
|
|
value={formData.author}
|
|
onChange={(e) => setFormData({...formData, author: e.target.value})}
|
|
required
|
|
/>
|
|
</Form.Group>
|
|
|
|
<Form.Group className="mb-3">
|
|
<Form.Label>Жанр</Form.Label>
|
|
<Form.Select
|
|
value={formData.genreId}
|
|
onChange={(e) => setFormData({...formData, genreId: e.target.value})}
|
|
required
|
|
>
|
|
{genres.map(genre => (
|
|
<option key={genre.id} value={genre.id}>{genre.name}</option>
|
|
))}
|
|
</Form.Select>
|
|
</Form.Group>
|
|
|
|
<Form.Group className="mb-3">
|
|
<Form.Label>Цена</Form.Label>
|
|
<Form.Control
|
|
type="number"
|
|
value={formData.price}
|
|
onChange={(e) => setFormData({...formData, price: e.target.value})}
|
|
required
|
|
min="0"
|
|
/>
|
|
</Form.Group>
|
|
|
|
<Form.Group className="mb-3">
|
|
<Form.Label>Описание</Form.Label>
|
|
<Form.Control
|
|
as="textarea"
|
|
rows={3}
|
|
value={formData.description}
|
|
onChange={(e) => setFormData({...formData, description: e.target.value})}
|
|
required
|
|
/>
|
|
</Form.Group>
|
|
|
|
<Form.Group className="mb-3">
|
|
<Form.Label>Изображение</Form.Label>
|
|
<Form.Control
|
|
type="text"
|
|
value={formData.image}
|
|
onChange={(e) => setFormData({...formData, image: e.target.value})}
|
|
placeholder="Имя файла (например, book.jpg) или полный URL"
|
|
required
|
|
/>
|
|
<Form.Text className="text-muted">
|
|
Можно указать имя файла из папки images (например, "book.jpg") или полный URL изображения
|
|
</Form.Text>
|
|
</Form.Group>
|
|
|
|
<Modal.Footer>
|
|
<Button variant="secondary" onClick={onHide}>Отмена</Button>
|
|
<Button variant="primary" type="submit">Сохранить</Button>
|
|
</Modal.Footer>
|
|
</Form>
|
|
</Modal.Body>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default BookModal; |