Tasks: Quick Add feature

This is a merge of #84

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;
@@ -326,6 +326,8 @@ class Pim extends React.PureComponent {
               events={objValues(calendarItems)}
               tasks={objValues(taskListItems)}
               history={history}
+              onItemSave={this.onItemSave}
+              collectionsTaskList={collectionsTaskList}
             />
           )}
         />

src/components/Tasks/QuickAdd.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+
+import * as EteSync from 'etesync';
+
+import ICAL from 'ical.js';
+
+import uuid from 'uuid';
+
+import TextField from '@material-ui/core/TextField';
+
+import { TaskType, PimType, TaskStatusType } from '../../pim-types';
+
+interface PropsType {
+  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;
+
+
+  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+    setTitle(e.target.value);
+  }
+
+  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+
+    const task = new TaskType(null);
+    task.uid = uuid.v4();
+    task.title = title;
+    task.status = TaskStatusType.NeedsAction;
+    task.lastModified = ICAL.Time.now();
+
+    save(task, defaultCollection.uid, undefined);
+
+    setTitle('');
+  }
+
+
+  return (
+    <form onSubmit={handleSubmit} style={{ flexGrow: 1, marginRight: '25px' }}>
+      <TextField
+        label="Add a new task"
+        variant="outlined"
+        fullWidth
+        value={title}
+        onChange={handleChange}
+      />
+    </form>
+  );
+}
+
+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) {
@@ -43,7 +48,10 @@ export default React.memo(function TaskList(props: PropsType) {
 
   return (
     <>
-      <div style={{ display: 'flex', justifyContent: 'right' }}>
+
+      <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)} />

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);