@dhis2/analytics 21.0.0-alpha.2 → 21.0.0-alpha.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/build/cjs/__demo__/OrgUnitDimension.stories.js +15 -6
  2. package/build/cjs/components/OrgUnitDimension/OrgUnitDimension.js +74 -10
  3. package/build/cjs/components/OrgUnitDimension/styles/OrgUnitDimension.style.js +2 -2
  4. package/build/cjs/index.js +18 -0
  5. package/build/cjs/locales/en/translations.json +10 -0
  6. package/build/es/__demo__/OrgUnitDimension.stories.js +15 -6
  7. package/build/es/components/OrgUnitDimension/OrgUnitDimension.js +75 -11
  8. package/build/es/components/OrgUnitDimension/styles/OrgUnitDimension.style.js +2 -2
  9. package/build/es/index.js +1 -1
  10. package/build/es/locales/en/translations.json +10 -0
  11. package/package.json +1 -1
package/build/cjs/__demo__/OrgUnitDimension.stories.js CHANGED
@@ -19,14 +19,14 @@ const Wrapper = story => /*#__PURE__*/_react2.default.createElement(_appRuntime.
19
19
  apiVersion: ""
20
20
  }, story());
21
21
 
22
- const rootOrgUnit = 'ImspTQPwCqd'; // Sierra Leone
22
+ const defaultRootOrgUnits = ['ImspTQPwCqd']; // Sierra Leone
23
23
 
24
24
  (0, _react.storiesOf)('OrgUnitDimension', module).addDecorator(Wrapper).add('None selected', () => {
25
25
  const [selected, setSelected] = (0, _react2.useState)([]);
26
26
  return /*#__PURE__*/_react2.default.createElement(_OrgUnitDimension.default, {
27
27
  selected: selected,
28
28
  onSelect: response => setSelected(response.items),
29
- root: rootOrgUnit
29
+ roots: defaultRootOrgUnits
30
30
  });
31
31
  });
32
32
  (0, _react.storiesOf)('OrgUnitDimension', module).addDecorator(Wrapper).add('Root selected', () => {
@@ -38,7 +38,7 @@ const rootOrgUnit = 'ImspTQPwCqd'; // Sierra Leone
38
38
  return /*#__PURE__*/_react2.default.createElement(_OrgUnitDimension.default, {
39
39
  selected: selected,
40
40
  onSelect: response => setSelected(response.items),
41
- root: rootOrgUnit
41
+ roots: defaultRootOrgUnits
42
42
  });
43
43
  });
44
44
  (0, _react.storiesOf)('OrgUnitDimension', module).addDecorator(Wrapper).add('Single level 2 child selected', () => {
@@ -50,7 +50,7 @@ const rootOrgUnit = 'ImspTQPwCqd'; // Sierra Leone
50
50
  return /*#__PURE__*/_react2.default.createElement(_OrgUnitDimension.default, {
51
51
  selected: selected,
52
52
  onSelect: response => setSelected(response.items),
53
- root: rootOrgUnit
53
+ roots: defaultRootOrgUnits
54
54
  });
55
55
  });
56
56
  (0, _react.storiesOf)('OrgUnitDimension', module).addDecorator(Wrapper).add('Multiple level 2 children selected', () => {
@@ -70,7 +70,7 @@ const rootOrgUnit = 'ImspTQPwCqd'; // Sierra Leone
70
70
  return /*#__PURE__*/_react2.default.createElement(_OrgUnitDimension.default, {
71
71
  selected: selected,
72
72
  onSelect: response => setSelected(response.items),
73
- root: rootOrgUnit
73
+ roots: defaultRootOrgUnits
74
74
  });
75
75
  });
76
76
  (0, _react.storiesOf)('OrgUnitDimension', module).addDecorator(Wrapper).add('Multiple selected across different levels', () => {
@@ -90,6 +90,15 @@ const rootOrgUnit = 'ImspTQPwCqd'; // Sierra Leone
90
90
  return /*#__PURE__*/_react2.default.createElement(_OrgUnitDimension.default, {
91
91
  selected: selected,
92
92
  onSelect: response => setSelected(response.items),
93
- root: rootOrgUnit
93
+ roots: defaultRootOrgUnits
94
+ });
95
+ });
96
+ (0, _react.storiesOf)('OrgUnitDimension', module).addDecorator(Wrapper).add('Multiple roots', () => {
97
+ const [selected, setSelected] = (0, _react2.useState)([]);
98
+ return /*#__PURE__*/_react2.default.createElement(_OrgUnitDimension.default, {
99
+ selected: selected,
100
+ onSelect: response => setSelected(response.items),
101
+ roots: ['O6uvpzGd5pu', 'fdc6uOvgoji'] // Bo + Bombali
102
+
94
103
  });
95
104
  });
package/build/cjs/components/OrgUnitDimension/OrgUnitDimension.js CHANGED
@@ -36,7 +36,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
36
36
  const DYNAMIC_ORG_UNITS = [_ouIdHelper.USER_ORG_UNIT, _ouIdHelper.USER_ORG_UNIT_CHILDREN, _ouIdHelper.USER_ORG_UNIT_GRANDCHILDREN];
37
37
 
38
38
  const OrgUnitDimension = ({
39
- root,
39
+ roots,
40
40
  selected,
41
41
  onSelect
42
42
  }) => {
@@ -54,7 +54,7 @@ const OrgUnitDimension = ({
54
54
  let result = [...selected];
55
55
 
56
56
  if (checked && DYNAMIC_ORG_UNITS.includes(id)) {
57
- result = [...result.filter(item => DYNAMIC_ORG_UNITS.includes(item.id)), {
57
+ result = [...result.filter(item => DYNAMIC_ORG_UNITS.includes(item.id) || _ouIdHelper.ouIdHelper.hasLevelPrefix(item.id) || _ouIdHelper.ouIdHelper.hasGroupPrefix(item.id)), {
58
58
  id,
59
59
  displayName
60
60
  }];
@@ -68,12 +68,17 @@ const OrgUnitDimension = ({
68
68
  result = [...result.filter(item => item.id !== id)];
69
69
  }
70
70
 
71
- return onSelect({
71
+ onSelect({
72
72
  dimensionId: _predefinedDimensions.DIMENSION_ID_ORGUNIT,
73
73
  items: result
74
74
  });
75
75
  };
76
76
 
77
+ const clearSelection = () => onSelect({
78
+ dimensionId: _predefinedDimensions.DIMENSION_ID_ORGUNIT,
79
+ items: []
80
+ });
81
+
77
82
  (0, _react.useEffect)(() => {
78
83
  const doFetchOuLevels = async () => {
79
84
  const result = await (0, _organisationUnits.apiFetchOrganisationUnitLevels)(dataEngine);
@@ -112,6 +117,56 @@ const OrgUnitDimension = ({
112
117
  });
113
118
  };
114
119
 
120
+ const getSummary = () => {
121
+ let summary;
122
+
123
+ if (selected.length) {
124
+ const numberOfOrgUnits = selected.filter(item => !DYNAMIC_ORG_UNITS.includes(item.id) && !_ouIdHelper.ouIdHelper.hasLevelPrefix(item.id) && !_ouIdHelper.ouIdHelper.hasGroupPrefix(item.id)).length;
125
+ const numberOfLevels = selected.filter(item => _ouIdHelper.ouIdHelper.hasLevelPrefix(item.id)).length;
126
+ const numberOfGroups = selected.filter(item => _ouIdHelper.ouIdHelper.hasGroupPrefix(item.id)).length;
127
+ const numberOfUserOrgUnits = selected.filter(item => DYNAMIC_ORG_UNITS.includes(item.id)).length;
128
+ const parts = [];
129
+
130
+ if (numberOfOrgUnits) {
131
+ parts.push(_index.default.t('{{count}} org units', {
132
+ count: numberOfOrgUnits,
133
+ defaultValue: '{{count}} org unit',
134
+ defaultValue_plural: '{{count}} org units'
135
+ }));
136
+ }
137
+
138
+ if (numberOfLevels) {
139
+ parts.push(_index.default.t('{{count}} levels', {
140
+ count: numberOfLevels,
141
+ defaultValue: '{{count}} level',
142
+ defaultValue_plural: '{{count}} levels'
143
+ }));
144
+ }
145
+
146
+ if (numberOfGroups) {
147
+ parts.push(_index.default.t('{{count}} groups', {
148
+ count: numberOfGroups,
149
+ defaultValue: '{{count}} group',
150
+ defaultValue_plural: '{{count}} groups'
151
+ }));
152
+ }
153
+
154
+ if (numberOfUserOrgUnits) {
155
+ parts.push(_index.default.t('{{count}} user org units', {
156
+ count: numberOfUserOrgUnits,
157
+ defaultValue: '{{count}} user org unit',
158
+ defaultValue_plural: '{{count}} user org units'
159
+ }));
160
+ }
161
+
162
+ summary = _index.default.t('Selected: ') + parts.join(', ');
163
+ } else {
164
+ summary = _index.default.t('Nothing selected');
165
+ }
166
+
167
+ return summary;
168
+ };
169
+
115
170
  return /*#__PURE__*/_react.default.createElement("div", {
116
171
  className: `jsx-${_OrgUnitDimension.default.__hash}` + " " + "container"
117
172
  }, /*#__PURE__*/_react.default.createElement("div", {
@@ -154,15 +209,13 @@ const OrgUnitDimension = ({
154
209
  disabled: selected.some(item => DYNAMIC_ORG_UNITS.includes(item.id))
155
210
  }) || "")
156
211
  }, /*#__PURE__*/_react.default.createElement(_ui.OrganisationUnitTree, {
157
- roots: root,
158
- initiallyExpanded: [root, ...selected.filter(item => !DYNAMIC_ORG_UNITS.includes(item.id) && !_ouIdHelper.ouIdHelper.hasLevelPrefix(item.id) && !_ouIdHelper.ouIdHelper.hasGroupPrefix(item.id)).map(item => item.path)],
212
+ roots: roots,
213
+ initiallyExpanded: [...(roots.length === 1 ? [`/${roots[0]}`] : []), ...selected.filter(item => !DYNAMIC_ORG_UNITS.includes(item.id) && !_ouIdHelper.ouIdHelper.hasLevelPrefix(item.id) && !_ouIdHelper.ouIdHelper.hasGroupPrefix(item.id)).map(item => item.path.substring(0, item.path.lastIndexOf('/'))).filter(path => path)],
159
214
  selected: selected.filter(item => !DYNAMIC_ORG_UNITS.includes(item.id) && !_ouIdHelper.ouIdHelper.hasLevelPrefix(item.id) && !_ouIdHelper.ouIdHelper.hasGroupPrefix(item.id)).map(item => item.path),
160
215
  onChange: onSelectItems,
161
216
  dataTest: 'org-unit-tree'
162
217
  })), /*#__PURE__*/_react.default.createElement("div", {
163
- className: `jsx-${_OrgUnitDimension.default.__hash}` + " " + ((0, _classnames.default)('selectsWrapper', {
164
- disabled: selected.some(item => DYNAMIC_ORG_UNITS.includes(item.id))
165
- }) || "")
218
+ className: `jsx-${_OrgUnitDimension.default.__hash}` + " " + "selectsWrapper"
166
219
  }, /*#__PURE__*/_react.default.createElement(_ui.MultiSelect, {
167
220
  selected: ouLevels.length ? selected.filter(item => _ouIdHelper.ouIdHelper.hasLevelPrefix(item.id)).map(item => _ouIdHelper.ouIdHelper.removePrefix(item.id)) : [],
168
221
  onChange: ({
@@ -191,13 +244,24 @@ const OrgUnitDimension = ({
191
244
  value: group.id,
192
245
  label: group.displayName,
193
246
  dataTest: `org-unit-group-select-option-${group.id}`
194
- })))), /*#__PURE__*/_react.default.createElement(_style.default, {
247
+ })))), /*#__PURE__*/_react.default.createElement("div", {
248
+ className: `jsx-${_OrgUnitDimension.default.__hash}` + " " + "summaryWrapper"
249
+ }, /*#__PURE__*/_react.default.createElement("span", {
250
+ className: `jsx-${_OrgUnitDimension.default.__hash}` + " " + "summaryText"
251
+ }, getSummary()), /*#__PURE__*/_react.default.createElement("div", {
252
+ className: `jsx-${_OrgUnitDimension.default.__hash}` + " " + "deselectButton"
253
+ }, /*#__PURE__*/_react.default.createElement(_ui.Button, {
254
+ secondary: true,
255
+ small: true,
256
+ onClick: clearSelection,
257
+ disabled: !selected.length
258
+ }, _index.default.t('Deselect all')))), /*#__PURE__*/_react.default.createElement(_style.default, {
195
259
  id: _OrgUnitDimension.default.__hash
196
260
  }, _OrgUnitDimension.default));
197
261
  };
198
262
 
199
263
  OrgUnitDimension.propTypes = {
200
- root: _propTypes.default.string,
264
+ roots: _propTypes.default.arrayOf(_propTypes.default.string),
201
265
  selected: _propTypes.default.arrayOf(_propTypes.default.shape({
202
266
  id: _propTypes.default.string.isRequired,
203
267
  name: _propTypes.default.string.isRequired,
package/build/cjs/components/OrgUnitDimension/styles/OrgUnitDimension.style.js CHANGED
@@ -7,7 +7,7 @@ exports.default = void 0;
7
7
 
8
8
  var _ui = require("@dhis2/ui");
9
9
 
10
- const _defaultExport = [".container.jsx-1731397832{height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".orgUnitTreeWrapper.jsx-1731397832{height:418px;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;overflow:auto;}", ".orgUnitTreeWrapper.jsx-1731397832>*{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".disabled.jsx-1731397832{cursor:not-allowed;opacity:0.5;}", ".disabled.jsx-1731397832>*{pointer-events:none;}", `.userOrgUnitsWrapper.jsx-1731397832{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:${_ui.colors.grey200};padding:${_ui.spacers.dp8} ${_ui.spacers.dp8} ${_ui.spacers.dp8} ${_ui.spacers.dp24};margin-bottom:${_ui.spacers.dp12};}`, `.userOrgUnitsWrapper.jsx-1731397832>*{margin-right:${_ui.spacers.dp48};}`, `.selectsWrapper.jsx-1731397832{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;gap:${_ui.spacers.dp12};margin-top:${_ui.spacers.dp12};}`, ".selectsWrapper.jsx-1731397832>*{width:50%;}"];
11
- _defaultExport.__hash = "1731397832";
10
+ const _defaultExport = [".container.jsx-2759088229{height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".orgUnitTreeWrapper.jsx-2759088229{height:418px;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;overflow:auto;}", ".orgUnitTreeWrapper.jsx-2759088229>*{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".disabled.jsx-2759088229{cursor:not-allowed;opacity:0.5;}", ".disabled.jsx-2759088229>*{pointer-events:none;}", `.userOrgUnitsWrapper.jsx-2759088229{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:${_ui.colors.grey200};padding:${_ui.spacers.dp8} ${_ui.spacers.dp8} ${_ui.spacers.dp8} ${_ui.spacers.dp24};margin-bottom:${_ui.spacers.dp12};}`, `.userOrgUnitsWrapper.jsx-2759088229>*{margin-right:${_ui.spacers.dp48};}`, `.selectsWrapper.jsx-2759088229{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;gap:${_ui.spacers.dp8};margin-top:${_ui.spacers.dp12};}`, ".selectsWrapper.jsx-2759088229>*{width:50%;}", `.summaryWrapper.jsx-2759088229{margin-top:${_ui.spacers.dp8};}`, `.summaryText.jsx-2759088229{font-size:14px;line-height:18px;color:${_ui.colors.grey700};}`, `.deselectButton.jsx-2759088229{display:inline-block;margin-left:${_ui.spacers.dp8};}`];
11
+ _defaultExport.__hash = "2759088229";
12
12
  var _default = _defaultExport;
13
13
  exports.default = _default;
package/build/cjs/index.js CHANGED
@@ -213,6 +213,24 @@ Object.defineProperty(exports, "ouIdHelper", {
213
213
  return _ouIdHelper.ouIdHelper;
214
214
  }
215
215
  });
216
+ Object.defineProperty(exports, "USER_ORG_UNIT", {
217
+ enumerable: true,
218
+ get: function () {
219
+ return _ouIdHelper.USER_ORG_UNIT;
220
+ }
221
+ });
222
+ Object.defineProperty(exports, "USER_ORG_UNIT_CHILDREN", {
223
+ enumerable: true,
224
+ get: function () {
225
+ return _ouIdHelper.USER_ORG_UNIT_CHILDREN;
226
+ }
227
+ });
228
+ Object.defineProperty(exports, "USER_ORG_UNIT_GRANDCHILDREN", {
229
+ enumerable: true,
230
+ get: function () {
231
+ return _ouIdHelper.USER_ORG_UNIT_GRANDCHILDREN;
232
+ }
233
+ });
216
234
  Object.defineProperty(exports, "convertOuLevelsToUids", {
217
235
  enumerable: true,
218
236
  get: function () {
package/build/cjs/locales/en/translations.json CHANGED
@@ -101,11 +101,21 @@
101
101
  "Options": "Options",
102
102
  "Hide": "Hide",
103
103
  "Update": "Update",
104
+ "{{count}} org units": "{{count}} org unit",
105
+ "{{count}} org units_plural": "{{count}} org units",
106
+ "{{count}} levels": "{{count}} level",
107
+ "{{count}} levels_plural": "{{count}} levels",
108
+ "{{count}} groups": "{{count}} group",
109
+ "{{count}} groups_plural": "{{count}} groups",
110
+ "{{count}} user org units": "{{count}} user org unit",
111
+ "{{count}} user org units_plural": "{{count}} user org units",
112
+ "Nothing selected": "Nothing selected",
104
113
  "User organisation unit": "User organisation unit",
105
114
  "User sub-units": "User sub-units",
106
115
  "User sub-x2-units": "User sub-x2-units",
107
116
  "Select a level": "Select a level",
108
117
  "Select a group": "Select a group",
118
+ "Deselect all": "Deselect all",
109
119
  "Period type": "Period type",
110
120
  "Year": "Year",
111
121
  "Select year": "Select year",
package/build/es/__demo__/OrgUnitDimension.stories.js CHANGED
@@ -8,14 +8,14 @@ const Wrapper = story => /*#__PURE__*/React.createElement(DataProvider, {
8
8
  apiVersion: ""
9
9
  }, story());
10
10
 
11
- const rootOrgUnit = 'ImspTQPwCqd'; // Sierra Leone
11
+ const defaultRootOrgUnits = ['ImspTQPwCqd']; // Sierra Leone
12
12
 
13
13
  storiesOf('OrgUnitDimension', module).addDecorator(Wrapper).add('None selected', () => {
14
14
  const [selected, setSelected] = useState([]);
15
15
  return /*#__PURE__*/React.createElement(OrgUnitDimension, {
16
16
  selected: selected,
17
17
  onSelect: response => setSelected(response.items),
18
- root: rootOrgUnit
18
+ roots: defaultRootOrgUnits
19
19
  });
20
20
  });
21
21
  storiesOf('OrgUnitDimension', module).addDecorator(Wrapper).add('Root selected', () => {
@@ -27,7 +27,7 @@ storiesOf('OrgUnitDimension', module).addDecorator(Wrapper).add('Root selected',
27
27
  return /*#__PURE__*/React.createElement(OrgUnitDimension, {
28
28
  selected: selected,
29
29
  onSelect: response => setSelected(response.items),
30
- root: rootOrgUnit
30
+ roots: defaultRootOrgUnits
31
31
  });
32
32
  });
33
33
  storiesOf('OrgUnitDimension', module).addDecorator(Wrapper).add('Single level 2 child selected', () => {
@@ -39,7 +39,7 @@ storiesOf('OrgUnitDimension', module).addDecorator(Wrapper).add('Single level 2
39
39
  return /*#__PURE__*/React.createElement(OrgUnitDimension, {
40
40
  selected: selected,
41
41
  onSelect: response => setSelected(response.items),
42
- root: rootOrgUnit
42
+ roots: defaultRootOrgUnits
43
43
  });
44
44
  });
45
45
  storiesOf('OrgUnitDimension', module).addDecorator(Wrapper).add('Multiple level 2 children selected', () => {
@@ -59,7 +59,7 @@ storiesOf('OrgUnitDimension', module).addDecorator(Wrapper).add('Multiple level
59
59
  return /*#__PURE__*/React.createElement(OrgUnitDimension, {
60
60
  selected: selected,
61
61
  onSelect: response => setSelected(response.items),
62
- root: rootOrgUnit
62
+ roots: defaultRootOrgUnits
63
63
  });
64
64
  });
65
65
  storiesOf('OrgUnitDimension', module).addDecorator(Wrapper).add('Multiple selected across different levels', () => {
@@ -79,6 +79,15 @@ storiesOf('OrgUnitDimension', module).addDecorator(Wrapper).add('Multiple select
79
79
  return /*#__PURE__*/React.createElement(OrgUnitDimension, {
80
80
  selected: selected,
81
81
  onSelect: response => setSelected(response.items),
82
- root: rootOrgUnit
82
+ roots: defaultRootOrgUnits
83
+ });
84
+ });
85
+ storiesOf('OrgUnitDimension', module).addDecorator(Wrapper).add('Multiple roots', () => {
86
+ const [selected, setSelected] = useState([]);
87
+ return /*#__PURE__*/React.createElement(OrgUnitDimension, {
88
+ selected: selected,
89
+ onSelect: response => setSelected(response.items),
90
+ roots: ['O6uvpzGd5pu', 'fdc6uOvgoji'] // Bo + Bombali
91
+
83
92
  });
84
93
  });
package/build/es/components/OrgUnitDimension/OrgUnitDimension.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import _JSXStyle from "styled-jsx/style";
2
2
  import { useDataEngine } from '@dhis2/app-runtime';
3
- import { OrganisationUnitTree, Checkbox, MultiSelect, MultiSelectOption } from '@dhis2/ui';
3
+ import { OrganisationUnitTree, Checkbox, MultiSelect, MultiSelectOption, Button } from '@dhis2/ui';
4
4
  import cx from 'classnames';
5
5
  import PropTypes from 'prop-types';
6
6
  import React, { useEffect, useState } from 'react';
@@ -12,7 +12,7 @@ import styles from './styles/OrgUnitDimension.style';
12
12
  const DYNAMIC_ORG_UNITS = [USER_ORG_UNIT, USER_ORG_UNIT_CHILDREN, USER_ORG_UNIT_GRANDCHILDREN];
13
13
 
14
14
  const OrgUnitDimension = ({
15
- root,
15
+ roots,
16
16
  selected,
17
17
  onSelect
18
18
  }) => {
@@ -30,7 +30,7 @@ const OrgUnitDimension = ({
30
30
  let result = [...selected];
31
31
 
32
32
  if (checked && DYNAMIC_ORG_UNITS.includes(id)) {
33
- result = [...result.filter(item => DYNAMIC_ORG_UNITS.includes(item.id)), {
33
+ result = [...result.filter(item => DYNAMIC_ORG_UNITS.includes(item.id) || ouIdHelper.hasLevelPrefix(item.id) || ouIdHelper.hasGroupPrefix(item.id)), {
34
34
  id,
35
35
  displayName
36
36
  }];
@@ -44,12 +44,17 @@ const OrgUnitDimension = ({
44
44
  result = [...result.filter(item => item.id !== id)];
45
45
  }
46
46
 
47
- return onSelect({
47
+ onSelect({
48
48
  dimensionId: DIMENSION_ID_ORGUNIT,
49
49
  items: result
50
50
  });
51
51
  };
52
52
 
53
+ const clearSelection = () => onSelect({
54
+ dimensionId: DIMENSION_ID_ORGUNIT,
55
+ items: []
56
+ });
57
+
53
58
  useEffect(() => {
54
59
  const doFetchOuLevels = async () => {
55
60
  const result = await apiFetchOrganisationUnitLevels(dataEngine);
@@ -88,6 +93,56 @@ const OrgUnitDimension = ({
88
93
  });
89
94
  };
90
95
 
96
+ const getSummary = () => {
97
+ let summary;
98
+
99
+ if (selected.length) {
100
+ const numberOfOrgUnits = selected.filter(item => !DYNAMIC_ORG_UNITS.includes(item.id) && !ouIdHelper.hasLevelPrefix(item.id) && !ouIdHelper.hasGroupPrefix(item.id)).length;
101
+ const numberOfLevels = selected.filter(item => ouIdHelper.hasLevelPrefix(item.id)).length;
102
+ const numberOfGroups = selected.filter(item => ouIdHelper.hasGroupPrefix(item.id)).length;
103
+ const numberOfUserOrgUnits = selected.filter(item => DYNAMIC_ORG_UNITS.includes(item.id)).length;
104
+ const parts = [];
105
+
106
+ if (numberOfOrgUnits) {
107
+ parts.push(i18n.t('{{count}} org units', {
108
+ count: numberOfOrgUnits,
109
+ defaultValue: '{{count}} org unit',
110
+ defaultValue_plural: '{{count}} org units'
111
+ }));
112
+ }
113
+
114
+ if (numberOfLevels) {
115
+ parts.push(i18n.t('{{count}} levels', {
116
+ count: numberOfLevels,
117
+ defaultValue: '{{count}} level',
118
+ defaultValue_plural: '{{count}} levels'
119
+ }));
120
+ }
121
+
122
+ if (numberOfGroups) {
123
+ parts.push(i18n.t('{{count}} groups', {
124
+ count: numberOfGroups,
125
+ defaultValue: '{{count}} group',
126
+ defaultValue_plural: '{{count}} groups'
127
+ }));
128
+ }
129
+
130
+ if (numberOfUserOrgUnits) {
131
+ parts.push(i18n.t('{{count}} user org units', {
132
+ count: numberOfUserOrgUnits,
133
+ defaultValue: '{{count}} user org unit',
134
+ defaultValue_plural: '{{count}} user org units'
135
+ }));
136
+ }
137
+
138
+ summary = i18n.t('Selected: ') + parts.join(', ');
139
+ } else {
140
+ summary = i18n.t('Nothing selected');
141
+ }
142
+
143
+ return summary;
144
+ };
145
+
91
146
  return /*#__PURE__*/React.createElement("div", {
92
147
  className: `jsx-${styles.__hash}` + " " + "container"
93
148
  }, /*#__PURE__*/React.createElement("div", {
@@ -130,15 +185,13 @@ const OrgUnitDimension = ({
130
185
  disabled: selected.some(item => DYNAMIC_ORG_UNITS.includes(item.id))
131
186
  }) || "")
132
187
  }, /*#__PURE__*/React.createElement(OrganisationUnitTree, {
133
- roots: root,
134
- initiallyExpanded: [root, ...selected.filter(item => !DYNAMIC_ORG_UNITS.includes(item.id) && !ouIdHelper.hasLevelPrefix(item.id) && !ouIdHelper.hasGroupPrefix(item.id)).map(item => item.path)],
188
+ roots: roots,
189
+ initiallyExpanded: [...(roots.length === 1 ? [`/${roots[0]}`] : []), ...selected.filter(item => !DYNAMIC_ORG_UNITS.includes(item.id) && !ouIdHelper.hasLevelPrefix(item.id) && !ouIdHelper.hasGroupPrefix(item.id)).map(item => item.path.substring(0, item.path.lastIndexOf('/'))).filter(path => path)],
135
190
  selected: selected.filter(item => !DYNAMIC_ORG_UNITS.includes(item.id) && !ouIdHelper.hasLevelPrefix(item.id) && !ouIdHelper.hasGroupPrefix(item.id)).map(item => item.path),
136
191
  onChange: onSelectItems,
137
192
  dataTest: 'org-unit-tree'
138
193
  })), /*#__PURE__*/React.createElement("div", {
139
- className: `jsx-${styles.__hash}` + " " + (cx('selectsWrapper', {
140
- disabled: selected.some(item => DYNAMIC_ORG_UNITS.includes(item.id))
141
- }) || "")
194
+ className: `jsx-${styles.__hash}` + " " + "selectsWrapper"
142
195
  }, /*#__PURE__*/React.createElement(MultiSelect, {
143
196
  selected: ouLevels.length ? selected.filter(item => ouIdHelper.hasLevelPrefix(item.id)).map(item => ouIdHelper.removePrefix(item.id)) : [],
144
197
  onChange: ({
@@ -167,13 +220,24 @@ const OrgUnitDimension = ({
167
220
  value: group.id,
168
221
  label: group.displayName,
169
222
  dataTest: `org-unit-group-select-option-${group.id}`
170
- })))), /*#__PURE__*/React.createElement(_JSXStyle, {
223
+ })))), /*#__PURE__*/React.createElement("div", {
224
+ className: `jsx-${styles.__hash}` + " " + "summaryWrapper"
225
+ }, /*#__PURE__*/React.createElement("span", {
226
+ className: `jsx-${styles.__hash}` + " " + "summaryText"
227
+ }, getSummary()), /*#__PURE__*/React.createElement("div", {
228
+ className: `jsx-${styles.__hash}` + " " + "deselectButton"
229
+ }, /*#__PURE__*/React.createElement(Button, {
230
+ secondary: true,
231
+ small: true,
232
+ onClick: clearSelection,
233
+ disabled: !selected.length
234
+ }, i18n.t('Deselect all')))), /*#__PURE__*/React.createElement(_JSXStyle, {
171
235
  id: styles.__hash
172
236
  }, styles));
173
237
  };
174
238
 
175
239
  OrgUnitDimension.propTypes = {
176
- root: PropTypes.string,
240
+ roots: PropTypes.arrayOf(PropTypes.string),
177
241
  selected: PropTypes.arrayOf(PropTypes.shape({
178
242
  id: PropTypes.string.isRequired,
179
243
  name: PropTypes.string.isRequired,
package/build/es/components/OrgUnitDimension/styles/OrgUnitDimension.style.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import { colors, spacers } from '@dhis2/ui';
2
- const _defaultExport = [".container.jsx-1731397832{height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".orgUnitTreeWrapper.jsx-1731397832{height:418px;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;overflow:auto;}", ".orgUnitTreeWrapper.jsx-1731397832>*{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".disabled.jsx-1731397832{cursor:not-allowed;opacity:0.5;}", ".disabled.jsx-1731397832>*{pointer-events:none;}", `.userOrgUnitsWrapper.jsx-1731397832{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:${colors.grey200};padding:${spacers.dp8} ${spacers.dp8} ${spacers.dp8} ${spacers.dp24};margin-bottom:${spacers.dp12};}`, `.userOrgUnitsWrapper.jsx-1731397832>*{margin-right:${spacers.dp48};}`, `.selectsWrapper.jsx-1731397832{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;gap:${spacers.dp12};margin-top:${spacers.dp12};}`, ".selectsWrapper.jsx-1731397832>*{width:50%;}"];
3
- _defaultExport.__hash = "1731397832";
2
+ const _defaultExport = [".container.jsx-2759088229{height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".orgUnitTreeWrapper.jsx-2759088229{height:418px;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;overflow:auto;}", ".orgUnitTreeWrapper.jsx-2759088229>*{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".disabled.jsx-2759088229{cursor:not-allowed;opacity:0.5;}", ".disabled.jsx-2759088229>*{pointer-events:none;}", `.userOrgUnitsWrapper.jsx-2759088229{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:${colors.grey200};padding:${spacers.dp8} ${spacers.dp8} ${spacers.dp8} ${spacers.dp24};margin-bottom:${spacers.dp12};}`, `.userOrgUnitsWrapper.jsx-2759088229>*{margin-right:${spacers.dp48};}`, `.selectsWrapper.jsx-2759088229{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;gap:${spacers.dp8};margin-top:${spacers.dp12};}`, ".selectsWrapper.jsx-2759088229>*{width:50%;}", `.summaryWrapper.jsx-2759088229{margin-top:${spacers.dp8};}`, `.summaryText.jsx-2759088229{font-size:14px;line-height:18px;color:${colors.grey700};}`, `.deselectButton.jsx-2759088229{display:inline-block;margin-left:${spacers.dp8};}`];
3
+ _defaultExport.__hash = "2759088229";
4
4
  export default _defaultExport;
package/build/es/index.js CHANGED
@@ -22,7 +22,7 @@ export { getAxisName, getAxisNameByLayoutType, hasCustomAxes } from './modules/a
22
22
 
23
23
  export { DIMENSION_ID_DATA, DIMENSION_ID_PERIOD, DIMENSION_ID_ORGUNIT, DIMENSION_ID_ASSIGNED_CATEGORIES, DIMENSION_PROP_NO_ITEMS, filterOutPredefinedDimensions, getPredefinedDimensionProp, getDimensionById, getPredefinedDimensions, getFixedDimensions, getDynamicDimensions } from './modules/predefinedDimensions'; // Modules: ou utils
24
24
 
25
- export { ouIdHelper } from './modules/ouIdHelper';
25
+ export { ouIdHelper, USER_ORG_UNIT, USER_ORG_UNIT_CHILDREN, USER_ORG_UNIT_GRANDCHILDREN } from './modules/ouIdHelper';
26
26
  export { convertOuLevelsToUids } from './modules/ouLevelUtils'; // Modules: adapted ui layout
27
27
 
28
28
  export { getAdaptedUiLayoutByType } from './modules/getAdaptedUiLayoutByType'; // Modules: relativeItems
package/build/es/locales/en/translations.json CHANGED
@@ -101,11 +101,21 @@
101
101
  "Options": "Options",
102
102
  "Hide": "Hide",
103
103
  "Update": "Update",
104
+ "{{count}} org units": "{{count}} org unit",
105
+ "{{count}} org units_plural": "{{count}} org units",
106
+ "{{count}} levels": "{{count}} level",
107
+ "{{count}} levels_plural": "{{count}} levels",
108
+ "{{count}} groups": "{{count}} group",
109
+ "{{count}} groups_plural": "{{count}} groups",
110
+ "{{count}} user org units": "{{count}} user org unit",
111
+ "{{count}} user org units_plural": "{{count}} user org units",
112
+ "Nothing selected": "Nothing selected",
104
113
  "User organisation unit": "User organisation unit",
105
114
  "User sub-units": "User sub-units",
106
115
  "User sub-x2-units": "User sub-x2-units",
107
116
  "Select a level": "Select a level",
108
117
  "Select a group": "Select a group",
118
+ "Deselect all": "Deselect all",
109
119
  "Period type": "Period type",
110
120
  "Year": "Year",
111
121
  "Select year": "Select year",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dhis2/analytics",
3
- "version": "21.0.0-alpha.2",
3
+ "version": "21.0.0-alpha.3",
4
4
  "main": "./build/cjs/index.js",
5
5
  "module": "./build/es/index.js",
6
6
  "exports": {