Начало
This commit is contained in:
DyCTaTOR
parent
f6f3c8fa1b
commit
c1c2a85f70
File diff suppressed because one or more lines are too long
31
Lab5/src/components/lines/News/UpdateNew.jsx
Normal file
31
Lab5/src/components/lines/News/UpdateNew.jsx
Normal file
@ -0,0 +1,31 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import {
|
||||
PencilFill, Trash3,
|
||||
} from 'react-bootstrap-icons';
|
||||
|
||||
const UpdateNew = ({ item, onEdit, onDelete }) => {
|
||||
const handleAnchorClick = (event, action) => {
|
||||
event.preventDefault();
|
||||
action();
|
||||
};
|
||||
return (
|
||||
<div className="col mb-4">
|
||||
<div className="rectNews d-flex flex-column">
|
||||
<img className="rectNew" 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
UpdateNew.propTypes = {
|
||||
item: PropTypes.object,
|
||||
onDelete: PropTypes.func,
|
||||
onEdit: PropTypes.func,
|
||||
};
|
||||
|
||||
export default UpdateNew;
|
||||
53
Lab5/src/components/lines/News/UpdateNews.jsx
Normal file
53
Lab5/src/components/lines/News/UpdateNews.jsx
Normal file
@ -0,0 +1,53 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { useState, useEffect } from 'react';
|
||||
import UpdateNew from './UpdateNew.jsx';
|
||||
import useLinesDeleteModal from '../hooks/LinesDeleteModalHook';
|
||||
import useLinesFormModal from '../hooks/LinesFormModalHook';
|
||||
import useTypeFilter from '../hooks/LinesFilterHook';
|
||||
import useLines from '../hooks/LinesHook';
|
||||
|
||||
const UpdateNews = () => {
|
||||
const [news, setNews] = useState([]);
|
||||
const clearNews = () => {
|
||||
setNews([]);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
const data = 4;
|
||||
setNews(data);
|
||||
};
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
const { currentFilter } = useTypeFilter();
|
||||
|
||||
const { handleLinesChange } = useLines(currentFilter);
|
||||
|
||||
const {
|
||||
showDeleteModal,
|
||||
} = useLinesDeleteModal(handleLinesChange);
|
||||
|
||||
const {
|
||||
showFormModal,
|
||||
} = useLinesFormModal(handleLinesChange);
|
||||
|
||||
clearNews();
|
||||
return (
|
||||
<div className="mainDiv row">
|
||||
{news.map((item) => (
|
||||
<UpdateNew key={item.id}
|
||||
item={item}
|
||||
onDelete={() => showDeleteModal(item.id)}
|
||||
onEdit={() => showFormModal(item.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
UpdateNews.propTypes = {
|
||||
item: PropTypes.object,
|
||||
};
|
||||
|
||||
export default UpdateNews;
|
||||
@ -1,6 +1,5 @@
|
||||
import { Button, ButtonGroup } from 'react-bootstrap';
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
import useCart from '../../cart/CartHook';
|
||||
import { Link } from 'react-router-dom';
|
||||
import Select from '../../input/Select.jsx';
|
||||
import ModalConfirm from '../../modal/ModalConfirm.jsx';
|
||||
import ModalForm from '../../modal/ModalForm.jsx';
|
||||
@ -34,14 +33,6 @@ const Lines = () => {
|
||||
handleFormClose,
|
||||
} = useLinesFormModal(handleLinesChange);
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const showEditPage = (id) => {
|
||||
navigate(`/page-edit/${id}`);
|
||||
};
|
||||
|
||||
const { addToCart } = useCart();
|
||||
|
||||
return (
|
||||
<>
|
||||
<ButtonGroup>
|
||||
@ -59,10 +50,8 @@ const Lines = () => {
|
||||
lines.map((line, index) =>
|
||||
<LinesTableRow key={line.id}
|
||||
index={index} line={line}
|
||||
onAddCart={() => addToCart(line)}
|
||||
onDelete={() => showDeleteModal(line.id)}
|
||||
onEdit={() => showFormModal(line.id)}
|
||||
onEditInPage={() => showEditPage(line.id)}
|
||||
/>)
|
||||
}
|
||||
</LinesTable>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import {
|
||||
Cart, PencilFill, PencilSquare, Trash3,
|
||||
PencilFill, Trash3,
|
||||
} from 'react-bootstrap-icons';
|
||||
|
||||
const LinesTableRow = ({
|
||||
index, line, onAddCart, onDelete, onEdit, onEditInPage,
|
||||
index, line, onDelete, onEdit,
|
||||
}) => {
|
||||
const handleAnchorClick = (event, action) => {
|
||||
event.preventDefault();
|
||||
@ -18,9 +18,7 @@ const LinesTableRow = ({
|
||||
<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, 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>
|
||||
);
|
||||
@ -29,10 +27,8 @@ const LinesTableRow = ({
|
||||
LinesTableRow.propTypes = {
|
||||
index: PropTypes.number,
|
||||
line: PropTypes.object,
|
||||
onAddCart: PropTypes.func,
|
||||
onDelete: PropTypes.func,
|
||||
onEdit: PropTypes.func,
|
||||
onEditInPage: PropTypes.func,
|
||||
};
|
||||
|
||||
export default LinesTableRow;
|
||||
|
||||
@ -2,13 +2,10 @@ import PropTypes from 'prop-types';
|
||||
import {
|
||||
Container, Nav, Navbar, Image,
|
||||
} from 'react-bootstrap';
|
||||
import { Cart2 } from 'react-bootstrap-icons';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
import useCart from '../cart/CartHook';
|
||||
import './Navigation.css';
|
||||
|
||||
const Navigation = ({ routes }) => {
|
||||
const { getCartSum } = useCart();
|
||||
const location = useLocation();
|
||||
const indexPageLink = routes.filter((route) => route.index === false).shift();
|
||||
const pages = routes.filter((route) => Object.prototype.hasOwnProperty.call(route, 'title'));
|
||||
@ -30,11 +27,6 @@ const Navigation = ({ routes }) => {
|
||||
</Nav.Link>)
|
||||
}
|
||||
</Nav>
|
||||
<Nav>
|
||||
<Navbar.Brand as={Link} to='/cart'>
|
||||
<Cart2 className='d-inline-block align-top me-1 logo' /> {getCartSum() ?? ''} ₽
|
||||
</Navbar.Brand>
|
||||
</Nav>
|
||||
</Navbar.Collapse>
|
||||
</Container>
|
||||
</Navbar >
|
||||
|
||||
@ -18,22 +18,22 @@ const routes = [
|
||||
index: true,
|
||||
path: '/',
|
||||
element: <Page1 />,
|
||||
title: 'Главная страница',
|
||||
title: 'Новости',
|
||||
},
|
||||
{
|
||||
path: '/page2',
|
||||
element: <Page2 />,
|
||||
title: 'Вторая страница',
|
||||
title: 'Об университете',
|
||||
},
|
||||
{
|
||||
path: '/page3',
|
||||
element: <Page3 />,
|
||||
title: 'Третья страница',
|
||||
title: 'Абитуриенту',
|
||||
},
|
||||
{
|
||||
path: '/page4',
|
||||
element: <Page4 />,
|
||||
title: 'Четвертая страница',
|
||||
title: 'Вход',
|
||||
},
|
||||
{
|
||||
path: '/page5',
|
||||
|
||||
@ -1,67 +1,8 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
import {
|
||||
Container, Button, Row, Col, Image,
|
||||
} from 'react-bootstrap';
|
||||
import UpdateNews from '../components/lines/News/UpdateNews.jsx';
|
||||
|
||||
const Page1 = () => {
|
||||
return (
|
||||
<>
|
||||
<Container className="col text-center">
|
||||
<span className="mainSt">
|
||||
<b>Новости</b>
|
||||
</span>
|
||||
<div className="text-center">
|
||||
<Button as={Link} to="/admin" variant="primary" className="btn btn-primary w-auto" type="button">
|
||||
Добавить новость
|
||||
</Button>
|
||||
</div>
|
||||
<Row>
|
||||
<Col className="mb-4">
|
||||
<div className="rectNews d-flex flex-column">
|
||||
<Image src="./images/New1.png" alt="New1" width="100%" />
|
||||
<div className="rectNewsTextBox">
|
||||
<span className="rectNewsText">
|
||||
<b>УлГТУ вошёл в топ-250 лучших вузов</b>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
<Col className="mb-4">
|
||||
<div className="rectNews d-flex flex-column position-relative">
|
||||
<Image src="./images/New2.png" alt="New2" width="100%" />
|
||||
<div className="rectNewsTextBox">
|
||||
<span className="rectNewsText">
|
||||
<b>“Мосты в будущее” будут видны из УлГТУ</b>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col className="mb-4">
|
||||
<div className="rectNews d-flex flex-column position-relative">
|
||||
<Image src="./images/New3.png" alt="New3" width="100%" />
|
||||
<div className="rectNewsTextBox">
|
||||
<span className="rectNewsText">
|
||||
<b>Поправки в системе работы приёмной комиссии</b>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
<Col className="mb-4">
|
||||
<div className="rectNews d-flex flex-column position-relative">
|
||||
<Image src="./images/New4.png" alt="New4" width="100%" />
|
||||
<div className="rectNewsTextBox">
|
||||
<span className="rectNewsText">
|
||||
<b>Студенты возвращаются к учёбе после
|
||||
зимней сессии позже, чем раньше</b>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
</>
|
||||
<UpdateNews />
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user