Adds some initial improvements to Tasks

package.json

@@ -10,6 +10,7 @@
     "@material-ui/pickers": "^3.2.10",
     "@material-ui/styles": "^4.6.0",
     "etesync": "^0.3.1",
+    "fuse.js": "^3.4.6",
     "ical.js": "^1.2.2",
     "immutable": "^4.0.0-rc.12",
     "localforage": "^1.7.3",

src/App.tsx

@@ -41,7 +41,7 @@ const muiTheme = createMuiTheme({
       light: lightBlue.A200,
       main: lightBlue.A400,
       dark: lightBlue.A700,
-      contrastText: 'white',
+      contrastText: '#fff',
     },
   },
 });

src/Journals/Journal.tsx

@@ -11,8 +11,8 @@ import SearchableAddressBook from '../components/SearchableAddressBook';
 import Contact from '../components/Contact';
 import Calendar from '../components/Calendar';
 import Event from '../components/Event';
-import Task from '../components/Task';
-import TaskList from '../components/TaskList';
+import Task from '../components/Tasks/Task';
+import TaskList from '../components/Tasks/TaskList';
 
 import AppBarOverride from '../widgets/AppBarOverride';
 import Container from '../widgets/Container';

src/Pim/PimMain.tsx

@@ -13,7 +13,7 @@ import Container from '../widgets/Container';
 
 import SearchableAddressBook from '../components/SearchableAddressBook';
 import Calendar from '../components/Calendar';
-import TaskList from '../components/TaskList';
+import TaskList from '../components/Tasks/TaskList';
 
 import { EventType, ContactType, TaskType } from '../pim-types';
 
@@ -64,7 +64,7 @@ class PimMain extends React.PureComponent<PropsType> {
     const itemUid = `${(event as any).journalUid}|${event.uid}`;
 
     this.props.history!.push(
-      routeResolver.getRoute('pim.tasks._id', { itemUid }));
+      routeResolver.getRoute('pim.tasks._id.edit', { itemUid }));
   }
 
   public contactClicked(contact: ContactType) {

src/Pim/index.tsx

@@ -24,8 +24,8 @@ import ContactEdit from '../components/ContactEdit';
 import Contact from '../components/Contact';
 import EventEdit from '../components/EventEdit';
 import Event from '../components/Event';
-import TaskEdit from '../components/TaskEdit';
-import Task from '../components/Task';
+import TaskEdit from '../components/Tasks/TaskEdit';
+import Task from '../components/Tasks/Task';
 import PimMain from './PimMain';
 
 import { routeResolver } from '../App';
@@ -44,14 +44,14 @@ function objValues(obj: any) {
 }
 
 const itemsSelector = createSelector(
-  (props: {syncInfo: SyncInfo}) => props.syncInfo,
+  (props: { syncInfo: SyncInfo }) => props.syncInfo,
   (syncInfo) => {
     const collectionsAddressBook: EteSync.CollectionInfo[] = [];
     const collectionsCalendar: EteSync.CollectionInfo[] = [];
     const collectionsTaskList: EteSync.CollectionInfo[] = [];
-    let addressBookItems: {[key: string]: ContactType} = {};
-    let calendarItems: {[key: string]: EventType} = {};
-    let taskListItems: {[key: string]: TaskType} = {};
+    let addressBookItems: { [key: string]: ContactType } = {};
+    let calendarItems: { [key: string]: EventType } = {};
+    let taskListItems: { [key: string]: TaskType } = {};
     syncInfo.forEach(
       (syncJournal) => {
         const syncEntries = syncJournal.entries;
@@ -106,7 +106,7 @@ type CollectionRoutesPropsType = RouteComponentProps<{}> & {
   collections: EteSync.CollectionInfo[];
   componentEdit: any;
   componentView: any;
-  items: {[key: string]: PimType};
+  items: { [key: string]: PimType };
   onItemSave: (item: PimType, journalUid: string, originalContact?: PimType) => void;
   onItemDelete: (item: PimType, journalUid: string) => void;
   onItemCancel: () => void;
@@ -115,10 +115,10 @@ type CollectionRoutesPropsType = RouteComponentProps<{}> & {
 
 const styles = (theme: any) => ({
   button: {
-    marginLeft: theme.spacing.unit,
+    marginLeft: theme.spacing(1),
   },
   leftIcon: {
-    marginRight: theme.spacing.unit,
+    marginRight: theme.spacing(1),
   },
 });
 
@@ -191,7 +191,7 @@ const CollectionRoutes = withStyles(styles)(withRouter(
                     }
                   >
                     <IconChangeHistory className={classes.leftIcon} />
-                   Change History
+                    Change History
                   </Button>
 
                   <Button
@@ -220,6 +220,11 @@ const CollectionRoutes = withStyles(styles)(withRouter(
   }
 ));
 
+export const PimContext = React.createContext({
+  onItemSave: (_item: PimType, _journalUid: string, _originalEvent?: PimType, _goBack = true) => { return },
+  collectionsTaskList: [] as EteSync.CollectionInfo[],
+});
+
 class Pim extends React.PureComponent {
   public props: {
     etesync: CredentialsData;
@@ -235,7 +240,7 @@ class Pim extends React.PureComponent {
     this.onItemSave = this.onItemSave.bind(this);
   }
 
-  public onItemSave(item: PimType, journalUid: string, originalEvent?: PimType) {
+  public onItemSave(item: PimType, journalUid: string, originalEvent?: PimType, goBack = true) {
     const syncJournal = this.props.syncInfo.get(journalUid);
 
     if (syncJournal === undefined) {
@@ -265,7 +270,7 @@ class Pim extends React.PureComponent {
             this.props.etesync, this.props.userInfo, journal,
             prevUid, action, item.toIcal()));
         (saveEvent as any).then(() => {
-          this.props.history.goBack();
+          if (goBack) { this.props.history.goBack() }
         });
       });
   }
@@ -313,6 +318,7 @@ class Pim extends React.PureComponent {
     const { collectionsAddressBook, collectionsCalendar, collectionsTaskList, addressBookItems, calendarItems, taskListItems } = itemsSelector(this.props);
 
     return (
+      <PimContext.Provider value={{ onItemSave: this.onItemSave, collectionsTaskList }}>
       <Switch>
         <Route
           path={routeResolver.getRoute('pim')}
@@ -375,6 +381,7 @@ class Pim extends React.PureComponent {
           )}
         />
       </Switch>
+      </PimContext.Provider>
     );
   }
 }

src/components/Tasks/AddNewTaskItem.tsx

@@ -0,0 +1,50 @@
+import React, { useState, useContext } from 'react';
+
+import ICAL from 'ical.js';
+import uuid from 'uuid';
+
+import Checkbox from '@material-ui/core/Checkbox';
+import TextField from '@material-ui/core/TextField';
+
+import { TaskType, TaskStatusType, TaskPriorityType } from '../../pim-types';
+import { ListItem } from '../../widgets/List';
+import { PimContext } from '../../Pim';
+
+const AddNewTaskItem = () => {
+  const [title, setTitle] = useState('');
+  const { onItemSave: save, collectionsTaskList: collections } = useContext(PimContext);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setTitle(e.target.value);
+  };
+
+  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+
+      const event = new TaskType(null);
+      event.uid = uuid.v4();
+      event.title = title;
+      event.status = TaskStatusType.NeedsAction;
+      event.priority = TaskPriorityType.None;
+      event.lastModified = ICAL.Time.now();
+
+      save(event, collections[0].uid, undefined, false);
+
+      setTitle('');
+    }
+  };
+
+  return (
+    <ListItem leftIcon={<Checkbox disabled />}>
+      <TextField
+        label="New task"
+        value={title}
+        onChange={handleChange}
+        onKeyPress={handleKeyPress}
+      />
+    </ListItem>
+  );
+};
+
+export default AddNewTaskItem;

src/components/Tasks/ColoredRadio.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { makeStyles } from '@material-ui/core/styles';
+import * as colors from '@material-ui/core/colors';
+import Radio from '@material-ui/core/Radio';
+import { Omit } from '@material-ui/types';
+import FormControlLabel, { FormControlLabelProps } from '@material-ui/core/FormControlLabel';
+
+interface Props {
+  color: string;
+  label: string;
+}
+
+const useStyles = makeStyles({
+  root: {
+    color: (props: Props) => colors[props.color][600],
+  },
+});
+
+const ColoredRadio = (props: Props & Omit<FormControlLabelProps, keyof Props | 'control'>) => {
+  const { color, label, value, ...other } = props;
+  const { root } = useStyles(props);
+
+  return <FormControlLabel
+    className={root}
+    label={label}
+    control={<Radio color="default" className={root} value={value} />}
+    {...other}
+  />;
+};
+
+export default ColoredRadio;

src/components/Tasks/Sidebar.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+
+import { useSelector, useDispatch } from 'react-redux';
+
+import List from '@material-ui/core/List';
+import ListSubheader from '@material-ui/core/ListSubheader';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import { IconProps } from '@material-ui/core/Icon';
+import TodayIcon from '@material-ui/icons/Today';
+import LabelIcon from '@material-ui/icons/LabelOutlined';
+
+import { setSettings } from '../../store/actions';
+import { StoreState } from '../../store';
+
+interface ListItemPropsType {
+  name: string;
+  Icon?: React.ComponentType<IconProps>;
+  primaryText: string;
+  secondaryText?: string;
+}
+
+const SidebarListItem = (props: ListItemPropsType) => {
+  const { name, Icon, primaryText, secondaryText } = props;
+  const dispatch = useDispatch();
+  const settings = useSelector((state: StoreState) => state.settings.tasks);
+  const { filterBy } = settings;
+
+  const handleClick = () => {
+    dispatch(setSettings({ tasks: { ...settings, filterBy: name } }));
+  };
+
+  return (
+    <ListItem
+      button
+      onClick={handleClick}
+      selected={name === filterBy}
+    >
+      {Icon ?
+        <ListItemIcon>
+          <Icon fontSize="small" />
+        </ListItemIcon> :
+        ''
+      }
+      <ListItemText primary={primaryText} secondary={secondaryText || ''} />
+    </ListItem>
+  );
+};
+
+const Sidebar = (props: { tags: any }) => {
+  const { tags } = props;
+
+  const settings = useSelector((state: StoreState) => state.settings.tasks);
+  const { filterBy, searchTerm } = settings;
+
+  const tagsList = Object.entries(tags).map(([tag, amount]) => (
+    <SidebarListItem
+      key={tag}
+      name={tag}
+      primaryText={tag}
+      secondaryText={String(amount)}
+      Icon={LabelIcon} />
+  ));
+
+  return (
+    <List dense>
+      {filterBy === 'search' && <SidebarListItem name="search" primaryText={`Search "${searchTerm}"`} />}
+
+      <SidebarListItem name="all" primaryText="View all tasks" />
+
+      <ListSubheader>Filter</ListSubheader>
+      <SidebarListItem name="today" primaryText="Today" Icon={TodayIcon} />
+
+      <ListSubheader>Tags</ListSubheader>
+      {tagsList}
+    </List>
+  );
+};
+
+export default React.memo(Sidebar);