mirror of
https://github.com/sergeyyarkov/todo-app.git
synced 2026-10-11 10:29:14 +03:00
modal todo
This commit is contained in:
parent
2e2d312160
commit
94aa5e6b18
@ -1,10 +1,10 @@
|
||||
import React from 'react'
|
||||
import { Route, Switch, Redirect, withRouter } from "react-router-dom"
|
||||
import Layout from './components/Layout/Layout'
|
||||
import Todos from './containers/Todos/Todos'
|
||||
import Category from './containers/Category/Category'
|
||||
import Trash from './containers/Trash/Trash'
|
||||
import NotFound from './containers/NotFound/NotFound'
|
||||
import TodosContainer from './containers/TodosContainer/TodosContainer'
|
||||
import CategoryContainer from './containers/CategoryContainer/CategoryContainer'
|
||||
import TrashContainer from './containers/TrashContainer/TrashContainer'
|
||||
import NotFoundContainer from './containers/NotFoundContainer/NotFoundContainer'
|
||||
import CssBaseLine from '@material-ui/core/CssBaseline'
|
||||
|
||||
const App = ({ history }) => {
|
||||
@ -13,10 +13,10 @@ const App = ({ history }) => {
|
||||
<CssBaseLine />
|
||||
<Layout history={history}>
|
||||
<Switch>
|
||||
<Route history={history} exact path='/category/:slug' component={Category} />
|
||||
<Route history={history} exact path='/trash' component={Trash} />
|
||||
<Route history={history} exact path='/' component={Todos} />
|
||||
<Route path='/404' component={NotFound} />
|
||||
<Route history={history} exact path='/category/:slug' component={CategoryContainer} />
|
||||
<Route history={history} exact path='/trash' component={TrashContainer} />
|
||||
<Route history={history} exact path='/' component={TodosContainer} />
|
||||
<Route path='/404' component={NotFoundContainer} />
|
||||
<Redirect from='*' to='/404' />
|
||||
</Switch>
|
||||
</Layout>
|
||||
|
||||
@ -23,10 +23,10 @@ const renderIcon = (typeIcon) => {
|
||||
}
|
||||
}
|
||||
|
||||
const FabComponent = ({ typeIcon, color, secondary, size, ariaLabel }) => {
|
||||
const FabComponent = ({ typeIcon, color, secondary, size, ariaLabel, handleOpenModal }) => {
|
||||
const classes = useStyles()
|
||||
return (
|
||||
<Fab className={classes.fab} color={color} size={size} secondary={secondary} aria-label={ariaLabel}>
|
||||
<Fab className={classes.fab} onClick={handleOpenModal} color={color} size={size} secondary={secondary} aria-label={ariaLabel}>
|
||||
{renderIcon(typeIcon)}
|
||||
</Fab>
|
||||
)
|
||||
|
||||
123
client/src/components/Todos/TodoModal/TodosModal.js
Normal file
123
client/src/components/Todos/TodoModal/TodosModal.js
Normal file
@ -0,0 +1,123 @@
|
||||
import React from 'react';
|
||||
import Fab from '../../../components/Fab/Fab'
|
||||
import { Dialog, DialogContent, DialogTitle, DialogActions, Button, TextField, Select, MenuItem, InputLabel, FormControl, makeStyles } from '@material-ui/core'
|
||||
|
||||
const useStyles = makeStyles(() => ({
|
||||
dialog: {
|
||||
width: 500
|
||||
},
|
||||
form: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
},
|
||||
textField: {
|
||||
margin: '10px 0px'
|
||||
},
|
||||
selectField: {
|
||||
margin: '10px 0px'
|
||||
}
|
||||
}))
|
||||
|
||||
const TodosModal = () => {
|
||||
const classes = useStyles()
|
||||
const [isModalOpen, setIsModalOpen] = React.useState(false)
|
||||
const [selectedCategory, setSelectedCategory] = React.useState('');
|
||||
|
||||
const handleSelectChange = e => {
|
||||
setSelectedCategory(e.target.value);
|
||||
};
|
||||
|
||||
const handleFormSubmit = e => {
|
||||
e.preventDefault()
|
||||
const elements = e.target.elements
|
||||
const data = {
|
||||
title: elements.title.value,
|
||||
description: elements.description.value,
|
||||
category: elements.category.value,
|
||||
deadline: elements.deadline.value
|
||||
}
|
||||
handleCloseModal()
|
||||
console.log(data)
|
||||
}
|
||||
|
||||
const handleOpenModal = () => {
|
||||
setIsModalOpen(true)
|
||||
}
|
||||
|
||||
const handleCloseModal = () => {
|
||||
setIsModalOpen(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Fab typeIcon='add' color="secondary" size='large' ariaLabel="add" handleOpenModal={handleOpenModal} />
|
||||
<Dialog fullWidth={true} open={isModalOpen} onClose={handleCloseModal} color='default'>
|
||||
<DialogTitle>
|
||||
Добавить новую запись
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
<form onSubmit={handleFormSubmit} noValidate autoComplete="off" className={classes.form}>
|
||||
<TextField
|
||||
name='title'
|
||||
label="Название вашей записи"
|
||||
margin="normal"
|
||||
placeholder='Название вашей записи'
|
||||
variant="outlined"
|
||||
className={classes.textField}
|
||||
InputLabelProps={{
|
||||
shrink: true,
|
||||
}}
|
||||
/>
|
||||
<TextField
|
||||
name='description'
|
||||
label="Описание"
|
||||
margin="normal"
|
||||
placeholder='Описание'
|
||||
variant="outlined"
|
||||
className={classes.textField}
|
||||
InputLabelProps={{
|
||||
shrink: true,
|
||||
}}
|
||||
/>
|
||||
<FormControl variant="outlined" className={classes.selectField}>
|
||||
<InputLabel id="category-outlined-label">Категория</InputLabel>
|
||||
<Select
|
||||
labelId="category-outlined-label"
|
||||
id="demo-simple-select-outlined"
|
||||
name='category'
|
||||
value={selectedCategory}
|
||||
onChange={handleSelectChange}
|
||||
label="Категория"
|
||||
>
|
||||
<MenuItem value=""><em>None</em></MenuItem>
|
||||
<MenuItem value='Категория 1'>Категория 1</MenuItem>
|
||||
<MenuItem value='Категория 2'>Категория 2</MenuItem>
|
||||
<MenuItem value='Категория 3'>Категория 3</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<TextField
|
||||
name='deadline'
|
||||
label="Дедлайн"
|
||||
variant="outlined"
|
||||
type="datetime-local"
|
||||
className={classes.textField}
|
||||
InputLabelProps={{
|
||||
shrink: true,
|
||||
}}
|
||||
/>
|
||||
<DialogActions>
|
||||
<Button type='submit' color="default">
|
||||
Добавить
|
||||
</Button>
|
||||
<Button onClick={handleCloseModal} color="secondary">
|
||||
Закрыть
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TodosModal
|
||||
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import Cards from '../../components/Cards/Cards'
|
||||
import Todos from '../../components/Todos/Todos'
|
||||
import Fab from '../../components/Fab/Fab'
|
||||
import { Grid, Typography } from '@material-ui/core'
|
||||
|
||||
@ -12,10 +12,10 @@ const Category = () => {
|
||||
<Fab size='large' ariaLabel='add' typeIcon='edit'/>
|
||||
<Grid item xs={12}>
|
||||
<Typography>
|
||||
Сортируйте свои повседневные задачи используя категории.
|
||||
Сортируйте свои повседневные дела используя категории.
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Cards data={[1,2,3]} />
|
||||
<Todos data={[1,2,3]} />
|
||||
</Grid>
|
||||
)
|
||||
}
|
||||
@ -6,7 +6,7 @@ const Trash = () => {
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12}>
|
||||
<Typography>
|
||||
<span role='img' aria-label="cross mark">❌</span> Ошибка! Такого маршрута не существует.
|
||||
<span role='img' aria-label="cross mark">❌</span> Ошибка! Такой страницы не существует.
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
@ -1,20 +0,0 @@
|
||||
import React from 'react';
|
||||
import Cards from '../../components/Cards/Cards'
|
||||
import Fab from '../../components/Fab/Fab'
|
||||
import { Typography, Grid } from '@material-ui/core'
|
||||
|
||||
const Todos = () => {
|
||||
return (
|
||||
<Grid container spacing={2}>
|
||||
<Fab typeIcon='add' color="secondary" size='large' ariaLabel="add" />
|
||||
<Grid item xs={12}>
|
||||
<Typography>
|
||||
Создавайте, редактируйте или удаляйте ваши повседневные дела.
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Cards data={[1,2,3,4,5,6]} />
|
||||
</Grid>
|
||||
)
|
||||
}
|
||||
|
||||
export default Todos
|
||||
22
client/src/containers/TodosContainer/TodosContainer.js
Normal file
22
client/src/containers/TodosContainer/TodosContainer.js
Normal file
@ -0,0 +1,22 @@
|
||||
import React from 'react';
|
||||
import Todos from '../../components/Todos/Todos'
|
||||
import TodosModal from '../../components/Todos/TodoModal/TodosModal'
|
||||
import { Typography, Grid } from '@material-ui/core'
|
||||
|
||||
const TodosContainer = () => {
|
||||
return (
|
||||
<>
|
||||
<TodosModal />
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12}>
|
||||
<Typography>
|
||||
Создавайте, редактируйте или удаляйте ваши повседневные дела.
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Todos data={[1,2,3,4,5,6]} />
|
||||
</Grid>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default TodosContainer
|
||||
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import Cards from '../../components/Cards/Cards'
|
||||
import Todos from '../../components/Todos/Todos'
|
||||
import { Grid, Typography } from '@material-ui/core'
|
||||
|
||||
const Trash = () => {
|
||||
@ -10,7 +10,7 @@ const Trash = () => {
|
||||
Здесь находятся ваши недавно удаленные записи, вы можете их легко восстановить.
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Cards data={[1,2]} />
|
||||
<Todos data={[1,2]} />
|
||||
</Grid>
|
||||
)
|
||||
}
|
||||
@ -5,7 +5,7 @@ const theme = createMuiTheme({
|
||||
palette: {
|
||||
type: 'dark',
|
||||
primary: {
|
||||
main: '#0d47a1'
|
||||
main: '#0091ea'
|
||||
},
|
||||
secondary: red,
|
||||
error: red
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user