5_2
This commit is contained in:
GokaPek
parent
4b600870f7
commit
efc2bd6e7d
File diff suppressed because one or more lines are too long
@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>My shop</title>
|
||||
<title>BooFill</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart2" viewBox="0 0 16 16">
|
||||
<path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l1.25 5h8.22l1.25-5H3.14zM5 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"/>
|
||||
<path d="M0 0v16h16V0H0zm15 15H1V1h13v13zM1 0a1 1 0 0 0-1 1v13a1 1 0 0 0 1 1h1V1h1v14h1V1h1v14h1V1h1v14h1V1h1v14h1V1h1v14h1V1h1v13a1 1 0 0 0 1 1h1V1a1 1 0 0 0-1-1h-2z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 463 B After Width: | Height: | Size: 302 B |
@ -14,6 +14,7 @@ const Input = ({
|
||||
|
||||
Input.propTypes = {
|
||||
name: PropTypes.string,
|
||||
book_name: PropTypes.string,
|
||||
label: PropTypes.string,
|
||||
value: PropTypes.string,
|
||||
onChange: PropTypes.func,
|
||||
|
||||
@ -8,7 +8,7 @@ const Select = ({
|
||||
<Form.Group className={`mb-2 ${className || ''}`} controlId={name}>
|
||||
<Form.Label className='form-label'>{label}</Form.Label>
|
||||
<Form.Select name={name || ''} value={value || ''} onChange={onChange} {...rest}>
|
||||
<option value=''>Выберите значение</option>
|
||||
<option value=''>Choose variant</option>
|
||||
{
|
||||
values.map((type) => <option key={type.id} value={type.id}>{type.name}</option>)
|
||||
}
|
||||
@ -20,6 +20,7 @@ const Select = ({
|
||||
Select.propTypes = {
|
||||
values: PropTypes.array,
|
||||
name: PropTypes.string,
|
||||
book_name: PropTypes.string,
|
||||
label: PropTypes.string,
|
||||
value: PropTypes.string,
|
||||
onChange: PropTypes.func,
|
||||
|
||||
@ -14,10 +14,12 @@ const LinesItemForm = ({ item, handleChange }) => {
|
||||
<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='book_name' label='Name' value={item.book_name} onChange={handleChange}
|
||||
type='text' required />
|
||||
<Select values={types} name='typeId' label='Type' 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='price' label='Price' value={item.price} onChange={handleChange}
|
||||
type='number' min='50.0' step='1.0' required />
|
||||
<Input name='count' label='Количество' value={item.count} onChange={handleChange}
|
||||
type='number' min='1' step='1' required />
|
||||
<Input name='image' label='Изображение' onChange={handleChange}
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
/* eslint-disable prefer-destructuring */
|
||||
import { useState } from 'react';
|
||||
import toast from 'react-hot-toast';
|
||||
import getBase64FromFile from '../../utils/Base64';
|
||||
@ -15,15 +16,17 @@ const useLinesItemForm = (id, linesChangeHandle) => {
|
||||
|
||||
const getLineObject = (formData) => {
|
||||
const typeId = parseInt(formData.typeId, 10);
|
||||
// eslint-disable-next-line camelcase
|
||||
const book_name = formData.book_name;
|
||||
const price = parseFloat(formData.price).toFixed(2);
|
||||
const count = parseInt(formData.count, 10);
|
||||
const sum = parseFloat(price * count).toFixed(2);
|
||||
const image = formData.image.startsWith('data:image') ? formData.image : '';
|
||||
return {
|
||||
typeId: typeId.toString(),
|
||||
// eslint-disable-next-line object-shorthand, camelcase
|
||||
book_name: book_name,
|
||||
price: price.toString(),
|
||||
count: count.toString(),
|
||||
sum: sum.toString(),
|
||||
image,
|
||||
};
|
||||
};
|
||||
@ -62,7 +65,7 @@ const useLinesItemForm = (id, linesChangeHandle) => {
|
||||
await LinesApiService.update(id, body);
|
||||
}
|
||||
if (linesChangeHandle) linesChangeHandle();
|
||||
toast.success('Элемент успешно сохранен', { id: 'LinesTable' });
|
||||
toast.success('Element saved', { id: 'LinesTable' });
|
||||
return true;
|
||||
}
|
||||
setValidated(true);
|
||||
|
||||
@ -4,6 +4,7 @@ import LinesApiService from '../service/LinesApiService';
|
||||
const useLinesItem = (id) => {
|
||||
const emptyItem = {
|
||||
id: '',
|
||||
book_name: '',
|
||||
typeId: '',
|
||||
price: '0',
|
||||
count: '0',
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import { Button, ButtonGroup } from 'react-bootstrap';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import useCart from '../../cart/CartHook';
|
||||
import Select from '../../input/Select.jsx';
|
||||
import ModalConfirm from '../../modal/ModalConfirm.jsx';
|
||||
@ -34,22 +33,16 @@ const Lines = () => {
|
||||
handleFormClose,
|
||||
} = useLinesFormModal(handleLinesChange);
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const showEditPage = (id) => {
|
||||
navigate(`/page-edit/${id}`);
|
||||
};
|
||||
|
||||
const { addToCart } = useCart();
|
||||
|
||||
return (
|
||||
<>
|
||||
<ButtonGroup>
|
||||
<Button variant='info' onClick={() => showFormModal()}>
|
||||
Добавить товар
|
||||
Add book
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
<Select className='mt-2' values={types} label='Фильтр по товарам'
|
||||
<Select className='mt-2' values={types} label='Filter by type'
|
||||
value={currentFilter} onChange={handleFilterChange} />
|
||||
<LinesTable>
|
||||
{
|
||||
@ -59,16 +52,15 @@ const Lines = () => {
|
||||
onAddCart={() => addToCart(line)}
|
||||
onDelete={() => showDeleteModal(line.id)}
|
||||
onEdit={() => showFormModal(line.id)}
|
||||
onEditInPage={() => showEditPage(line.id)}
|
||||
/>)
|
||||
}
|
||||
</LinesTable>
|
||||
<ModalConfirm show={isDeleteModalShow}
|
||||
onConfirm={handleDeleteConfirm} onClose={handleDeleteCancel}
|
||||
title='Удаление' message='Удалить элемент?' />
|
||||
title='Delete' message='Delete element?' />
|
||||
<ModalForm show={isFormModalShow} validated={isFormValidated}
|
||||
onSubmit={handleFormSubmit} onClose={handleFormClose}
|
||||
title='Редактирование'>
|
||||
title='Change'>
|
||||
<LinesItemForm item={currentItem} handleChange={handleItemChange} />
|
||||
</ModalForm>
|
||||
</>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import {
|
||||
Cart, PencilFill, PencilSquare, Trash3,
|
||||
PencilFill, Trash3, Heart,
|
||||
} from 'react-bootstrap-icons';
|
||||
|
||||
const LinesTableRow = ({
|
||||
index, line, onAddCart, onDelete, onEdit, onEditInPage,
|
||||
index, line, onAddCart, onDelete, onEdit,
|
||||
}) => {
|
||||
const handleAnchorClick = (event, action) => {
|
||||
event.preventDefault();
|
||||
@ -14,13 +14,12 @@ const LinesTableRow = ({
|
||||
return (
|
||||
<tr>
|
||||
<th scope="row">{index + 1}</th>
|
||||
<td>{line.book_name}</td>
|
||||
<td>{line.type.name}</td>
|
||||
<td>{parseFloat(line.price).toFixed(2)}</td>
|
||||
<td>{line.count}</td>
|
||||
<td>{parseFloat(line.sum).toFixed(2)}</td>
|
||||
<td><a href="#" onClick={(event) => handleAnchorClick(event, onAddCart)}><Cart /></a></td>
|
||||
<td><a href="#" onClick={(event) => handleAnchorClick(event, onAddCart)}><Heart /></a></td>
|
||||
<td><a href="#" onClick={(event) => handleAnchorClick(event, onEdit)}><PencilFill /></a></td>
|
||||
<td><a href="#" onClick={(event) => handleAnchorClick(event, onEditInPage)}><PencilSquare /></a></td>
|
||||
<td><a href="#" onClick={(event) => handleAnchorClick(event, onDelete)}><Trash3 /></a></td>
|
||||
</tr>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user