Commit message2.

This commit is contained in:
Кашин Максим 2023-05-15 01:29:26 +04:00
parent 0bcf6791d3
commit adf7148a18
37 changed files with 7668 additions and 0 deletions

24
frontend/.gitignore vendored Normal file
View File

@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

19
frontend/data.json Normal file
View File

@ -0,0 +1,19 @@
{
"posts": [
{
"id": 1,
"title": "json-server",
"author": "typicode"
}
],
"comments": [
{
"id": 1,
"body": "some comment",
"postId": 1
}
],
"profile": {
"name": "typicode"
}
}

32
frontend/index.html Normal file
View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<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" />
<script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"
integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"
integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk"
crossorigin="anonymous"
></script>
<link
rel="stylesheet"
href="/node_modules/bootstrap/dist/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="/node_modules/@fortawesome/fontawesome-free/css/all.min.css"
/>
<title>Работаем с кайфом</title>
</head>
<body class="d-flex flex-column h-100">
<div id="app"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

5764
frontend/package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

29
frontend/package.json Normal file
View File

@ -0,0 +1,29 @@
{
"name": "spa-react",
"private": true,
"version": "1.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"fake-server": "json-server --watch data.json -p 8081",
"start": "npm-run-all --parallel dev fake-server",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.4.4",
"axios": "^1.1.3",
"bootstrap": "^5.2.2",
"@fortawesome/fontawesome-free": "^6.2.1"
},
"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"
}
}

93
frontend/src/App.css Normal file
View File

@ -0,0 +1,93 @@
nav {
background-color: #708090;
}
main {
background-color: #ffffff;
/* min-height: 90vh; */
}
footer {
background-color: #708090;
color: black;
position: absolute;
bottom: 0;
width: 100vw;
}
.size {
overflow-x: hidden;
}
.card {
background-color: #bdb1b1;
border-color: #8c7b7b;
}
.card-body {
background-color: #8c7b7b;
}
h1 {
word-wrap: break-word;
}
#banner {
margin: 0px 15px 15px 15px;
padding-top: 15px;
display: flex;
align-items: center;
flex-direction: column;
}
#banner img {
border-radius: 5px;
}
#banner img.show {
width: 100%;
opacity: 1;
transition: opacity 1s, visibility 0s;
}
#banner img.hide {
height: 0;
width: 0;
opacity: 0;
visibility: hidden;
transition: opacity 1s, visibility 0s 1s;
}
@media (max-width: 767px) {
.btn {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.btn {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.btn {
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
border-radius: 4px;
}
}
@media (min-width: 1200px) {
.btn {
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px;
}
}
@media (max-width: 600px) {
.tem {
padding-right: 50px;
}
}
.vl {
border-left: 5px solid;
height: 100vh;
}

60
frontend/src/App.jsx Normal file
View File

@ -0,0 +1,60 @@
import './App.css';
import { useRoutes,
Outlet,
BrowserRouter,
Routes,
Route, } from 'react-router-dom';
import Header from './components/common/Header';
import Footer from "./components/common/Footer";
import CatalogBuyers from './components/catalogs/CatalogBuyers';
import { useState } from 'react';
import CarInfo from './components/catalogs/CarInfo';
import CatalogStores from './components/catalogs/CatalogStores';
import Find from './components/catalogs/Find';
import SignUpPage from './components/catalogs/SignUpPage';
import LoginPage from './components/catalogs/LoginPage';
import PrivateRoutes from './services/PrivateRoutes';
import Users from "./components/catalogs/CatalogUsers";
function Router(props) {
return useRoutes(props.rootRoute);
}
export default function App() {
const [car,setCar] = useState([]);
const routes = [
{ index: true, element: <CatalogBuyers /> },
{ path: "catalogs/store" , label: "Продукты", },
{ path: "catalogs/buyer", label: "Работники", },
{ path: "catalogs/car", label: "Рабочие столы", },
{ path: "catalog/users", label: "Пользователи",},
{ path: "catalogs/find", label: "Поиск", },
{ path: '/login', label: "Авторизация",},
{ path: 'catalog/signup', label: "Регистрация",}
];
const links = routes.filter(route => route.hasOwnProperty('label'));
return (
<>
<BrowserRouter>
<Header links={links}/>
<div className="content-div">
<Routes>
<Route element={<PrivateRoutes role="USER"/>}>
<Route element={<CatalogStores />} path="catalogs/store"/>
<Route element={<CatalogBuyers/>} path="catalogs/buyer"/>
<Route element={<CarInfo/>} path="catalogs/car"/>
<Route element={<Find/>} path="catalogs/find"/>
</Route>
<Route element={<PrivateRoutes role="ADMIN"/>}>
<Route element={<Users/>} path="catalog/users"/>
</Route>
<Route element={<LoginPage/>} path="/login"/>
<Route element={<SignUpPage/>} path="catalog/signup"/>
</Routes>
</div>
<Footer/>
</BrowserRouter>
</>
);
}

View File

@ -0,0 +1,135 @@
import { useState, useEffect, Component } from "react";
import CatalogCar from "./CatalogCars.jsx";
import Store from "../../models/Store";
import Buyer from "../../models/Buyer";
import Car from "../../models/Car";
import DataService from "../../services/DataService";
export default function Menustores(props) {
const url = "/car";
const prodUrl = "/store";
const workUrl = "/buyer"
const transformer = (data) => new Car(data);
const catalogProdHeaders = [
{ name: "storeName", label: "Название продукта" },
];
const catalogWorkHeaders = [
{ name: "buyerFirstName", label: "Имя" },
{ name: "buyerSecondName", label: "Фамилия" },
];
const [data, setData] = useState(new Car());
const [store, setStore] = useState([]);
const [workStore, setWorkStore] = useState([]);
const [buyer, setBuyer] = useState([]);
const [workBuyer, setWorkBuyer] = useState([]);
useEffect(() => {
DataService.readAll(prodUrl, (data) => new Store(data)).then(
(data) => setStore(data)
);
DataService.readAll(workUrl, (data) => new Buyer(data)).then(
(data) => setBuyer(data)
);
}, []);
function handleOnAdd() {
setData(new Car());
setWorkStore([]);
setWorkBuyer([]);
}
function handleOnEdit(data) {
setData(new Car(data));
}
function handleFormChange(event) {
setData({ ...data, [event.target.id]: event.target.value });
}
function handleUpdateStores(value) {
let temp = data.storeDTOList.filter((x) => x.id != value.id);
data.storeDTOList = [];
for (let i = 0; i < temp.length; i++) {
data.storeDTOList.push(temp[i]);
}
data.storeDTOList.push(value);
setData(data);
console.log(data);
setWorkStore();
}
function setCar() {
data.storeDTOList = [];
for (let i = 0; i < workStore.length; i++) {
data.storeDTOList.push(workStore[i]);
}
data.buyerDTOList = [];
for (let i = 0; i < workBuyer.length; i++) {
data.buyerDTOList.push(workBuyer[i]);
}
setData(data);
}
function handleDeleteStores(value) {
let temp = data.storeDTOList.filter((x) => x.id != value);
data.storeDTOList = [];
for (let i = 0; i < temp.length; i++) {
data.storeDTOList.push(temp[i]);
}
console.log(data);
setData(data);
setWorkStore(workStore.filter((x) => x.id !== value));
console.log(workStore);
}
function handleUpdateBuyers(value){
let temp = data.buyerDTOList.filter((x) => x.id != value.id);
data.buyerDTOList = [];
for (let i = 0; i < temp.length; i++) {
data.buyerDTOList.push(temp[i]);
}
data.buyerDTOList.push(value);
setData(data);
console.log(data);
setWorkBuyer(data.buyerDTOList);
console.log(workBuyer);
}
function handleDeleteBuyers(value) {
let temp = data.buyerDTOList.filter((x) => x.id != value);
data.buyerDTOList = [];
for (let i = 0; i < temp.length; i++) {
data.buyerDTOList.push(temp[i]);
}
console.log(data);
setData(data);
setWorkBuyer(workBuyer.filter((x) => x.id !== value));
console.log(workBuyer);
}
return (
<main className="flex-shrink-0">
<CatalogCar
url={url}
transformer={transformer}
data={data}
onAdd={handleOnAdd}
onEdit={handleOnEdit}
handleFormChange={handleFormChange}
set={setCar}
car={props.car}
setCar={props.setCar}
store={store}
catalogProdHeaders={catalogProdHeaders}
workStore={workStore}
setWorkStore={setWorkStore}
updateStores={handleUpdateStores}
deleteStores={handleDeleteStores}
buyer={buyer}
catalogWorkHeaders={catalogWorkHeaders}
workBuyer={workBuyer}
setWorkBuyer={setWorkBuyer}
updateBuyers={handleUpdateBuyers}
deleteBuyers={handleDeleteBuyers}
/>
</main>
);
}

View File

@ -0,0 +1,114 @@
import { useState, useEffect } from "react";
import Toolbar from "../common/Toolbar";
import Table from "../common/Table";
import Modal from "../common/Modal";
import DataService from '../../services/DataService';
export default function CatalogW(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() {
console.log(props.data);
if (!isEdit) {
DataService.create(props.getAllUrl, 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>
</>
);
}

View File

@ -0,0 +1,53 @@
import { useState, useEffect } from 'react';
import Catalog from './Catalog';
import Buyer from '../../models/Buyer';
import DataService from '../../services/DataService';
export default function CatalogBuyers(props) {
const getAllUrl = '/buyer';
const url = '/buyer/';
const transformer = (data) => new Buyer(data);
const catalogBuyerHeaders = [
{ name: 'buyerFirstName', label: 'Имя' },
{ name: 'buyerSecondName', label: 'Фамилия' },
];
const [data, setData] = useState(new Buyer());
function handleOnAdd() {
console.log("create buyer: " + data.buyerFirstName + "|" + data.buyerSecondName);
setData(new Buyer());
}
function handleOnEdit(data) {
setData(new Buyer(data));
}
function handleFormChange(event) {
setData({ ...data, [event.target.id]: event.target.value })
}
return (
<main className="flex-shrink-0" style={{ backgroundColor: "white" }}>
<Catalog
headers={catalogBuyerHeaders}
getAllUrl={getAllUrl}
url={url}
transformer={transformer}
data={data}
onAdd={handleOnAdd}
onEdit={handleOnEdit}>
<div className="mb-3">
<label htmlFor="buyerFirstName" className="form-label">Имя работника</label>
<input type="text" id="buyerFirstName" className="form-control" required
value={data.buyerFirstName} onChange={handleFormChange}/>
</div>
<div className="mb-3">
<label htmlFor="buyerSecondName" className="form-label">Фамилия работника</label>
<input type="text" id="buyerSecondName" className="form-control" required
value={data.buyerSecondName} onChange={handleFormChange}/>
</div>
</Catalog>
</main>
);
}

View File

@ -0,0 +1,316 @@
import { useState, useEffect, Component } from "react";
import ToolbarStore from "../common/ToolbarStore";
import Card from "../common/Card";
import Modal from "../common/Modal";
import DataService from "../../services/DataService";
import Table from "../common/Table";
import Toolbar from "../common/Toolbar";
export default function catalogP(props) {
const [items, setItems] = useState([]);
const [modalHeader, setModalHeader] = useState("");
const [modalConfirm, setModalConfirm] = useState("");
const [modalVisible, setModalVisible] = useState(false);
const [isEdit, setEdit] = useState(false);
const [StoreL, setStoreL] = useState({});
const [BuyerL, setBuyerL] = useState({});
useEffect(() => {
loadItems();
}, []);
function loadItems() {
DataService.readAll(props.url, props.transformer).then((data) =>{
setItems(data);
});
DataService.readAll(props.url, props.transformer).then((data) =>
setItems(data));
}
const catalogCarHeaders = [
{ name: 'carName', label: 'Название' },
// { name: 'storeDTOList.length', label: 'Количество продуктов'}
];
let selectedItems = [];
async function saveItem() {
console.log(props.data);
if (!isEdit) {
await props.set();
DataService.create(props.url, props.data).then(() => loadItems());
} else {
await props.set();
DataService.update(props.url + "/" + props.data.id, props.data).then(() =>
loadItems()
);
}
}
function handleRemoveCard(id) {
if (confirm("Удалить выбранные элементы?")) {
DataService.delete(props.url + "/" + id).then(() => {
loadItems();
});
}
}
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 handleAdd() {
setEdit(false);
setModalHeader("Добавление элемента");
setModalConfirm("Добавить");
setModalVisible(true);
props.onAdd();
}
function handleEdit(id) {
if (selectedItems.length === 0) {
return;
}
setStoreL(
props.workStore.filter((x) => x.id == selectedItems[0])[0]
);
}
function edit(editedId) {
DataService.read(props.url+ "/" + editedId, props.transformer).then((data) => {
for(let i = 0; i < data.storeDTOList.length; i++){
props.workStore.push(data.storeDTOList[i]);
props.setWorkStore(props.workStore)
}
for(let i = 0; i < data.buyerDTOList.length; i++){
props.workBuyer.push(data.buyerDTOList[i]);
//props.setworkBuyer(props.workBuyer)
}
setEdit(true);
setModalHeader("Редактирование элемента");
setModalConfirm("Сохранить");
setModalVisible(true);
props.onEdit(data);
});
}
function handleModalDone() {
saveItem();
}
function handleModalHide() {
setModalVisible(false);
props.setWorkStore([]);
props.setWorkBuyer([]);
}
function handleRemoveStore(id, e) {
if (selectedItems.length === 0) {
return;
}
if (confirm("Удалить выбранные элементы?")) {
const promises = [];
selectedItems.forEach((item) => {
props.deleteStores(item);
});
selectedItems.length = 0;
}
}
function handleRemoveBuyer(id, e) {
if (selectedItems.length === 0) {
return;
}
if (confirm("Удалить выбранные элементы?")) {
const promises = [];
selectedItems.forEach((item) => {
props.deleteBuyers(item);
});
selectedItems.length = 0;
}
}
async function handleAddStore() {
if (props.workStore.filter((x) => x.id == StoreL.id).length == 0)
{
await props.updateStores(StoreL);
setStoreL({});
props.workStore.push(StoreL);
await props.setWorkStore(props.workStore);
setStoreL({});
return;
}
}
async function handleAddBuyer() {
if (props.workBuyer.filter((x) => x.id == BuyerL.id).length == 0)
{
await props.updateBuyers(BuyerL);
setBuyerL({});
props.workBuyer.push(BuyerL);
await props.setWorkBuyer(props.workBuyer);
setBuyerL({});
return;
}
}
function handleFormChangeStore(event) {
if (event.target.id === "storeName") {
setStoreL({
...StoreL,
["id"]: event.target.value,
["storeName"]: props.store
.filter((x) => x.id == event.target.value)
.map((x) => x.storeName)[0],
["price"]: props.store
.filter((x) => x.id == event.target.value)
.map((x) => x.price)[0],
});
return;
}
setStoreL({
...StoreL,
[event.target.id]: Number(event.target.value),
});
return;
}
function handleFormChangeBuyer(event) {
if (event.target.id === "buyerSecondName") {
setBuyerL({
...BuyerL,
["id"]: event.target.value,
["buyerFirstName"]: props.buyer
.filter((x) => x.id == event.target.value)
.map((x) => x.buyerFirstName)[0],
["buyerSecondName"]: props.buyer
.filter((x) => x.id == event.target.value)
.map((x) => x.buyerSecondName)[0],
});
return;
}
setBuyerL({
...BuyerL,
[event.target.id]: Number(event.target.value),
});
return;
}
function handleTableClick(tableSelectedItems) {
selectedItems = tableSelectedItems;
}
function handleTableDblClickModalProd(tableSelectedItem) {
setStoreL(
props.workStore.filter((x) => x.id == tableSelectedItem)[0]
);
}
function handleTableDblClick(tableSelectedItem) {
edit(tableSelectedItem);
}
return (
<>
{/* <ToolbarStore onAdd={handleAdd} />
<Card items={items} onEdit={edit} onRemove={handleRemoveCard} car={props.car} setCar={props.setCar}/> */}
<Modal
header={modalHeader}
confirm={modalConfirm}
visible={modalVisible}
onHide={handleModalHide}
onDone={handleModalDone}
>
<div className="mb-3">
<label htmlFor="name" className="form-label">
Название рабочего места
</label>
<input
type="text"
id="carName"
className="form-control"
required
value={props.data.carName}
onChange={props.handleFormChange}
/>
</div>
<div className="mb-3">
<label htmlFor="groupId" className="form-label">
Продукт
</label>
<select
id="storeName"
className="form-select"
required
value={StoreL.id}
onChange={handleFormChangeStore}
>
<option disabled value="">
Укажите продукт
</option>
{props.store.map((group) => (
<option key={group.id} value={group.id}>
{group.storeName}
</option>
))}
</select>
</div>
<Toolbar
onAdd={handleAddStore}
onEdit={handleEdit}
onRemove={handleRemoveStore}
/>
<Table
headers={props.catalogProdHeaders}
items={props.workStore}
allItems={props.store}
selectable={true}
onClick={handleTableClick}
onDblClick={handleTableDblClickModalProd}
/>
<div className="mb-3">
<label htmlFor="groupId" className="form-label">
Рабочий
</label>
<select
id="buyerSecondName"
className="form-select"
required
value={BuyerL.id}
onChange={handleFormChangeBuyer}
>
<option disabled value="">
Укажите рабочего
</option>
{props.buyer.map((group) => (
<option key={group.id} value={group.id}>
{group.buyerFirstName} {group.buyerSecondName}
</option>
))}
</select>
</div>
<Toolbar
onAdd={handleAddBuyer}
onEdit={handleEdit}
onRemove={handleRemoveBuyer}
/>
<Table
headers={props.catalogWorkHeaders}
items={props.workBuyer}
allItems={props.buyer}
selectable={true}
onClick={handleTableClick}
onDblClick={handleTableDblClickModalProd}
/>
</Modal>
<Toolbar
onAdd={handleAdd}
onEdit={handleEdit}
onRemove={handleRemove}
/>
<Table
headers={catalogCarHeaders}
items={items}
selectable={true}
onClick={handleTableClick}
onDblClick={handleTableDblClick}
/>
</>
);
}

View File

@ -0,0 +1,53 @@
import { useState, useEffect } from 'react';
import Catalog from './Catalog';
import Store from '../../models/Store';
import DataService from '../../services/DataService';
export default function CatalogStores(props) {
const getAllUrl = '/store';
const url = '/store/';
const transformer = (data) => new Store(data);
const catalogStudHeaders = [
{ name: 'storeName', label: 'Название' },
{ name: 'price', label: 'Цена' }
];
const [data, setData] = useState(new Store());
function handleOnAdd() {
setData(new Store());
console.log("create store: " + data.storeName + "|" + data.price);
}
function handleOnEdit(data) {
setData(new Store(data));
}
function handleFormChange(event) {
setData({ ...data, [event.target.id]: event.target.value })
}
return (
<main className="flex-shrink-0" style={{ backgroundColor: "white" }}>
<Catalog
headers={catalogStudHeaders}
getAllUrl={getAllUrl}
url={url}
transformer={transformer}
data={data}
onAdd={handleOnAdd}
onEdit={handleOnEdit}>
<div className="mb-3">
<label htmlFor="storeName" className="form-label">Название</label>
<input type="text" id="storeName" className="form-control" required
value={data.storeName} onChange={handleFormChange}/>
</div>
<div className="mb-3">
<label htmlFor="price" className="form-label">Цена</label>
<input type="number" id="price" className="form-control" required
value={data.price} onChange={handleFormChange}/>
</div>
</Catalog>
</main>
);
}

View File

@ -0,0 +1,76 @@
import { useState } from "react";
import { useEffect } from "react";
import DataService from "../../services/DataService";
export default function Users(props) {
const [users, setUsers] = useState([]);
const [pageNumbers, setPageNumbers] = useState([]);
const [pageNumber, setPageNumber] = useState();
const usersUrl = "/users";
const host = "http://localhost:8080";
useEffect(() => {
DataService.readUsersPage(host, usersUrl, 1).then((data) => {
setUsers(data.users.content);
setPageNumbers(data.pageNumbers);
setPageNumber(1);
});
}, []);
const pageButtonOnClick = function (page) {
DataService.readUsersPage(host, usersUrl, page).then((data) => {
setUsers(data.users.content);
setPageNumber(page);
});
};
return (
<>
<main className="flex-shrink-0" style={{ backgroundColor: "white" }}>
<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 key={index}>
<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" style={{ backgroundColor: "white" }}>
{pageNumbers.map((number, index) => (
<li key={index}
className={`page-item ${
number === pageNumber ? "active" : ""
}`}
onClick={() => pageButtonOnClick(number)}
>
<a className="page-link" >
{number}
</a>
</li>
))}
</ul>
</nav>
</div>
</main>
</>
);
}

View File

@ -0,0 +1,163 @@
import DataService from "../../services/DataService";
import Buyer from "../../models/Buyer";
import Store from "../../models/Store";
import Table from "../common/Table";
import { useState, useEffect, Component } from "react";
import '../../App.css';
export default function Find(props) {
const prodUrl = "/store";
const workUrl = "/buyer"
const buyerURL = '/buyer/car/';
const storeURL ='/store/buyer/';
const [itemsW, setItemsW] = useState([]);
const [itemsP, setItemsP] = useState([]);
const [StoreL, setStoreL] = useState({});
const [store, setStore] = useState([]);
const [BuyerL, setBuyerL] = useState({});
const [buyer, setBuyer] = useState([]);
const catalogBuyerHeaders = [
{ name: 'buyerFirstName', label: 'Имя' },
{ name: 'buyerSecondName', label: 'Фамилия' },
];
const transformer = (data) => new Buyer(data);
function loadItems() {
console.log(BuyerL.id);
DataService.readAll(buyerURL + BuyerL.id, transformer)
.then(data => setItemsW(data));
DataService.readAll(storeURL + StoreL.id, transformer)
.then(data => setItemsP(data));
}
useEffect(() => {
DataService.readAll(prodUrl, (data) => new Store(data)).then(
(data) => setStore(data)
);
DataService.readAll(workUrl, (data) => new Buyer(data)).then(
(data) => setBuyer(data)
);
BuyerL.id = buyer[0];
StoreL.id = store[0];
}, []);
let selectedItems = [];
function handleTableClick(tableSelectedItems) {
selectedItems = tableSelectedItems;
}
function handleTableDblClick(tableSelectedItem) {
confirm(tableSelectedItem);
}
function handleFormChangeStore(event) {
if (event.target.id === "storeName") {
setStoreL({
...StoreL,
["id"]: event.target.value,
["storeName"]: store
.filter((x) => x.id == event.target.value)
.map((x) => x.storeName)[0],
["price"]: store
.filter((x) => x.id == event.target.value)
.map((x) => x.price)[0],
});
return;
}
setStoreL({
...StoreL,
[event.target.id]: Number(event.target.value),
});
return;
}
function handleFormChangeBuyer(event) {
if (event.target.id === "buyerSecondName") {
setBuyerL({
...BuyerL,
["id"]: event.target.value,
["buyerFirstName"]: buyer
.filter((x) => x.id == event.target.value)
.map((x) => x.buyerFirstName)[0],
["buyerSecondName"]: buyer
.filter((x) => x.id == event.target.value)
.map((x) => x.buyerSecondName)[0],
});
return;
}
setBuyerL({
...BuyerL,
[event.target.id]: Number(event.target.value),
});
return;
}
return(
<main className="flex-shrink-0" style={{ backgroundColor: "white" }}>
<div className="mb-3 d-flex">
<div style={{ marginLeft: '2rem'}} className="w-50">
<label htmlFor="groupId" className="form-label">
Рабочие за одним рабочим местом
</label>
<select
id="buyerSecondName"
className="form-select"
value={BuyerL.id}
onChange={handleFormChangeBuyer}
>
<option disabled selected value="">
Укажите рабочего
</option>
{buyer.map((group) => (
<option key={group.id} value={group.id}>
{group.buyerFirstName} {group.buyerSecondName}
</option>
))}
</select>
</div>
<div style={{ marginLeft: '2rem'}} className="w-50">
<label htmlFor="groupId" className="form-label">
Рабочие производящие одинаковый продукт
</label>
<select
id="storeName"
className="form-select"
value={StoreL.id}
onChange={handleFormChangeStore}
>
<option disabled selected value="">
Укажите продукт
</option>
{store.map((group) => (
<option key={group.id} value={group.id}>
{group.storeName}
</option>
))}
</select>
</div>
<a
href="#"
type="button"
className="btn btn-outline-dark text-center "
style={{ marginTop: '2rem', marginLeft: '2rem'}}
onClick={(e) => loadItems()}
>
Поиск
</a>
</div>
<div className="d-flex justify-content-center">
<div className="w-50">
<Table
headers={catalogBuyerHeaders}
items={itemsW}
selectable={false}
onClick={handleTableClick}
onDblClick={handleTableDblClick}/>
</div>
<div className="w-50">
<Table
headers={catalogBuyerHeaders}
items={itemsP}
selectable={false}
onClick={handleTableClick}
onDblClick={handleTableDblClick}/>
</div>
</div>
</main>
);
}

View File

@ -0,0 +1,97 @@
import { useState, useEffect } from "react";
import { Link, useNavigate } from 'react-router-dom';
import { useRef } from "react";
export default function LoginPage(props) {
const [login, setLogin] = useState("");
const [password, setPassword] = useState("");
const navigate = useNavigate();
useEffect(() => {
}, []);
const loginsystem = async function (login, password) {
const requestParams = {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({login: login, password: password}),
};
const response = await fetch("http://localhost:8080/jwt/login", requestParams);
const result = await response.text();
if (response.status === 200) {
localStorage.setItem("token", result);
localStorage.setItem("user", login);
getRole(result);
} else {
localStorage.removeItem("token");
localStorage.removeItem("user");
localStorage.removeItem("role");
}
}
const getRole = async function (token) {
const requestParams = {
method: "GET",
headers: {
"Content-Type": "application/json"
}
};
const requestUrl = `http://localhost:8080/user?token=${token}`;
const response = await fetch(requestUrl, requestParams);
const result = await response.text();
localStorage.setItem("role", result);
window.dispatchEvent(new Event("storage"));
navigate("/main");
}
const loginFormOnSubmit = function (event) {
event.preventDefault();
loginsystem(login, password);
};
return (
<main className="flex-shrink-0" style={{ backgroundColor: "white" }}>
<h1 className="my-5 ms-5 ">
<b>Вход в систему</b>
</h1>
<form className="row g-3" onSubmit={loginFormOnSubmit}>
<div className="mb-3 row ms-5">
<label className="col-sm-2 col-form-label" htmlFor="login">
Логин
</label>
<div className="form-outline col-sm-10">
<input
placeholder="Логин"
className="form-control w-50"
type="text"
id="login"
name="login"
value={login}
onChange={(e) => setLogin(e.target.value)}
/>
</div>
</div>
<div className="mb-3 row ms-5">
<label className="col-sm-2 col-form-label" htmlFor="password">
Пароль
</label>
<div className="col-sm-10">
<input
placeholder="Пароль"
className="form-control w-50"
type="password"
id="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</div>
</div>
<h2>
<button className="btn btn-success ms-5" style={{ color: "black" }}>
Войти
</button>
</h2>
</form>
</main>
);
}

View File

@ -0,0 +1,115 @@
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { useEffect } from "react";
import { Link } from 'react-router-dom';
import { useRef } from "react";
export default function Registration(props) {
const [login, setLogin] = useState("");
const [password, setPassword] = useState("");
const [passwordConfirm, setPasswordConfirm] = useState("");
const navigate = useNavigate();
useEffect(() => {}, []);
async function signup() {
const requestParams = {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
login: login,
password: password,
passwordConfirm: passwordConfirm,
}),
};
const response = await fetch(
"http://localhost:8080/jwt/signup",
requestParams
);
const result = await response.json();
if (response.status === 200) {
localStorage.setItem("token", result.token);
localStorage.setItem("user", result.login);
localStorage.setItem("role", result.role);
window.dispatchEvent(new Event("storage"));
navigate("/catalogs/find");
} else {
localStorage.removeItem("token");
localStorage.removeItem("user");
localStorage.removeItem("role");
alert(result);
}
}
const signupFormOnSubmit = function (event) {
event.preventDefault();
signup({
login: login,
password: password,
passwordConfirm: passwordConfirm
});
};
return (
<main className="flex-shrink-0" style={{ backgroundColor: "white" }}>
<h1 className="my-5 ms-5 ">
<b>Регистрация</b>
</h1>
<form className="row g-3" onSubmit={signupFormOnSubmit}>
<div className="mb-3 row ms-5">
<label className="col-sm-2 col-form-label" htmlFor="login">
Логин
</label>
<div className="form-outline col-sm-10">
<input
placeholder="Логин"
className="form-control w-50"
type="text"
id="login"
name="login"
value={login}
onChange={(e) => setLogin(e.target.value)}
/>
</div>
</div>
<div className="mb-3 row ms-5">
<label className="col-sm-2 col-form-label" htmlFor="password">
Пароль
</label>
<div className="col-sm-10">
<input
placeholder="Пароль"
className="form-control w-50"
type="password"
id="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</div>
</div>
<div className="mb-3 row ms-5">
<label className="col-sm-2 col-form-label" htmlFor="passwordConfirm">
Пароль
</label>
<div className="col-sm-10">
<input
placeholder="Подтверждение пароля"
className="form-control w-50"
type="password"
id="passwordConfirm"
value={passwordConfirm}
onChange={(e) => setPasswordConfirm(e.target.value)}
/>
</div>
</div>
<h2>
<button className="btn btn-success ms-5" style={{ color: "black" }}>
Зарегистрироваться
</button>
</h2>
</form>
</main>
);
}

View File

@ -0,0 +1,61 @@
import DataService from "../../services/DataService";
export default function Card(props) {
function edit(id) {
props.onEdit(id);
}
function remove(id) {
props.onRemove(id);
}
async function mess(id){
let currentStore = props.store.filter(x => x.id == id.id);
if (currentStore.length != 0){
let temp = props.store.filter(x => x.id != id.id);
currentStore[0].count++;
temp.push(currentStore[0]);
await props.setStore(temp);
return;
}else{
id.count++;
props.store.push(id);
props.setStore(props.store);
}
}
return (
<div className="temp row row-cols-1 row-cols-md-3 g-4" id="tbl-items">
{props.items.map((item) => (
<div className="col" key={item.id}>
<div className="card">
<div
className="container"
style={{ width: "100%", height: "100px", alignItems: "center" }}
>
<p>{item["carName"]}</p>
</div>
<div className="card-body">
<h5 className="card-title text-center fs-1">{item["price"]}</h5>
<a
href="#"
className="btn btn-outline-dark text-center d-flex justify-content-md-center mx-5"
onClick={(e) => remove(item.id, e)}
>
Удалить
</a>
<a
href="#"
type="button"
className="btn btn-outline-dark text-center d-flex justify-content-md-center mx-5"
data-bs-toggle="modal"
data-bs-target="#staticBackdrop"
onClick={(e) => edit(item.id, e)}
>
Изменить
</a>
</div>
</div>
</div>
))}
</div>
);
}

View File

@ -0,0 +1,8 @@
export default function Footer(props) {
return (
<footer className="footer d-flex justify-content-center align-items-center">
ООО "Работаем" © 2022
</footer>
);
}

View File

@ -0,0 +1,68 @@
import { NavLink, useNavigate } from "react-router-dom";
import {useEffect, useState} from "react";
export default function Header(props) {
const [userRole, setUserRole] = useState("");
const navigate = useNavigate();
useEffect(() => {
window.addEventListener("storage", () => {
getUserRole();
});
getUserRole();
}, []);
const getUserRole = function () {
const role = localStorage.getItem("role") || "NONE";
setUserRole(role);
};
const handlelogout = function () {
window.location.reload();
navigate("/catalogs/login");
localStorage.removeItem("role");
localStorage.removeItem("user");
localStorage.removeItem("token");
}
return (
<nav className="navbar navbar-expand-lg">
<div className="container-fluid">
<NavLink className="navbar-brand" to={"/"}>
<h3>Работаем с кайфом</h3>
</NavLink>
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav me-auto mb-2 mb-lg-0">
{props.links.map((route) => {
if(route.role == userRole || route.role == undefined){
return(
<li key={route.path} className="nav-item">
<NavLink className="nav-link fs-5" to={route.path}>
{route.label}
</NavLink>
</li>
);
}
})}
</ul>
</div>
<li className="nav-item">
{localStorage.getItem("role") !== null &&
<a className="nav-link fs-5" onClick={handlelogout}>
{"Выход(" + localStorage.getItem("user") + ")"}
</a>
}
</li>
</div>
</nav>
);
}

View File

@ -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>
);
}

View File

@ -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 >
);
}

View File

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

View File

@ -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-outline-dark text-center d-flex justify-content-md-center mx-2 mb-3`} onClick={add}>
Добавить
</button>
<button type="button" className={`btn btn-outline-dark text-center d-flex justify-content-md-center mx-2 mb-3`} onClick={edit} >
Изменить
</button >
<button type="button" className={`btn btn-outline-dark text-center d-flex justify-content-md-center mx-2 mb-3`} onClick={remove}>
Удалить
</button >
</div >
);
}

View File

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

View File

@ -0,0 +1,19 @@
export default function ToolbarStore(props) {
function add() {
props.onAdd();
}
return (
<div className="btn-group mt-2" role="group">
{localStorage.getItem("role") == "ADMIN" &&
<button
type="button"
className={`btn btn-outline-dark text-center d-flex justify-content-md-center mx-5 mb-3`}
onClick={add}
>
Добавить
</button>
}
</div>
);
}

8
frontend/src/main.jsx Normal file
View File

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

View File

@ -0,0 +1,8 @@
export default class Buyer {
constructor(data) {
this.id = data?.id;
this.buyerFirstName = data?.buyerFirstName || "";
this.buyerSecondName = data?.buyerSecondName || "";
//this.car = data?.car || null;
}
}

View File

@ -0,0 +1,8 @@
export default class Car {
constructor(data) {
this.id = data?.id;
this.carName = data?.carName || "";
this.storeDTOList = data?.storeDTOList || [];
this.buyerDTOList = data?.buyerDTOList || [];
}
}

View File

@ -0,0 +1,8 @@
export default class Store {
constructor(data) {
this.id = data?.id;
this.storeName = data?.storeName || "";
this.price = data?.price || 0;
this.carDTOList = data?.carDTOList || [];
}
}

View File

@ -0,0 +1,7 @@
export default class UserLogin{
constructor(data){
this.login = data?.login;
this.password = data?.password;
this.role = data?.role || "";
}
}

View File

@ -0,0 +1,7 @@
export default class UserSignUp {
constructor(data) {
this.login = data?.login;
this.password = data?.password;
this.passwordConfirm = data?.passwordConfirm;
}
}

View File

@ -0,0 +1,32 @@
import axios from "axios";
import UserSignUpDto from "../models/UserSignUp";
import UserLoginDto from "../models/UserLogin";
const API_URL = "http://localhost:8080";
const register = (username, password, passwordConfirm) => {
return axios.post(API_URL + "/signup", new UserSignUpDto({login: username,
password: password,
passwordConfirm: passwordConfirm}));
};
const login = (username, password) => {
return axios
.post(API_URL + "/jwt/login", new UserLoginDto({login: username, password: password}))
.then((response) => {
if(response.status === 200){
localStorage.setItem("token", response.data)
}
});
};
const logout = () => {
localStorage.removeItem("token");
};
const AuthService = {
register,
login,
logout,
};
export default AuthService;

View File

@ -0,0 +1,68 @@
import axios from 'axios';
export default class DataService {
static dataUrlPrefix = 'http://localhost:8080';
static async readAll(url, transformer) {
const response = await fetch(this.dataUrlPrefix + url, {headers: {
"Content-Type": "application/json",
"Authorization": "Bearer " + localStorage.getItem("token")
}});
const data = await response.json();
console.log(data);
return data.map(item => transformer(item));
}
static async readUsersPage(dataUrlPrefix, url, page) {
const response = await axios.get(dataUrlPrefix + url + `?page=${page}`,{
headers:{
"Authorization": "Bearer " + localStorage.getItem("token")
}
});
return response.data;
}
static async readUser(dataUrlPrefix, url, login){
const response = await axios.get(dataUrlPrefix + url + `/${login}`);
return response.data;
}
static async read(url, transformer) {
const response = await axios.get(this.dataUrlPrefix + url,{headers: {
"Content-Type": "application/json",
"Authorization": "Bearer " + localStorage.getItem("token")
}});
return transformer(response.data);
}
static async create(url, data) {
const requestParams = {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
};
console.log(JSON.stringify(data) + " " + this.dataUrlPrefix + " " + url);
const response = await fetch(this.dataUrlPrefix + url, requestParams);
}
static async update(url, data) {
const requestParams = {
method: "PUT",
headers: {
"Content-Type": "application/json",
"Authorization": "Bearer " + localStorage.getItem("token")
},
body: JSON.stringify(data),
};
const response = await fetch(this.dataUrlPrefix + url, requestParams);
return true;
}
static async delete(url) {
const response = await axios.delete(this.dataUrlPrefix + url,{headers: {
"Content-Type": "application/json",
"Authorization": "Bearer " + localStorage.getItem("token")
}});
return response.data.id;
}
}

View File

@ -0,0 +1,45 @@
import { Outlet, Navigate, useNavigate } from "react-router-dom";
import { useEffect, useState } from "react";
export default function PrivateRoute(props) {
const navigate = useNavigate();
useEffect(() => {
window.addEventListener("storage", () => {
let token = localStorage.getItem("token");
if (token) {
getRole(token).then((role) => {
if (localStorage.getItem("role") != role) {
localStorage.removeItem("token");
localStorage.removeItem("user");
localStorage.removeItem("role");
window.dispatchEvent(new Event("storage"));
navigate("/catalog/store");
}
});
}
});
}, []);
const getRole = async function (token) {
const requestParams = {
method: "GET",
headers: {
"Content-Type": "application/json",
},
};
const requestUrl = `http://localhost:8080/user?token=${token}`;
const response = await fetch(requestUrl, requestParams);
const result = await response.text();
return result;
};
let isAllowed = false;
let userRole = localStorage.getItem("role");
if (
props.role === userRole || userRole == "ADMIN"
) {
isAllowed = true;
}
return isAllowed ? <Outlet /> : <Navigate to="/login" />;
}

0
frontend/src/style.css Normal file
View File

7
frontend/vite.config.js Normal file
View File

@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()]
})

View File

@ -0,0 +1,8 @@
package com.example.maxim.lab3.Respository;
import com.example.maxim.lab3.model.User;
import org.springframework.data.jpa.repository.JpaRepository;
public interface UserRepository extends JpaRepository<User, Long> {
User findOneByLoginIgnoreCase(String login);
}