Skip to content

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

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

Task 18 feature modification my tasks page

See merge request !8
parents 55faffab fb74dd9f
Show whitespace changes
Inline Side-by-side
Showing with 598 additions and 102 deletions
planner-front/package-lock.json
View file @ b2be2b7b
...@@ -9,15 +9,19 @@ ...@@ -9,15 +9,19 @@
"version": "0.1.0", "version": "0.1.0",
"dependencies": { "dependencies": {
"-": "^0.0.1", "-": "^0.0.1",
"@date-io/moment": "^2.16.1",
"@emotion/react": "^11.10.4", "@emotion/react": "^11.10.4",
"@emotion/styled": "^11.10.4", "@emotion/styled": "^11.10.4",
"@mui/icons-material": "^5.10.9", "@mui/icons-material": "^5.10.9",
"@mui/material": "^5.10.9", "@mui/material": "^5.10.9",
"@mui/x-date-pickers": "^5.0.7",
"@reduxjs/toolkit": "^1.8.6", "@reduxjs/toolkit": "^1.8.6",
"@testing-library/jest-dom": "^5.16.5", "@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0", "@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
"axios": "^1.1.2", "axios": "^1.1.2",
"dayjs": "^1.11.6",
"moment": "^2.29.4",
"prop-types": "^15.8.1", "prop-types": "^15.8.1",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
...@@ -2148,6 +2152,75 @@ ...@@ -2148,6 +2152,75 @@
"postcss-selector-parser": "^6.0.10" "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": { "node_modules/@emotion/babel-plugin": {
"version": "11.10.5", "version": "11.10.5",
"resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.5.tgz", "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.5.tgz",
...@@ -3412,6 +3485,64 @@ ...@@ -3412,6 +3485,64 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" "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": { "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
"version": "5.1.1-v1", "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", "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
...@@ -6844,6 +6975,11 @@ ...@@ -6844,6 +6975,11 @@
"node": ">=10" "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": { "node_modules/debug": {
"version": "4.3.4", "version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
...@@ -12501,6 +12637,14 @@ ...@@ -12501,6 +12637,14 @@
"mkdirp": "bin/cmd.js" "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": { "node_modules/ms": {
"version": "2.1.2", "version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
...@@ -15241,6 +15385,14 @@ ...@@ -15241,6 +15385,14 @@
"node": ">=0.10.0" "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": { "node_modules/rimraf": {
"version": "3.0.2", "version": "3.0.2",
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
...@@ -19109,6 +19261,43 @@ ...@@ -19109,6 +19261,43 @@
"integrity": "sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==", "integrity": "sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==",
"requires": {} "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": { "@emotion/babel-plugin": {
"version": "11.10.5", "version": "11.10.5",
"resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.5.tgz", "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.5.tgz",
...@@ -19983,6 +20172,25 @@ ...@@ -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": { "@nicolo-ribaudo/eslint-scope-5-internals": {
"version": "5.1.1-v1", "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", "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
...@@ -22516,6 +22724,11 @@ ...@@ -22516,6 +22724,11 @@
"whatwg-url": "^8.0.0" "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": { "debug": {
"version": "4.3.4", "version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
...@@ -26643,6 +26856,11 @@ ...@@ -26643,6 +26856,11 @@
"minimist": "^1.2.6" "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": { "ms": {
"version": "2.1.2", "version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
...@@ -28427,6 +28645,12 @@ ...@@ -28427,6 +28645,12 @@
"resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz", "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
"integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==" "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": { "rimraf": {
"version": "3.0.2", "version": "3.0.2",
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
planner-front/package.json
View file @ b2be2b7b
...@@ -4,15 +4,19 @@ ...@@ -4,15 +4,19 @@
"private": true, "private": true,
"dependencies": { "dependencies": {
"-": "^0.0.1", "-": "^0.0.1",
"@date-io/moment": "^2.16.1",
"@emotion/react": "^11.10.4", "@emotion/react": "^11.10.4",
"@emotion/styled": "^11.10.4", "@emotion/styled": "^11.10.4",
"@mui/icons-material": "^5.10.9", "@mui/icons-material": "^5.10.9",
"@mui/material": "^5.10.9", "@mui/material": "^5.10.9",
"@mui/x-date-pickers": "^5.0.7",
"@reduxjs/toolkit": "^1.8.6", "@reduxjs/toolkit": "^1.8.6",
"@testing-library/jest-dom": "^5.16.5", "@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0", "@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
"axios": "^1.1.2", "axios": "^1.1.2",
"dayjs": "^1.11.6",
"moment": "^2.29.4",
"prop-types": "^15.8.1", "prop-types": "^15.8.1",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
......
planner-front/src/App.js
View file @ b2be2b7b
...@@ -23,7 +23,7 @@ const App = () => { ...@@ -23,7 +23,7 @@ const App = () => {
<> <>
<AppToolbar/> <AppToolbar/>
<main> <main>
<Container > <Container maxWidth={false} sx={{maxWidth:'2500px'}}>
<Outlet/> <Outlet/>
</Container> </Container>
</main> </main>
......
planner-front/src/components/MyTasksCompoments/CustomTableCell.js 0 → 100644
View file @ b2be2b7b
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
View file @ b2be2b7b
...@@ -4,27 +4,18 @@ import Box from '@mui/material/Box'; ...@@ -4,27 +4,18 @@ import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar'; import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button'; 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 ( return (
<Box sx={{ flexGrow: 1 }}> <Box sx={{ flexGrow: 1 }}>
<AppBar position="static"> <AppBar position="static">
<Toolbar> <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 variant="h6" component="div" sx={{ flexGrow: 1 }}>
Мои задачи Мои задачи
</Typography> </Typography>
<Button color="inherit">Добавить задачу</Button> <Button color="inherit" onClick={props.onClick} >Добавить задачу</Button>
</Toolbar> </Toolbar>
</AppBar> </AppBar>
</Box> </Box>
......
planner-front/src/components/UI/TaskModal/TaskModal.js → planner-front/src/components/MyTasksCompoments/TaskModal/TaskModal.js
View file @ b2be2b7b
import { Modal, IconButton } from '@mui/material'; 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 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 ( return (
<Modal <Modal
aria-labelledby="transition-modal-title" aria-labelledby="transition-modal-title"
...@@ -12,6 +39,29 @@ const TaskModal = (props) => { ...@@ -12,6 +39,29 @@ const TaskModal = (props) => {
onClose={props.handleClose} onClose={props.handleClose}
open={props.open} 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"> <div className="modalBox">
{ props.task && props.task.title && ( { props.task && props.task.title && (
<div <div
...@@ -19,7 +69,7 @@ const TaskModal = (props) => { ...@@ -19,7 +69,7 @@ const TaskModal = (props) => {
width: "200px", width: "200px",
height: "200px", height: "200px",
color: "white", color: "white",
fontWeight: "600", fontWeight: "600"
}} }}
> >
{props.task.title} {props.task.title}
...@@ -38,6 +88,7 @@ const TaskModal = (props) => { ...@@ -38,6 +88,7 @@ const TaskModal = (props) => {
X X
</IconButton> </IconButton>
</div> </div>
}
</Modal> </Modal>
); );
}; };
......
planner-front/src/components/UI/DateTimePicker/DateTimePicker.js 0 → 100644
View file @ b2be2b7b
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
View file @ b2be2b7b
import * as React from 'react'; import * as React from "react";
import Box from '@mui/material/Box'; import {
import Table from '@mui/material/Table'; Box,
import TableBody from '@mui/material/TableBody'; Table,
import TableCell from '@mui/material/TableCell'; TableBody,
import TableContainer from '@mui/material/TableContainer'; TextField,
import TablePagination from '@mui/material/TablePagination'; TableCell,
import TableRow from '@mui/material/TableRow'; TableContainer,
import Paper from '@mui/material/Paper'; TablePagination,
import IconButton from '@mui/material/IconButton'; TableRow,
import Tooltip from '@mui/material/Tooltip'; Typography,
import DeleteIcon from '@mui/icons-material/Delete'; Paper,
import { useState } from "react"; IconButton,
import Input from '@mui/material/Input'; Tooltip,
import { Done } from '@mui/icons-material'; Input,
import {Edit} from '@mui/icons-material' } from "@mui/material";
import TaskModal from '../../components/UI/TaskModal/TaskModal' import { useState, useEffect } from "react";
import EnhancedTableHead from './MyTasksHeader/MyTasksHeader'; import { Done, Edit } from "@mui/icons-material";
import MyTaskToolBar from '../../components/MyTaskToolBar/MyTaskToolBar' 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) { function descendingComparator(a, b, orderBy) {
if (b[orderBy] < a[orderBy]) { if (b[orderBy] < a[orderBy]) {
...@@ -48,35 +57,21 @@ function stableSort(array, comparator) { ...@@ -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() { export default function EnhancedTable() {
const [order, setOrder] = React.useState('asc'); const [order, setOrder] = React.useState('asc');
const [orderBy, setOrderBy] = React.useState('id'); const [orderBy, setOrderBy] = React.useState('id');
const [page, setPage] = React.useState(0); const [page, setPage] = React.useState(0);
const [rowsPerPage, setRowsPerPage] = React.useState(5); 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", user:"first",
title:"задача1", title:"задача1",
...@@ -84,8 +79,8 @@ const exampleTasks=[ ...@@ -84,8 +79,8 @@ const exampleTasks=[
priority:"A", priority:"A",
author:"Ivan", author:"Ivan",
executor:"Arman", executor:"Arman",
dateTimeStart:"26.10.2022", dateTimeStart: "2022-10-26T11:00:00",
dateTimeDue:"27.10.2022", dateTimeDue: "2022-10-27T10:30:00",
id:1, id:1,
dateCreated:"26.10.2022" dateCreated:"26.10.2022"
}, },
...@@ -96,8 +91,8 @@ const exampleTasks=[ ...@@ -96,8 +91,8 @@ const exampleTasks=[
author:"Ivan", author:"Ivan",
executor:"Elena", executor:"Elena",
priority:"B", priority:"B",
dateTimeStart:"26.10.2022", dateTimeStart: "2022-10-26T13:30:00",
dateTimeDue:"27.10.2022", dateTimeDue: "2022-10-27T12:30:00",
id:2, id:2,
dateCreated:"26.10.2022" dateCreated:"26.10.2022"
}, },
...@@ -108,17 +103,48 @@ const exampleTasks=[ ...@@ -108,17 +103,48 @@ const exampleTasks=[
author:"Artem", author:"Artem",
executor:"Bota", executor:"Bota",
priority:"B", priority:"B",
dateTimeStart:"30.10.2022", dateTimeStart: "2022-10-30T09:30:00",
dateTimeDue:"02.11.2022", dateTimeDue: "2022-11-02T09:30:00",
id:3, id:3,
dateCreated:"27.10.2022", 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 => { const onToggleEditMode = id => {
setTasks(state => { setTasks(state => {
...@@ -151,9 +177,12 @@ const exampleTasks=[ ...@@ -151,9 +177,12 @@ const exampleTasks=[
}; };
const deleteTask=()=>{ const deleteTask=(id)=>{
// удалить по id из selected console.log(id)
} let newTasks=[...tasks]
newTasks.splice(tasks[id],1)
setTasks(newTasks)
};
const handleChangePage = (event, newPage) => { const handleChangePage = (event, newPage) => {
setPage(newPage); setPage(newPage);
...@@ -164,13 +193,11 @@ const exampleTasks=[ ...@@ -164,13 +193,11 @@ const exampleTasks=[
setPage(0); setPage(0);
}; };
const [modal, setModal] =useState({ const [modal, setModal] =useState({
open: false, open: false,
task: null task: null
}); });
const onModalOpen = (event, task) => { const onModalOpen = (event, task) => {
console.log(event,task)
event.stopPropagation(); event.stopPropagation();
setModal({ ...modal, open: true, task}); setModal({ ...modal, open: true, task});
}; };
...@@ -178,16 +205,38 @@ const exampleTasks=[ ...@@ -178,16 +205,38 @@ const exampleTasks=[
setModal({ ...modal, open: false, task: null }); 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 ( return (
<Box sx={{ width: 'fullwidth' }}> <Box sx={{ width: 'fullwidth' }}>
<Paper sx={{ width: '100%', mb: 2 }}> <Paper sx={{ width: '100%', mb: 2 }}>
<MyTaskToolBar/> <MyTaskToolBar
onClick={()=>{addTask()}}
/>
<TableContainer> <TableContainer>
<Table <Table
sx={{ minWidth: 750 }} sx={{ minWidth: 600 }}
aria-labelledby="tableTitle" aria-labelledby="tableTitle"
> >
<EnhancedTableHead <EnhancedTableHead
...@@ -203,12 +252,12 @@ const exampleTasks=[ ...@@ -203,12 +252,12 @@ const exampleTasks=[
.map((task, index) => { .map((task, index) => {
return ( return (
<>
<TableRow <TableRow
hover hover
key={task.id} key={task.id}
> >
<TableCell <TableCell
component="th" component="th"
scope="row" scope="row"
...@@ -218,10 +267,30 @@ const exampleTasks=[ ...@@ -218,10 +267,30 @@ const exampleTasks=[
<CustomTableCell {...{ task, name: "dateCreated", onChange }} /> <CustomTableCell {...{ task, name: "dateCreated", onChange }} />
<CustomTableCell {...{ task, name: "title", onChange, onModalOpen}} /> <CustomTableCell {...{ task, name: "title", onChange, onModalOpen}} />
<CustomTableCell {...{ task, name: "author", onChange }} /> <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 > <TableCell >
...@@ -252,7 +321,7 @@ const exampleTasks=[ ...@@ -252,7 +321,7 @@ const exampleTasks=[
</TableCell> </TableCell>
</TableRow> </TableRow>
</>
); );
})} })}
...@@ -273,7 +342,10 @@ const exampleTasks=[ ...@@ -273,7 +342,10 @@ const exampleTasks=[
task={modal.task} task={modal.task}
open={modal.open} open={modal.open}
handleClose={handleClose} handleClose={handleClose}
onChange={(e) => {onChange(e,modal.task)}}
onToggleEditMode={onToggleEditMode}
tasks={tasks}
setTasks={setTasks}
/> />
</Box> </Box>
); );
......
planner-front/src/containers/MyTasks/MyTasksHeader/MyTasksHeader.js
View file @ b2be2b7b
...@@ -5,41 +5,9 @@ import TableCell from '@mui/material/TableCell'; ...@@ -5,41 +5,9 @@ import TableCell from '@mui/material/TableCell';
import TableHead from '@mui/material/TableHead'; import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow'; import TableRow from '@mui/material/TableRow';
import TableSortLabel from '@mui/material/TableSortLabel'; import TableSortLabel from '@mui/material/TableSortLabel';
import { visuallyHidden } from '@mui/utils'; 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 = [ const headCells = [
{ {
id: 'id', id: 'id',
......
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