Collections: add collection list import page.

src/Collections/CollectionImport.tsx

@@ -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>
+  );
+}

src/Collections/Main.tsx

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