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

added query modal for categories

Browse Source
This commit is contained in:
Sergey Yarkov 2020-06-14 16:40:51 +03:00
parent 02ad7d86de
commit 3bc457b5d2
5 changed files with 92 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
client/src/apollo/queries/todos/todos.js
View File

@ -9,6 +9,7 @@ const GET_TODOS = gql`
status status
deadline deadline
category { category {
id
title title
} }
} }

2
client/src/apollo/queries/todos/todosByCategory.js
View File

@ -3,7 +3,6 @@ import gql from 'graphql-tag'
const GET_TODOS_BY_CATEGORY = gql` const GET_TODOS_BY_CATEGORY = gql`
query getTodosByCategory($id: ID!) { query getTodosByCategory($id: ID!) {
category(id: $id) { category(id: $id) {
id
title title
todos { todos {
id id
@ -12,6 +11,7 @@ query getTodosByCategory($id: ID!) {
status status
deadline deadline
category { category {
id
title title
} }
} }

157
client/src/components/Modals/Todo/CreateTodoModal.js
View File

@ -3,7 +3,8 @@ import useStyles from '../styles'
import { Dialog, DialogContent, DialogTitle, DialogActions, Button, TextField, Select, MenuItem, InputLabel, FormControl } from '@material-ui/core' import { Dialog, DialogContent, DialogTitle, DialogActions, Button, TextField, Select, MenuItem, InputLabel, FormControl } from '@material-ui/core'
import AddIcon from '@material-ui/icons/Add' import AddIcon from '@material-ui/icons/Add'
import { useQuery, useMutation } from '@apollo/react-hooks' import { Query } from 'react-apollo'
import { useMutation } from '@apollo/react-hooks'
import CREATE_TODO from '../../../apollo/mutations/todos/createTodo'; import CREATE_TODO from '../../../apollo/mutations/todos/createTodo';
import GET_TODOS from '../../../apollo/queries/todos/todos'; import GET_TODOS from '../../../apollo/queries/todos/todos';
@ -63,82 +64,86 @@ const CreateTodoModal = ({ isModalOpen, handleCloseModal }) => {
}) })
} }
const { loading, error, data } = useQuery(GET_CATEGORIES);
if (loading) return null;
if (error) return `Error! ${error.message}`;
return ( return (
<div> <Query query={GET_CATEGORIES}>
<Dialog fullWidth={true} open={isModalOpen} onClose={handleCloseModal} color='default'> {({ loading, error, data }) => {
<DialogTitle> if (loading) return null;
<AddIcon className={classes.headingIcon} /> Добавить новую запись if (error) return `Error! ${error.message}`;
</DialogTitle>
<DialogContent> return (
<form onSubmit={handleFormSubmit} noValidate autoComplete="off" className={classes.form}> <div>
<TextField <Dialog fullWidth={true} open={isModalOpen} onClose={handleCloseModal} color='default'>
name='title' <DialogTitle>
label="Название вашей записи" <AddIcon className={classes.headingIcon} /> Добавить новую запись
margin="normal" </DialogTitle>
placeholder='Название вашей записи' <DialogContent>
variant="outlined" <form onSubmit={handleFormSubmit} noValidate autoComplete="off" className={classes.form}>
className={classes.textField} <TextField
value={fieldsData.title} name='title'
onChange={handleFieldChange} label="Название вашей записи"
InputLabelProps={{ margin="normal"
shrink: true, placeholder='Название вашей записи'
}} variant="outlined"
/> className={classes.textField}
<TextField value={fieldsData.title}
name='description' onChange={handleFieldChange}
label="Описание" InputLabelProps={{
margin="normal" shrink: true,
placeholder='Описание' }}
variant="outlined" />
className={classes.textField} <TextField
value={fieldsData.description} name='description'
onChange={handleFieldChange} label="Описание"
InputLabelProps={{ margin="normal"
shrink: true, placeholder='Описание'
}} variant="outlined"
/> className={classes.textField}
<FormControl variant="outlined" className={classes.selectField}> value={fieldsData.description}
<InputLabel id="category-outlined-label">Категория</InputLabel> onChange={handleFieldChange}
<Select InputLabelProps={{
labelId="category-outlined-label" shrink: true,
id="demo-simple-select-outlined" }}
name='category' />
value={fieldsData.category} <FormControl variant="outlined" className={classes.selectField}>
onChange={handleFieldChange} <InputLabel id="category-outlined-label">Категория</InputLabel>
label="Категория" <Select
> labelId="category-outlined-label"
{data.categories.map((category, i) => <MenuItem key={i} value={category.id}>{category.title}</MenuItem>)} id="demo-simple-select-outlined"
</Select> name='category'
</FormControl> value={fieldsData.category}
<TextField onChange={handleFieldChange}
name='deadline' label="Категория"
label="Дедлайн" >
variant="outlined" {data.categories.map((category, i) => <MenuItem key={i} value={category.id}>{category.title}</MenuItem>)}
type="datetime-local" </Select>
className={classes.textField} </FormControl>
value={fieldsData.deadline} <TextField
onChange={handleFieldChange} name='deadline'
InputLabelProps={{ label="Дедлайн"
shrink: true, variant="outlined"
}} type="datetime-local"
/> className={classes.textField}
<DialogActions> value={fieldsData.deadline}
<Button type='submit' color="default"> onChange={handleFieldChange}
Добавить InputLabelProps={{
</Button> shrink: true,
<Button onClick={handleCloseModal} color="secondary"> }}
Закрыть />
</Button> <DialogActions>
</DialogActions> <Button type='submit' color="default">
</form> Добавить
</DialogContent> </Button>
</Dialog> <Button onClick={handleCloseModal} color="secondary">
</div> Закрыть
</Button>
</DialogActions>
</form>
</DialogContent>
</Dialog>
</div>
)
}}
</Query>
) )
} }

9
client/src/components/Modals/Todo/UpdateTodoModal.js
View File

@ -3,7 +3,9 @@ import useStyles from '../styles'
import { Dialog, DialogContent, DialogTitle, DialogActions, Button, TextField, Select, MenuItem, InputLabel, FormControl } from '@material-ui/core' import { Dialog, DialogContent, DialogTitle, DialogActions, Button, TextField, Select, MenuItem, InputLabel, FormControl } from '@material-ui/core'
import EditIcon from '@material-ui/icons/Edit' import EditIcon from '@material-ui/icons/Edit'
import categories from '../../../db/categories.json' import { Query } from 'react-apollo'
import { useQuery } from '@apollo/react-hooks'
import GET_CATEGORIES from '../../../apollo/queries/categories/categories'
const UpdateTodoModal = ({ isModalOpen, handleCloseModal, selectedTodo, setSelectedTodo }) => { const UpdateTodoModal = ({ isModalOpen, handleCloseModal, selectedTodo, setSelectedTodo }) => {
const classes = useStyles() const classes = useStyles()
@ -32,6 +34,9 @@ const UpdateTodoModal = ({ isModalOpen, handleCloseModal, selectedTodo, setSelec
}) })
} }
const { loading, error, data } = useQuery(GET_CATEGORIES)
if (loading) return null
if (error) return `Error: ${error}`
return ( return (
<div> <div>
<Dialog fullWidth={true} open={isModalOpen} onClose={handleCloseModal} color='default'> <Dialog fullWidth={true} open={isModalOpen} onClose={handleCloseModal} color='default'>
@ -77,7 +82,7 @@ const UpdateTodoModal = ({ isModalOpen, handleCloseModal, selectedTodo, setSelec
onChange={handleFieldChange} onChange={handleFieldChange}
label="Категория" label="Категория"
> >
{categories.map((category, i) => <MenuItem key={i} value={category._id.$oid}>{category.title}</MenuItem>)} {data.categories.map((category, i) => <MenuItem key={i} value={category.id}>{category.title}</MenuItem>)}
</Select> </Select>
</FormControl> </FormControl>
<TextField <TextField

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

@ -28,7 +28,7 @@ const Todos = ({ data, fromTrashContainer }) => {
id: todo.id, id: todo.id,
title: todo.title, title: todo.title,
description: todo.description, description: todo.description,
category: todo.category, category: todo.category.id,
deadline: todo.deadline deadline: todo.deadline
} }