5_11

Lab5/Bookfill/src/components/lines/form/BookInfoForm.jsx

@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types';
+import { Button, Form } from 'react-bootstrap';
+import { useNavigate } from 'react-router-dom';
+import InfoForm from './InfoForm.jsx';
+
+const BookInfoForm = ({ item }) => {
+    const navigate = useNavigate();
+
+    const onBack = () => {
+        navigate(-1);
+    };
+
+    return (
+        <>
+            <Form className='m-0 p-2'>
+                <InfoForm item={item} />
+                <Form.Group className='row justify-content-center m-0 mt-3'>
+                    <Button className='col-5 col-lg-2 m-0 me-2' variant='secondary' onClick={() => onBack()}>
+                        Back
+                    </Button>
+                </Form.Group>
+            </Form>
+        </>
+    );
+};
+
+BookInfoForm.propTypes = {
+    item: PropTypes.object,
+};
+
+export default BookInfoForm;

Lab5/Bookfill/src/components/lines/form/InfoForm.jsx

@@ -0,0 +1,52 @@
+import PropTypes from 'prop-types';
+import { FilePost } from 'react-bootstrap-icons';
+import './LinesItemForm.css';
+
+const InfoForm = ({ item }) => {
+    // Функция для конвертации base64 строки в Blob
+    const base64ToBlob = (base64) => {
+        // Кодируем строку base64 обратно в массив байтов
+        const byteCharacters = atob(base64.split(',')[1]);
+        const byteNumbers = Array.from(byteCharacters).map((char) => char.charCodeAt(0));
+        const byteArray = new Uint8Array(byteNumbers);
+
+        // Создаем Blob из типизированного массива байтов
+        return new Blob([byteArray], { type: 'application/pdf' });
+    };
+
+    const openFile = (base64) => {
+        const base64Prefix = 'data:application/pdf;base64,';
+        const content = base64.includes(base64Prefix) ? base64 : `${base64Prefix}${base64}`;
+
+        // Создаем Blob из base64 строки
+        const blob = base64ToBlob(content);
+
+        // Создаем URL для Blob
+        const fileURL = URL.createObjectURL(blob);
+
+        // Открываем URL в новой вкладке
+        window.open(fileURL);
+        // <a onClick={() => openFile(line.datafile)}></a>
+    };
+
+    return (
+        <>
+            <div className='text-center mt-5'>
+                <img id='image-preview' className='rounded' alt='placeholder'
+                    src={item.image} />
+                <div style={{ height: 300, overflow: 'auto' }}>
+                    <p>Name: {item.book_name}</p>
+                    <p>Author: {item.author_name}</p>
+                    <p>Price: {item.price}</p>
+                    <a onClick={() => openFile(item.datafile)}><FilePost /></a>
+                </div>
+            </div>
+        </>
+    );
+};
+
+InfoForm.propTypes = {
+    item: PropTypes.object,
+};
+
+export default InfoForm;

Lab5/Bookfill/src/components/lines/form/LinesItemForm.jsx

@@ -1,45 +1,31 @@
 import PropTypes from 'prop-types';
-import { FilePost } from 'react-bootstrap-icons';
 import './LinesItemForm.css';
+import imgPlaceholder from '../../../assets/200.png';
+import Input from '../../input/Input.jsx';
+import Select from '../../input/Select.jsx';
+import useTypes from '../../types/hooks/TypesHook';
 
-const LinesItemForm = ({ item }) => {
+const LinesItemForm = ({ item, handleChange }) => {
-    // Функция для конвертации base64 строки в Blob
+    const { types } = useTypes();
-    const base64ToBlob = (base64) => {
-        // Кодируем строку base64 обратно в массив байтов
-        const byteCharacters = atob(base64.split(',')[1]);
-        const byteNumbers = Array.from(byteCharacters).map((char) => char.charCodeAt(0));
-        const byteArray = new Uint8Array(byteNumbers);
-
-        // Создаем Blob из типизированного массива байтов
-        return new Blob([byteArray], { type: 'application/pdf' });
-    };
-
-    const openFile = (base64) => {
-        const base64Prefix = 'data:application/pdf;base64,';
-        const content = base64.includes(base64Prefix) ? base64 : `${base64Prefix}${base64}`;
-
-        // Создаем Blob из base64 строки
-        const blob = base64ToBlob(content);
-
-        // Создаем URL для Blob
-        const fileURL = URL.createObjectURL(blob);
-
-        // Открываем URL в новой вкладке
-        window.open(fileURL);
-        // <a onClick={() => openFile(line.datafile)}></a>
-    };
-
     return (
         <>
-            <div className='text-center mt-5'>
+            <div className='text-center'>
                 <img id='image-preview' className='rounded' alt='placeholder'
-                    src={item.image} />
+                    src={item.image || imgPlaceholder} />
-                <div style={{ height: 300, overflow: 'auto' }}>
+            </div >
-                    <p>Name: {item.book_name}</p>
+            <div style={{ height: 300, overflow: 'auto' }}>
-                    <p>Author: {item.author_name}</p>
+                <Input name='book_name' label='Name' value={item.book_name} onChange={handleChange}
-                    <p>Price: {item.price}</p>
+                    type='text' required />
-                    <a onClick={() => openFile(item.datafile)}><FilePost /></a>
+                <Select values={types} name='typeId' label='Type' value={item.typeId} onChange={handleChange}
-                </div>
+                    required />
+                <Input name='author_name' label='Author' value={item.author_name} onChange={handleChange}
+                    type='text' required />
+                <Input name='price' label='Price' value={item.price} onChange={handleChange}
+                    type='number' min='50.0' step='1.0' required />
+                <Input name='image' label='Image' onChange={handleChange}
+                    type='file' accept='image/*' />
+                <Input name='datafile' label='file' onChange={handleChange}
+                    type='file' accept='application/pdf/*' />
             </div>
         </>
     );
@@ -47,6 +33,7 @@ const LinesItemForm = ({ item }) => {
 
 LinesItemForm.propTypes = {
     item: PropTypes.object,
+    handleChange: PropTypes.func,
 };
 
 export default LinesItemForm;

Lab5/Bookfill/src/pages/PageEdit.jsx

@@ -1,13 +1,13 @@
 import { useParams } from 'react-router-dom';
-import LinesForm from '../components/lines/form/LinesForm.jsx';
 import useLinesItem from '../components/lines/hooks/LinesItemHook';
+import BookInfoForm from '../components/lines/form/BookInfoForm.jsx';
 
 const PageEdit = () => {
     const { id } = useParams();
     const { item } = useLinesItem(id);
 
     return (
-        <LinesForm item={item} />
+        <BookInfoForm item={item} />
     );
 };