From b4ef6e641da98459f902ccc41fe6e859b6871db0 Mon Sep 17 00:00:00 2001 From: Andrew P Maney Date: Fri, 6 Mar 2020 16:55:10 -0800 Subject: [PATCH] Tasks: Quick Add feature This is a merge of #84 --- src/Pim/PimMain.tsx | 8 ++++- src/Pim/index.tsx | 4 ++- src/components/Tasks/QuickAdd.tsx | 55 +++++++++++++++++++++++++++++++ src/components/Tasks/TaskList.tsx | 12 +++++-- src/pim-types.ts | 12 +++++++ 5 files changed, 87 insertions(+), 4 deletions(-) create mode 100644 src/components/Tasks/QuickAdd.tsx diff --git a/src/Pim/PimMain.tsx b/src/Pim/PimMain.tsx index 85dd486..26d5195 100644 --- a/src/Pim/PimMain.tsx +++ b/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 { @@ -146,7 +150,9 @@ class PimMain extends React.PureComponent { {tab === 2 && } diff --git a/src/Pim/index.tsx b/src/Pim/index.tsx index c1c6869..a0ad476 100644 --- a/src/Pim/index.tsx +++ b/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} /> )} /> diff --git a/src/components/Tasks/QuickAdd.tsx b/src/components/Tasks/QuickAdd.tsx new file mode 100644 index 0000000..72c5eee --- /dev/null +++ b/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) { + setTitle(e.target.value); + } + + function handleSubmit(e: React.FormEvent) { + 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 ( +
+ + + ); +} + +export default QuickAdd; \ No newline at end of file diff --git a/src/components/Tasks/TaskList.tsx b/src/components/Tasks/TaskList.tsx index 92283bc..761e7d8 100644 --- a/src/components/Tasks/TaskList.tsx +++ b/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 ( <> -
+ +
+ {props.collections && } + setShowCompleted(!showCompleted)} /> diff --git a/src/pim-types.ts b/src/pim-types.ts index 56614ae..8728d6a 100644 --- a/src/pim-types.ts +++ b/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);