Journal: implement importing entries from file
It still needs a bit of polished, such as proper error handling, progress indication, chunked pushing and etc, though it does work! Fixes #17master
Tom Hacohen
6 years ago
parent
8a58fb01fc
commit
d1293b08c3
@ -0,0 +1,192 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
|
||||||
|
import Button from '@material-ui/core/Button';
|
||||||
|
import Dialog from '@material-ui/core/Dialog';
|
||||||
|
import DialogActions from '@material-ui/core/DialogActions';
|
||||||
|
import DialogContent from '@material-ui/core/DialogContent';
|
||||||
|
import DialogContentText from '@material-ui/core/DialogContentText';
|
||||||
|
import DialogTitle from '@material-ui/core/DialogTitle';
|
||||||
|
|
||||||
|
import Dropzone from 'react-dropzone';
|
||||||
|
|
||||||
|
import LoadingIndicator from '../widgets/LoadingIndicator';
|
||||||
|
|
||||||
|
import { SyncInfoJournal } from '../SyncGate';
|
||||||
|
|
||||||
|
import { store, CredentialsData, UserInfoData } from '../store';
|
||||||
|
import { addEntries } from '../store/actions';
|
||||||
|
import { createJournalEntry } from '../etesync-helpers';
|
||||||
|
import * as EteSync from '../api/EteSync';
|
||||||
|
|
||||||
|
import * as ICAL from 'ical.js';
|
||||||
|
import { ContactType, EventType, TaskType, PimType } from '../pim-types';
|
||||||
|
|
||||||
|
interface PropsType {
|
||||||
|
etesync: CredentialsData;
|
||||||
|
userInfo: UserInfoData;
|
||||||
|
syncJournal: SyncInfoJournal;
|
||||||
|
open: boolean;
|
||||||
|
onClose?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
class ImportDialog extends React.Component<PropsType> {
|
||||||
|
public state = {
|
||||||
|
loading: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
constructor(props: PropsType) {
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
this.onFileDropCommon = this.onFileDropCommon.bind(this);
|
||||||
|
this.onFileDropEvent = this.onFileDropEvent.bind(this);
|
||||||
|
this.onFileDropTask = this.onFileDropTask.bind(this);
|
||||||
|
this.onFileDropContact = this.onFileDropContact.bind(this);
|
||||||
|
this.onClose = this.onClose.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
public render() {
|
||||||
|
const { syncJournal } = this.props;
|
||||||
|
const { loading } = this.state;
|
||||||
|
const collectionInfo = syncJournal.collection;
|
||||||
|
let acceptTypes;
|
||||||
|
let dropFunction;
|
||||||
|
|
||||||
|
if (collectionInfo.type === 'ADDRESS_BOOK') {
|
||||||
|
acceptTypes = ['text/vcard'];
|
||||||
|
dropFunction = this.onFileDropContact;
|
||||||
|
} else if (collectionInfo.type === 'CALENDAR') {
|
||||||
|
acceptTypes = ['text/calendar'];
|
||||||
|
dropFunction = this.onFileDropEvent;
|
||||||
|
} else if (collectionInfo.type === 'TASKS') {
|
||||||
|
acceptTypes = ['text/calendar'];
|
||||||
|
dropFunction = this.onFileDropTask;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<React.Fragment>
|
||||||
|
<Dialog
|
||||||
|
open={this.props.open}
|
||||||
|
onClose={this.onClose}
|
||||||
|
>
|
||||||
|
<DialogTitle>Import entries from file?</DialogTitle>
|
||||||
|
<DialogContent>
|
||||||
|
{ loading ?
|
||||||
|
<LoadingIndicator style={{display: 'block', margin: 'auto'}} />
|
||||||
|
:
|
||||||
|
<Dropzone
|
||||||
|
onDrop={dropFunction}
|
||||||
|
multiple={false}
|
||||||
|
accept={acceptTypes}
|
||||||
|
>
|
||||||
|
{({getRootProps, getInputProps}) => (
|
||||||
|
<section>
|
||||||
|
<div {...getRootProps()}>
|
||||||
|
<input {...getInputProps()} />
|
||||||
|
<DialogContentText id="alert-dialog-description">
|
||||||
|
To import entries from a file, drag 'n' drop it here, or click to open the file selector.
|
||||||
|
</DialogContentText>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)}
|
||||||
|
</Dropzone>
|
||||||
|
}
|
||||||
|
</DialogContent>
|
||||||
|
<DialogActions>
|
||||||
|
<Button disabled={loading} onClick={this.onClose} color="primary">
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
</DialogActions>
|
||||||
|
</Dialog>
|
||||||
|
</React.Fragment>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
private onFileDropCommon(itemsCreator: (fileText: string) => PimType[], acceptedFiles: File[], rejectedFiles: File[]) {
|
||||||
|
const reader = new FileReader();
|
||||||
|
|
||||||
|
reader.onabort = () => alert('file reading was aborted');
|
||||||
|
reader.onerror = () => alert('file reading has failed');
|
||||||
|
reader.onload = () => {
|
||||||
|
const fileText = reader.result as string;
|
||||||
|
const items = itemsCreator(fileText);
|
||||||
|
|
||||||
|
const { syncJournal } = this.props;
|
||||||
|
const last = syncJournal.journalEntries.last() as EteSync.Entry;
|
||||||
|
const lastUid = last ? last.uid : null;
|
||||||
|
|
||||||
|
// XXX implement chunked push most likely...
|
||||||
|
let prevUid = lastUid;
|
||||||
|
const journalItems = items.map((item) => {
|
||||||
|
const ret = createJournalEntry(
|
||||||
|
this.props.etesync, this.props.userInfo, syncJournal.journal,
|
||||||
|
prevUid, EteSync.SyncEntryAction.Add, item.toIcal());
|
||||||
|
|
||||||
|
prevUid = ret.uid;
|
||||||
|
return ret;
|
||||||
|
});
|
||||||
|
|
||||||
|
store.dispatch<any>(
|
||||||
|
addEntries(this.props.etesync, syncJournal.journal.uid, journalItems, lastUid)
|
||||||
|
).then(() => {
|
||||||
|
if (this.props.onClose) {
|
||||||
|
this.props.onClose();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
this.setState({ loading: true });
|
||||||
|
acceptedFiles.forEach((file) => {
|
||||||
|
reader.readAsText(file);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private onFileDropContact(acceptedFiles: File[], rejectedFiles: File[]) {
|
||||||
|
const itemsCreator = (fileText: string) => {
|
||||||
|
const mainComp = ICAL.parse(fileText);
|
||||||
|
return mainComp.map((comp) => new ContactType(new ICAL.Component(comp)));
|
||||||
|
};
|
||||||
|
|
||||||
|
this.onFileDropCommon(itemsCreator, acceptedFiles, rejectedFiles);
|
||||||
|
}
|
||||||
|
|
||||||
|
private onFileDropEvent(acceptedFiles: File[], rejectedFiles: File[]) {
|
||||||
|
const itemsCreator = (fileText: string) => {
|
||||||
|
const calendarComp = new ICAL.Component(ICAL.parse(fileText));
|
||||||
|
const timezoneComp = calendarComp.getFirstSubcomponent('vtimezone');
|
||||||
|
return calendarComp.getAllSubcomponents('vevent').map((comp) => {
|
||||||
|
const ret = new EventType(comp);
|
||||||
|
ret.timezoneComp = timezoneComp;
|
||||||
|
return ret;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
this.onFileDropCommon(itemsCreator, acceptedFiles, rejectedFiles);
|
||||||
|
}
|
||||||
|
|
||||||
|
private onFileDropTask(acceptedFiles: File[], rejectedFiles: File[]) {
|
||||||
|
const itemsCreator = (fileText: string) => {
|
||||||
|
const calendarComp = new ICAL.Component(ICAL.parse(fileText));
|
||||||
|
const timezoneComp = calendarComp.getFirstSubcomponent('vtimezone');
|
||||||
|
return calendarComp.getAllSubcomponents('vtodo').map((comp) => {
|
||||||
|
const ret = new TaskType(comp);
|
||||||
|
ret.timezoneComp = timezoneComp;
|
||||||
|
return ret;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
this.onFileDropCommon(itemsCreator, acceptedFiles, rejectedFiles);
|
||||||
|
}
|
||||||
|
|
||||||
|
private onClose() {
|
||||||
|
if (this.state.loading) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.props.onClose) {
|
||||||
|
this.props.onClose();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ImportDialog;
|
||||||
|
|
||||||
Loading…
Reference in New Issue