Почти готовая сущность
This commit is contained in:
DyCTaTOR
parent
f443116b87
commit
4e0eb5ccfa
File diff suppressed because one or more lines are too long
@ -1,3 +1,8 @@
|
||||
@media (max-width: 770px) {
|
||||
.my-footer{
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.my-footer {
|
||||
background-color: #454545;
|
||||
height: 32px;
|
||||
|
||||
@ -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>
|
||||
<td><a href="#" onClick={(event) => handleAnchorClick(event, onEdit)}><PencilFill /></a></td>
|
||||
<td><a href="#" onClick={(event) => handleAnchorClick(event, onDelete)}><Trash3 /></a></td>
|
||||
<span className="rectNewsText">
|
||||
<a href="#" onClick={(event) => handleAnchorClick(event, onEdit)}><PencilFill /></a>
|
||||
<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,
|
||||
|
||||
@ -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);
|
||||
setNews(data);
|
||||
const data = await LinesApiService.getAll();
|
||||
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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -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}
|
||||
required />
|
||||
<Input name='price' label='Цена' value={item.price} onChange={handleChange}
|
||||
type='number' min='1000.0' step='0.50' required />
|
||||
<Input name='count' label='Количество' value={item.count} onChange={handleChange}
|
||||
type='number' min='1' step='1' required />
|
||||
<Input name='name' label='Название' value = {item.name} onChange={handleChange}
|
||||
type='text' required />
|
||||
<Input name='description' label='Описание' value = {item.description} onChange={handleChange}
|
||||
type='text' required />
|
||||
<Input name='image' label='Изображение' onChange={handleChange}
|
||||
type='file' accept='image/*' />
|
||||
</>
|
||||
|
||||
@ -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 price = parseFloat(formData.price).toFixed(2);
|
||||
const count = parseInt(formData.count, 10);
|
||||
const sum = parseFloat(price * count).toFixed(2);
|
||||
const date = getRealDate;
|
||||
const name = toString(formData.description);
|
||||
const description = toString(formData.description);
|
||||
const image = formData.image.startsWith('data:image') ? formData.image : '';
|
||||
return {
|
||||
typeId: typeId.toString(),
|
||||
price: price.toString(),
|
||||
count: count.toString(),
|
||||
sum: sum.toString(),
|
||||
date: date.toString(),
|
||||
name: name.toString(),
|
||||
description: description.toString(),
|
||||
image,
|
||||
};
|
||||
};
|
||||
|
||||
@ -4,9 +4,9 @@ import LinesApiService from '../service/LinesApiService';
|
||||
const useLinesItem = (id) => {
|
||||
const emptyItem = {
|
||||
id: '',
|
||||
typeId: '',
|
||||
price: '0',
|
||||
count: '0',
|
||||
date: '',
|
||||
name: '',
|
||||
description: '',
|
||||
image: '',
|
||||
};
|
||||
const [item, setItem] = useState({ ...emptyItem });
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user