OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Finish dialog implementation of export settings

pull/21833/head
Jaiwanth 2021-06-26 21:53:50 +05:30
parent 92e34c7993
commit e505646f21
6 changed files with 151 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
res/css/_components.scss
View File

@ -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";

22
res/css/views/dialogs/_ExportDialog.scss Normal file
View File

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

107
src/components/views/dialogs/ExportDialog.tsx
View File

@ -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<IProps> = ({ 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<number | null>();
const [sizeLimit, setSizeLimit] = useState<number | null>(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<IProps> = ({ room, onFinished }) => {
onFinished(false);
};
const options = Object.keys(exportFormats).map(key => {
return <div key={key}>
{ exportFormats[key] }
</div>
})
const exportFormatOptions = Object.keys(exportFormats).map((format) => ({
value: format,
label: textForFormat(format),
}));
const exportTypeOptions = Object.keys(exportTypes).map((type) => {
return (
<option key={type} value={type}>
{textForType(type)}
</option>
);
});
let MessageCount = null;
if (exportType === exportTypes.LAST_N_MESSAGES) {
MessageCount = (
<Field
element="input"
value={numberOfMessages}
label={_t("Number of messages")}
onChange={(e) => {
setNumberOfMessages(parseInt(e.target.value));
}}
type="number"
/>
);
}
const sizePostFix = (<span title={_t("MB")}>{_t("MB")}</span>);
return (
<BaseDialog
title={_t("Export Chat")}
className="mx_ExportDialog"
contentId="mx_Dialog_content"
hasCancel={true}
onFinished={onFinished}
@ -55,13 +87,48 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
)}
</p>
<Dropdown
onOptionChange={(key: string) => { setFormat(key) }}
value={format}
label={_t("Export formats")}
<span className="mx_ExportDialog_subheading">{_t("Format")}</span>
<StyledRadioGroup
name="feedbackRating"
value={exportFormat}
onChange={(key) => setExportFormat(key)}
definitions={exportFormatOptions}
/>
<span className="mx_ExportDialog_subheading">{_t("Messages")}</span>
<Field
element="select"
value={exportType}
onChange={(e) => {
setExportType(e.target.value);
}}
>
{ options }
</Dropdown>
{exportTypeOptions}
</Field>
{ MessageCount }
<span className="mx_ExportDialog_subheading">
{_t("Size Limit")}
</span>
<Field
type="number"
autoComplete="off"
value={sizeLimit}
postfixComponent={sizePostFix}
onChange={(e) => setSizeLimit(e.target.value)}
/>
<StyledCheckbox
checked={includeAttachments}
onChange={(e) =>
setAttachments((e.target as HTMLInputElement).checked)
}
>
{_t("Include Attachments")}
</StyledCheckbox>
<DialogButtons
primaryButton={_t("Export")}

2
src/components/views/elements/Field.tsx
View File

@ -77,7 +77,7 @@ export interface IInputProps extends IProps, InputHTMLAttributes<HTMLInputElemen
// The element to create. Defaults to "input".
element?: "input";
// The input's value. This is a controlled component, so the value is required.
value: string;
value: string | number;
}
interface ISelectProps extends IProps, SelectHTMLAttributes<HTMLSelectElement> {

11
src/i18n/strings/en_EN.json
View File

@ -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",

43
src/utils/exportUtils/exportUtils.ts
View File

@ -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 {