fix

demo/src/main/java/com/example/demo/supply/Product/ProductController.java

@@ -27,12 +27,14 @@ public class ProductController {
     }
 
     @PostMapping("/")
+    @Secured({UserRole.AsString.ADMIN})
     public ProductDto createProduct(@RequestParam() String name,
                                  @RequestParam() double cost) {
         return new ProductDto(productService.addProduct(name, cost));
     }
 
     @PatchMapping("/{id}")
+    @Secured({UserRole.AsString.ADMIN})
     public ProductDto updateProduct(@PathVariable Long id,
                                  @RequestParam String name,
                                  @RequestParam double cost) {
@@ -40,6 +42,7 @@ public class ProductController {
     }
 
     @DeleteMapping("/{id}")
+    @Secured({UserRole.AsString.ADMIN})
     public ProductDto deleteProduct(@PathVariable Long id) {
         return new ProductDto(productService.deleteProduct(id));
     }

front/src/App.js

@@ -7,7 +7,8 @@ import Header from "./general/Header";
 import SignUpPage from "./Pages/SignUpPage";
 import LoginPage from "./Pages/LoginPage";
 import PrivateRoutes from './utils/PrivateRoutes';
-
+import UsersPage from "./Pages/UsersPage";
+import GetSomeSuppliers from "./Pages/GetSomeSuppliers";
 
 function App() {
 
@@ -22,9 +23,10 @@ function App() {
                 <Route path="/suppliers" Component={CatalogSuppliers} />
                 <Route path="/orders" Component={OrderPage} />
                 <Route path="/createOrder" Component={CreateOrderPage} />
+                <Route path="/getSupl" Component={GetSomeSuppliers} />
               </Route>
               <Route element={<PrivateRoutes role={"ADMIN"}/>}>
-                {/* <Route element={<UsersPage/>} path="/Users"/> */}
+                <Route path="/Users" Component={UsersPage}/>
               </Route>
               <Route path="/Login" Component={LoginPage}/>
               <Route path="/Signup" Component={SignUpPage}/>

front/src/DataService.js

@@ -6,7 +6,6 @@ function getFullUrl(url, data) {
     const fields = Object.getOwnPropertyNames(data);
     //проходимся по каждому полю
     for (const field of fields) {
-
         if (field === undefined) continue
         if (field === 'id') continue
         if (field === 'date') continue
@@ -33,11 +32,6 @@ export default class DataService {
         return res
     }
 
-    static async read(url, transformer) {
-        const response = await axios.get(this.mainUrl + url);
-        return transformer(response.data);
-    }
-
     static async readUsersPage(dataUrlPrefix, url, page) {
         const response = await axios.get(dataUrlPrefix + url + `?page=${page}`,{
             headers:{
@@ -52,6 +46,11 @@ export default class DataService {
         return response.data;
     }
 
+    static async read(url, transformer) {
+        const response = await axios.get(this.mainUrl + url);
+        return transformer(response.data);
+    }
+
     static async create(url, data) {
         const response = await axios.post(getFullUrl(this.mainUrl + url, data))
         const res = response.data
@@ -65,6 +64,14 @@ export default class DataService {
         return true;
     }
 
+    static async getSomeSuppliers(url){
+        const response = await fetch(this.mainUrl + url, {
+            method: 'GET',
+        }).catch(e => console.log(e))  
+        const res = response.json()
+        return res
+    }
+
     static async update(url, data) {
         await fetch(getFullUrl(this.mainUrl + url, data), {
             method: 'PATCH',

front/src/Pages/GetSomeSuppliers.jsx

@@ -0,0 +1,97 @@
+import React, { useState, useEffect } from "react";
+import Modal from "../general/Modal";
+import Table from "../general/Table";
+import DataService from "../DataService";
+import Product from "../models/Product";
+import Supplier from "../models/Supplier";
+
+export default function GetSomeSuppliers(props) {
+    const url = 'order/someSuppliers/'
+    const productUrl = 'product/'
+
+    const headers = [
+        { name: 'name', label: 'Поставщик' },
+        { name: 'license', label: 'Лицензия' }
+    ];
+
+    const transformer = (data) => new Supplier(data)
+    const transformerProduct = (data) => new Product(data)
+
+    const [suppliers, setSuppliers] = useState([])
+    const [products, setProducts] = useState([])
+    const [product, setProduct] = useState(new Product())
+
+    const [modalHeader, setModalHeader] = useState('')
+    const [modalConfirm, setModalConfirm] = useState('')
+    const [modalVisible, setModalVisible] = useState(false)
+
+    useEffect(() => {
+        loadItems()
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const loadItems = () => {
+        DataService.readAll(productUrl, transformerProduct).then(data =>{
+            console.log(data)
+            setProducts(data)
+        })
+    }
+
+    const chooseProduct = () => {
+        setModalHeader('Добавление')
+        setModalConfirm('Добавить')
+        setModalVisible(true)
+    }
+
+    const save = () => {
+        console.log(product)
+        DataService.getSomeSuppliers(`${url}${product.id}`)
+        .then(data => setSuppliers(data))
+    }
+
+    const handleChooseProduct = (event) => {
+        // console.log(event.target.id)
+        // console.log(event.target.value)
+       setProduct({ ...product, [event.target.id]: event.target.value })
+    }
+
+    const handleTableClick = (tableSelectedItems) => console.log("")
+    const handleTableDblClick = (tableSelectedItem) => console.log("")
+
+    const hideModal = () => {
+        setModalVisible(false)
+    }
+    const modalDone = () => save()
+
+  return (
+    <>
+        <button type="button" className="btn btn-success" onClick={chooseProduct}>Выбрать продукт</button>
+        
+        <Table 
+            headers={headers} 
+            items={suppliers}
+            selectable={false}
+            onClick={handleTableClick}
+            onDblClick={handleTableDblClick}/>
+        <Modal
+            header={modalHeader}
+            confirm={modalConfirm}
+            visible={modalVisible} 
+            onHide={hideModal}
+            onDone={modalDone}> 
+                <div className="mb-3">
+                    <p className="h4" htmlFor="id">Продукт</p>
+                    <select id="id" className="form-select" required
+                        value={product.id} onChange={handleChooseProduct}>
+                        <option disabled value="">Укажите продукт</option>
+                        {
+                            products.map(product => 
+                                <option key={product.id} value={product.id}>{product.name}</option>
+                            )
+                        }
+                    </select>
+                </div> 
+        </Modal>
+    </>
+  );
+}

front/src/Pages/UsersPage.jsx

@@ -0,0 +1,63 @@
+import DataService from "../DataService";
+import { useState, useEffect } from "react";
+
+export default function UsersPage() {
+    const [users, setUsers] = useState([]);
+    const [pageNumbers, setPageNumbers] = useState([]);
+    const [pageNumber, setPageNumber] = useState();
+    const usersUrl = "/users";
+    const host = "http://localhost:8080/api/1.0";
+
+    useEffect(() => {
+        DataService.readUsersPage(host,usersUrl, 1).then((data)=>{
+            setUsers(data.first.content);
+            setPageNumbers(data.second);
+            setPageNumber(1);
+        });
+    }, []);
+    const pageButtonOnClick = function (page) {
+        DataService.readUsersPage(host,usersUrl, page).then((data)=>{
+            setUsers(data.first.content);
+            setPageNumber(page);
+        });
+    }
+    return (
+        <>
+            <div className="table-shell mb-3">
+                <table className="table">
+                    <thead>
+                    <tr>
+                        <th style={{ width: "15%" }} scope="col">ID</th>
+                        <th style={{ width: "30%" }} scope="col">Логин</th>
+                        <th style={{ width: "15%" }} scope="col">Роль</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                        {users.map((user, index) => (
+                            <tr>
+                                <td style={{ width: "15%" }}>{user.id}</td>
+                                <td style={{ width: "30%" }}>{user.login}</td>
+                                <td style={{ width: "15%" }}>{user.role}</td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+            <div>
+                <p>
+                    Pages:
+                </p>
+                <nav>
+                    <ul className="pagination">
+                        {pageNumbers.map((number) => (
+                            <li className={`page-item ${number === pageNumber + 1 ? "active" : ""}`}
+                                onClick={() => pageButtonOnClick(number)}>
+                                <a className="page-link" href="#">{number}</a>
+                            </li>
+                        ))}
+                    </ul>
+                </nav>
+            </div>
+        </>
+    );
+}

front/src/general/Header.jsx

@@ -40,6 +40,12 @@ export default function Header() {
                             </Link>
                         </li>
 
+                        <li className="nav-item">
+                            <Link className="nav-link" to="/getSupl">
+                                Доп
+                            </Link>
+                        </li>
+
                         <li className="nav-item">
                             <Link className="nav-link" to="/Login">
                                 Вход