diff --git a/client/src/components/Dialogs/Category/DeleteCategoryDialog.js b/client/src/components/Dialogs/Category/DeleteCategoryDialog.js new file mode 100644 index 0000000..a603eee --- /dev/null +++ b/client/src/components/Dialogs/Category/DeleteCategoryDialog.js @@ -0,0 +1,45 @@ +import React from 'react'; +import useStyles from '../styles' +import WarningIcon from '@material-ui/icons/Warning'; +import { useParams } from 'react-router-dom' +import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@material-ui/core' + +const DeleteCategoryDialog = ({ isOpenDialog, handleCloseDialog }) => { + const classes = useStyles() + const { id } = useParams() + const handleClickDelete = () => { + console.log('Request on delete category:', id) + handleCloseDialog() + } + + return ( + <> + + + + Удалить категорию? + + + + Все существующие в ней ваши задачи будут также удалены. + + + + + + + + + ) +} + +export default DeleteCategoryDialog \ No newline at end of file diff --git a/client/src/components/Dialogs/Todo/DeleteTodoDialog.js b/client/src/components/Dialogs/Todo/DeleteTodoDialog.js new file mode 100644 index 0000000..5d28270 --- /dev/null +++ b/client/src/components/Dialogs/Todo/DeleteTodoDialog.js @@ -0,0 +1,43 @@ +import React from 'react'; +import useStyles from '../styles' +import WarningIcon from '@material-ui/icons/Warning'; +import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@material-ui/core' + +const DeleteTodoDialog = ({ isOpenDialog, handleCloseDialog, selectedTodo }) => { + const classes = useStyles() + const handleClickDelete = () => { + console.log('Request on delete todo:', selectedTodo.id, selectedTodo.title) + handleCloseDialog() + } + + return ( + <> + + + + Удалить запись? + + + + Запись будет перемещена в корзину, вы сможете её легко восстановить. + + + + + + + + + ) +} + +export default DeleteTodoDialog \ No newline at end of file diff --git a/client/src/components/Dialogs/Todo/DeleteTodoСompletelyDialog.js b/client/src/components/Dialogs/Todo/DeleteTodoСompletelyDialog.js new file mode 100644 index 0000000..bad6bc0 --- /dev/null +++ b/client/src/components/Dialogs/Todo/DeleteTodoСompletelyDialog.js @@ -0,0 +1,43 @@ +import React from 'react'; +import useStyles from '../styles' +import WarningIcon from '@material-ui/icons/Warning'; +import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@material-ui/core' + +const DeleteTodoСompletelyDialog = ({ isOpenDialog, handleCloseDialog, selectedTodo }) => { + const classes = useStyles() + const handleClickDelete = () => { + console.log('Request on delete completely todo:', selectedTodo.id, selectedTodo.title) + handleCloseDialog() + } + + return ( + <> + + + + Удалить запись навсегда? + + + + Запись будет удалена навсегда, вы не сможете её восстановить. + + + + + + + + + ) +} + +export default DeleteTodoСompletelyDialog \ No newline at end of file diff --git a/client/src/components/Dialogs/styles.js b/client/src/components/Dialogs/styles.js new file mode 100644 index 0000000..2186f27 --- /dev/null +++ b/client/src/components/Dialogs/styles.js @@ -0,0 +1,10 @@ +import { makeStyles } from '@material-ui/core/styles' + +const useStyles = makeStyles(() => ({ + headingIcon: { + marginRight: 10, + verticalAlign: 'text-bottom' + } +})) + +export default useStyles \ No newline at end of file diff --git a/client/src/components/Fab/Fab.js b/client/src/components/Fab/Fab.js index ccfe47f..ac260cb 100644 --- a/client/src/components/Fab/Fab.js +++ b/client/src/components/Fab/Fab.js @@ -2,6 +2,7 @@ import React from 'react'; import { Fab, makeStyles } from '@material-ui/core' import AddIcon from '@material-ui/icons/Add' import EditIcon from '@material-ui/icons/Edit'; +import DeleteIcon from '@material-ui/icons/Delete' const useStyles = makeStyles((theme) => ({ fab: { @@ -19,15 +20,17 @@ const renderIcon = (typeIcon) => { return case 'edit': return + case 'delete': + return default: break; } } -const FabComponent = ({ typeIcon, color, secondary, size, ariaLabel, handleOpenModal }) => { +const FabComponent = ({ typeIcon, color, secondary, size, ariaLabel, onClick, style }) => { const classes = useStyles() return ( - + {renderIcon(typeIcon)} ) diff --git a/client/src/components/Todos/Todos.js b/client/src/components/Todos/Todos.js index f1680fb..3313df8 100644 --- a/client/src/components/Todos/Todos.js +++ b/client/src/components/Todos/Todos.js @@ -1,5 +1,7 @@ import React from 'react'; import UpdateTodoModal from '../Modals/Todo/UpdateTodoModal' +import DeleteTodoDialog from '../Dialogs/Todo/DeleteTodoDialog' +import DeleteTodoСompletelyDialog from '../Dialogs/Todo/DeleteTodoСompletelyDialog' import { Card, CardActions, CardContent, Typography, Grid, IconButton, makeStyles } from '@material-ui/core' import RestoreIcon from '@material-ui/icons/Restore'; @@ -46,6 +48,7 @@ const Todos = ({ data, fromTrashContainer }) => { deadline: '' }) const [isModalOpen, setIsModalOpen] = React.useState(false) + const [isOpenDialog, setIsOpenDialog] = React.useState(false); const handleOpenModal = todo => { setSelectedTodo({ id: todo._id.$oid, @@ -58,9 +61,23 @@ const Todos = ({ data, fromTrashContainer }) => { } const handleCloseModal = () => setIsModalOpen(false) + const handleOpenDialog = todo => { + setSelectedTodo({ + id: todo._id.$oid, + title: todo.title, + description: todo.description, + category: todo.categoryId, + deadline: todo.deadline + }) + setIsOpenDialog(true) + } + const handleCloseDialog = () => setIsOpenDialog(false) + return ( <> {!fromTrashContainer ? : null} + {!fromTrashContainer ? : null} + {fromTrashContainer ? : null} {data.map((todo, i) => @@ -88,7 +105,7 @@ const Todos = ({ data, fromTrashContainer }) => { } - + handleOpenDialog(todo)} aria-label="delete" color='secondary'> diff --git a/client/src/containers/CategoryContainer/CategoryContainer.js b/client/src/containers/CategoryContainer/CategoryContainer.js index 7eeb262..5a3454c 100644 --- a/client/src/containers/CategoryContainer/CategoryContainer.js +++ b/client/src/containers/CategoryContainer/CategoryContainer.js @@ -1,6 +1,7 @@ import React from 'react'; import Todos from '../../components/Todos/Todos' import UpdateCategoryModal from '../../components/Modals/Category/UpdateCategoryModal' +import DeleteCategoryDialog from '../../components/Dialogs/Category/DeleteCategoryDialog' import Fab from '../../components/Fab/Fab' import { Grid, Typography } from '@material-ui/core' @@ -14,6 +15,7 @@ const Category = () => { const { id } = useParams() const [isModalOpen, setIsModalOpen] = React.useState(false) + const [isOpenDialog, setIsOpenDialog] = React.useState(false) const [selectedCategory, setSelectedCategory] = React.useState({ id: '', title: '' }) React.useEffect(() => { @@ -22,11 +24,16 @@ const Category = () => { const handleOpenModal = () => setIsModalOpen(true) const handleCloseModal = () => setIsModalOpen(false) + + const handleOpenDialog = () => setIsOpenDialog(true) + const handleCloseDialog = () => setIsOpenDialog(false) return ( <> - + + + diff --git a/client/src/containers/TodosContainer/TodosContainer.js b/client/src/containers/TodosContainer/TodosContainer.js index 9e52d3f..669ac1b 100644 --- a/client/src/containers/TodosContainer/TodosContainer.js +++ b/client/src/containers/TodosContainer/TodosContainer.js @@ -13,7 +13,7 @@ const TodosContainer = () => { return ( <> - +