Skip to content

P
planner-team-one
Commit a04934c2 authored by Евгений Положенцев's avatar Евгений Положенцев
Browse files
Options

Merge branch 'task-11-feature-my_tasks_page' into 'development' 

Task 11 feature my tasks page

See merge request !3
parents 46a799b6 abf6c3c9
Show whitespace changes
Inline Side-by-side
Showing with 725 additions and 2 deletions
planner-front/package-lock.json
View file @ a04934c2
......@@ -8,6 +8,7 @@
"name": "planner-front",
"version": "0.1.0",
"dependencies": {
"-": "^0.0.1",
"@emotion/react": "^11.10.4",
"@emotion/styled": "^11.10.4",
"@mui/icons-material": "^5.10.9",
......@@ -23,9 +24,15 @@
"react-redux": "^8.0.4",
"react-router-dom": "^6.4.2",
"react-scripts": "5.0.1",
"save": "^2.9.0",
"web-vitals": "^2.1.4"
}
},
"node_modules/-": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/-/-/--0.0.1.tgz",
"integrity": "sha512-3HfneK3DGAm05fpyj20sT3apkNcvPpCuccOThOPdzz8sY7GgQGe0l93XH9bt+YzibcTIgUAIMoyVJI740RtgyQ=="
},
"node_modules/@adobe/css-tools": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.0.1.tgz",
......@@ -8172,6 +8179,20 @@
"node": ">= 0.6"
}
},
"node_modules/event-stream": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/event-stream/-/event-stream-4.0.1.tgz",
"integrity": "sha512-qACXdu/9VHPBzcyhdOWR5/IahhGMf0roTeZJfzz077GwylcDd90yOHLouhmv7GJ5XzPi6ekaQWd8AvPP2nOvpA==",
"dependencies": {
"duplexer": "^0.1.1",
"from": "^0.1.7",
"map-stream": "0.0.7",
"pause-stream": "^0.0.11",
"split": "^1.0.1",
"stream-combiner": "^0.2.2",
"through": "^2.3.8"
}
},
"node_modules/eventemitter3": {
"version": "4.0.7",
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
......@@ -8739,6 +8760,11 @@
"node": ">= 0.6"
}
},
"node_modules/from": {
"version": "0.1.7",
"resolved": "https://registry.npmjs.org/from/-/from-0.1.7.tgz",
"integrity": "sha512-twe20eF1OxVxp/ML/kq2p1uc6KvFK/+vs8WjEbeKmV2He22MKm7YF2ANIt+EOqhJ5L3K/SuuPhk0hWQDjOM23g=="
},
"node_modules/fs-extra": {
"version": "10.1.0",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
......@@ -12149,6 +12175,11 @@
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
},
"node_modules/lodash.assign": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
"integrity": "sha512-hFuH8TY+Yji7Eja3mGiuAxBqLagejScbG8GbG0j6o9vzn0YL14My+ktnqtZgFTosKymC9/44wP6s7xyuLfnClw=="
},
"node_modules/lodash.debounce": {
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
......@@ -12250,6 +12281,11 @@
"tmpl": "1.0.5"
}
},
"node_modules/map-stream": {
"version": "0.0.7",
"resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.0.7.tgz",
"integrity": "sha512-C0X0KQmGm3N2ftbTGBhSyuydQ+vV1LC3f3zPvT3RXHXNZrvfPZcoXp/N5DOa8vedX/rTMm2CjTtivFg2STJMRQ=="
},
"node_modules/mdn-data": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
......@@ -12358,6 +12394,11 @@
"node": ">=4"
}
},
"node_modules/mingo": {
"version": "6.1.2",
"resolved": "https://registry.npmjs.org/mingo/-/mingo-6.1.2.tgz",
"integrity": "sha512-Ag9Cq+Mz2VOuNQDry36LEHqTJ9A8ePts78a4lDOt+TdiBXkOgihY06TwzIgpkMN58CWPPpOcSfE6vixroTwjDA=="
},
"node_modules/mini-css-extract-plugin": {
"version": "2.6.1",
"resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.6.1.tgz",
......@@ -12952,6 +12993,14 @@
"node": ">=8"
}
},
"node_modules/pause-stream": {
"version": "0.0.11",
"resolved": "https://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz",
"integrity": "sha512-e3FBlXLmN/D1S+zHzanP4E/4Z60oFAa3O051qt1pxa7DEJWKAyil6upYVXCWadEnuoqa4Pkc9oUx9zsxYeRv8A==",
"dependencies": {
"through": "~2.3"
}
},
"node_modules/performance-now": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
......@@ -15375,6 +15424,17 @@
}
}
},
"node_modules/save": {
"version": "2.9.0",
"resolved": "https://registry.npmjs.org/save/-/save-2.9.0.tgz",
"integrity": "sha512-eg8+g8CjvehE/2C6EbLdtK1pINVD27pcJLj4M9PjWWhoeha/y5bWf4dp/0RF+OzbKTcG1bae9qi3PAqiR8CJTg==",
"dependencies": {
"async": "^3.2.2",
"event-stream": "^4.0.1",
"lodash.assign": "^4.2.0",
"mingo": "^6.1.0"
}
},
"node_modules/sax": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
......@@ -15743,6 +15803,17 @@
"wbuf": "^1.7.3"
}
},
"node_modules/split": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/split/-/split-1.0.1.tgz",
"integrity": "sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==",
"dependencies": {
"through": "2"
},
"engines": {
"node": "*"
}
},
"node_modules/sprintf-js": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
......@@ -15786,6 +15857,15 @@
"node": ">= 0.8"
}
},
"node_modules/stream-combiner": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.2.2.tgz",
"integrity": "sha512-6yHMqgLYDzQDcAkL+tjJDC5nSNuNIx0vZtRZeiPh7Saef7VHX9H5Ijn9l2VIol2zaNYlYEX6KyuT/237A58qEQ==",
"dependencies": {
"duplexer": "~0.1.1",
"through": "~2.3.4"
}
},
"node_modules/string_decoder": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
......@@ -16303,6 +16383,11 @@
"resolved": "https://registry.npmjs.org/throat/-/throat-6.0.1.tgz",
"integrity": "sha512-8hmiGIJMDlwjg7dlJ4yKGLK8EsYqKgPWbG3b4wjJddKNwc7N7Dpn08Df4szr/sZdMVeOstrdYSsqzX6BYbcB+w=="
},
"node_modules/through": {
"version": "2.3.8",
"resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
"integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg=="
},
"node_modules/thunky": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
......@@ -17652,6 +17737,11 @@
}
},
"dependencies": {
"-": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/-/-/--0.0.1.tgz",
"integrity": "sha512-3HfneK3DGAm05fpyj20sT3apkNcvPpCuccOThOPdzz8sY7GgQGe0l93XH9bt+YzibcTIgUAIMoyVJI740RtgyQ=="
},
"@adobe/css-tools": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.0.1.tgz",
......@@ -23405,6 +23495,20 @@
"resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
"integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg=="
},
"event-stream": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/event-stream/-/event-stream-4.0.1.tgz",
"integrity": "sha512-qACXdu/9VHPBzcyhdOWR5/IahhGMf0roTeZJfzz077GwylcDd90yOHLouhmv7GJ5XzPi6ekaQWd8AvPP2nOvpA==",
"requires": {
"duplexer": "^0.1.1",
"from": "^0.1.7",
"map-stream": "0.0.7",
"pause-stream": "^0.0.11",
"split": "^1.0.1",
"stream-combiner": "^0.2.2",
"through": "^2.3.8"
}
},
"eventemitter3": {
"version": "4.0.7",
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
......@@ -23830,6 +23934,11 @@
"resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
"integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q=="
},
"from": {
"version": "0.1.7",
"resolved": "https://registry.npmjs.org/from/-/from-0.1.7.tgz",
"integrity": "sha512-twe20eF1OxVxp/ML/kq2p1uc6KvFK/+vs8WjEbeKmV2He22MKm7YF2ANIt+EOqhJ5L3K/SuuPhk0hWQDjOM23g=="
},
"fs-extra": {
"version": "10.1.0",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
......@@ -26288,6 +26397,11 @@
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
},
"lodash.assign": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
"integrity": "sha512-hFuH8TY+Yji7Eja3mGiuAxBqLagejScbG8GbG0j6o9vzn0YL14My+ktnqtZgFTosKymC9/44wP6s7xyuLfnClw=="
},
"lodash.debounce": {
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
......@@ -26373,6 +26487,11 @@
"tmpl": "1.0.5"
}
},
"map-stream": {
"version": "0.0.7",
"resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.0.7.tgz",
"integrity": "sha512-C0X0KQmGm3N2ftbTGBhSyuydQ+vV1LC3f3zPvT3RXHXNZrvfPZcoXp/N5DOa8vedX/rTMm2CjTtivFg2STJMRQ=="
},
"mdn-data": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
......@@ -26448,6 +26567,11 @@
"resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
"integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg=="
},
"mingo": {
"version": "6.1.2",
"resolved": "https://registry.npmjs.org/mingo/-/mingo-6.1.2.tgz",
"integrity": "sha512-Ag9Cq+Mz2VOuNQDry36LEHqTJ9A8ePts78a4lDOt+TdiBXkOgihY06TwzIgpkMN58CWPPpOcSfE6vixroTwjDA=="
},
"mini-css-extract-plugin": {
"version": "2.6.1",
"resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.6.1.tgz",
......@@ -26867,6 +26991,14 @@
"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
"integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
},
"pause-stream": {
"version": "0.0.11",
"resolved": "https://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz",
"integrity": "sha512-e3FBlXLmN/D1S+zHzanP4E/4Z60oFAa3O051qt1pxa7DEJWKAyil6upYVXCWadEnuoqa4Pkc9oUx9zsxYeRv8A==",
"requires": {
"through": "~2.3"
}
},
"performance-now": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
......@@ -28397,6 +28529,17 @@
"neo-async": "^2.6.2"
}
},
"save": {
"version": "2.9.0",
"resolved": "https://registry.npmjs.org/save/-/save-2.9.0.tgz",
"integrity": "sha512-eg8+g8CjvehE/2C6EbLdtK1pINVD27pcJLj4M9PjWWhoeha/y5bWf4dp/0RF+OzbKTcG1bae9qi3PAqiR8CJTg==",
"requires": {
"async": "^3.2.2",
"event-stream": "^4.0.1",
"lodash.assign": "^4.2.0",
"mingo": "^6.1.0"
}
},
"sax": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
......@@ -28699,6 +28842,14 @@
"wbuf": "^1.7.3"
}
},
"split": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/split/-/split-1.0.1.tgz",
"integrity": "sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==",
"requires": {
"through": "2"
}
},
"sprintf-js": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
......@@ -28734,6 +28885,15 @@
"resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
"integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ=="
},
"stream-combiner": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.2.2.tgz",
"integrity": "sha512-6yHMqgLYDzQDcAkL+tjJDC5nSNuNIx0vZtRZeiPh7Saef7VHX9H5Ijn9l2VIol2zaNYlYEX6KyuT/237A58qEQ==",
"requires": {
"duplexer": "~0.1.1",
"through": "~2.3.4"
}
},
"string_decoder": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
......@@ -29116,6 +29276,11 @@
"resolved": "https://registry.npmjs.org/throat/-/throat-6.0.1.tgz",
"integrity": "sha512-8hmiGIJMDlwjg7dlJ4yKGLK8EsYqKgPWbG3b4wjJddKNwc7N7Dpn08Df4szr/sZdMVeOstrdYSsqzX6BYbcB+w=="
},
"through": {
"version": "2.3.8",
"resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
"integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg=="
},
"thunky": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
planner-front/package.json
View file @ a04934c2
......@@ -3,6 +3,7 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"-": "^0.0.1",
"@emotion/react": "^11.10.4",
"@emotion/styled": "^11.10.4",
"@mui/icons-material": "^5.10.9",
......@@ -18,6 +19,7 @@
"react-redux": "^8.0.4",
"react-router-dom": "^6.4.2",
"react-scripts": "5.0.1",
"save": "^2.9.0",
"web-vitals": "^2.1.4"
},
"scripts": {
......
planner-front/src/App.js
View file @ a04934c2
......@@ -2,6 +2,7 @@ import {Routes, Route, Outlet, Navigate, BrowserRouter} from "react-router-dom";
import {Container} from "@mui/material";
import {useSelector} from "react-redux";
import AppToolbar from "./components/UI/AppToolBar/AppToolBar";
import MyTasks from './containers/MyTasks/MyTasks'
const ProtectedRoute = ({isAllowed, roles, redirectUrl, children}) => {
const user = useSelector(state => state.users?.user);
......@@ -20,7 +21,7 @@ const App = () => {
<>
<AppToolbar/>
<main>
<Container>
<Container >
<Outlet/>
</Container>
</main>
......@@ -59,7 +60,7 @@ const App = () => {
isAllowed={user}
redirectUrl={"/log-in"}
>
<h1>my tasks page</h1>
<MyTasks/>
</ProtectedRoute>
}/>
......
planner-front/src/components/MyTaskToolBar/MyTaskToolBar.js 0 → 100644
View file @ a04934c2
import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';
export default function ButtonAppBar() {
return (
<Box sx={{ flexGrow: 1 }}>
<AppBar position="static">
<Toolbar>
<IconButton
size="large"
edge="start"
color="inherit"
aria-label="menu"
sx={{ mr: 2 }}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
Мои задачи
</Typography>
<Button color="inherit">Добавить задачу</Button>
</Toolbar>
</AppBar>
</Box>
);
}
planner-front/src/components/UI/Button/Button.css 0 → 100644
View file @ a04934c2
.button {
background-color:rgb(162, 164, 168);
outline: none;
cursor: pointer;
font: inherit;
padding: 5px;
margin: 10px;
font-weight: bold;
border-radius: 2px;
color: #FFF;
border: 1px solid rgb(162, 164, 168);
width: 200px;
height: 50px;
line-height: 35px;
}
.button:hover{
background-color:white;
color: black;
}
\ No newline at end of file
planner-front/src/components/UI/Button/Button.js 0 → 100644
View file @ a04934c2
import "./Button.css";
const Button = ({onClick,btnText}) => {
return <button
onClick={onClick}
className="button"
>
{btnText}
</button>
};
export default Button;
\ No newline at end of file
planner-front/src/components/UI/TaskModal/TaskModal.css 0 → 100644
View file @ a04934c2
.modal{
width: 200px;
height: 200px;
background-color: rgb(180, 243, 243);
display: flex;
margin:10% 20%;
padding: 30px;
word-break: break-all;
transition-duration:0.5s;
}
.modalBox{
display: flex;
justify-content: space-around;
flex-direction: column;
}
\ No newline at end of file
planner-front/src/components/UI/TaskModal/TaskModal.js 0 → 100644
View file @ a04934c2
import { Modal, IconButton } from '@mui/material';
import './TaskModal.css'
const TaskModal = (props) => {
return (
<Modal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
className={"modal"}
closeAfterTransition
onClose={props.handleClose}
open={props.open}
>
<div className="modalBox">
{ props.task && props.task.title && (
<div
style={{
width: "200px",
height: "200px",
color: "white",
fontWeight: "600",
}}
>
{props.task.title}
</div>
)}
{props.task && props.task.description && (
<div style={{ width: "200px", height: "200px", color: "white" }}>
{props.task.description}
</div>
)}
<IconButton
sx={{ marginLeft: 0, color: "white" }}
aria-label="close"
onClick={props.handleClose}
>
X
</IconButton>
</div>
</Modal>
);
};
export default TaskModal;
\ No newline at end of file
planner-front/src/containers/MyTasks/MyTasks.js 0 → 100644
View file @ a04934c2
import * as React from 'react';
import Box from '@mui/material/Box';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TablePagination from '@mui/material/TablePagination';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
import IconButton from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip';
import DeleteIcon from '@mui/icons-material/Delete';
import { useState } from "react";
import Input from '@mui/material/Input';
import { Done } from '@mui/icons-material';
import {Edit} from '@mui/icons-material'
import TaskModal from '../../components/UI/TaskModal/TaskModal'
import EnhancedTableHead from './MyTasksHeader/MyTasksHeader';
import MyTaskToolBar from '../../components/MyTaskToolBar/MyTaskToolBar'
function descendingComparator(a, b, orderBy) {
if (b[orderBy] < a[orderBy]) {
return -1;
}
if (b[orderBy] > a[orderBy]) {
return 1;
}
return 0;
}
function getComparator(order, orderBy) {
return order === 'desc'
? (a, b) => descendingComparator(a, b, orderBy)
: (a, b) => -descendingComparator(a, b, orderBy);
}
function stableSort(array, comparator) {
const stabilizedThis = array.map((el, index) => [el, index]);
stabilizedThis.sort((a, b) => {
const order = comparator(a[0], b[0]);
if (order !== 0) {
return order;
}
return a[1] - b[1];
});
return stabilizedThis.map((el) => el[0]);
}
const CustomTableCell = ({ task, name, onChange, onModalOpen }) => {
return (
<TableCell align="left" style={{ width: "130px", height: "40px" }}>
{task.isEditMode ? (
<Input
value={task[name]}
name={name}
onChange={(e) => onChange(e, task)}
style={{ width: "130px", height: "40px" }}
/>
) : onModalOpen ? (
<span style={{ width: "100%" }} onClick={(e) => onModalOpen(e, task)}>
{task[name]}
</span>
) : (
task[name]
)}
</TableCell>
);
};
export default function EnhancedTable() {
const [order, setOrder] = React.useState('asc');
const [orderBy, setOrderBy] = React.useState('id');
const [page, setPage] = React.useState(0);
const [rowsPerPage, setRowsPerPage] = React.useState(5);
const exampleTasks=[
{
user:"first",
title:"задача1",
description:"описание задачи11111",
priority:"A",
author:"Ivan",
executor:"Arman",
dateTimeStart:"26.10.2022",
dateTimeDue:"27.10.2022",
id:1,
dateCreated:"26.10.2022"
},
{
user:"second",
title:"задача2",
description:"описание задачи222222",
author:"Ivan",
executor:"Elena",
priority:"B",
dateTimeStart:"26.10.2022",
dateTimeDue:"27.10.2022",
id:2,
dateCreated:"26.10.2022"
},
{
user:"theird",
title:"задача3",
description:"описание задачи333333bjh,khkuhlhvilv hmgjtycikg mkgyxxkjfkkmgyhkfrdtseygdtjtuliuo8plfyvguh,bb",
author:"Artem",
executor:"Bota",
priority:"B",
dateTimeStart:"30.10.2022",
dateTimeDue:"02.11.2022",
id:3,
dateCreated:"27.10.2022",
}
]
const formattedTasks = exampleTasks.map((t)=> {return {...t, isEditableMode: false}})
const [tasks,setTasks]=useState(formattedTasks)
const onToggleEditMode = id => {
setTasks(state => {
return tasks.map(task => {
if (task.id === id) {
return { ...task, isEditMode: !task.isEditMode };
}
return task;
});
});
};
const onChange = (e, task) => {
const value = e.target.value;
const name = e.target.name;
const { id } = task;
const newTasks = tasks.map(task => {
if (task.id === id) {
return { ...task, [name]: value };
}
return task;
});
setTasks(newTasks);
};
const handleRequestSort = (event, property) => {
const isAsc = orderBy === property && order === 'asc';
setOrder(isAsc ? 'desc' : 'asc');
setOrderBy(property);
};
const deleteTask=()=>{
// удалить по id из selected
}
const handleChangePage = (event, newPage) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (event) => {
setRowsPerPage(parseInt(event.target.value, 10));
setPage(0);
};
const [modal, setModal] =useState({
open: false,
task: null
});
const onModalOpen = (event, task) => {
console.log(event,task)
event.stopPropagation();
setModal({ ...modal, open: true, task});
};
const handleClose = () => {
setModal({ ...modal, open: false, task: null });
};
return (
<Box sx={{ width: 'fullwidth' }}>
<Paper sx={{ width: '100%', mb: 2 }}>
<MyTaskToolBar/>
<TableContainer>
<Table
sx={{ minWidth: 750 }}
aria-labelledby="tableTitle"
>
<EnhancedTableHead
order={order}
orderBy={orderBy}
onRequestSort={handleRequestSort}
rowCount={tasks.length}
/>
<TableBody>
{stableSort(tasks, getComparator(order, orderBy))
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((task, index) => {
return (
<>
<TableRow
hover
key={task.id}
>
<TableCell
component="th"
scope="row"
padding="none"
></TableCell>
<CustomTableCell {...{ task, name: "priority", onChange }} />
<CustomTableCell {...{ task, name: "dateCreated", onChange }} />
<CustomTableCell {...{ task, name: "title", onChange, onModalOpen}} />
<CustomTableCell {...{ task, name: "author", onChange }} />
<CustomTableCell {...{ task, name: "dateTimeStart", onChange }} />
<CustomTableCell {...{ task, name: "dateTimeDue", onChange }} />
<CustomTableCell {...{ task, name: "done", onChange }} />
<TableCell >
{task.isEditMode ? (
<IconButton
aria-label="done"
onClick={() => onToggleEditMode(task.id)}
>
<Done/>
</IconButton>
) : (
<IconButton
aria-label="delete"
onClick={() => onToggleEditMode(task.id)}
>
<Edit/>
</IconButton>
)}
</TableCell>
<TableCell>
<Tooltip title="Delete">
<IconButton onClick={(id)=>{deleteTask(id)}}>
<DeleteIcon />
</IconButton>
</Tooltip>
</TableCell>
</TableRow>
</>
);
})}
</TableBody>
</Table>
</TableContainer>
<TablePagination
rowsPerPageOptions={[5,10, 25]}
component="div"
count={tasks.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
/>
</Paper>
<TaskModal
task={modal.task}
open={modal.open}
handleClose={handleClose}
/>
</Box>
);
}
planner-front/src/containers/MyTasks/MyTasksHeader/MyTasksHeader.js 0 → 100644
View file @ a04934c2
import * as React from 'react';
import PropTypes from 'prop-types';
import Box from '@mui/material/Box';
import TableCell from '@mui/material/TableCell';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import TableSortLabel from '@mui/material/TableSortLabel';
import { visuallyHidden } from '@mui/utils';
function descendingComparator(a, b, orderBy) {
if (b[orderBy] < a[orderBy]) {
return -1;
}
if (b[orderBy] > a[orderBy]) {
return 1;
}
return 0;
}
function getComparator(order, orderBy) {
return order === 'desc'
? (a, b) => descendingComparator(a, b, orderBy)
: (a, b) => -descendingComparator(a, b, orderBy);
}
// This method is created for cross-browser compatibility, if you don't
// need to support IE11, you can use Array.prototype.sort() directly
function stableSort(array, comparator) {
const stabilizedThis = array.map((el, index) => [el, index]);
stabilizedThis.sort((a, b) => {
const order = comparator(a[0], b[0]);
if (order !== 0) {
return order;
}
return a[1] - b[1];
});
return stabilizedThis.map((el) => el[0]);
}
const headCells = [
{
id: 'id',
numeric: true,
disablePadding: true,
label: '',
},
{
id: 'priority',
numeric: false,
disablePadding: true,
label: 'Приоритет',
},
{
id: 'date',
numeric: true,
disablePadding: false,
label: 'Дата',
},
{
id: 'task',
numeric: true,
disablePadding: false,
label: 'Задача',
},
{
id: 'author',
numeric: true,
disablePadding: false,
label: 'Автор',
},
{
id: 'startDate',
numeric: true,
disablePadding: false,
label: 'Дата начала',
},
{
id: 'endDate',
numeric: true,
disablePadding: false,
label: 'Дата завершения',
},
{
id: 'done',
numeric: true,
disablePadding: false,
label: 'Выполнено',
},
{
id: 'change',
numeric: false,
disablePadding: false,
label: '',
},
{
id: 'delete',
numeric: false,
disablePadding: false,
label: '',
},
];
export default function EnhancedTableHead(props) {
const { order, orderBy, rowCount, onRequestSort } =
props;
const createSortHandler = (property) => (event) => {
onRequestSort(event, property);
};
return (
<TableHead>
<TableRow>
{headCells.map((headCell) => (
<TableCell
key={headCell.id}
align={'center'}
padding={headCell.disablePadding ? 'none' : 'normal'}
sortDirection={orderBy === headCell.id ? order : false}
>
<TableSortLabel
active={orderBy === headCell.id}
direction={orderBy === headCell.id ? order : 'asc'}
onClick={createSortHandler(headCell.id)}
>
{headCell.label}
{orderBy === headCell.id ? (
<Box component="span" sx={visuallyHidden}>
{order === 'desc' ? 'sorted descending' : 'sorted ascending'}
</Box>
) : null}
</TableSortLabel>
</TableCell>
))}
</TableRow>
</TableHead>
);
}
EnhancedTableHead.propTypes = {
onRequestSort: PropTypes.func.isRequired,
order: PropTypes.oneOf(['asc', 'desc']).isRequired,
orderBy: PropTypes.string.isRequired,
rowCount: PropTypes.number.isRequired,
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment