Tasks: Quick Add feature

This is a merge of #84
master
Andrew P Maney 5 years ago committed by Tom Hacohen
parent 7efb185caf
commit b4ef6e641d

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

@ -110,7 +110,7 @@ type CollectionRoutesPropsType = RouteComponentProps<{}> & {
componentEdit: any; componentEdit: any;
componentView: any; componentView: any;
items: {[key: string]: PimType}; 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; onItemDelete: (item: PimType, journalUid: string) => void;
onItemCancel: () => void; onItemCancel: () => void;
classes: any; classes: any;
@ -326,6 +326,8 @@ class Pim extends React.PureComponent {
events={objValues(calendarItems)} events={objValues(calendarItems)}
tasks={objValues(taskListItems)} tasks={objValues(taskListItems)}
history={history} history={history}
onItemSave={this.onItemSave}
collectionsTaskList={collectionsTaskList}
/> />
)} )}
/> />

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

@ -5,14 +5,17 @@ import * as React from 'react';
import { createSelector } from 'reselect'; import { createSelector } from 'reselect';
import * as EteSync from 'etesync';
import { List } from '../../widgets/List'; import { List } from '../../widgets/List';
import { TaskType } from '../../pim-types'; import { TaskType, PimType } from '../../pim-types';
import FormControlLabel from '@material-ui/core/FormControlLabel'; import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox'; import Checkbox from '@material-ui/core/Checkbox';
import Divider from '@material-ui/core/Divider'; import Divider from '@material-ui/core/Divider';
import TaskListItem from './TaskListItem'; import TaskListItem from './TaskListItem';
import QuickAdd from './QuickAdd';
const sortSelector = createSelector( const sortSelector = createSelector(
(entries: TaskType[]) => entries, (entries: TaskType[]) => entries,
@ -21,7 +24,9 @@ const sortSelector = createSelector(
interface PropsType { interface PropsType {
entries: TaskType[]; entries: TaskType[];
collections: EteSync.CollectionInfo[];
onItemClick: (entry: TaskType) => void; onItemClick: (entry: TaskType) => void;
onItemSave: (item: PimType, journalUid: string, originalItem?: PimType) => void;
} }
export default React.memo(function TaskList(props: PropsType) { export default React.memo(function TaskList(props: PropsType) {
@ -43,7 +48,10 @@ export default React.memo(function TaskList(props: PropsType) {
return ( 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 <FormControlLabel
control={ control={
<Checkbox checked={showCompleted} onChange={() => setShowCompleted(!showCompleted)} /> <Checkbox checked={showCompleted} onChange={() => setShowCompleted(!showCompleted)} />

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

Loading…
Cancel
Save