Export work in progress.

packages/webapp/lang/en.json

@@ -86,6 +86,9 @@
   "expired.title": {
     "defaultMessage": "Your session has expired"
   },
+  "export.title": {
+    "defaultMessage": "Export"
+  },
   "footer.aboutus": {
     "defaultMessage": "About Us"
   },
@@ -231,12 +234,18 @@
   "map.name": {
     "defaultMessage": "Name"
   },
+  "maps.choose-file": {
+    "defaultMessage": "Choose a file"
+  },
   "maps.create-tooltip": {
     "defaultMessage": "Create a New Map"
   },
   "maps.empty-result": {
     "defaultMessage": "No matching record found with the current filter criteria."
   },
+  "maps.import-desc": {
+    "defaultMessage": "Import from other tools"
+  },
   "maps.modified": {
     "defaultMessage": "Modified"
   },

packages/webapp/src/compiled-lang/en.json

@@ -173,6 +173,12 @@
       "value": "Your session has expired"
     }
   ],
+  "export.title": [
+    {
+      "type": 0,
+      "value": "Export"
+    }
+  ],
   "footer.aboutus": [
     {
       "type": 0,
@@ -461,6 +467,12 @@
       "value": "Name"
     }
   ],
+  "maps.choose-file": [
+    {
+      "type": 0,
+      "value": "Choose a file"
+    }
+  ],
   "maps.create-tooltip": [
     {
       "type": 0,
@@ -473,6 +485,12 @@
       "value": "No matching record found with the current filter criteria."
     }
   ],
+  "maps.import-desc": [
+    {
+      "type": 0,
+      "value": "Import from other tools"
+    }
+  ],
   "maps.modified": [
     {
       "type": 0,

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

@@ -18,8 +18,7 @@ export type DialogProps = {
 
 const BaseDialog = (props: DialogProps) => {
     const intl = useIntl();
-    const handleOnClose = props.onClose;
+    const { onClose, onSubmit } = props;
-    const onSubmit = props.onSubmit;
 
     const handleOnSubmit = (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
@@ -34,7 +33,7 @@ const BaseDialog = (props: DialogProps) => {
         <div>
             <StyledDialog
                 open={true}
-                onClose={handleOnClose}
+                onClose={onClose}
                 maxWidth="sm"
                 fullWidth={true}>
                 <form autoComplete="off" onSubmit={handleOnSubmit}>
@@ -53,7 +52,7 @@ const BaseDialog = (props: DialogProps) => {
                             type="button"
                             color="primary"
                             size="medium"
-                            onClick={handleOnClose} >
+                            onClick={onClose} >
                             {onSubmit ? (<FormattedMessage id="action.cancel-button" defaultMessage="Cancel" />) :
                                 (<FormattedMessage id="action.close-button" defaultMessage="Close" />)
                             }

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

@@ -0,0 +1,104 @@
+import React, { useEffect } from "react";
+import { useIntl } from "react-intl";
+import { fetchMapById, SimpleDialogProps } from "..";
+import BaseDialog from "../base-dialog";
+import { FormControl, FormControlLabel, Radio, RadioGroup, Tooltip } from "@material-ui/core";
+
+
+const ExportDialog = (props: SimpleDialogProps) => {
+    const intl = useIntl();
+    const { mapId, onClose } = props;
+    const [submit, setSubmit] = React.useState<boolean>(false);
+    const [formExportRef, setExportFormRef] = React.useState<any>(); // @Todo: review
+    const [formTransformtRef, setTransformFormRef] = React.useState<any>(); // @Todo: review
+
+    const [exportFormat, setExportFormat] = React.useState('mm');
+    const handleChange = (event) => {
+        setExportFormat(event.target.value);
+    };
+
+    const handleOnClose = (): void => {
+        onClose();
+    };
+
+    const handleOnSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
+        setSubmit(true);
+    }
+
+    useEffect(() => {
+        if (submit) {
+            // Depending on the type of export. It will require differt POST.
+            if (exportFormat == 'pdf' || exportFormat == "svg" || exportFormat == "image") {
+                formTransformtRef.submit();
+            } else {
+                formExportRef.submit();
+            }
+            onClose();
+        }
+    }, [submit]);
+
+    const { map } = fetchMapById(mapId);
+    return (
+        <div>
+            <BaseDialog
+                onClose={handleOnClose}
+                onSubmit={handleOnSubmit}
+                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" })} >
+                <FormControl component="fieldset" >
+                    <RadioGroup name="export" value={exportFormat} onChange={handleChange}>
+
+
+                        {/* SVG Based .... */}
+                        <Tooltip title="Image" placement="right">
+                            <FormControlLabel value="image" control={<Radio color="primary" />} label="Image" color="secondary" />
+                        </Tooltip>
+
+
+                        {/* Non - SVG .... */}
+                        <Tooltip title="FREEMIND_EXPORT_FORMAT_09" placement="right">
+                            <FormControlLabel value="mm" control={<Radio color="primary" />} label="FREEMIND_EXPORT_FORMAT_09" color="secondary" />
+                        </Tooltip>
+
+                        <Tooltip title="MINDJET_EXPORT_FORMAT" placement="right">
+                            <FormControlLabel value="mmap" control={<Radio color="primary" />} label="MINDJET_EXPORT_FORMAT" color="secondary" />
+                        </Tooltip>
+
+                        <Tooltip title="WISEMAPPING_EXPORT_FORMAT" placement="right">
+                            <FormControlLabel value="wxml" control={<Radio color="primary" />} label="WISEMAPPING_EXPORT_FORMAT" color="secondary" />
+                        </Tooltip>
+
+                        <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>
+
+            {/* Hidden form for the purpose of summit */}
+            <form action={`/c/restful/maps/${mapId}.${exportFormat}`} ref={setExportFormRef} method="GET">
+                <input name="download" type="hidden" value={exportFormat} />
+                <input name="filename" type="hidden" value={map?.title} />
+            </form>
+
+            <form action={`/c/restful/transform.${exportFormat}`} ref={formTransformtRef} 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" />
+            </form>
+        </div>
+    );
+}
+
+
+export default ExportDialog;

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

@@ -14,6 +14,7 @@ import ImportDialog from './import-dialog';
 import PublishDialog from './publish-dialog';
 import InfoDialog from './info-dialog';
 import DeleteMultiselectDialog from './delete-multiselect-dialog';
+import ExportDialog from './export-dialog';
 
 export type BasicMapInfo = {
   name: string;
@@ -56,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]}/>}
     </span >
   );
 }