85 lines
2.3 KiB
TypeScript
85 lines
2.3 KiB
TypeScript
import { observer } from "mobx-react";
|
||
import { NewDocumentIcon } from "outline-icons";
|
||
import * as React from "react";
|
||
import { Trans, useTranslation } from "react-i18next";
|
||
import { Link } from "react-router-dom";
|
||
import styled from "styled-components";
|
||
import Collection from "~/models/Collection";
|
||
import CollectionPermissions from "~/scenes/CollectionPermissions";
|
||
import Button from "~/components/Button";
|
||
import Flex from "~/components/Flex";
|
||
import Modal from "~/components/Modal";
|
||
import Text from "~/components/Text";
|
||
import useBoolean from "~/hooks/useBoolean";
|
||
import usePolicy from "~/hooks/usePolicy";
|
||
import { newDocumentPath } from "~/utils/routeHelpers";
|
||
|
||
type Props = {
|
||
collection: Collection;
|
||
};
|
||
|
||
function EmptyCollection({ collection }: Props) {
|
||
const { t } = useTranslation();
|
||
const can = usePolicy(collection);
|
||
const collectionName = collection ? collection.name : "";
|
||
|
||
const [
|
||
permissionsModalOpen,
|
||
handlePermissionsModalOpen,
|
||
handlePermissionsModalClose,
|
||
] = useBoolean();
|
||
|
||
return (
|
||
<Centered column>
|
||
<Text type="secondary">
|
||
<Trans
|
||
defaults="<em>{{ collectionName }}</em> doesn’t contain any
|
||
documents yet."
|
||
values={{
|
||
collectionName,
|
||
}}
|
||
components={{
|
||
em: <strong />,
|
||
}}
|
||
/>
|
||
<br />
|
||
{can.update && <Trans>Get started by creating a new one!</Trans>}
|
||
</Text>
|
||
{can.update && (
|
||
<Empty>
|
||
<Link to={newDocumentPath(collection.id)}>
|
||
<Button icon={<NewDocumentIcon color="currentColor" />}>
|
||
{t("Create a document")}
|
||
</Button>
|
||
</Link>
|
||
|
||
<Button onClick={handlePermissionsModalOpen} neutral>
|
||
{t("Manage permissions")}…
|
||
</Button>
|
||
</Empty>
|
||
)}
|
||
<Modal
|
||
title={t("Collection permissions")}
|
||
onRequestClose={handlePermissionsModalClose}
|
||
isOpen={permissionsModalOpen}
|
||
>
|
||
<CollectionPermissions collection={collection} />
|
||
</Modal>
|
||
</Centered>
|
||
);
|
||
}
|
||
|
||
const Centered = styled(Flex)`
|
||
text-align: center;
|
||
margin: 40vh auto 0;
|
||
max-width: 380px;
|
||
transform: translateY(-50%);
|
||
`;
|
||
|
||
const Empty = styled(Flex)`
|
||
justify-content: center;
|
||
margin: 10px 0;
|
||
`;
|
||
|
||
export default observer(EmptyCollection);
|