From e505646f2189965772e4f8c6b5fb7d3da7a87a66 Mon Sep 17 00:00:00 2001 From: Jaiwanth Date: Sat, 26 Jun 2021 21:53:50 +0530 Subject: [PATCH] Finish dialog implementation of export settings --- res/css/_components.scss | 1 + res/css/views/dialogs/_ExportDialog.scss | 22 ++++ src/components/views/dialogs/ExportDialog.tsx | 107 ++++++++++++++---- src/components/views/elements/Field.tsx | 2 +- src/i18n/strings/en_EN.json | 11 ++ src/utils/exportUtils/exportUtils.ts | 43 ++++--- 6 files changed, 151 insertions(+), 35 deletions(-) create mode 100644 res/css/views/dialogs/_ExportDialog.scss diff --git a/res/css/_components.scss b/res/css/_components.scss index ec3af8655e..c0fade8e5e 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -75,6 +75,7 @@ @import "./views/dialogs/_DeactivateAccountDialog.scss"; @import "./views/dialogs/_DevtoolsDialog.scss"; @import "./views/dialogs/_EditCommunityPrototypeDialog.scss"; +@import "./views/dialogs/_ExportDialog.scss"; @import "./views/dialogs/_FeedbackDialog.scss"; @import "./views/dialogs/_ForwardDialog.scss"; @import "./views/dialogs/_GroupAddressPicker.scss"; diff --git a/res/css/views/dialogs/_ExportDialog.scss b/res/css/views/dialogs/_ExportDialog.scss new file mode 100644 index 0000000000..69b76221bb --- /dev/null +++ b/res/css/views/dialogs/_ExportDialog.scss @@ -0,0 +1,22 @@ +.mx_ExportDialog_subheading { + font-size: $font-16px; + display: block; + font-family: $font-family; + font-weight: 600; + color: $primary-fg-color; + margin-top: 18px; + margin-bottom: 12px; +} + +.mx_ExportDialog .mx_RadioButton > .mx_RadioButton_content { + margin-top: 5px; + margin-bottom: 5px; +} + +.mx_ExportDialog .mx_Field { + width: 256px; +} + +.mx_ExportDialog .mx_Field_postfix { + padding: 9px 10px; +} diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx index 7aba38c5c0..8cefffaa9f 100644 --- a/src/components/views/dialogs/ExportDialog.tsx +++ b/src/components/views/dialogs/ExportDialog.tsx @@ -4,10 +4,14 @@ import { _t } from "../../../languageHandler"; import { IDialogProps } from "./IDialogProps"; import BaseDialog from "./BaseDialog"; import DialogButtons from "../elements/DialogButtons"; -import Dropdown from "../elements/Dropdown"; +import Field from "../elements/Field"; +import StyledRadioGroup from "../elements/StyledRadioGroup"; +import StyledCheckbox from "../elements/StyledCheckbox"; import exportConversationalHistory, { exportFormats, exportTypes, + textForFormat, + textForType, } from "../../../utils/exportUtils/exportUtils"; interface IProps extends IDialogProps { @@ -15,18 +19,21 @@ interface IProps extends IDialogProps { } const ExportDialog: React.FC = ({ room, onFinished }) => { - const [format, setFormat] = useState("HTML"); + const [exportFormat, setExportFormat] = useState("HTML"); + const [exportType, setExportType] = useState("TIMELINE"); + const [includeAttachments, setAttachments] = useState(false); + const [numberOfMessages, setNumberOfMessages] = useState(); + const [sizeLimit, setSizeLimit] = useState(8); + const onExportClick = async () => { await exportConversationalHistory( room, - exportFormats.PLAIN_TEXT, - exportTypes.START_DATE, + exportFormats[exportFormat], + exportTypes[exportType], { - startDate: parseInt( - new Date("2021.05.20").getTime().toFixed(0), - ), - attachmentsIncluded: true, - maxSize: 7 * 1024 * 1024, // 7 MB + numberOfMessages, + attachmentsIncluded: includeAttachments, + maxSize: sizeLimit * 1024 * 1024, }, ); }; @@ -35,15 +42,40 @@ const ExportDialog: React.FC = ({ room, onFinished }) => { onFinished(false); }; - const options = Object.keys(exportFormats).map(key => { - return
- { exportFormats[key] } -
- }) + const exportFormatOptions = Object.keys(exportFormats).map((format) => ({ + value: format, + label: textForFormat(format), + })); + + const exportTypeOptions = Object.keys(exportTypes).map((type) => { + return ( + + ); + }); + + let MessageCount = null; + if (exportType === exportTypes.LAST_N_MESSAGES) { + MessageCount = ( + { + setNumberOfMessages(parseInt(e.target.value)); + }} + type="number" + /> + ); + } + + const sizePostFix = ({_t("MB")}); return ( = ({ room, onFinished }) => { )}

- { setFormat(key) }} - value={format} - label={_t("Export formats")} + {_t("Format")} + + setExportFormat(key)} + definitions={exportFormatOptions} + /> + + {_t("Messages")} + + { + setExportType(e.target.value); + }} > - { options } - + {exportTypeOptions} + + { MessageCount } + + + {_t("Size Limit")} + + + setSizeLimit(e.target.value)} + /> + + + setAttachments((e.target as HTMLInputElement).checked) + } + > + {_t("Include Attachments")} + { diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 9ab4a77c9f..cb28f2b07b 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -735,6 +735,12 @@ "Invite to %(spaceName)s": "Invite to %(spaceName)s", "Share your public space": "Share your public space", "Unknown App": "Unknown App", + "HTML": "HTML", + "JSON": "JSON", + "Plain Text": "Plain Text", + "From the beginning": "From the beginning", + "For a number of messages": "For a number of messages", + "Current Timeline": "Current Timeline", "Media omitted": "Media omitted", "Media omitted - file size limit exceeded": "Media omitted - file size limit exceeded", "%(creatorName)s created this room.": "%(creatorName)s created this room.", @@ -2249,8 +2255,13 @@ "There was an error updating your community. The server is unable to process your request.": "There was an error updating your community. The server is unable to process your request.", "Update community": "Update community", "An error has occurred.": "An error has occurred.", + "Number of messages": "Number of messages", + "MB": "MB", "Export Chat": "Export Chat", "Select from the options below to export chats from your timeline": "Select from the options below to export chats from your timeline", + "Format": "Format", + "Size Limit": "Size Limit", + "Include Attachments": "Include Attachments", "Export": "Export", "Feedback sent": "Feedback sent", "Rate %(brand)s": "Rate %(brand)s", diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts index 7a1d4a9f11..37d0bbc524 100644 --- a/src/utils/exportUtils/exportUtils.ts +++ b/src/utils/exportUtils/exportUtils.ts @@ -4,26 +4,41 @@ import HTMLExporter from "./HtmlExport"; import JSONExporter from "./JSONExport"; import PlainTextExporter from "./PlainTextExport"; -_t("HTML"); -_t("JSON"); -_t("Plain Text"); - export enum exportFormats { HTML = "HTML", JSON = "JSON", - PLAIN_TEXT = "Plain Text", + PLAIN_TEXT = "PLAIN_TEXT", } -_t("Current Timeline"); -_t("From the beginning") -_t("From a specific date") -_t("Last n messages"); - export enum exportTypes { - TIMELINE = "Current Timeline", - BEGINNING = "From the beginning", - START_DATE = "From a specific date", - LAST_N_MESSAGES = "Last n messages", + TIMELINE = "TIMELINE", + BEGINNING = "BEGINNING", + // START_DATE = "START_DATE", + LAST_N_MESSAGES = "LAST_N_MESSAGES", +} + +export const textForFormat = (format: string) => { + switch (format) { + case exportFormats.HTML: + return _t("HTML"); + case exportFormats.JSON: + return _t("JSON"); + case exportFormats.PLAIN_TEXT: + return _t("Plain Text"); + } +} + +export const textForType = (type: string) => { + switch (type) { + case exportTypes.BEGINNING: + return _t("From the beginning"); + case exportTypes.LAST_N_MESSAGES: + return _t("For a number of messages"); + case exportTypes.TIMELINE: + return _t("Current Timeline"); + // case exportTypes.START_DATE: + // return _t("From a specific date"); + } } export interface exportOptions {