mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-10 17:33:24 +01:00
Export work in progress.
This commit is contained in:
parent
197ce17af1
commit
f1878ed14e
@ -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"
|
||||
},
|
||||
|
@ -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,
|
||||
|
@ -18,8 +18,7 @@ export type DialogProps = {
|
||||
|
||||
const BaseDialog = (props: DialogProps) => {
|
||||
const intl = useIntl();
|
||||
const handleOnClose = props.onClose;
|
||||
const onSubmit = props.onSubmit;
|
||||
const { onClose, onSubmit } = props;
|
||||
|
||||
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" />)
|
||||
}
|
||||
|
@ -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;
|
@ -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 >
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user