Почти готовая сущность

Lab5/src/components/footer/Footer.css

@@ -1,3 +1,8 @@
+@media (max-width: 770px) {
+    .my-footer{
+        font-size: 12px;
+    }
+}
 .my-footer {
     background-color: #454545;
     height: 32px;

Lab5/src/components/lines/News/UpdateNew.jsx

@@ -3,7 +3,9 @@ import {
     PencilFill, Trash3,
 } from 'react-bootstrap-icons';
 
-const UpdateNew = ({ item, onEdit, onDelete }) => {
+const UpdateNew = ({
+    item, onEdit, onDelete,
+}) => {
     const handleAnchorClick = (event, action) => {
         event.preventDefault();
         action();
@@ -11,11 +13,13 @@ const UpdateNew = ({ item, onEdit, onDelete }) => {
     return (
         <div className="col mb-4">
             <div className="rectNews d-flex flex-column">
-                <img className="rectNew" src={item.image} width="100%" alt={item.name} />
+                <img src={item.image} width="100%" alt={item.name} />
                 <div className="rectNewsTextBox text-center">
-                    <span className="rectNewsText">{item.description}</span>
+                    <span className="rectNewsText">
-                    <td><a href="#" onClick={(event) => handleAnchorClick(event, onEdit)}><PencilFill /></a></td>
+                        <a href="#" onClick={(event) => handleAnchorClick(event, onEdit)}><PencilFill /></a>
-                    <td><a href="#" onClick={(event) => handleAnchorClick(event, onDelete)}><Trash3 /></a></td>
+                        <a href="#" onClick={(event) => handleAnchorClick(event, onDelete)}><Trash3 /></a>
+                        {item.description}
+                    </span>
                 </div>
             </div>
         </div>
@@ -23,6 +27,7 @@ const UpdateNew = ({ item, onEdit, onDelete }) => {
 };
 
 UpdateNew.propTypes = {
+    index: PropTypes.number,
     item: PropTypes.object,
     onDelete: PropTypes.func,
     onEdit: PropTypes.func,

Lab5/src/components/lines/News/UpdateNews.jsx

@@ -1,33 +1,56 @@
 import PropTypes from 'prop-types';
 import { useState, useEffect } from 'react';
+import {
+    Button, Container,
+} from 'react-bootstrap';
+
+import ModalConfirm from '../../modal/ModalConfirm.jsx';
+import ModalForm from '../../modal/ModalForm.jsx';
 import UpdateNew from './UpdateNew.jsx';
 import useLinesDeleteModal from '../hooks/LinesDeleteModalHook';
 import useLinesFormModal from '../hooks/LinesFormModalHook';
 import LinesApiService from '../service/LinesApiService';
+import LinesItemForm from '../form/LinesItemForm.jsx';
 
 const UpdateNews = () => {
     const [news, setNews] = useState([]);
-    const newsArray = Array.from(news);
     useEffect(() => {
-    const expand = 'lines';
     const fetchData = async () => {
-        const data = LinesApiService.getAll(expand);
+        const data = await LinesApiService.getAll();
-        setNews(data);
+        setNews(data ?? []);
     };
     fetchData();
     }, []);
 
     const {
+        isDeleteModalShow,
         showDeleteModal,
+        handleDeleteConfirm,
+        handleDeleteCancel,
     } = useLinesDeleteModal();
 
     const {
+        isFormModalShow,
+        isFormValidated,
         showFormModal,
+        currentItem,
+        handleItemChange,
+        handleFormSubmit,
+        handleFormClose,
     } = useLinesFormModal();
 
     return (
+        <>
+        <Container className="col text-center">
+            <span className="mainSt">
+                <b>Новости</b>
+            </span>
+            <div className="text-center">
+                <Button variant='info' onClick={() => showFormModal()}>
+                Добавить товар</Button>
+            </div>
         <div className="mainDiv row">
-            {newsArray.map((item) => (
+            {news.map((item) => (
                 <UpdateNew key={item.id}
                 item={item}
                 onDelete={() => showDeleteModal(item.id)}
@@ -35,6 +58,16 @@ const UpdateNews = () => {
                 />
             ))}
         </div>
+        <ModalConfirm show={isDeleteModalShow}
+            onConfirm={handleDeleteConfirm} onClose={handleDeleteCancel}
+            title='Удаление' message='Удалить элемент?' />
+        <ModalForm show={isFormModalShow} validated={isFormValidated}
+            onSubmit={handleFormSubmit} onClose={handleFormClose}
+            title='Редактирование'>
+            <LinesItemForm item={currentItem} handleChange={handleItemChange} />
+        </ModalForm>
+        </Container>
+        </>
     );
 };
 

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

@@ -1,25 +1,19 @@
 import PropTypes from 'prop-types';
 import imgPlaceholder from '../../../assets/200.png';
 import Input from '../../input/Input.jsx';
-import Select from '../../input/Select.jsx';
-import useTypes from '../../types/hooks/TypesHook';
 import './LinesItemForm.css';
 
 const LinesItemForm = ({ item, handleChange }) => {
-    const { types } = useTypes();
-
     return (
         <>
             <div className='text-center'>
                 <img id='image-preview' className='rounded' alt='placeholder'
                     src={item.image || imgPlaceholder} />
             </div>
-            <Select values={types} name='typeId' label='Товары' value={item.typeId} onChange={handleChange}
+            <Input name='name' label='Название' value = {item.name} onChange={handleChange}
-                required />
+                type='text' required />
-            <Input name='price' label='Цена' value={item.price} onChange={handleChange}
+            <Input name='description' label='Описание' value = {item.description} onChange={handleChange}
-                type='number' min='1000.0' step='0.50' required />
+                type='text' required />
-            <Input name='count' label='Количество' value={item.count} onChange={handleChange}
-                type='number' min='1' step='1' required />
             <Input name='image' label='Изображение' onChange={handleChange}
                 type='file' accept='image/*' />
         </>

Lab5/src/components/lines/hooks/LinesItemFormHook.js

@@ -13,17 +13,23 @@ const useLinesItemForm = (id, linesChangeHandle) => {
         setValidated(false);
     };
 
+    const getRealDate = () => {
+        const date = new Date();
+        const year = date.getFullYear();
+        const month = `0${date.getMonth() + 1}`.slice(-2);
+        const day = `0${date.getDate()}`.slice(-2);
+        return `${year}-${month}-${day}`;
+    };
+
     const getLineObject = (formData) => {
-        const typeId = parseInt(formData.typeId, 10);
+        const date = getRealDate;
-        const price = parseFloat(formData.price).toFixed(2);
+        const name = toString(formData.description);
-        const count = parseInt(formData.count, 10);
+        const description = toString(formData.description);
-        const sum = parseFloat(price * count).toFixed(2);
         const image = formData.image.startsWith('data:image') ? formData.image : '';
         return {
-            typeId: typeId.toString(),
+            date: date.toString(),
-            price: price.toString(),
+            name: name.toString(),
-            count: count.toString(),
+            description: description.toString(),
-            sum: sum.toString(),
             image,
         };
     };

Lab5/src/components/lines/hooks/LinesItemHook.js

@@ -4,9 +4,9 @@ import LinesApiService from '../service/LinesApiService';
 const useLinesItem = (id) => {
     const emptyItem = {
         id: '',
-        typeId: '',
+        date: '',
-        price: '0',
+        name: '',
-        count: '0',
+        description: '',
         image: '',
     };
     const [item, setItem] = useState({ ...emptyItem });

Lab5/src/index.css

@@ -1,3 +1,27 @@
+@media (max-width: 770px) {
+    .rectNews{
+        width: 270px !important;
+        height: 175px !important;
+        margin-left: 45 !important;
+        margin-top: 30 !important;
+    }
+    .rectNewsTextBox{
+        width : 270px !important;
+    }
+    .rectnewsText{
+        font-size : 13px !important;
+    }
+    .footer{
+        font-size: 12px;
+    }
+    .stsp{
+        margin-top: 0 !important;
+    }
+    .rectPage4{
+        width : 340px !important;
+        height : 210px !important;
+    }
+}
 h1 {
     font-size: 1.5em;
 }
@@ -84,10 +108,6 @@ h3 {
     color: #000000;
     font-size: 15px;
 }
-.rectNew{
-    border-radius: 21px;
-    border: 3px #2582A3 solid;
-}
 .stsp{
     font-size: 30px;
     color: #333333;