реакт +_+ помогити

demo/src/main/java/com/example/demo/supply/Supplier/SupplierController.java

@@ -4,6 +4,9 @@ import org.springframework.web.bind.annotation.*;
 
 import java.util.List;
 
+@RestController
+@CrossOrigin
+@RequestMapping("/supplier")
 public class SupplierController {
     private final SupplierService supplierService;
 

front/package.json

@@ -1,39 +1,30 @@
+
 {
   "name": "front",
-  "version": "0.1.0",
   "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "fake-server": "json-server --watch data.json -p 8079",
+    "start": "npm-run-all --parallel dev fake-server",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
   "dependencies": {
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "bootstrap": "^5.3.0-alpha2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
+    "react-router-dom": "^6.4.4",
+    "axios": "^1.1.3",
+    "bootstrap": "^5.2.2",
+    "@fortawesome/fontawesome-free": "^6.2.1"
   },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+  "devDependencies": {
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "vite": "^3.2.3",
+    "@vitejs/plugin-react": "^2.2.0",
+    "npm-run-all": "^4.1.5",
+    "json-server": "^0.17.1"
   }
 }

front/src/App.jsx

@@ -0,0 +1,40 @@
+import { useRoutes, Outlet, BrowserRouter } from 'react-router-dom';
+import Header from './components/common/Header';
+import Catalogs from './components/catalogs/Catalogs';
+import CatalogProducts from './components/catalogs/CatalogProducts';
+import CatalogSuppliers from './components/catalogs/CatalogSuppliers';
+
+
+function Router(props) {
+  return useRoutes(props.rootRoute);
+}
+
+export default function App() {
+  const routes = [
+    { index: true, element: <Catalogs /> },
+    { path: 'catalogs', element: <Catalogs />, label: 'Справочники' },
+    { path: 'catalogs/products', element: <CatalogProducts/> },
+    { path: 'catalogs/suppliers', element: <CatalogSuppliers /> }
+  ];
+  const links = routes.filter(route => route.hasOwnProperty('label'));
+  const rootRoute = [
+    { path: '/', element: render(links), children: routes }
+  ];
+
+  function render(links) {
+    return (
+      <>
+        <Header links={links} />
+        <div className="container-fluid">
+          <Outlet />
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <BrowserRouter>
+      <Router rootRoute={ rootRoute } />
+    </BrowserRouter>
+  );
+}

front/src/Navigation.js

@@ -1,24 +0,0 @@
-import React from 'react';
-
-function Navigation(){
-    return(
-        <div className="navigation"> 
-            <ul class="nav justify-content-center">
-                <li class="nav-item">
-                    <a class="nav-link active" aria-current="page" href="#">Active</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="#">Link</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="#">Link</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
-                </li>
-            </ul>
-        </div>
-    );
-}
-
-export default nav;

front/src/components/DataService.js

@@ -0,0 +1,42 @@
+import axios from 'axios';
+
+function toJSON(data) {
+    const jsonObj = {};
+    const fields = Object.getOwnPropertyNames(data);
+    for (const field of fields) {
+        if (data[field] === undefined) {
+            continue;
+        }
+        jsonObj[field] = data[field];
+    }
+    return jsonObj;
+}
+
+export default class DataService {
+    static dataUrlPrefix = 'http://localhost:8080/';
+
+    static async readAll(url, transformer) {
+        const response = await axios.get(this.dataUrlPrefix + url);
+        return response.data.map(item => transformer(item));
+    }
+
+    static async read(url, transformer) {
+        const response = await axios.get(this.dataUrlPrefix + url);
+        return transformer(response.data);
+    }
+
+    static async create(url, data) {
+        const response = await axios.post(this.dataUrlPrefix + url, toJSON(data));
+        return true;
+    }
+
+    static async update(url, data) {
+        const response = await axios.put(this.dataUrlPrefix + url, toJSON(data));
+        return true;
+    }
+
+    static async delete(url) {
+        const response = await axios.delete(this.dataUrlPrefix + url);
+        return response.data.id;
+    }
+}

front/src/components/ProductPage.js

@@ -29,10 +29,6 @@ export default function ProductPage(){
         })
     }
 
-    
-
-
-
     return(
         <div className="container">
             <form id="form" onSubmit={addProduct}>

front/src/components/catalogs/Catalog.jsx

@@ -0,0 +1,113 @@
+import { useState, useEffect } from "react";
+import Toolbar from "../common/Toolbar";
+import Table from "../common/Table";
+import Modal from "../common/Modal";
+import DataService from '../DataService';
+
+export default function Catalog(props) {
+    const [items, setItems] = useState([]);
+    const [modalHeader, setModalHeader] = useState('');
+    const [modalConfirm, setModalConfirm] = useState('');
+    const [modalVisible, setModalVisible] = useState(false);
+    const [isEdit, setEdit] = useState(false);
+    
+    let selectedItems = [];
+
+    useEffect(() => {
+        loadItems();
+    }, []);
+
+    function loadItems() {
+        DataService.readAll(props.getAllUrl, props.transformer)
+            .then(data => setItems(data));
+    }
+
+    function saveItem() {
+        if (!isEdit) {
+            DataService.create(props.url, props.data).then(() => loadItems());
+        } else {
+            DataService.update(props.url + props.data.id, props.data).then(() => loadItems());
+        }
+    }
+
+    function handleAdd() {
+        setEdit(false);
+        setModalHeader('Добавление элемента');
+        setModalConfirm('Добавить');
+        setModalVisible(true);
+        props.onAdd();
+    }
+
+    function handleEdit() {
+        if (selectedItems.length === 0) {
+            return;
+        }
+        edit(selectedItems[0]);
+    }
+
+    function edit(editedId) {
+        DataService.read(props.url + editedId, props.transformer)
+            .then(data => {
+                setEdit(true);
+                setModalHeader('Редактирование элемента');
+                setModalConfirm('Сохранить');
+                setModalVisible(true);
+                props.onEdit(data);
+            });
+    }
+
+    function handleRemove() {
+        if (selectedItems.length === 0) {
+            return;
+        }
+        if (confirm('Удалить выбранные элементы?')) {
+            const promises = [];
+            selectedItems.forEach(item => {
+                promises.push(DataService.delete(props.url + item));
+            });
+            Promise.all(promises).then((results) => {
+                selectedItems.length = 0;
+                loadItems();
+            });
+        }
+    }
+
+    function handleTableClick(tableSelectedItems) {
+        selectedItems = tableSelectedItems;
+    }
+
+    function handleTableDblClick(tableSelectedItem) {
+        edit(tableSelectedItem);
+    }
+
+    function handleModalHide() {
+        setModalVisible(false);
+    }
+
+    function handleModalDone() {
+        saveItem();
+    }
+
+    return (
+        <>
+            <Toolbar 
+                onAdd={handleAdd}
+                onEdit={handleEdit}
+                onRemove={handleRemove}/>
+            <Table 
+                headers={props.headers} 
+                items={items}
+                selectable={true}
+                onClick={handleTableClick}
+                onDblClick={handleTableDblClick}/>
+            <Modal 
+                header={modalHeader}
+                confirm={modalConfirm}
+                visible={modalVisible} 
+                onHide={handleModalHide}
+                onDone={handleModalDone}>
+                    {props.children}
+            </Modal>
+        </>
+    );
+}

front/src/components/catalogs/CatalogOrders.jsx

@@ -0,0 +1,41 @@
+import { useState } from 'react';
+import Catalog from './Catalog';
+import Discipline from '../../models/Discipline';
+
+export default function CatalogOrders(props) {
+    const url = 'product/';
+    const transformer = (data) => new Discipline(data);
+    const catalogProductHeaders = [
+        { name: 'name', label: 'Продукт' }
+    ];
+
+    const [data, setData] = useState(new Discipline());
+
+    function handleOnAdd() {
+        setData(new Discipline());
+    }
+
+    function handleOnEdit(data) {
+        setData(new Discipline(data));
+    }
+
+    function handleFormChange(event) {
+        setData({ ...data, [event.target.id]: event.target.value })
+    }
+
+    return (
+        <Catalog headers={catalogProductHeaders} 
+            getAllUrl={url} 
+            url={url}
+            transformer={transformer}
+            data={data}
+            onAdd={handleOnAdd}
+            onEdit={handleOnEdit}>
+            <div className="mb-3">
+                <label htmlFor="name" className="form-label">Название продукта</label>
+                <input type="text" id="name" className="form-control" required 
+                    value={data.name} onChange={handleFormChange}/>
+            </div>
+        </Catalog>
+    );
+}

front/src/components/catalogs/CatalogProducts.jsx

@@ -0,0 +1,50 @@
+import { useState } from 'react';
+import Catalog from './Catalog';
+import Product from '../models/Product';
+
+export default function CatalogProducts(props) {
+    const url = 'product/';
+
+    const transformer = (data) => new Product(data);
+
+    const catalogProductHeaders = [
+        { name: 'name', label: 'Продукт' },
+        { name: 'cost', label: 'Цена' }
+    ];
+
+    const [data, setData] = useState(new Product());
+
+    function handleOnAdd() {
+        setData(new Product());
+    }
+
+    function handleOnEdit(data) {
+        setData(new Product(data));
+    }
+
+    function handleFormChange(event) {
+        setData({ ...data, [event.target.id]: event.target.value })
+    }
+
+    return (
+        <Catalog headers={catalogProductHeaders} 
+            getAllUrl={url} 
+            url={url}
+            transformer={transformer}
+            data={data}
+            onAdd={handleOnAdd}
+            onEdit={handleOnEdit}>
+            <div className="mb-3">
+                <label htmlFor="name" className="form-label">Наименование</label>
+                <input type="text" id="name" className="form-control" required 
+                    value={data.name} onChange={handleFormChange}/>
+            </div>
+
+            <div className="mb-3">
+                <label htmlFor="cost" className="form-label">Цена</label>
+                <input type="text" id="cost" className="form-control" required 
+                    value={data.cost} onChange={handleFormChange}/>
+            </div>
+        </Catalog>
+    );
+}

front/src/components/catalogs/CatalogSuppliers.jsx

@@ -0,0 +1,48 @@
+import { useState } from 'react';
+import Catalog from './Catalog';
+import Supplier from '../models/Supplier';
+
+export default function CatalogSuppliers(props) {
+    const url = 'supplier/';
+    const transformer = (data) => new Supplier(data);
+    const catalogSupplierHeaders = [
+        { name: 'name', label: 'Название организации' },
+        { name: 'license', label: 'Номер лицензии' }
+    ];
+
+    const [data, setData] = useState(new Supplier());
+
+    function handleOnAdd() {
+        setData(new Supplier());
+    }
+
+    function handleOnEdit(data) {
+        setData(new Supplier(data));
+    }
+
+    function handleFormChange(event) {
+        setData({ ...data, [event.target.id]: event.target.value })
+    }
+
+    return (
+        <Catalog headers={catalogSupplierHeaders} 
+            getAllUrl={url} 
+            url={url}
+            transformer={transformer}
+            data={data}
+            onAdd={handleOnAdd}
+            onEdit={handleOnEdit}>
+            <div className="mb-3">
+                <label htmlFor="name" className="form-label">Название организаци</label>
+                <input type="text" id="name" className="form-control" required 
+                    value={data.name} onChange={handleFormChange}/>
+            </div>
+
+            <div className="mb-3">
+                <label htmlFor="license" className="form-label">Номер лицензии</label>
+                <input type="text" id="license" className="form-control" required 
+                    value={data.license} onChange={handleFormChange}/>
+            </div>
+        </Catalog>
+    );
+}

front/src/components/catalogs/Catalogs.jsx

@@ -0,0 +1,13 @@
+import LinksList from '../common/LinksList';
+
+export default function Catalogs(props) {
+    const catalogs = [
+        { name: 'products', label: 'Продукты' },
+        { name: 'suppliers', label: 'Поставщики' },
+        // { name: 'orders', label: 'Заказы' }
+    ];
+
+    return (
+        <LinksList items={catalogs} />
+    );
+}

front/src/components/common/Header.jsx

@@ -0,0 +1,33 @@
+import { NavLink } from 'react-router-dom';
+
+export default function Header(props) {
+    return (
+        <nav className="navbar navbar-expand-lg bg-light">
+            <div className="container-fluid">
+                <a className="navbar-brand" href="/">
+                    <i className="fa-solid fa-book"></i>
+                    Поставки
+                </a>
+                <button className="navbar-toggler" type="button"
+                    data-bs-toggle="collapse" data-bs-target="#navbarNav"
+                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                    <span className="navbar-toggler-icon"></span>
+                </button>
+                <div className="collapse navbar-collapse" id="navbarNav">
+                    <ul className="navbar-nav"> 
+                    {
+                        props.links.map(route =>
+                            <li key={route.path}
+                                className="nav-item">
+                                <NavLink className="nav-link" to={route.path}>
+                                        {route.label}
+                                </NavLink>
+                            </li>
+                        )
+                    }
+                    </ul>
+                </div>
+            </div>
+        </nav >
+    );
+}

front/src/components/common/LinksList.jsx

@@ -0,0 +1,16 @@
+import { Link } from 'react-router-dom';
+
+export default function LinksList(props) {
+    return (
+        <div className="list-group">
+        {
+            props.items.map(catalog =>
+                <Link key={catalog.name} to={catalog.name}
+                    className="list-group-item list-group-item-action">
+                    {catalog.label}
+                </Link>
+            )
+        }
+        </div >
+    );
+}

front/src/components/common/Modal.jsx

@@ -0,0 +1,46 @@
+import React from "react";
+
+export default function Modal(props) {
+    const formRef = React.createRef();
+
+    function hide() {
+        props.onHide();
+    }
+
+    function done(e) {
+        e.preventDefault();
+        if (formRef.current.checkValidity()) {
+            props.onDone();
+            hide();
+        } else {
+            formRef.current.reportValidity();
+        }
+        
+    }
+
+    return (
+        <div className="modal fade show" tabIndex="-1" aria-hidden="true"
+            style={{ display: props.visible ? 'block' : 'none' }}>
+            <div className="modal-dialog">
+                <div className="modal-content">
+                    <div className="modal-header">
+                        <h1 className="modal-title fs-5" id="exampleModalLabel">{props.header}</h1>
+                        <button className="btn-close" type="button"  aria-label="Close"
+                            onClick={hide}></button>
+                    </div>
+                    <div className="modal-body">
+                        <form ref={formRef} onSubmit={done}>
+                            {props.children}
+                        </form>
+                    </div>
+                    <div className="modal-footer">
+                        <button className="btn btn-secondary" type="button" onClick={hide}>Закрыть</button>
+                        <button className="btn btn-primary" type="button" onClick={done}>
+                            {props.confirm}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

front/src/components/common/Table.jsx

@@ -0,0 +1,73 @@
+import { useState } from 'react';
+import styles from './Table.module.css';
+
+export default function Table(props) {
+    const [tableUpdate, setTableUpdate] = useState(false);
+    const [selectedItems, setSelectedItems] = useState([]);
+
+    function isSelected(id) {
+        if (!props.selectable) {
+            return false;
+        }
+        return selectedItems.includes(id);
+    }
+
+    function click(id) {
+        if (!props.selectable) {
+            return;
+        }
+        if (isSelected(id)) {
+            var index = selectedItems.indexOf(id);
+            if (index !== -1) {
+                selectedItems.splice(index, 1);
+                setSelectedItems(selectedItems);
+                setTableUpdate(!tableUpdate);
+            }
+        } else {
+            selectedItems.push(id);
+            setSelectedItems(selectedItems);
+            setTableUpdate(!tableUpdate);
+        }
+        props.onClick(selectedItems);
+    }
+
+    function dblClick(id) {
+        if (!props.selectable) {
+            return;
+        }
+        props.onDblClick(id);
+    }
+
+    return (
+        <table className={`table table-hover ${styles.table} ${props.selectable ? styles.selectable : ''}`}>
+            <thead>
+                <tr>
+                    <th scope="col">#</th>
+                    {
+                        props.headers.map(header =>
+                            <th key={header.name} scope="col">
+                                {header.label}
+                            </th>
+                        )
+                    }
+                </tr>
+            </thead>
+            <tbody>
+                {
+                    props.items.map((item, index) =>
+                        <tr key={item.id}
+                            className={isSelected(item.id) ? styles.selected : ''}
+                            onClick={(e) => click(item.id, e)} onDoubleClick={(e) => dblClick(item.id, e)}>
+                            <th scope="row">{index + 1}</th>
+                            {
+                                props.headers.map(header =>
+                                    <td key={item.id + header.name}>{item[header.name]}</td>
+                                )
+                            }
+                        </tr>
+                    )
+                }
+            </tbody >
+        </table >
+    );
+}

front/src/components/common/Table.module.css

@@ -0,0 +1,12 @@
+.table tbody tr {
+    user-select: none;
+}
+
+.selectable tbody tr:hover {
+    cursor: pointer;
+}
+
+.selected {
+    background-color: #0d6efd;
+    opacity: 80%;
+}

front/src/components/common/Toolbar.jsx

@@ -0,0 +1,29 @@
+import styles from './Toolbar.module.css';
+
+export default function Toolbar(props) {
+    function add() {
+        props.onAdd();
+    }
+
+    function edit() {
+        props.onEdit();
+    }
+
+    function remove() {
+        props.onRemove();
+    }
+
+    return (
+        <div className="btn-group mt-2" role="group">
+            <button type="button" className={`btn btn-success ${styles.btn}`} onClick={add}>
+                Добавить
+            </button>
+            <button type="button" className={`btn btn-warning ${styles.btn}`} onClick={edit} >
+                Изменить
+            </button >
+            <button type="button" className={`btn btn-danger ${styles.btn}`} onClick={remove}>
+                Удалить
+            </button >
+        </div >
+    );
+}

front/src/components/common/Toolbar.module.css

@@ -0,0 +1,3 @@
+.btn {
+    min-width: 140px;
+}

front/src/components/models/Order.js

@@ -0,0 +1,7 @@
+export default class Order {
+    constructor(data) {
+        this.id = data?.id;
+        this.date = data?.date || '';
+        this.supplierId = data?.supplierId || '';
+    }
+}

front/src/components/models/Product.js

@@ -0,0 +1,7 @@
+export default class Product {
+    constructor(data) {
+        this.id = data?.id;
+        this.name = data?.name || '';
+        this.cost = data?.cost || '';
+    }
+}

front/src/components/models/Supplier.js

@@ -0,0 +1,7 @@
+export default class Supplier {
+    constructor(data) {
+        this.id = data?.id;
+        this.name = data?.name || '';
+        this.license = data?.license || '';
+    }
+}

front/src/index.css

@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}

front/src/index.js

@@ -1,11 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import ProductPage from './ProductPage';
-
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-  <React.StrictMode>
-    <ProductPage />
-  </React.StrictMode>
-);

front/src/main.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import './style.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+      <App />
+  </React.StrictMode>
+)