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

added dialogs

Browse Source
This commit is contained in:
Sergey Yarkov 2020-06-13 17:47:26 +03:00
parent 8c3dbfd0d8
commit bc2bc033bc
8 changed files with 173 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
client/src/components/Dialogs/Category/DeleteCategoryDialog.js Normal file
View File

@ -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 (
<>
<Dialog
open={isOpenDialog}
onClose={handleCloseDialog}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">
<WarningIcon className={classes.headingIcon} />
Удалить категорию?
</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Все существующие в ней ваши задачи будут также удалены.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleCloseDialog} color="default">
Отменить
</Button>
<Button onClick={handleClickDelete} color="secondary" autoFocus>
Удалить
</Button>
</DialogActions>
</Dialog>
</>
)
}
export default DeleteCategoryDialog

43
client/src/components/Dialogs/Todo/DeleteTodoDialog.js Normal file
View File

@ -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 (
<>
<Dialog
open={isOpenDialog}
onClose={handleCloseDialog}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">
<WarningIcon className={classes.headingIcon} />
Удалить запись?
</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Запись будет перемещена в корзину, вы сможете её легко восстановить.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleCloseDialog} color="default">
Отменить
</Button>
<Button onClick={handleClickDelete} color="secondary" autoFocus>
Удалить
</Button>
</DialogActions>
</Dialog>
</>
)
}
export default DeleteTodoDialog

43
client/src/components/Dialogs/Todo/DeleteTodoСompletelyDialog.js Normal file
View File

@ -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 (
<>
<Dialog
open={isOpenDialog}
onClose={handleCloseDialog}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">
<WarningIcon className={classes.headingIcon} />
Удалить запись навсегда?
</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Запись будет удалена навсегда, вы не сможете её восстановить.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleCloseDialog} color="default">
Отменить
</Button>
<Button onClick={handleClickDelete} color="secondary" autoFocus>
Удалить
</Button>
</DialogActions>
</Dialog>
</>
)
}
export default DeleteTodoСompletelyDialog

10
client/src/components/Dialogs/styles.js Normal file
View File

@ -0,0 +1,10 @@
import { makeStyles } from '@material-ui/core/styles'
const useStyles = makeStyles(() => ({
headingIcon: {
marginRight: 10,
verticalAlign: 'text-bottom'
}
}))
export default useStyles

7
client/src/components/Fab/Fab.js
View File

@ -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 <AddIcon />
case 'edit':
return <EditIcon />
case 'delete':
return <DeleteIcon />
default:
break;
}
}
const FabComponent = ({ typeIcon, color, secondary, size, ariaLabel, handleOpenModal }) => {
const FabComponent = ({ typeIcon, color, secondary, size, ariaLabel, onClick, style }) => {
const classes = useStyles()
return (
<Fab className={classes.fab} onClick={handleOpenModal} color={color} size={size} secondary={secondary} aria-label={ariaLabel}>
<Fab className={classes.fab} style={style} onClick={onClick} color={color} size={size} secondary={secondary} aria-label={ariaLabel}>
{renderIcon(typeIcon)}
</Fab>
)

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

@ -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 ? <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}
{data.map((todo, i) =>
<Grid key={i} item xs={12} md={4} lg={3}>
<Card>
@ -88,7 +105,7 @@ const Todos = ({ data, fromTrashContainer }) => {
<RestoreIcon />
</IconButton>
}
<IconButton aria-label="delete" color='secondary'>
<IconButton onClick={() => handleOpenDialog(todo)} aria-label="delete" color='secondary'>
<DeleteIcon />
</IconButton>
</CardActions>

9
client/src/containers/CategoryContainer/CategoryContainer.js
View File

@ -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 (
<>
<UpdateCategoryModal isModalOpen={isModalOpen} handleCloseModal={handleCloseModal} selectedCategory={selectedCategory} setSelectedCategory={setSelectedCategory} />
<Fab size='large' ariaLabel='add' typeIcon='edit' handleOpenModal={handleOpenModal} />
<DeleteCategoryDialog isOpenDialog={isOpenDialog} handleCloseDialog={handleCloseDialog} />
<Fab style={{ marginRight: '6.5rem' }} size='large' ariaLabel='add' typeIcon='edit' onClick={handleOpenModal} />
<Fab size='large' color="secondary" ariaLabel='delete' typeIcon='delete' onClick={handleOpenDialog} />
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography>

2
client/src/containers/TodosContainer/TodosContainer.js
View File

@ -13,7 +13,7 @@ const TodosContainer = () => {
return (
<>
<CreateTodoModal isModalOpen={isModalOpen} handleCloseModal={handleCloseModal} />
<Fab typeIcon='add' color="secondary" size='large' ariaLabel="add" handleOpenModal={handleOpenModal} />
<Fab typeIcon='add' color="secondary" size='large' ariaLabel="add" onClick={handleOpenModal} />
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography>