Progress on export.

packages/webapp/src/components/maps-page/action-dispatcher/export-dialog/index.tsx

@@ -1,22 +1,39 @@
 import React, { useEffect } from "react";
-import { useIntl } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import { fetchMapById, SimpleDialogProps } from "..";
 import BaseDialog from "../base-dialog";
-import { FormControl, FormControlLabel, Radio, RadioGroup, Tooltip } from "@material-ui/core";
+import { FormControl, FormControlLabel, MenuItem, Radio, RadioGroup, Select, Tooltip, Typography } from "@material-ui/core";
+import { useStyles } from './style';
+import { Alert } from "@material-ui/lab";
 
+type ExportFormat = 'pdf' | 'svg' | 'jpeg' | 'png' | 'txt' | 'mm' | 'wxml';
+type ExportGroup = 'image' | 'document' | 'mindmap-tool';
 
-const ExportDialog = (props: SimpleDialogProps) => {
+type ExportDialogProps = {
+    mapId: number,
+    enableImgExport: boolean,
+    onClose: () => void,
+}
+
+const ExportDialog = (props: ExportDialogProps) => {
     const intl = useIntl();
-    const { mapId, onClose } = props;
+    const { mapId, onClose, enableImgExport } = props;
     const [submit, setSubmit] = React.useState<boolean>(false);
-    const [formExportRef, setExportFormRef] = React.useState<any>(); // @Todo: review
+    const [formExportRef, setExportFormRef] = React.useState<any>();
-    const [formTransformtRef, setTransformFormRef] = React.useState<any>(); // @Todo: review
+    const [formTransformtRef, setTransformFormRef] = React.useState<any>();
+    const [exportGroup, setExportGroup] = React.useState<ExportGroup>(enableImgExport ? 'image' : 'document');
+    const [exportFormat, setExportFormat] = React.useState<ExportFormat>(enableImgExport ? 'svg' : 'pdf');
+    const classes = useStyles();
 
-    const [exportFormat, setExportFormat] = React.useState('mm');
+
-    const handleChange = (event) => {
+    const handleOnExportFormatChange = (event) => {
         setExportFormat(event.target.value);
     };
 
+    const handleOnGroupChange = (event) => {
+        setExportGroup(event.target.value);
+    };
+
     const handleOnClose = (): void => {
         onClose();
     };
@@ -28,9 +45,10 @@ const ExportDialog = (props: SimpleDialogProps) => {
     useEffect(() => {
         if (submit) {
             // Depending on the type of export. It will require differt POST.
-            if (exportFormat == 'pdf' || exportFormat == "svg" || exportFormat == "image") {
+            if (exportFormat == 'pdf' || exportFormat == "svg" || exportFormat == "jpeg" || exportFormat == "png") {
                 formTransformtRef.submit();
             } else {
+
                 formExportRef.submit();
             }
             onClose();
@@ -46,41 +64,72 @@ const ExportDialog = (props: SimpleDialogProps) => {
                 title={intl.formatMessage({ id: "export.title", defaultMessage: "Export" })}
                 description={"Export this map in the format that you want and start using it in your presentations or sharing by email"}
                 submitButton={intl.formatMessage({ id: "export.title", defaultMessage: "Export" })} >
+
+                <Alert severity="info">
+                    <FormattedMessage id="export.warning" defaultMessage="Exporting to Image (SVG,PNG,JPEG )is available only in the editor toolbar." />
+                </Alert>
+
                 <FormControl component="fieldset" >
-                    <RadioGroup name="export" value={exportFormat} onChange={handleChange}>
+                    <RadioGroup name="export" value={exportGroup} onChange={handleOnGroupChange}>
+                        <FormControl>
+                            <FormControlLabel
+                                className={classes.label}
+                                value="image"
+                                disabled={!enableImgExport}
+                                control={<Radio color="primary" />}
+                                label={intl.formatMessage({ id: "export.image", defaultMessage: "Image: Get a graphic representation of your map including all colors and shapes." })}
+                                color="secondary"
+                                style={{ fontSize: '9px' }} />
+                            {(exportGroup == 'image') &&
+                                (<Select
+                                    onChange={handleOnExportFormatChange}
+                                    variant="outlined"
+                                    className={classes.label}>
+                                    <MenuItem value="svg" className={classes.menu}>Scalable Vector Graphics (SVG)</MenuItem>
+                                    <MenuItem value="png" className={classes.menu}>Portable Network Graphics (PNG)</MenuItem>
+                                    <MenuItem value="jpeg" className={classes.menu}>JPEG Image (JPEG)</MenuItem>
+                                </Select>)
+                            }
+                        </FormControl>
 
+                        <FormControl>
+                            <FormControlLabel
+                                className={classes.label}
+                                value="document"
+                                control={<Radio color="primary" />}
+                                label={intl.formatMessage({ id: "export.document", defaultMessage: "Document: Export your mindmap in a self-contained document ready to share" })}
+                                color="secondary" />
+                            {exportGroup == 'document' &&
+                                (<Select onChange={handleOnExportFormatChange}
+                                    variant="outlined"
+                                    className={classes.select}
+                                >
+                                    <MenuItem className={classes.select} value="pdf">Portable Document Format (PDF)</MenuItem>
+                                    <MenuItem className={classes.select} value="txt">Plain Text File (TXT)</MenuItem>
+                                    <MenuItem className={classes.select} value="xls">Microsoft Excel (XLS)</MenuItem>
+                                </Select>)
+                            }
+                        </FormControl>
 
-                        {/* SVG Based .... */}
+                        <FormControl>
-                        <Tooltip title="Image" placement="right">
+                            <FormControlLabel
-                            <FormControlLabel value="image" control={<Radio color="primary" />} label="Image" color="secondary" />
+                                className={classes.label}
-                        </Tooltip>
+                                value="mindmap-tool"
-
+                                control={<Radio color="primary" />}
-
+                                label={intl.formatMessage({ id: "export.document", defaultMessage: "Mindmap Tools: Export your mindmap in thirdparty mindmap tool formats" })}
-                        {/* Non - SVG .... */}
+                                color="secondary" />
-                        <Tooltip title="FREEMIND_EXPORT_FORMAT_09" placement="right">
+                            {exportGroup == 'mindmap-tool' &&
-                            <FormControlLabel value="mm" control={<Radio color="primary" />} label="FREEMIND_EXPORT_FORMAT_09" color="secondary" />
+                                (<Select
-                        </Tooltip>
+                                    onChange={handleOnExportFormatChange}
-
+                                    variant="outlined"
-                        <Tooltip title="MINDJET_EXPORT_FORMAT" placement="right">
+                                    className={classes.select}
-                            <FormControlLabel value="mmap" control={<Radio color="primary" />} label="MINDJET_EXPORT_FORMAT" color="secondary" />
+                                >
-                        </Tooltip>
+                                    <MenuItem className={classes.select} value="wxml">WiseMapping (WXML)</MenuItem>
-
+                                    <MenuItem className={classes.select} value="mm">Freemind 1.0.1 (MM)</MenuItem>
-                        <Tooltip title="WISEMAPPING_EXPORT_FORMAT" placement="right">
+                                    <MenuItem className={classes.select} value="mmap">MindManager (MMAP)</MenuItem>
-                            <FormControlLabel value="wxml" control={<Radio color="primary" />} label="WISEMAPPING_EXPORT_FORMAT" color="secondary" />
+                                </Select>)
-                        </Tooltip>
+                            }
-
+                        </FormControl>
-                        <Tooltip title="TXT_EXPORT_FORMAT" placement="right">
-                            <FormControlLabel value="txt" control={<Radio color="primary" />} label="TXT_EXPORT_FORMAT" color="secondary" />
-                        </Tooltip>
-
-                        <Tooltip title="XLS_EXPORT_FORMAT" placement="right">
-                            <FormControlLabel value="xls" control={<Radio color="primary" />} label="XLS_EXPORT_FORMAT" color="secondary" />
-                        </Tooltip>
-
-                        <Tooltip title="OPEN_OFFICE_EXPORT_FORMAT" placement="right">
-                            <FormControlLabel value="odt" control={<Radio color="primary" />} label="OPEN_OFFICE_EXPORT_FORMAT" color="secondary" />
-                        </Tooltip>
-
                     </RadioGroup>
                 </FormControl>
             </BaseDialog>
@@ -91,7 +140,7 @@ const ExportDialog = (props: SimpleDialogProps) => {
                 <input name="filename" type="hidden" value={map?.title} />
             </form>
 
-            <form action={`/c/restful/transform.${exportFormat}`} ref={formTransformtRef} method="POST">
+            <form action={`/c/restful/transform.${exportFormat}`} ref={setTransformFormRef} method="POST">
                 <input name="download" type="hidden" value={exportFormat} />
                 <input name="filename" type="hidden" value={map?.title} />
                 <input name="svgXml" id="svgXml" value="" type="hidden" />

packages/webapp/src/components/maps-page/action-dispatcher/export-dialog/style.ts

@@ -0,0 +1,20 @@
+import { createStyles, makeStyles, Theme } from "@material-ui/core";
+
+export const useStyles = makeStyles((theme: Theme) =>
+    createStyles({
+        select: {
+            height: '40px',
+            borderRadius: '9px',
+            width: '300px',
+            fontSize: '14px',
+            // margin: '0px 30px' 
+        },
+        menu: {
+            fontSize: '14px'
+        },
+        label: {
+            margin: '5px 0px'
+        }
+
+    })
+);

packages/webapp/src/components/maps-page/action-dispatcher/index.tsx

@@ -57,7 +57,7 @@ const ActionDispatcher = (props: ActionDialogProps) => {
       {action === 'publish' && <PublishDialog onClose={handleOnClose} mapId={mapsId[0]} />}
       {action === 'info' && <InfoDialog onClose={handleOnClose} mapId={mapsId[0]} />}
       {action === 'create' && <CreateDialog onClose={handleOnClose} />}
-      {action === 'export' && <ExportDialog onClose={handleOnClose} mapId={mapsId[0]}/>}
+      {action === 'export' && <ExportDialog onClose={handleOnClose} mapId={mapsId[0]} enableImgExport={false}/>}
     </span >
   );
 }