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

Task 11 feature my tasks page

See merge request !3

planner-front/package-lock.json

@@ -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

@@ -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

@@ -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

+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

+.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

+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

+.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

+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

+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

+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,
+};
+