Feature/open chart as map [DHIS2-5987]

packages/app/i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2019-01-21T11:22:11.007Z\n"
-"PO-Revision-Date: 2019-01-21T11:22:11.007Z\n"
+"POT-Creation-Date: 2019-02-06T12:52:28.419Z\n"
+"PO-Revision-Date: 2019-02-06T12:52:28.419Z\n"
 
 msgid "Rename successful"
 msgstr ""
@@ -44,10 +44,10 @@ msgstr ""
 msgid "Select All"
 msgstr ""
 
-msgid "Remove"
+msgid "Search dimensions"
 msgstr ""
 
-msgid "Search dimensions"
+msgid "Remove"
 msgstr ""
 
 msgid "Dimension recommended with selected data"
@@ -122,6 +122,12 @@ msgstr ""
 msgid "None selected"
 msgstr ""
 
+msgid "Map"
+msgstr ""
+
+msgid "Open chart as map"
+msgstr ""
+
 msgid "Unsaved chart"
 msgstr ""
 

packages/app/src/api/analytics.js

@@ -1,8 +1,11 @@
 import { getInstance } from 'd2';
 import { FIXED_DIMENSIONS } from '../modules/fixedDimensions';
+import * as userDataStore from './userDataStore';
 
 const peId = FIXED_DIMENSIONS.pe.id;
 
+export const CURRENT_AO_KEY = 'currentAnalyticalObject';
+
 export const apiDownloadImage = async (type, formData) => {
     const d2 = await getInstance();
     const api = d2.Api.getApi();
@@ -100,3 +103,9 @@ export const apiFetchAnalyticsForYearOverYear = async (current, options) => {
         yearlySeriesLabels,
     }));
 };
+
+export const apiSaveAOInUserDataStore = (current, key = CURRENT_AO_KEY) =>
+    userDataStore.apiCreate(current, key);
+
+export const apiFetchAOFromUserDataStore = (key = CURRENT_AO_KEY) =>
+    userDataStore.apiFetch(key);

packages/app/src/api/userDataStore.js

@@ -0,0 +1,36 @@
+import { getInstance } from 'd2';
+import { onError } from './index';
+
+export const NAMESPACE = 'analytics';
+
+export const hasNamespace = async d2 =>
+    await d2.currentUser.dataStore.has(NAMESPACE);
+
+export const getNamespace = async (d2, hasNamespace) =>
+    hasNamespace
+        ? await d2.currentUser.dataStore.get(NAMESPACE)
+        : await d2.currentUser.dataStore.create(NAMESPACE);
+
+export const apiCreate = async (data, key, namespace) => {
+    try {
+        const d2 = await getInstance();
+        const ns =
+            namespace || (await getNamespace(d2, await hasNamespace(d2)));
+
+        return ns.set(key, data);
+    } catch (error) {
+        return onError(error);
+    }
+};
+
+export const apiFetch = async (key, namespace) => {
+    try {
+        const d2 = await getInstance();
+        const ns =
+            namespace || (await getNamespace(d2, await hasNamespace(d2)));
+
+        return ns.get(key);
+    } catch (error) {
+        return onError(error);
+    }
+};

packages/app/src/components/MapMenu/MapMenu.js

@@ -0,0 +1,87 @@
+import React, { Component, Fragment } from 'react';
+import Button from '@material-ui/core/Button';
+import Menu from '@material-ui/core/Menu';
+import i18n from '@dhis2/d2-i18n';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import { sGetCurrent } from '../../reducers/current';
+import { apiSaveAOInUserDataStore } from '../../api/analytics';
+
+export const MAPS_APP_URL = 'dhis-web-maps';
+
+export const defaultState = {
+    anchorEl: null,
+};
+
+export class MapMenu extends Component {
+    constructor(props, context) {
+        super(props);
+
+        this.state = defaultState;
+        this.d2 = context.d2;
+        this.baseUrl = context.baseUrl;
+    }
+
+    toggleMenu = target => this.setState({ anchorEl: target || null });
+
+    onOpenChartAsMapClick = async () => {
+        await apiSaveAOInUserDataStore(this.props.current);
+
+        window.location.href = `${
+            this.baseUrl
+        }/${MAPS_APP_URL}?currentAnalyticalObject=true`;
+    };
+
+    render() {
+        return (
+            <Fragment>
+                <Button
+                    className={this.props.className}
+                    onClick={event => this.toggleMenu(event.currentTarget)}
+                    disableFocusRipple
+                    disableRipple
+                >
+                    {i18n.t('Map')}
+                </Button>
+                <Menu
+                    open={Boolean(this.state.anchorEl)}
+                    anchorEl={this.state.anchorEl}
+                    onClose={() => this.toggleMenu()}
+                    anchorOrigin={{
+                        vertical: 'bottom',
+                        horizontal: 'left',
+                    }}
+                    getContentAnchorEl={null}
+                    disableAutoFocusItem
+                >
+                    <Button
+                        disabled={!this.props.current}
+                        onClick={this.onOpenChartAsMapClick}
+                        className={this.props.className}
+                    >
+                        {i18n.t('Open chart as map')}
+                    </Button>
+                </Menu>
+            </Fragment>
+        );
+    }
+}
+
+MapMenu.propTypes = {
+    className: PropTypes.string,
+};
+
+MapMenu.contextTypes = {
+    d2: PropTypes.object,
+    baseUrl: PropTypes.string,
+};
+
+const mapStateToProps = state => ({
+    current: sGetCurrent(state),
+});
+
+export default connect(
+    mapStateToProps,
+    {}
+)(MapMenu);

packages/app/src/components/MenuBar/MenuBar.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import FileMenu from '@dhis2/d2-ui-file-menu';
+import MapMenu from '../MapMenu/MapMenu';
 import { withStyles } from '@material-ui/core/styles';
 
 import UpdateButton from '../UpdateButton/UpdateButton';
@@ -49,6 +50,7 @@ export const MenuBar = ({ classes, ...props }, context) => (
         <VisualizationOptionsManager className={classes.label} />
         <DownloadMenu className={classes.label} />
         <div className={classes.grow} />
+        <MapMenu className={classes.label} />
         <InterpretationsButton className={classes.label} />
     </div>
 );