From 98fe38ecb479a53fa3822918f5fe4f1132fde61a Mon Sep 17 00:00:00 2001
From: Zakharov_Rostislav <r.z.8102.80@gmail.com>
Date: Tue, 5 Dec 2023 00:10:23 +0400
Subject: [PATCH] lab4 some minor fixes
---
.../src/components/navigation/Navigation.jsx | 6 +--
ReactLibrary/src/main.jsx | 11 +++++
ReactLibrary/src/pages/AuthorEdit.jsx | 2 +-
ReactLibrary/src/pages/BookEdit.jsx | 2 +-
ReactLibrary/src/pages/CategoryEdit.jsx | 2 +-
ReactLibrary/src/pages/MainPage.jsx | 2 +-
ReactLibrary/src/pages/SearchForm.jsx | 45 +++++++++++++++++++
ReactLibrary/src/pages/SearchResults.jsx | 28 ++++++++++++
8 files changed, 91 insertions(+), 7 deletions(-)
create mode 100644 ReactLibrary/src/pages/SearchForm.jsx
create mode 100644 ReactLibrary/src/pages/SearchResults.jsx
diff --git a/ReactLibrary/src/components/navigation/Navigation.jsx b/ReactLibrary/src/components/navigation/Navigation.jsx
index 46470e4..be61903 100644
--- a/ReactLibrary/src/components/navigation/Navigation.jsx
+++ b/ReactLibrary/src/components/navigation/Navigation.jsx
@@ -10,7 +10,7 @@ const Navigation = ({ routes }) => {
const pages = routes.filter((route) => Object.prototype.hasOwnProperty.call(route, 'title'));
return (
<header>
- <Navbar expand='md' bg='light' data-bs-theme='light' className='my-navbar'>
+ <Navbar expand='lg' bg='light' data-bs-theme='light' className='my-navbar'>
<Container fluid>
<Navbar.Brand as={Link} to={indexPageLink?.path ?? '/'} className='logo'>
<BookHalf className='d-inline-block align-top me-1 logoImage' />
@@ -18,7 +18,7 @@ const Navigation = ({ routes }) => {
</Navbar.Brand>
<Navbar.Toggle aria-controls='main-navbar' />
<Navbar.Collapse id='main-navbar'>
- <Nav className='me-auto link' activeKey={location.pathname}>
+ <Nav className='ms-auto link' activeKey={location.pathname}>
{
pages.map((page) =>
<Nav.Link as={Link} key={page.path} eventKey={page.path} to={page.path ?? '/'}>
@@ -28,7 +28,7 @@ const Navigation = ({ routes }) => {
</Nav>
</Navbar.Collapse>
</Container>
- </Navbar >
+ </Navbar>
</header>
);
};
diff --git a/ReactLibrary/src/main.jsx b/ReactLibrary/src/main.jsx
index b4e60ba..329c988 100644
--- a/ReactLibrary/src/main.jsx
+++ b/ReactLibrary/src/main.jsx
@@ -18,6 +18,8 @@ import LoginPage from './pages/LoginPage.jsx';
import BookEdit from './pages/BookEdit.jsx';
import CategoryEdit from './pages/CategoryEdit.jsx';
import AuthorEdit from './pages/AuthorEdit.jsx';
+import SearchForm from './pages/SearchForm.jsx';
+import SearchResults from './pages/SearchResults.jsx';
const routes = [
{
@@ -36,6 +38,11 @@ const routes = [
element: <UserPage/>,
title: 'Личный кабинет',
},
+ {
+ path: '/search-form',
+ element: <SearchForm/>,
+ title: 'Поиск',
+ },
{
path: '/admin-page',
element: <AdminPage/>,
@@ -76,6 +83,10 @@ const routes = [
path: '/author-edit',
element: <AuthorEdit/>,
},
+ {
+ path: '/search-results',
+ element: <SearchResults/>,
+ },
];
const router = createBrowserRouter([
diff --git a/ReactLibrary/src/pages/AuthorEdit.jsx b/ReactLibrary/src/pages/AuthorEdit.jsx
index e6db72d..4d52c6b 100644
--- a/ReactLibrary/src/pages/AuthorEdit.jsx
+++ b/ReactLibrary/src/pages/AuthorEdit.jsx
@@ -49,7 +49,7 @@ const AuthorEdit = () => {
</Form.Group>
<div className="d-grid gap-2 mt-4 d-md-flex justify-content-md-center">
<Button className="lib-btn" onClick={() => navigate(-1)}>Назад</Button>
- <Button className="lib-btn" type="submit" variant="primary">Сохранить</Button>
+ <Button className="lib-btn" type="submit">Сохранить</Button>
</div>
</Form>
</>
diff --git a/ReactLibrary/src/pages/BookEdit.jsx b/ReactLibrary/src/pages/BookEdit.jsx
index 69b3da8..703aaf4 100644
--- a/ReactLibrary/src/pages/BookEdit.jsx
+++ b/ReactLibrary/src/pages/BookEdit.jsx
@@ -46,7 +46,7 @@ const BookEdit = () => {
</Form.Group>
<div className="d-grid gap-2 mt-4 d-md-flex justify-content-md-center">
<Button className="lib-btn" onClick={() => navigate(-1)}>Назад</Button>
- <Button className="lib-btn" type="submit" variant="primary">Сохранить</Button>
+ <Button className="lib-btn" type="submit">Сохранить</Button>
</div>
</Form>
</>
diff --git a/ReactLibrary/src/pages/CategoryEdit.jsx b/ReactLibrary/src/pages/CategoryEdit.jsx
index 7e0c5b5..f9a327e 100644
--- a/ReactLibrary/src/pages/CategoryEdit.jsx
+++ b/ReactLibrary/src/pages/CategoryEdit.jsx
@@ -29,7 +29,7 @@ const CategoryEdit = () => {
</Form.Group>
<div className="d-grid gap-2 mt-4 d-md-flex justify-content-md-center">
<Button className="lib-btn" onClick={() => navigate(-1)}>Назад</Button>
- <Button className="lib-btn" type="submit" variant="primary">Сохранить</Button>
+ <Button className="lib-btn" type="submit">Сохранить</Button>
</div>
</Form>
</>
diff --git a/ReactLibrary/src/pages/MainPage.jsx b/ReactLibrary/src/pages/MainPage.jsx
index bdddfe1..4baf3c4 100644
--- a/ReactLibrary/src/pages/MainPage.jsx
+++ b/ReactLibrary/src/pages/MainPage.jsx
@@ -16,7 +16,7 @@ const MainPage = () => {
</p>
<div className="d-grid gap-2 mt-2 d-md-flex justify-content-md-start">
<Button as={Link} to="/user-page" className='lib-btn'>Личный кабинет</Button>
- <Button as={Link} to="/search" className='lib-btn'>Поиск</Button>
+ <Button as={Link} to="/search-form" className='lib-btn'>Поиск</Button>
</div>
</>
);
diff --git a/ReactLibrary/src/pages/SearchForm.jsx b/ReactLibrary/src/pages/SearchForm.jsx
new file mode 100644
index 0000000..6c4ce13
--- /dev/null
+++ b/ReactLibrary/src/pages/SearchForm.jsx
@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import { Button, Form } from 'react-bootstrap';
+import { useNavigate } from 'react-router-dom';
+
+const SearchForm = () => {
+ const [validated, setValidated] = useState(false);
+ const navigate = useNavigate();
+ const handleSubmit = (event) => {
+ const form = event.currentTarget;
+ if (form.checkValidity() === false) {
+ event.preventDefault();
+ event.stopPropagation();
+ }
+ setValidated(true);
+ };
+ return (
+ <>
+ <h1 className='mt-2 text-center'>
+ Параметры поиска.
+ </h1>
+ <Form id="books-form" noValidate validated={validated} onSubmit={handleSubmit}>
+ <Form.Group className="mb-2" controlId="author">
+ <Form.Label htmlFor="author" className="form-label">Автор</Form.Label>
+ <Form.Select name='selected' required>
+ </Form.Select>
+ </Form.Group>
+ <Form.Group className="mb-2" controlId="name">
+ <Form.Label>Название</Form.Label>
+ <Form.Control type="text" name="name" required/>
+ </Form.Group>
+ <Form.Group className="mb-2" controlId="category">
+ <Form.Label htmlFor="category" className="form-label">Категория</Form.Label>
+ <Form.Select name='selected' required>
+ </Form.Select>
+ </Form.Group>
+ <div className="d-grid gap-2 mt-4 d-md-flex justify-content-md-center">
+ <Button className="lib-btn" onClick={() => navigate(-1)}>Назад</Button>
+ <Button className="lib-btn" type="submit">Поиск</Button>
+ </div>
+ </Form>
+ </>
+ );
+};
+
+export default SearchForm;
diff --git a/ReactLibrary/src/pages/SearchResults.jsx b/ReactLibrary/src/pages/SearchResults.jsx
new file mode 100644
index 0000000..5415db4
--- /dev/null
+++ b/ReactLibrary/src/pages/SearchResults.jsx
@@ -0,0 +1,28 @@
+import { Button, Table } from 'react-bootstrap';
+import { useNavigate } from 'react-router-dom';
+
+const SearchResults = () => {
+const navigate = useNavigate();
+ return (
+ <>
+ <h1 className='mt-2 text-md-start text-center'>
+ Результаты поиска.
+ </h1>
+ <Button className="lib-btn" onClick={() => navigate(-1)}>Назад</Button>
+ <Table className="mt-2 lib-table" striped>
+ <thead>
+ <th scope="col">№</th>
+ <th scope="col" className="w-25">Автор</th>
+ <th scope="col" className="w-25">Название</th>
+ <th scope="col" className="w-25">Категория</th>
+ <th scope="col" className="w-25">Год издания</th>
+ <th scope="col"></th>
+ <th scope="col"></th>
+ </thead>
+ <tbody></tbody>
+ </Table>
+ </>
+ );
+};
+
+export default SearchResults;