fix: download menu options for PT (#624)

Also added missing optional parameters controlled by
options/interpretations.

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: 2020-02-02T13:49:38.927Z\n"
-"PO-Revision-Date: 2020-02-02T13:49:38.927Z\n"
+"POT-Creation-Date: 2020-02-05T10:48:05.798Z\n"
+"PO-Revision-Date: 2020-02-05T10:48:05.798Z\n"
 
 msgid "Rename successful"
 msgstr ""
@@ -47,9 +47,6 @@ msgstr ""
 msgid "Filter dimensions"
 msgstr ""
 
-msgid "Download"
-msgstr ""
-
 msgid "Graphics"
 msgstr ""
 
@@ -59,6 +56,21 @@ msgstr ""
 msgid "PDF (.pdf)"
 msgstr ""
 
+msgid "Table"
+msgstr ""
+
+msgid "Excel (.xls)"
+msgstr ""
+
+msgid "CSV (.csv)"
+msgstr ""
+
+msgid "HTML (.html)"
+msgstr ""
+
+msgid "Download"
+msgstr ""
+
 msgid "Plain data source"
 msgstr ""
 
@@ -182,9 +194,6 @@ msgstr ""
 msgid "Title"
 msgstr ""
 
-msgid "Base line title"
-msgstr ""
-
 msgid "Value"
 msgstr ""
 
@@ -418,9 +427,6 @@ msgstr ""
 msgid "Target line"
 msgstr ""
 
-msgid "Target line title"
-msgstr ""
-
 msgid "Top limit"
 msgstr ""
 
@@ -648,9 +654,6 @@ msgstr ""
 msgid "Horizontal (x) axis"
 msgstr ""
 
-msgid "Colors & Legends"
-msgstr ""
-
 msgid "Chart style"
 msgstr ""
 

packages/app/src/api/analytics.js

@@ -16,13 +16,84 @@ export const apiDownloadImage = async (type, formData) => {
         .then(res => res.blob())
 }
 
-export const apiDownloadData = async ({ current, format, idScheme, path }) => {
+const addCommonParameters = (req, current, options) => {
+    req = req
+        .withSkipRounding(current.skipRounding)
+        .withAggregationType(current.aggregationType)
+    //        .withUserOrgUnit(?) TODO
+
+    if (current.displayProperty) {
+        req = req.withDisplayProperty(current.displayProperty)
+    }
+
+    if (options.relativePeriodDate) {
+        req = req.withRelativePeriodDate(options.relativePeriodDate)
+    }
+
+    return req
+}
+
+export const apiDownloadTable = async ({
+    current,
+    format,
+    options,
+    rows,
+    columns,
+}) => {
+    const d2 = await getInstance()
+    const api = d2.Api.getApi()
+
+    let req = new d2.analytics.request()
+        .fromModel(current)
+        .withFormat(format)
+        .withTableLayout()
+        .withRows(rows.join(';'))
+        .withColumns(columns.join(';'))
+
+    req = addCommonParameters(req, current, options)
+
+    if (current.hideEmptyColumns) {
+        req = req.withHideEmptyColumns()
+    }
+
+    if (current.hideEmptyRows) {
+        req = req.withHideEmptyRows()
+    }
+
+    if (current.showHierarchy) {
+        req = req.withShowHierarchy()
+    }
+
+    const url = new URL(
+        `${api.baseUrl}/${req.buildUrl()}`,
+        `${window.location.origin}${window.location.pathname}`
+    )
+
+    Object.entries(req.buildQuery()).forEach(([key, value]) =>
+        url.searchParams.append(key, value)
+    )
+
+    return url
+}
+
+export const apiDownloadData = async ({
+    current,
+    format,
+    options,
+    idScheme,
+    path,
+}) => {
     const d2 = await getInstance()
     const api = d2.Api.getApi()
 
     let req = new d2.analytics.request()
         .fromModel(current, path === 'dataValueSet')
         .withFormat(format)
+        .withHierarchyMeta(current.showHierarchy)
+        .withMeasureCriteria(current.measureCriteria)
+    //.withApprovalLevel(current.?) TODO
+
+    req = addCommonParameters(req, current, options)
 
     if (path) {
         req = req.withPath(path)

packages/app/src/components/DownloadMenu/DownloadMenu.js

@@ -1,6 +1,8 @@
 import React, { Component, Fragment } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
+import { createSelector } from 'reselect'
+
 import Button from '@material-ui/core/Button'
 import Divider from '@material-ui/core/Divider'
 import Menu from '@material-ui/core/Menu'
@@ -16,11 +18,22 @@ import MoreHorizIcon from '@material-ui/icons/MoreHoriz'
 
 import i18n from '@dhis2/d2-i18n'
 
+import { VIS_TYPE_PIVOT_TABLE } from '@dhis2/analytics'
+
 import { styles } from './styles/DownloadMenu.style'
 
+import {
+    sGetUiType,
+    sGetUiLayout,
+    sGetUiInterpretation,
+} from '../../reducers/ui'
 import { sGetCurrent } from '../../reducers/current'
 import { sGetChart } from '../../reducers/chart'
-import { apiDownloadImage, apiDownloadData } from '../../api/analytics'
+import {
+    apiDownloadImage,
+    apiDownloadData,
+    apiDownloadTable,
+} from '../../api/analytics'
 
 export class DownloadMenu extends Component {
     constructor(props) {
@@ -72,9 +85,15 @@ export class DownloadMenu extends Component {
     }
 
     downloadData = (format, idScheme, path) => async () => {
-        const { current } = this.props
+        const { current, relativePeriodDate } = this.props
 
-        const url = await apiDownloadData({ current, format, idScheme, path })
+        const url = await apiDownloadData({
+            current,
+            format,
+            options: { relativePeriodDate },
+            idScheme,
+            path,
+        })
 
         if (idScheme) {
             this.toggleSubmenu('scheme')
@@ -87,6 +106,62 @@ export class DownloadMenu extends Component {
         window.open(url, format.match(/(xls|csv)/) ? '_top' : '_blank')
     }
 
+    downloadTable = format => async () => {
+        const { current, rows, columns, relativePeriodDate } = this.props
+
+        const url = await apiDownloadTable({
+            current,
+            format,
+            options: { relativePeriodDate },
+            rows,
+            columns,
+        })
+
+        window.open(url, format === 'html' ? '_blank' : '_top')
+    }
+
+    graphicsMenuSection = () => (
+        <div>
+            <ListSubheader component="div">{i18n.t('Graphics')}</ListSubheader>
+            <MenuItem onClick={this.downloadImage('png')}>
+                <ListItemIcon>
+                    <ImageIcon />
+                </ListItemIcon>
+                <ListItemText>{i18n.t('Image (.png)')}</ListItemText>
+            </MenuItem>
+            <MenuItem onClick={this.downloadImage('pdf')}>
+                <ListItemIcon>
+                    <PictureAsPdfIcon />
+                </ListItemIcon>
+                <ListItemText>{i18n.t('PDF (.pdf)')}</ListItemText>
+            </MenuItem>
+        </div>
+    )
+
+    tableMenuSection = () => (
+        <div>
+            <ListSubheader component="div">{i18n.t('Table')}</ListSubheader>
+            <MenuItem onClick={this.downloadTable('xls')}>
+                <ListItemIcon>
+                    <ImageIcon />
+                </ListItemIcon>
+                <ListItemText>{i18n.t('Excel (.xls)')}</ListItemText>
+            </MenuItem>
+            <MenuItem onClick={this.downloadTable('csv')}>
+                <ListItemIcon>
+                    <ImageIcon />
+                </ListItemIcon>
+                <ListItemText>{i18n.t('CSV (.csv)')}</ListItemText>
+            </MenuItem>
+            <MenuItem onClick={this.downloadTable('html')}>
+                <ListItemIcon>
+                    <ImageIcon />
+                </ListItemIcon>
+                <ListItemText>{i18n.t('HTML (.html)')}</ListItemText>
+            </MenuItem>
+        </div>
+    )
+
     render() {
         return (
             <Fragment>
@@ -106,21 +181,9 @@ export class DownloadMenu extends Component {
                     getContentAnchorEl={null}
                     onClose={() => this.toggleMenu()}
                 >
-                    <ListSubheader component="div">
-                        {i18n.t('Graphics')}
-                    </ListSubheader>
-                    <MenuItem onClick={this.downloadImage('png')}>
-                        <ListItemIcon>
-                            <ImageIcon />
-                        </ListItemIcon>
-                        <ListItemText>{i18n.t('Image (.png)')}</ListItemText>
-                    </MenuItem>
-                    <MenuItem onClick={this.downloadImage('pdf')}>
-                        <ListItemIcon>
-                            <PictureAsPdfIcon />
-                        </ListItemIcon>
-                        <ListItemText>{i18n.t('PDF (.pdf)')}</ListItemText>
-                    </MenuItem>
+                    {this.props.visType === VIS_TYPE_PIVOT_TABLE
+                        ? this.tableMenuSection()
+                        : this.graphicsMenuSection()}
                     <Divider />
                     <ListSubheader component="div">
                         {i18n.t('Plain data source')}
@@ -272,15 +335,28 @@ export class DownloadMenu extends Component {
     }
 }
 
+const relativePeriodDateSelector = createSelector(
+    [sGetUiInterpretation],
+    interpretation => interpretation.created || undefined
+)
+
 DownloadMenu.propTypes = {
     chart: PropTypes.string,
     className: PropTypes.string,
+    columns: PropTypes.array,
     current: PropTypes.object,
+    relativePeriodDate: PropTypes.string,
+    rows: PropTypes.array,
+    visType: PropTypes.string,
 }
 
 const mapStateToProps = state => ({
     current: sGetCurrent(state),
+    relativePeriodDate: relativePeriodDateSelector(state),
+    rows: sGetUiLayout(state).rows,
+    columns: sGetUiLayout(state).columns,
     chart: sGetChart(state),
+    visType: sGetUiType(state),
 })
 
 export default connect(mapStateToProps, {})(DownloadMenu)