Tasks: move "Show Completed" to a toolbar menu

master
Andrew P Maney 5 years ago committed by GitHub
parent 74ed60a3fb
commit b69b51f558
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -14,13 +14,14 @@ import TextField from '@material-ui/core/TextField';
import { TaskType, PimType, TaskStatusType } from '../../pim-types';
interface PropsType {
style: React.CSSProperties;
onSubmit: (item: PimType, journalUid: string, originalItem?: PimType) => void;
defaultCollection: EteSync.CollectionInfo;
}
function QuickAdd(props: PropsType) {
const [title, setTitle] = React.useState('');
const { onSubmit: save, defaultCollection } = props;
const { style, onSubmit: save, defaultCollection } = props;
function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
@ -43,7 +44,7 @@ function QuickAdd(props: PropsType) {
return (
<form onSubmit={handleSubmit} style={{ flexGrow: 1, marginRight: '25px' }}>
<form onSubmit={handleSubmit} style={style}>
<TextField
label="Add a new task"
variant="outlined"

@ -10,8 +10,6 @@ import * as EteSync from 'etesync';
import { List } from '../../widgets/List';
import { TaskType, PimType } from '../../pim-types';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import Divider from '@material-ui/core/Divider';
import Grid from '@material-ui/core/Grid';
import { useTheme } from '@material-ui/core/styles';
@ -19,8 +17,8 @@ import { useTheme } from '@material-ui/core/styles';
import { useSelector } from 'react-redux';
import TaskListItem from './TaskListItem';
import QuickAdd from './QuickAdd';
import Sidebar from './Sidebar';
import Toolbar from './Toolbar';
import { StoreState } from '../../store';
@ -82,16 +80,12 @@ export default function TaskList(props: PropsType) {
</Grid>
<Grid item xs>
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
{props.collections && <QuickAdd onSubmit={props.onItemSave} defaultCollection={props.collections[0]} />}
<FormControlLabel
control={
<Checkbox checked={showCompleted} onChange={() => setShowCompleted(!showCompleted)} />
}
label="Show Completed"
/>
</div>
<Toolbar
defaultCollection={props.collections?.[0]}
onItemSave={props.onItemSave}
showCompleted={showCompleted}
setShowCompleted={setShowCompleted}
/>
<Divider style={{ marginTop: '1em' }} />
<List>

@ -0,0 +1,68 @@
import * as React from 'react';
import * as EteSync from 'etesync';
import Switch from '@material-ui/core/Switch';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import IconButton from '@material-ui/core/IconButton';
import MoreVertIcon from '@material-ui/icons/MoreVert';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import QuickAdd from './QuickAdd';
import { PimType } from '../../pim-types';
interface PropsType {
defaultCollection: EteSync.CollectionInfo;
onItemSave: (item: PimType, journalUid: string, originalItem?: PimType) => Promise<void>;
showCompleted: boolean;
setShowCompleted: (completed: boolean) => void;
}
export default function Toolbar(props: PropsType) {
const { defaultCollection, onItemSave, showCompleted, setShowCompleted } = props;
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
{defaultCollection && <QuickAdd style={{ flexGrow: 1, marginRight: '0.75em' }} onSubmit={onItemSave} defaultCollection={defaultCollection} />}
<div>
<IconButton
aria-label="more"
aria-controls="long-menu"
aria-haspopup="true"
onClick={handleClick}
>
<MoreVertIcon />
</IconButton>
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={!!anchorEl}
onClose={handleClose}
>
<MenuItem>
<FormControlLabel
label="Show completed"
labelPlacement="start"
control={<Switch checked={showCompleted} onChange={(_e, checked) => setShowCompleted(checked)} />}
/>
</MenuItem>
</Menu>
</div>
</div>
);
}
Loading…
Cancel
Save