Collections: add collection list import page.

master
Tom Hacohen 4 years ago
parent 3db3720eef
commit 26788cc749

@ -0,0 +1,84 @@
// SPDX-FileCopyrightText: © 2017 EteSync Authors
// SPDX-License-Identifier: AGPL-3.0-only
import * as React from "react";
import ContactsIcon from "@material-ui/icons/Contacts";
import CalendarTodayIcon from "@material-ui/icons/CalendarToday";
import FormatListBulletedIcon from "@material-ui/icons/FormatListBulleted";
import { List, ListItem } from "../widgets/List";
import AppBarOverride from "../widgets/AppBarOverride";
import Container from "../widgets/Container";
import { CachedCollection } from "../Pim/helpers";
import ColorBox from "../widgets/ColorBox";
import ImportDialog from "./ImportDialog";
interface PropsType {
collections: CachedCollection[];
}
export default function CollectionImport(props: PropsType) {
const [selectedCollection, setSelectedCollection] = React.useState<CachedCollection>();
const collectionMap = {
"etebase.vcard": [],
"etebase.vevent": [],
"etebase.vtodo": [],
};
function colClicked(colUid: string) {
const collection = props.collections.find((x) => x.collection.uid === colUid);
setSelectedCollection(collection);
}
for (const col of props.collections) {
if (collectionMap[col.metadata.type]) {
const colorBox = (col.metadata.color) ? (
<ColorBox size={24} color={col.metadata.color} />
) : undefined;
collectionMap[col.metadata.type].push((
<ListItem key={col.collection.uid} rightIcon={colorBox} insetChildren
onClick={() => colClicked(col.collection.uid)}>
{col.metadata.name}
</ListItem>
));
}
}
return (
<Container>
<AppBarOverride title="Import" />
<List>
<ListItem
primaryText="Address Books"
leftIcon={<ContactsIcon />}
nestedItems={collectionMap["etebase.vcard"]}
/>
<ListItem
primaryText="Calendars"
leftIcon={<CalendarTodayIcon />}
nestedItems={collectionMap["etebase.vevent"]}
/>
<ListItem
primaryText="Tasks"
leftIcon={<FormatListBulletedIcon />}
nestedItems={collectionMap["etebase.vtodo"]}
/>
</List>
{selectedCollection && (
<ImportDialog
key={(!selectedCollection).toString()}
collection={selectedCollection}
open
onClose={() => setSelectedCollection(undefined)}
/>
)}
</Container>
);
}

@ -13,6 +13,7 @@ import LoadingIndicator from "../widgets/LoadingIndicator";
import { CachedCollection, getDecryptCollectionsFunction, PimFab } from "../Pim/helpers"; import { CachedCollection, getDecryptCollectionsFunction, PimFab } from "../Pim/helpers";
import CollectionList from "./CollectionList"; import CollectionList from "./CollectionList";
import CollectionImport from "./CollectionImport";
import PageNotFound from "../PageNotFound"; import PageNotFound from "../PageNotFound";
import CollectionEdit from "./CollectionEdit"; import CollectionEdit from "./CollectionEdit";
import Collection from "./Collection"; import Collection from "./Collection";
@ -64,7 +65,9 @@ export default function CollectionsMain() {
path={routeResolver.getRoute("collections")} path={routeResolver.getRoute("collections")}
exact exact
> >
<CollectionList collections={cachedCollections} /> <CollectionList
collections={cachedCollections}
/>
<PimFab <PimFab
onClick={() => history.push( onClick={() => history.push(
routeResolver.getRoute("collections.new") routeResolver.getRoute("collections.new")
@ -75,7 +78,9 @@ export default function CollectionsMain() {
path={routeResolver.getRoute("collections.import")} path={routeResolver.getRoute("collections.import")}
exact exact
> >
Import <CollectionImport
collections={cachedCollections}
/>
</Route> </Route>
<Route <Route
path={routeResolver.getRoute("collections.new")} path={routeResolver.getRoute("collections.new")}

Loading…
Cancel
Save