Collections: add a component that views the collection.

master
Tom Hacohen 4 years ago
parent d5a582e842
commit 9cf37a0fb4

@ -0,0 +1,102 @@
// SPDX-FileCopyrightText: © 2017 EteSync Authors
// SPDX-License-Identifier: AGPL-3.0-only
import * as React from "react";
import IconButton from "@material-ui/core/IconButton";
import IconEdit from "@material-ui/icons/Edit";
import IconMembers from "@material-ui/icons/People";
import IconImport from "@material-ui/icons/ImportExport";
import AppBarOverride from "../widgets/AppBarOverride";
import Container from "../widgets/Container";
/* FIXME:
import CollectionEntries from "../components/CollectionEntries";
import ImportDialog from "./ImportDialog";
*/
import { Link } from "react-router-dom";
import { routeResolver } from "../App";
import { CachedCollection } from "../Pim/helpers";
interface PropsType {
collection: CachedCollection;
}
class Collection extends React.Component<PropsType> {
public state: {
tab: number;
importDialogOpen: boolean;
};
constructor(props: PropsType) {
super(props);
this.importDialogToggle = this.importDialogToggle.bind(this);
this.state = {
tab: 0,
importDialogOpen: false,
};
}
public render() {
const { collection, metadata } = this.props.collection;
const isAdmin = true; // FIXME
return (
<React.Fragment>
<AppBarOverride title={metadata.name}>
{isAdmin &&
<>
<IconButton
component={Link}
title="Edit"
{...{ to: routeResolver.getRoute("collections._id.edit", { colUid: collection.uid }) }}
>
<IconEdit />
</IconButton>
<IconButton
component={Link}
title="Members"
{...{ to: routeResolver.getRoute("collections._id.members", { colUid: collection.uid }) }}
>
<IconMembers />
</IconButton>
</>
}
<IconButton
title="Import"
onClick={this.importDialogToggle}
>
<IconImport />
</IconButton>
</AppBarOverride>
<Container>
Change entries: TBD
</Container>
{/*
<Container>
<CollectionEntries collection={collection} entries={syncEntries} />
</Container>
<ImportDialog
etesync={this.props.etesync}
userInfo={this.props.userInfo}
syncCollection={this.props.syncCollection}
open={this.state.importDialogOpen}
onClose={this.importDialogToggle}
/>
*/}
</React.Fragment>
);
}
private importDialogToggle() {
this.setState((state: any) => ({ importDialogOpen: !state.importDialogOpen }));
}
}
export default Collection;

@ -15,6 +15,7 @@ import { CachedCollection, getDecryptCollectionsFunction, PimFab } from "../Pim/
import CollectionList from "./CollectionList"; import CollectionList from "./CollectionList";
import PageNotFound from "../PageNotFound"; import PageNotFound from "../PageNotFound";
import CollectionEdit from "./CollectionEdit"; import CollectionEdit from "./CollectionEdit";
import Collection from "./Collection";
const decryptCollections = getDecryptCollectionsFunction(); const decryptCollections = getDecryptCollectionsFunction();
@ -118,7 +119,7 @@ export default function CollectionsMain() {
path={routeResolver.getRoute("collections._id")} path={routeResolver.getRoute("collections._id")}
exact exact
> >
Journal view <Collection collection={collection} />
</Route> </Route>
</Switch> </Switch>
); );

Loading…
Cancel
Save