Merge branch 'task-18-feature-modification-my_tasks_page' into 'development'

Task 18 feature modification my tasks page

See merge request !8

planner-front/package-lock.json

@@ -9,15 +9,19 @@
       "version": "0.1.0",
       "dependencies": {
         "-": "^0.0.1",
+        "@date-io/moment": "^2.16.1",
         "@emotion/react": "^11.10.4",
         "@emotion/styled": "^11.10.4",
         "@mui/icons-material": "^5.10.9",
         "@mui/material": "^5.10.9",
+        "@mui/x-date-pickers": "^5.0.7",
         "@reduxjs/toolkit": "^1.8.6",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "axios": "^1.1.2",
+        "dayjs": "^1.11.6",
+        "moment": "^2.29.4",
         "prop-types": "^15.8.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -2148,6 +2152,75 @@
         "postcss-selector-parser": "^6.0.10"
       }
     },
+    "node_modules/@date-io/core": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/@date-io/core/-/core-2.16.0.tgz",
+      "integrity": "sha512-DYmSzkr+jToahwWrsiRA2/pzMEtz9Bq1euJwoOuYwuwIYXnZFtHajY2E6a1VNVDc9jP8YUXK1BvnZH9mmT19Zg=="
+    },
+    "node_modules/@date-io/date-fns": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/@date-io/date-fns/-/date-fns-2.16.0.tgz",
+      "integrity": "sha512-bfm5FJjucqlrnQcXDVU5RD+nlGmL3iWgkHTq3uAZWVIuBu6dDmGa3m8a6zo2VQQpu8ambq9H22UyUpn7590joA==",
+      "dependencies": {
+        "@date-io/core": "^2.16.0"
+      },
+      "peerDependencies": {
+        "date-fns": "^2.0.0"
+      },
+      "peerDependenciesMeta": {
+        "date-fns": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@date-io/dayjs": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/@date-io/dayjs/-/dayjs-2.16.0.tgz",
+      "integrity": "sha512-y5qKyX2j/HG3zMvIxTobYZRGnd1FUW2olZLS0vTj7bEkBQkjd2RO7/FEwDY03Z1geVGlXKnzIATEVBVaGzV4Iw==",
+      "dependencies": {
+        "@date-io/core": "^2.16.0"
+      },
+      "peerDependencies": {
+        "dayjs": "^1.8.17"
+      },
+      "peerDependenciesMeta": {
+        "dayjs": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@date-io/luxon": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@date-io/luxon/-/luxon-2.16.1.tgz",
+      "integrity": "sha512-aeYp5K9PSHV28946pC+9UKUi/xMMYoaGelrpDibZSgHu2VWHXrr7zWLEr+pMPThSs5vt8Ei365PO+84pCm37WQ==",
+      "dependencies": {
+        "@date-io/core": "^2.16.0"
+      },
+      "peerDependencies": {
+        "luxon": "^1.21.3 || ^2.x || ^3.x"
+      },
+      "peerDependenciesMeta": {
+        "luxon": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@date-io/moment": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@date-io/moment/-/moment-2.16.1.tgz",
+      "integrity": "sha512-JkxldQxUqZBfZtsaCcCMkm/dmytdyq5pS1RxshCQ4fHhsvP5A7gSqPD22QbVXMcJydi3d3v1Y8BQdUKEuGACZQ==",
+      "dependencies": {
+        "@date-io/core": "^2.16.0"
+      },
+      "peerDependencies": {
+        "moment": "^2.24.0"
+      },
+      "peerDependenciesMeta": {
+        "moment": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@emotion/babel-plugin": {
       "version": "11.10.5",
       "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.5.tgz",
@@ -3412,6 +3485,64 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
+    "node_modules/@mui/x-date-pickers": {
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-5.0.7.tgz",
+      "integrity": "sha512-NhxG4tGj+NabxTCQxw4d5RVYl8yzBycHw3YbfawaPVRAsBk/1p3ktSdTbiEi/j+8IUrT8C7Kh/XMNNnOwub/3Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.9",
+        "@date-io/core": "^2.15.0",
+        "@date-io/date-fns": "^2.15.0",
+        "@date-io/dayjs": "^2.15.0",
+        "@date-io/luxon": "^2.15.0",
+        "@date-io/moment": "^2.15.0",
+        "@mui/utils": "^5.10.3",
+        "@types/react-transition-group": "^4.4.5",
+        "clsx": "^1.2.1",
+        "prop-types": "^15.7.2",
+        "react-transition-group": "^4.4.5",
+        "rifm": "^0.12.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.9.0",
+        "@emotion/styled": "^11.8.1",
+        "@mui/material": "^5.4.1",
+        "@mui/system": "^5.4.1",
+        "date-fns": "^2.25.0",
+        "dayjs": "^1.10.7",
+        "luxon": "^1.28.0 || ^2.0.0 || ^3.0.0",
+        "moment": "^2.29.1",
+        "react": "^17.0.2 || ^18.0.0",
+        "react-dom": "^17.0.2 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "date-fns": {
+          "optional": true
+        },
+        "dayjs": {
+          "optional": true
+        },
+        "luxon": {
+          "optional": true
+        },
+        "moment": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -6844,6 +6975,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.6.tgz",
+      "integrity": "sha512-zZbY5giJAinCG+7AGaw0wIhNZ6J8AhWuSXKvuc1KAyMiRsvGQWqh4L+MomvhdAYjN+lqvVCMq1I41e3YHvXkyQ=="
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -12501,6 +12637,14 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -15241,6 +15385,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rifm": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/rifm/-/rifm-0.12.1.tgz",
+      "integrity": "sha512-OGA1Bitg/dSJtI/c4dh90svzaUPt228kzFsUkJbtA2c964IqEAwWXeL9ZJi86xWv3j5SMqRvGULl7bA6cK0Bvg==",
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
     "node_modules/rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -19109,6 +19261,43 @@
       "integrity": "sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==",
       "requires": {}
     },
+    "@date-io/core": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/@date-io/core/-/core-2.16.0.tgz",
+      "integrity": "sha512-DYmSzkr+jToahwWrsiRA2/pzMEtz9Bq1euJwoOuYwuwIYXnZFtHajY2E6a1VNVDc9jP8YUXK1BvnZH9mmT19Zg=="
+    },
+    "@date-io/date-fns": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/@date-io/date-fns/-/date-fns-2.16.0.tgz",
+      "integrity": "sha512-bfm5FJjucqlrnQcXDVU5RD+nlGmL3iWgkHTq3uAZWVIuBu6dDmGa3m8a6zo2VQQpu8ambq9H22UyUpn7590joA==",
+      "requires": {
+        "@date-io/core": "^2.16.0"
+      }
+    },
+    "@date-io/dayjs": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/@date-io/dayjs/-/dayjs-2.16.0.tgz",
+      "integrity": "sha512-y5qKyX2j/HG3zMvIxTobYZRGnd1FUW2olZLS0vTj7bEkBQkjd2RO7/FEwDY03Z1geVGlXKnzIATEVBVaGzV4Iw==",
+      "requires": {
+        "@date-io/core": "^2.16.0"
+      }
+    },
+    "@date-io/luxon": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@date-io/luxon/-/luxon-2.16.1.tgz",
+      "integrity": "sha512-aeYp5K9PSHV28946pC+9UKUi/xMMYoaGelrpDibZSgHu2VWHXrr7zWLEr+pMPThSs5vt8Ei365PO+84pCm37WQ==",
+      "requires": {
+        "@date-io/core": "^2.16.0"
+      }
+    },
+    "@date-io/moment": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@date-io/moment/-/moment-2.16.1.tgz",
+      "integrity": "sha512-JkxldQxUqZBfZtsaCcCMkm/dmytdyq5pS1RxshCQ4fHhsvP5A7gSqPD22QbVXMcJydi3d3v1Y8BQdUKEuGACZQ==",
+      "requires": {
+        "@date-io/core": "^2.16.0"
+      }
+    },
     "@emotion/babel-plugin": {
       "version": "11.10.5",
       "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.5.tgz",
@@ -19983,6 +20172,25 @@
         }
       }
     },
+    "@mui/x-date-pickers": {
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-5.0.7.tgz",
+      "integrity": "sha512-NhxG4tGj+NabxTCQxw4d5RVYl8yzBycHw3YbfawaPVRAsBk/1p3ktSdTbiEi/j+8IUrT8C7Kh/XMNNnOwub/3Q==",
+      "requires": {
+        "@babel/runtime": "^7.18.9",
+        "@date-io/core": "^2.15.0",
+        "@date-io/date-fns": "^2.15.0",
+        "@date-io/dayjs": "^2.15.0",
+        "@date-io/luxon": "^2.15.0",
+        "@date-io/moment": "^2.15.0",
+        "@mui/utils": "^5.10.3",
+        "@types/react-transition-group": "^4.4.5",
+        "clsx": "^1.2.1",
+        "prop-types": "^15.7.2",
+        "react-transition-group": "^4.4.5",
+        "rifm": "^0.12.1"
+      }
+    },
     "@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -22516,6 +22724,11 @@
         "whatwg-url": "^8.0.0"
       }
     },
+    "dayjs": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.6.tgz",
+      "integrity": "sha512-zZbY5giJAinCG+7AGaw0wIhNZ6J8AhWuSXKvuc1KAyMiRsvGQWqh4L+MomvhdAYjN+lqvVCMq1I41e3YHvXkyQ=="
+    },
     "debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -26643,6 +26856,11 @@
         "minimist": "^1.2.6"
       }
     },
+    "moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -28427,6 +28645,12 @@
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw=="
     },
+    "rifm": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/rifm/-/rifm-0.12.1.tgz",
+      "integrity": "sha512-OGA1Bitg/dSJtI/c4dh90svzaUPt228kzFsUkJbtA2c964IqEAwWXeL9ZJi86xWv3j5SMqRvGULl7bA6cK0Bvg==",
+      "requires": {}
+    },
     "rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",

planner-front/package.json

@@ -4,15 +4,19 @@
   "private": true,
   "dependencies": {
     "-": "^0.0.1",
+    "@date-io/moment": "^2.16.1",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@mui/icons-material": "^5.10.9",
     "@mui/material": "^5.10.9",
+    "@mui/x-date-pickers": "^5.0.7",
     "@reduxjs/toolkit": "^1.8.6",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.1.2",
+    "dayjs": "^1.11.6",
+    "moment": "^2.29.4",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

planner-front/src/App.js

@@ -23,7 +23,7 @@ const App = () => {
             <>
               <AppToolbar/>
               <main>
-                  <Container >
+                  <Container maxWidth={false} sx={{maxWidth:'2500px'}}>
                       <Outlet/>
                   </Container>
               </main>

planner-front/src/components/MyTasksCompoments/CustomTableCell.js

+import * as React from 'react';
+import TableCell from '@mui/material/TableCell';
+import IconButton from '@mui/material/IconButton';
+import Input from '@mui/material/Input';
+import { Done, CalendarToday } from '@mui/icons-material';
+import MaterialUIPickers from '../UI/DateTimePicker/DateTimePicker';
+
+
+const  CustomTableCell = ({ task, name, onChange, onModalOpen }) => {
+
+  const styles = { width: "auto", height: "40px" };
+
+  return (
+    <>
+{task.isEditMode && name === "title" ? (
+    <TableCell 
+    onClick={(e) => onModalOpen(e, task)} align="left" style={styles}>
+        <Input
+          value={task[name]}
+          name={name}
+          onChange={(e) => onChange(e, task)}
+          style={styles}
+        />
+    </TableCell>
+      ) : task.isEditMode && name !== "title"? (
+        <TableCell align="left" style={styles}>
+        <Input
+          value={task[name]}
+          name={name}
+          onChange={(e) => onChange(e, task)}
+          style={styles}
+        />
+        </TableCell>
+      ) : onModalOpen ? (
+        <TableCell align="left" style={styles} onClick={(e) => onModalOpen(e, task)}>
+        <span style={{ width: "100%" }} >
+          {task[name]}
+        </span>
+        </TableCell>
+      ) : (
+        <TableCell align="left" style={styles}>
+        {task[name]}
+        
+        </TableCell>
+      )}
+</>
+  );
+};
+
+
+export default  CustomTableCell;
+
+ 
\ No newline at end of file

planner-front/src/components/MyTaskToolBar/MyTaskToolBar.js → planner-front/src/components/MyTasksCompoments/MyTaskToolBar.js

@@ -4,27 +4,18 @@ 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() {
+
+export default function MyTaskToolBar(props) {
+  
   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>
+          <Button color="inherit" onClick={props.onClick} >Добавить задачу</Button>
         </Toolbar>
       </AppBar>
     </Box>

planner-front/src/components/UI/TaskModal/TaskModal.js → planner-front/src/components/MyTasksCompoments/TaskModal/TaskModal.js

 import { Modal, IconButton } from '@mui/material';
-import './TaskModal.css'
+import './TaskModal.css';
+import { Done } from '@mui/icons-material';
+import Input from '@mui/material/Input';
+import { useState, useEffect } from "react";
 
 const TaskModal = (props) => {
 
+  const [taskContent, setTaskContent] = useState();
+  
+  useEffect(() => {
+    if (props.task !== null) {
+      setTaskContent({
+        title: props.task.title,
+        description: props.task.description,
+      });
+    }
+  }, [props.task]);
+  
+
+  const inputChangeHandler = (e) => {
+    const { name, value } = e.target;
+    setTaskContent((prevState) => {
+      return { ...prevState, [name]: value };
+    });
+    props.onChange(e, props.task);
+  };
+
+  const saveModalData=()=>{
+      props.handleClose()
+  };
+ 
     return (
         <Modal
         aria-labelledby="transition-modal-title"
@@ -12,6 +39,29 @@ const TaskModal = (props) => {
         onClose={props.handleClose}
         open={props.open}
       >
+{ props?.task?.isEditMode ? 
+
+        <div className="modalBox">
+        <Input
+               value={taskContent?.title}
+               name={"title"}
+               onChange={inputChangeHandler}
+               style={{ width: "auto", fontSize:"12px",color: "white",fontWeight: "600" }}
+                />
+          <Input
+                value={taskContent?.description}
+                name={"description"}
+                onChange={inputChangeHandler}
+                style={{ width: "auto", fontSize:"12px",color: "white" }}
+                />   
+            <IconButton
+              aria-label="done"
+              onClick={saveModalData}
+            >
+              <Done/>
+            </IconButton>        
+        </div>:
+        
         <div className="modalBox">
           { props.task && props.task.title && (
             <div
@@ -19,7 +69,7 @@ const TaskModal = (props) => {
                 width: "200px",
                 height: "200px",
                 color: "white",
-                fontWeight: "600",
+                fontWeight: "600"
               }}
             >
               {props.task.title}
@@ -38,6 +88,7 @@ const TaskModal = (props) => {
             X
           </IconButton>
         </div>
+  }
       </Modal>
     );
   };

planner-front/src/components/UI/DateTimePicker/DateTimePicker.js

+import * as React from 'react';
+import TextField from '@mui/material/TextField';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import { useState, useEffect } from "react";
+import dayjs from 'dayjs';
+import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
+
+export default function MaterialUIPickers(props) {
+ 
+console.log(props)
+ 
+if (props.task.dateTimeStart!==undefined)
+  return (
+    <LocalizationProvider dateAdapter={AdapterMoment}>
+    <DateTimePicker
+      renderInput={(params) => (
+        <TextField {...params} name="dateCreated" />
+      )}
+      value={
+        props.newStartedDate && props.newStartedDate.id === props.task.id? props.newStartedDate.date
+          : props.task.dateTimeStart
+      }
+      onChange={(newValue) => {
+        props.setNewStartedDate({
+          id: props.task.id,
+          date: newValue,
+        });
+      }}
+    />
+  </LocalizationProvider>
+  );
+
+else if(props.task.dateTimeDue!==undefined) {
+  return (
+    <LocalizationProvider dateAdapter={AdapterMoment}>
+    <DateTimePicker
+      renderInput={(params) => (
+        <TextField {...params} name="dateCreated" />
+      )}
+      value={
+        props.newDueDate && props.newDueDate.id === props.task.id? props.newDueDate.date
+          : props.task.dateTimeDue
+      }
+      onChange={(newValue) => {
+        props.setNewDueDate({
+          id: props.task.id,
+          date: newValue,
+        });
+      }}
+    />
+  </LocalizationProvider>
+  );
+}
+}
\ 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'
+import * as React from "react";
+import {
+  Box,
+  Table,
+  TableBody,
+  TextField,
+  TableCell,
+  TableContainer,
+  TablePagination,
+  TableRow,
+  Typography,
+  Paper,
+  IconButton,
+  Tooltip,
+  Input,
+} from "@mui/material";
+import { useState, useEffect } from "react";
+import { Done, Edit } from "@mui/icons-material";
+import DeleteIcon from "@mui/icons-material/Delete";
+import TaskModal from "../../components/MyTasksCompoments/TaskModal/TaskModal";
+import EnhancedTableHead from "./MyTasksHeader/MyTasksHeader";
+import { Container } from "@mui/system";
+import { DateTimePicker, LocalizationProvider } from "@mui/x-date-pickers";
+import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
+import moment from "moment";
+import MyTaskToolBar from '../../components/MyTasksCompoments/MyTaskToolBar';
+import CustomTableCell from "../../components/MyTasksCompoments/CustomTableCell";
+import MaterialUIPickers from "../../components/UI/DateTimePicker/DateTimePicker";
 
 function descendingComparator(a, b, orderBy) {
   if (b[orderBy] < a[orderBy]) {
@@ -48,35 +57,21 @@ function stableSort(array, comparator) {
 }
 
 
-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 [newStartedDate, setNewStartedDate] = React.useState();
+  const [newDueDate, setNewDueDate] = React.useState();
+
+  const handleChange = (id, newDate) => {
+    setNewStartedDate({ id: id, date: newDate });
 
-const exampleTasks=[
+  };
+
+  const [tasks,setTasks]=useState([
   {
     user:"first",
     title:"задача1",
@@ -84,8 +79,8 @@ const exampleTasks=[
     priority:"A",
     author:"Ivan",
     executor:"Arman",
-    dateTimeStart:"26.10.2022",
-    dateTimeDue:"27.10.2022",
+    dateTimeStart: "2022-10-26T11:00:00",
+      dateTimeDue: "2022-10-27T10:30:00",
     id:1,
     dateCreated:"26.10.2022"
   },
@@ -96,8 +91,8 @@ const exampleTasks=[
       author:"Ivan",
       executor:"Elena",
       priority:"B",
-      dateTimeStart:"26.10.2022",
-      dateTimeDue:"27.10.2022",
+      dateTimeStart: "2022-10-26T13:30:00",
+      dateTimeDue: "2022-10-27T12:30:00",
       id:2,
       dateCreated:"26.10.2022"
     },
@@ -108,17 +103,48 @@ const exampleTasks=[
       author:"Artem",
       executor:"Bota",
       priority:"B",
-      dateTimeStart:"30.10.2022",
-      dateTimeDue:"02.11.2022",
+      dateTimeStart: "2022-10-30T09:30:00",
+      dateTimeDue: "2022-11-02T09:30:00",
       id:3,
       dateCreated:"27.10.2022",
 
     }
-  ]
+  ])
+
+  useEffect(() => {
+    if (newStartedDate) {
+      
+      let updatedTasks = [...tasks].filter((t) => t.id !== newStartedDate.id);
+      const currentTask = tasks.find((t) => t.id === newStartedDate.id);
+      delete currentTask.dateTimeStart;
+      console.log(newStartedDate.date)
+      const updatedTask = {
+        ...currentTask,
+        dateTimeStart: moment.parseZone(newStartedDate.date, 'DD/MM/YYYY', true).format()
+       
+      };
+
+      updatedTasks.push(updatedTask);
+
+      setTasks(updatedTasks);
+    }
+    else if (newDueDate){
+      let updatedTasks = [...tasks].filter((t) => t.id !== newDueDate.id);
+      const currentTask = tasks.find((t) => t.id === newDueDate.id);
+      delete currentTask.dateTimeDue;
+      console.log(newDueDate.date)
+      const updatedTask = {
+        ...currentTask,
+        dateTimeDue: moment.parseZone(newDueDate.date, 'DD/MM/YYYY', true).format()
+       
+      };
+
+      updatedTasks.push(updatedTask);
 
-  const formattedTasks = exampleTasks.map((t)=> {return {...t, isEditableMode: false}})
+      setTasks(updatedTasks);
+    }
+  }, [newStartedDate || newDueDate]);
 
-  const [tasks,setTasks]=useState(formattedTasks)
   
   const onToggleEditMode = id => {
     setTasks(state => {
@@ -151,9 +177,12 @@ const exampleTasks=[
   };
 
   
-  const deleteTask=()=>{
-    // удалить по id из selected
-    }
+  const deleteTask=(id)=>{
+    console.log(id)
+    let newTasks=[...tasks]
+    newTasks.splice(tasks[id],1)
+    setTasks(newTasks)
+  };
 
   const handleChangePage = (event, newPage) => {
     setPage(newPage);
@@ -164,13 +193,11 @@ const exampleTasks=[
     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});
   };
@@ -178,16 +205,38 @@ const exampleTasks=[
     setModal({ ...modal, open: false, task: null });
   };
  
+  const addTask=()=>{
+  let newTasks=[...tasks]
+  newTasks.unshift(
+    {
+      user:"",
+      title:"",
+      description:"",
+      priority:"",
+      author:"",
+      executor:"",
+      dateTimeStart:"",
+      dateTimeDue:"",
+      id:4,
+      dateCreated:""
+    }
+   )
+  setTasks(newTasks)
+  };
+
  
   return (
     <Box sx={{ width: 'fullwidth' }}>
       <Paper sx={{ width: '100%', mb: 2 }}>
 
-      <MyTaskToolBar/>
+      <MyTaskToolBar
+       onClick={()=>{addTask()}}
+      />
 
         <TableContainer>
+       
           <Table
-            sx={{ minWidth: 750 }}
+            sx={{ minWidth: 600 }}
             aria-labelledby="tableTitle"
           >
             <EnhancedTableHead
@@ -203,12 +252,12 @@ const exampleTasks=[
                 .map((task, index) => {
                 
                   return (
-                    <>
                
                     <TableRow
                       hover
                       key={task.id}                    
                     >
+                      
                      <TableCell
                         component="th"
                         scope="row"
@@ -218,10 +267,30 @@ const exampleTasks=[
                         <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 }} />
 
+                        {task.isEditMode ? ( 
+                        <TableCell key={task.id}>
+                          <MaterialUIPickers
+                          newStartedDate={newStartedDate}
+                          task={task}
+                          setNewStartedDate={setNewStartedDate}
+                          />
+                       </TableCell>)
+                        : <CustomTableCell {...{ task, name: "dateTimeStart", onChange}} />
+                        }
+                
+                        {task.isEditMode ? ( 
+                          <TableCell key={task.id}>
+                            <MaterialUIPickers
+                            newDueDate={newDueDate}
+                            task={task}
+                            setNewDueDate={setNewDueDate}
+                            />
+                        </TableCell>)
+                        : <CustomTableCell {...{ task, name: "dateTimeDue", onChange}} />
+                        }
+                       
+                        <CustomTableCell {...{ task, name: "done", onChange }} />                      
 
                       <TableCell >
                
@@ -252,7 +321,7 @@ const exampleTasks=[
                     </TableCell>
                     </TableRow>
                     
-                    </>
+                   
                   );
                 })}
            
@@ -273,7 +342,10 @@ const exampleTasks=[
           task={modal.task}
           open={modal.open}
           handleClose={handleClose}
-                        
+          onChange={(e) => {onChange(e,modal.task)}}  
+          onToggleEditMode={onToggleEditMode} 
+          tasks={tasks}  
+          setTasks={setTasks}      
         /> 
     </Box>
   );

planner-front/src/containers/MyTasks/MyTasksHeader/MyTasksHeader.js

@@ -5,41 +5,9 @@ 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',