feat: Bulk HTML export for collection

2022-12-30 20:13:29 -05:00
parent 1328162921
commit 7a1e6a1b73
10 changed files with 74 additions and 101 deletions
--- a/app/components/ExportDialog.tsx
+++ b/app/components/ExportDialog.tsx
@@ -0,0 +1,142 @@
+import { observer } from "mobx-react";
+import { CodeIcon } from "outline-icons";
+import * as React from "react";
+import { Trans, useTranslation } from "react-i18next";
+import styled from "styled-components";
+import { FileOperationFormat } from "@shared/types";
+import Collection from "~/models/Collection";
+import ConfirmationDialog from "~/components/ConfirmationDialog";
+import Flex from "~/components/Flex";
+import MarkdownIcon from "~/components/Icons/Markdown";
+import Text from "~/components/Text";
+import useStores from "~/hooks/useStores";
+import useToasts from "~/hooks/useToasts";
+
+type Props = {
+  collection?: Collection;
+  onSubmit: () => void;
+};
+
+function ExportDialog({ collection, onSubmit }: Props) {
+  const [format, setFormat] = React.useState<FileOperationFormat>(
+    FileOperationFormat.MarkdownZip
+  );
+  const { showToast } = useToasts();
+  const { collections, notificationSettings } = useStores();
+  const { t } = useTranslation();
+
+  React.useEffect(() => {
+    notificationSettings.fetchPage({});
+  }, [notificationSettings]);
+
+  const handleFormatChange = React.useCallback(
+    (ev: React.ChangeEvent<HTMLInputElement>) => {
+      setFormat(ev.target.value as FileOperationFormat);
+    },
+    []
+  );
+
+  const handleSubmit = async () => {
+    if (collection) {
+      await collection.export(format);
+    } else {
+      await collections.export(format);
+    }
+    onSubmit();
+    showToast(t("Export started"), { type: "success" });
+  };
+
+  return (
+    <ConfirmationDialog onSubmit={handleSubmit} submitText={t("Export")}>
+      {collection && (
+        <Text>
+          <Trans
+            defaults="Exporting the collection <em>{{collectionName}}</em> may take some time."
+            values={{
+              collectionName: collection.name,
+            }}
+            components={{
+              em: <strong />,
+            }}
+          />{" "}
+          {notificationSettings.getByEvent("emails.export_completed") &&
+            t("You will receive an email when it's complete.")}
+        </Text>
+      )}
+      <Flex gap={12} column>
+        <Option>
+          <Input
+            type="radio"
+            name="format"
+            value={FileOperationFormat.MarkdownZip}
+            checked={format === FileOperationFormat.MarkdownZip}
+            onChange={handleFormatChange}
+          />
+          <Format>
+            <MarkdownIcon size={32} color="currentColor" />
+            Markdown
+          </Format>
+          <Text size="small">
+            <Trans>
+              A ZIP file containing the images, and documents in the Markdown
+              format.
+            </Trans>
+          </Text>
+        </Option>
+        <Option>
+          <Input
+            type="radio"
+            name="format"
+            value={FileOperationFormat.HTMLZip}
+            checked={format === FileOperationFormat.HTMLZip}
+            onChange={handleFormatChange}
+          />
+          <Format>
+            <CodeIcon size={32} color="currentColor" />
+            HTML
+          </Format>
+          <Text size="small">
+            <Trans>
+              A ZIP file containing the images, and documents as HTML files.
+            </Trans>
+          </Text>
+        </Option>
+      </Flex>
+    </ConfirmationDialog>
+  );
+}
+
+const Format = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-shrink: 0;
+  background: ${(props) => props.theme.secondaryBackground};
+  border-radius: 6px;
+  width: 25%;
+  font-weight: 500;
+  font-size: 14px;
+  text-align: center;
+  padding: 10px 8px;
+  cursor: var(--pointer);
+`;
+
+const Option = styled.label`
+  display: flex;
+  align-items: center;
+  gap: 16px;
+
+  p {
+    margin: 0;
+  }
+`;
+
+const Input = styled.input`
+  display: none;
+
+  &:checked + ${Format} {
+    box-shadow: inset 0 0 0 2px ${(props) => props.theme.inputBorderFocused};
+  }
+`;
+
+export default observer(ExportDialog);