feat: assigned categories DHIS2-7701 (#539)

packages/app/i18n/en.pot

@@ -5,8 +5,9 @@ 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-01-13T08:35:33.076Z\n"
-"PO-Revision-Date: 2020-01-13T08:35:33.076Z\n"
+
+"POT-Creation-Date: 2020-01-13T13:24:57.761Z\n"
+"PO-Revision-Date: 2020-01-13T13:24:57.761Z\n"
 
 msgid "Rename successful"
 msgstr ""
@@ -104,12 +105,6 @@ msgstr ""
 msgid "{{dimensionName}} is locked to {{axisName}} for {{visTypeName}}"
 msgstr ""
 
-msgid "Move to"
-msgstr ""
-
-msgid "Remove"
-msgstr ""
-
 msgid "None selected"
 msgstr ""
 
@@ -454,51 +449,6 @@ msgstr ""
 msgid "Expected reports"
 msgstr ""
 
-msgid "Program"
-msgstr ""
-
-msgid "Select a program"
-msgstr ""
-
-msgid "Indicators"
-msgstr ""
-
-msgid "Select indicator group"
-msgstr ""
-
-msgid "[ All groups ]"
-msgstr ""
-
-msgid "Data elements"
-msgstr ""
-
-msgid "Select data element group"
-msgstr ""
-
-msgid "[ All data elements ]"
-msgstr ""
-
-msgid "Totals"
-msgstr ""
-
-msgid "Details"
-msgstr ""
-
-msgid "Data sets"
-msgstr ""
-
-msgid "Select data sets"
-msgstr ""
-
-msgid "[ All metrics ]"
-msgstr ""
-
-msgid "Event data items"
-msgstr ""
-
-msgid "Program indicators"
-msgstr ""
-
 msgid "Add to series"
 msgstr ""
 

packages/app/package.json

@@ -12,7 +12,7 @@
         "redux-mock-store": "^1.5.3"
     },
     "dependencies": {
-        "@dhis2/analytics": "^2.7.2",
+        "@dhis2/analytics": "^2.8.1",
         "@dhis2/d2-ui-core": "^6.4.0",
         "@dhis2/d2-ui-file-menu": "^6.4.0",
         "@dhis2/d2-ui-interpretations": "^6.4.0",

packages/app/src/components/DimensionsPanel/Dialogs/__tests__/DialogManager.spec.js

@@ -33,14 +33,11 @@ jest.mock('@dhis2/analytics', () => {
         DIMENSION_ID_DATA: dataId,
         DIMENSION_ID_PERIOD: periodId,
         DIMENSION_ID_ORGUNIT: ouId,
-        FIXED_DIMENSIONS: {
-            [dataId]: {},
-            [periodId]: {},
-            [ouId]: {},
-        },
         getAxisMaxNumberOfItems: () => {},
         filterOutFixedDimensions: () => [],
         getAxisName: () => {},
+        getFixedDimensions: () => {},
+        getFixedDimensionProp: () => {},
     }
 })
 

packages/app/src/components/DimensionsPanel/DimensionsPanel.js

@@ -5,6 +5,7 @@ import {
     DimensionMenu,
     getDisallowedDimensions,
     getAllLockedDimensionIds,
+    DIMENSION_ID_ASSIGNED_CATEGORIES,
 } from '@dhis2/analytics'
 import PropTypes from 'prop-types'
 
@@ -61,18 +62,22 @@ export class Dimensions extends Component {
     getUiAxisId = () => {
         const adaptedUi = getAdaptedUiByType(this.props.ui)
         const inverseLayout = getInverseLayout(adaptedUi.layout)
-
         return inverseLayout[this.state.dimensionId]
     }
 
     getNumberOfDimensionItems = () =>
         (this.props.itemsByDimension[this.state.dimensionId] || []).length
 
+    getFilteredDimensions = () =>
+        Object.values(this.props.dimensions).filter(
+            dimension => !dimension.noItems
+        )
+
     render() {
         return (
             <div style={styles.divContainer}>
                 <DimensionsPanel
-                    dimensions={this.props.dimensions}
+                    dimensions={this.getFilteredDimensions()}
                     selectedIds={this.props.selectedIds}
                     disabledDimension={this.disabledDimension}
                     lockedDimension={this.lockedDimension}
@@ -83,19 +88,26 @@ export class Dimensions extends Component {
                     onDimensionDragStart={this.onDimensionDragStart}
                     onDimensionClick={this.props.onDimensionClick}
                 />
-                {/* {this.state.dimensionMenuAnchorEl && ( */}
                 <DimensionMenu
                     dimensionId={this.state.dimensionId}
                     currentAxisId={this.getUiAxisId()}
                     visType={this.props.ui.type}
                     numberOfDimensionItems={this.getNumberOfDimensionItems()}
                     dualAxisItemHandler={this.props.dualAxisItemHandler}
+                    isAssignedCategoriesInLayout={
+                        this.props.adaptedLayoutHasAssignedCategories
+                    }
+                    assignedCategoriesItemHandler={destination =>
+                        this.props.assignedCategoriesItemHandler(
+                            this.props.adaptedLayoutHasAssignedCategories,
+                            destination
+                        )
+                    }
                     axisItemHandler={this.props.axisItemHandler}
                     removeItemHandler={this.props.removeItemHandler}
                     anchorEl={this.state.dimensionMenuAnchorEl}
                     onClose={this.onDimensionOptionsClose}
                 />
-                {/* )} */}
                 <DialogManager />
             </div>
         )
@@ -111,6 +123,8 @@ const getLockedDimensionsMemo = createSelector([sGetUiType], type =>
 )
 
 Dimensions.propTypes = {
+    adaptedLayoutHasAssignedCategories: PropTypes.bool,
+    assignedCategoriesItemHandler: PropTypes.func,
     axisItemHandler: PropTypes.func,
     dimensions: PropTypes.object,
     disallowedDimensions: PropTypes.array,
@@ -136,6 +150,9 @@ const mapStateToProps = state => {
         itemsByDimension: fromReducers.fromUi.sGetUiItems(state),
         disallowedDimensions: getDisallowedDimensionsMemo(state),
         lockedDimensions: getLockedDimensionsMemo(state),
+        adaptedLayoutHasAssignedCategories: fromReducers.fromUi.sAdaptedLayoutHasAssignedCategories(
+            state
+        ),
     }
 }
 
@@ -154,6 +171,18 @@ const mapDispatchToProps = dispatch => ({
     removeItemHandler: dimensionId => {
         dispatch(acRemoveUiLayoutDimensions(dimensionId))
     },
+    assignedCategoriesItemHandler: (
+        layoutHasAssignedCategories,
+        destination
+    ) => {
+        dispatch(
+            layoutHasAssignedCategories
+                ? acRemoveUiLayoutDimensions(DIMENSION_ID_ASSIGNED_CATEGORIES)
+                : acAddUiLayoutDimensions({
+                      [DIMENSION_ID_ASSIGNED_CATEGORIES]: destination,
+                  })
+        )
+    },
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(Dimensions)

packages/app/src/components/DimensionsPanel/__tests__/DimensionsPanel.spec.js

@@ -26,6 +26,7 @@ describe('The Dimensions component ', () => {
             dualAxisItemHandler: () => {},
             axisItemHandler: () => {},
             removeItemHandler: () => {},
+            adaptedLayoutHasDimension: () => {},
         }
     })
 

packages/app/src/components/Layout/Chip.js

@@ -1,15 +1,17 @@
+// TODO: Refactor chip to contain less logic
 import React from 'react'
 import { connect } from 'react-redux'
 import WarningIcon from '@material-ui/icons/Warning'
 import LockIcon from '@material-ui/icons/Lock'
 import i18n from '@dhis2/d2-i18n'
 import {
-    FIXED_DIMENSIONS,
+    getFixedDimensionProp,
     getAxisMaxNumberOfItems,
     hasAxisTooManyItems,
     getAxisPerLockedDimension,
     getDisplayNameByVisType,
     getAxisName,
+    DIMENSION_ID_ASSIGNED_CATEGORIES,
 } from '@dhis2/analytics'
 import PropTypes from 'prop-types'
 
@@ -20,6 +22,7 @@ import { sGetDimensions } from '../../reducers/dimensions'
 import { sGetUiItemsByDimension, sGetUiType } from '../../reducers/ui'
 import DynamicDimensionIcon from '../../assets/DynamicDimensionIcon'
 import { styles } from './styles/Chip.style'
+import { acSetUiActiveModalDialog } from '../../actions/ui'
 
 const TOOLTIP_ENTER_DELAY = 500
 
@@ -75,8 +78,10 @@ class Chip extends React.Component {
         }
     }
 
-    handleClick = event => {
-        this.props.onClick(event)
+    handleClick = () => {
+        if (!getFixedDimensionProp(this.props.dimensionId, 'noItems')) {
+            this.props.getOpenHandler(this.props.dimensionId)
+        }
 
         this.handleMouseOut()
     }
@@ -91,7 +96,10 @@ class Chip extends React.Component {
 
     getWrapperStyles = () => ({
         ...styles.chipWrapper,
-        ...(!this.props.items.length ? styles.chipEmpty : {}),
+        ...(!getFixedDimensionProp(this.props.dimensionId, 'noItems') &&
+        !this.props.items.length
+            ? styles.chipEmpty
+            : {}),
     })
 
     renderChipLabel = () => {
@@ -114,14 +122,12 @@ class Chip extends React.Component {
     }
 
     renderChipIcon = () => {
-        const fixedDimension = FIXED_DIMENSIONS[this.props.dimensionId]
-
-        if (fixedDimension) {
-            const Icon = FIXED_DIMENSIONS[this.props.dimensionId].icon
-            return <Icon style={styles.fixedDimensionIcon} />
-        }
-
-        return <DynamicDimensionIcon style={styles.dynamicDimensionIcon} />
+        const Icon = getFixedDimensionProp(this.props.dimensionId, 'icon')
+        return Icon ? (
+            <Icon style={styles.fixedDimensionIcon} />
+        ) : (
+            <DynamicDimensionIcon style={styles.dynamicDimensionIcon} />
+        )
     }
 
     renderMenu = () => (
@@ -136,32 +142,35 @@ class Chip extends React.Component {
     )
 
     renderTooltip = () => {
-        const activeItemIds = this.axisMaxNumberOfItems
-            ? this.props.items.slice(0, this.axisMaxNumberOfItems)
-            : this.props.items
-
-        const lockedLabel = this.isLocked
-            ? i18n.t(
-                  `{{dimensionName}} is locked to {{axisName}} for {{visTypeName}}`,
-                  {
-                      dimensionName: this.props.dimensionName,
-                      axisName: getAxisName(this.props.axisId),
-                      visTypeName: getDisplayNameByVisType(this.props.type),
-                  }
-              )
-            : null
-        return (
-            <Tooltip
-                dimensionId={this.props.dimensionId}
-                itemIds={activeItemIds}
-                lockedLabel={lockedLabel}
-                displayLimitedAmount={
-                    this.props.items.length > activeItemIds.length
-                }
-                open={this.state.tooltipOpen}
-                anchorEl={this.getAnchorEl()}
-            />
-        )
+        if (this.props.dimensionId !== DIMENSION_ID_ASSIGNED_CATEGORIES) {
+            const activeItemIds = this.axisMaxNumberOfItems
+                ? this.props.items.slice(0, this.axisMaxNumberOfItems)
+                : this.props.items
+
+            const lockedLabel = this.isLocked
+                ? i18n.t(
+                      `{{dimensionName}} is locked to {{axisName}} for {{visTypeName}}`,
+                      {
+                          dimensionName: this.props.dimensionName,
+                          axisName: getAxisName(this.props.axisId),
+                          visTypeName: getDisplayNameByVisType(this.props.type),
+                      }
+                  )
+                : null
+
+            return (
+                <Tooltip
+                    dimensionId={this.props.dimensionId}
+                    itemIds={activeItemIds}
+                    lockedLabel={lockedLabel}
+                    displayLimitedAmount={
+                        this.props.items.length > activeItemIds.length
+                    }
+                    open={this.state.tooltipOpen}
+                    anchorEl={this.getAnchorEl()}
+                />
+            )
+        }
     }
 
     render = () => (
@@ -197,13 +206,12 @@ Chip.propTypes = {
     axisId: PropTypes.string.isRequired,
     dimensionId: PropTypes.string.isRequired,
     dimensionName: PropTypes.string.isRequired,
+    getOpenHandler: PropTypes.func.isRequired,
     type: PropTypes.string.isRequired,
     items: PropTypes.array,
-    onClick: PropTypes.func,
 }
 
 Chip.defaultProps = {
-    onClick: Function.prototype,
     items: [],
 }
 
@@ -213,4 +221,9 @@ const mapStateToProps = (state, ownProps) => ({
     type: sGetUiType(state),
 })
 
-export default connect(mapStateToProps)(Chip)
+const mapDispatchToProps = dispatch => ({
+    getOpenHandler: dimensionId =>
+        dispatch(acSetUiActiveModalDialog(dimensionId)),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(Chip)