Skip to content

P
planner-team-one
Commit bb6dbc9d authored by Нелли Ибрагимова's avatar Нелли Ибрагимова
Browse files
Options

дописала функцию добавления задачи, удаления задачи, корректировки задачи,… 

дописала функцию добавления задачи, удаления задачи, корректировки задачи, добавила ДейтПикер. нужно будет откорректировать его работу, пока дейтпикер работает не совсем корректно
parent a04934c2
Hide whitespace changes
Inline Side-by-side
Showing with 600 additions and 103 deletions
planner-front/package-lock.json
View file @ bb6dbc9d
...@@ -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 @ bb6dbc9d
...@@ -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 @ bb6dbc9d
...@@ -21,7 +21,7 @@ const App = () => { ...@@ -21,7 +21,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 @ bb6dbc9d
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 @ bb6dbc9d
...@@ -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 <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
size="large"
edge="start"
color="inherit"
aria-label="menu"
sx={{ mr: 2 }}
>
<MenuIcon />
</IconButton>
<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 @ bb6dbc9d
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
...@@ -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 @ bb6dbc9d
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 @ bb6dbc9d
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);
setTasks(updatedTasks);
}
}, [newStartedDate || newDueDate]);
const formattedTasks = exampleTasks.map((t)=> {return {...t, isEditableMode: false}})
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);
...@@ -163,31 +192,51 @@ const exampleTasks=[ ...@@ -163,31 +192,51 @@ const exampleTasks=[
setRowsPerPage(parseInt(event.target.value, 10)); setRowsPerPage(parseInt(event.target.value, 10));
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});
}; };
const handleClose = () => { const handleClose = () => {
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 }} /> {task.isEditMode ? (
<CustomTableCell {...{ task, name: "done", onChange }} /> <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 @ bb6dbc9d
...@@ -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',
......
planner-front/src/store/reducers/usersReducer.js
View file @ bb6dbc9d
...@@ -3,7 +3,8 @@ const initialState = { ...@@ -3,7 +3,8 @@ const initialState = {
name: 'Ivan', name: 'Ivan',
surname: 'Petrov', surname: 'Petrov',
email: 'test@gmail.com', email: 'test@gmail.com',
role: 'superuser' role: 'superuser',
token:'3fc61d09-1941-48b0-b765-17d22a5caab9'
} }
}; };
......
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