Tasks: Quick Add feature

src/Pim/PimMain.tsx

@@ -10,6 +10,8 @@ import { Theme, withTheme } from '@material-ui/core/styles';
 
 import * as ICAL from 'ical.js';
 
+import * as EteSync from 'etesync';
+
 import { Location, History } from 'history';
 
 import Container from '../widgets/Container';
@@ -18,7 +20,7 @@ import SearchableAddressBook from '../components/SearchableAddressBook';
 import Calendar from '../components/Calendar';
 import TaskList from '../components/Tasks/TaskList';
 
-import { EventType, ContactType, TaskType } from '../pim-types';
+import { EventType, ContactType, TaskType, PimType } from '../pim-types';
 
 import { routeResolver } from '../App';
 
@@ -37,6 +39,8 @@ interface PropsType {
   location?: Location;
   history?: History;
   theme: Theme;
+  collectionsTaskList: EteSync.CollectionInfo[];
+  onItemSave: (item: PimType, journalUid: string, originalItem?: PimType) => void;
 }
 
 class PimMain extends React.PureComponent<PropsType> {
@@ -146,7 +150,9 @@ class PimMain extends React.PureComponent<PropsType> {
           {tab === 2 &&
             <TaskList
               entries={this.props.tasks}
+              collections={this.props.collectionsTaskList}
               onItemClick={this.taskClicked}
+              onItemSave={this.props.onItemSave}
             />
           }
         </Container>

src/Pim/index.tsx

@@ -110,7 +110,7 @@ type CollectionRoutesPropsType = RouteComponentProps<{}> & {
   componentEdit: any;
   componentView: any;
   items: {[key: string]: PimType};
-  onItemSave: (item: PimType, journalUid: string, originalContact?: PimType) => void;
+  onItemSave: (item: PimType, journalUid: string, originalItem?: PimType) => void;
   onItemDelete: (item: PimType, journalUid: string) => void;
   onItemCancel: () => void;
   classes: any;

src/components/Tasks/QuickAdd.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+
+import * as EteSync from 'etesync';
+
+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, PimType } from '../../pim-types';
+import { ListItem } from '../../widgets/List';
+
+interface PropsType {
+  onSubmit: (item: PimType, journalUid: string, originalItem?: PimType) => void;
+  defaultCollection: EteSync.CollectionInfo;
+}
+
+const QuickAdd = (props: PropsType) => {
+  const [title, setTitle] = React.useState('');
+  const { onSubmit: save, defaultCollection } = props;
+
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setTitle(e.target.value);
+  };
+
+  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+
+      const task = new TaskType(null);
+      task.uid = uuid.v4();
+      task.title = title;
+      task.lastModified = ICAL.Time.now();
+
+      save(task, defaultCollection.uid, undefined);
+
+      setTitle('');
+    }
+  };
+
+
+  return (
+    <ListItem leftIcon={<Checkbox disabled />}>
+      <TextField
+        label="New task"
+        value={title}
+        onChange={handleChange}
+        onKeyPress={handleKeyPress}
+      />
+    </ListItem>
+  );
+};
+
+export default QuickAdd;

src/components/Tasks/TaskList.tsx

@@ -5,14 +5,17 @@ import * as React from 'react';
 
 import { createSelector } from 'reselect';
 
+import * as EteSync from 'etesync';
+
 import { List } from '../../widgets/List';
 
-import { TaskType } from '../../pim-types';
+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 TaskListItem from './TaskListItem';
+import QuickAdd from './QuickAdd';
 
 const sortSelector = createSelector(
   (entries: TaskType[]) => entries,
@@ -21,7 +24,9 @@ const sortSelector = createSelector(
 
 interface PropsType {
   entries: TaskType[];
+  collections: EteSync.CollectionInfo[];
   onItemClick: (entry: TaskType) => void;
+  onItemSave: (item: PimType, journalUid: string, originalItem?: PimType) => void;
 }
 
 export default React.memo(function TaskList(props: PropsType) {
@@ -55,6 +60,8 @@ export default React.memo(function TaskList(props: PropsType) {
       <Divider style={{ marginTop: '1em' }} />
       <List>
         {itemList}
+
+        <QuickAdd onSubmit={props.onItemSave} defaultCollection={props.collections[0]} />
       </List>
     </>
   );

src/pim-types.ts

@@ -83,6 +83,10 @@ export class EventType extends ICAL.Event implements PimType {
     return this.summary;
   }
 
+  set title(title: string) {
+    this.summary = title;
+  }
+
   get start() {
     return this.startDate.toJSDate();
   }
@@ -99,6 +103,14 @@ export class EventType extends ICAL.Event implements PimType {
     return this.description;
   }
 
+  get lastModified() {
+    return this.component.getFirstPropertyValue('last-modified');
+  }
+
+  set lastModified(time: ICAL.Time) {
+    this.component.updatePropertyWithValue('last-modified', time);
+  }
+
   public toIcal() {
     const comp = new ICAL.Component(['vcalendar', [], []]);
     comp.updatePropertyWithValue('prodid', PRODID);