bubble/todo-app
1
0
Fork 0
mirror of https://github.com/sergeyyarkov/todo-app.git synced 2026-10-11 10:29:14 +03:00
Code Issues Packages Projects Releases Wiki Activity

restore dialog

Browse Source
This commit is contained in:
Sergey Yarkov 2020-06-13 18:03:57 +03:00
parent bc2bc033bc
commit 2aa914ea4a
4 changed files with 68 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/Dialogs/Todo/DeleteTodoDialog.js
View File

@ -31,7 +31,7 @@ const DeleteTodoDialog = ({ isOpenDialog, handleCloseDialog, selectedTodo }) =>
<Button onClick={handleCloseDialog} color="default">
Отменить
</Button>
<Button onClick={handleClickDelete} color="secondary" autoFocus>
<Button onClick={handleClickDelete} color="secondary">
Удалить
</Button>
</DialogActions>

2
client/src/components/Dialogs/Todo/DeleteTodoСompletelyDialog.js
View File

@ -31,7 +31,7 @@ const DeleteTodoСompletelyDialog = ({ isOpenDialog, handleCloseDialog, selected
<Button onClick={handleCloseDialog} color="default">
Отменить
</Button>
<Button onClick={handleClickDelete} color="secondary" autoFocus>
<Button onClick={handleClickDelete} color="secondary">
Удалить
</Button>
</DialogActions>

44
client/src/components/Dialogs/Todo/RestoreTodoDialog.js Normal file
View File

@ -0,0 +1,44 @@
import React from 'react';
import useStyles from '../styles'
import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@material-ui/core'
import RestoreIcon from '@material-ui/icons/Restore';
const DeleteTodoDialog = ({ isOpenDialog, handleCloseDialog, selectedTodo }) => {
const classes = useStyles()
const handleClickDelete = () => {
console.log('Request on restore todo:', selectedTodo.id, selectedTodo.title)
handleCloseDialog()
}
return (
<>
<Dialog
open={isOpenDialog}
onClose={handleCloseDialog}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">
<RestoreIcon className={classes.headingIcon} />
Восстановить запись?
</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Запись будет восстановлена в прежнее состояние.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleCloseDialog} color="default">
Отменить
</Button>
<Button onClick={handleClickDelete} color="primary">
Восстановить
</Button>
</DialogActions>
</Dialog>
</>
)
}
export default DeleteTodoDialog

25
client/src/components/Todos/Todos.js
View File

@ -2,6 +2,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 RestoreTodoDialog from '../Dialogs/Todo/RestoreTodoDialog'
import { Card, CardActions, CardContent, Typography, Grid, IconButton, makeStyles } from '@material-ui/core'
import RestoreIcon from '@material-ui/icons/Restore';
@ -49,14 +50,18 @@ const Todos = ({ data, fromTrashContainer }) => {
})
const [isModalOpen, setIsModalOpen] = React.useState(false)
const [isOpenDialog, setIsOpenDialog] = React.useState(false);
const [isOpenRestoreDialog, setIsOpenRestoreDialog] = React.useState(false)
const handleOpenModal = todo => {
setSelectedTodo({
const selectedTodo = {
id: todo._id.$oid,
title: todo.title,
description: todo.description,
category: todo.categoryId,
deadline: todo.deadline
})
}
setSelectedTodo(selectedTodo)
setIsModalOpen(true)
}
const handleCloseModal = () => setIsModalOpen(false)
@ -73,11 +78,25 @@ const Todos = ({ data, fromTrashContainer }) => {
}
const handleCloseDialog = () => setIsOpenDialog(false)
const handleOpenRestoreDialog = todo => {
setSelectedTodo({
id: todo._id.$oid,
title: todo.title,
description: todo.description,
category: todo.categoryId,
deadline: todo.deadline
})
setIsOpenRestoreDialog(true)
}
const handleCloseRestoreDialog = () => setIsOpenRestoreDialog(false)
return (
<>
{!fromTrashContainer ? <UpdateTodoModal isModalOpen={isModalOpen} handleOpenModal={handleOpenModal} handleCloseModal={handleCloseModal} selectedTodo={selectedTodo} setSelectedTodo={setSelectedTodo} /> : null}
{!fromTrashContainer ? <DeleteTodoDialog isOpenDialog={isOpenDialog} handleCloseDialog={handleCloseDialog} selectedTodo={selectedTodo} /> : null}
{fromTrashContainer ? <DeleteTodoСompletelyDialog isOpenDialog={isOpenDialog} handleCloseDialog={handleCloseDialog} selectedTodo={selectedTodo} /> : null}
{fromTrashContainer ? <RestoreTodoDialog isOpenDialog={isOpenRestoreDialog} handleCloseDialog={handleCloseRestoreDialog} selectedTodo={selectedTodo} /> : null}
{data.map((todo, i) =>
<Grid key={i} item xs={12} md={4} lg={3}>
<Card>
@ -101,7 +120,7 @@ const Todos = ({ data, fromTrashContainer }) => {
? <IconButton onClick={() => handleOpenModal(todo)} aria-label="update">
<EditIcon />
</IconButton>
: <IconButton aria-label="restore">
: <IconButton onClick={() => handleOpenRestoreDialog(todo)} aria-label="restore">
<RestoreIcon />
</IconButton>
}