@dhis2/analytics 20.6.4 → 21.0.0-alpha.3

package/build/cjs/components/OrgUnitDimension/OrgUnitDimension.js

@@ -3,15 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.defaultState = void 0;
+exports.default = void 0;
 
 var _style = _interopRequireDefault(require("styled-jsx/style"));
 
-var _d2UiOrgUnitDialog = require("@dhis2/d2-ui-org-unit-dialog");
+var _appRuntime = require("@dhis2/app-runtime");
 
 var _ui = require("@dhis2/ui");
 
-var _sortBy = _interopRequireDefault(require("lodash/sortBy"));
+var _classnames = _interopRequireDefault(require("classnames"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -19,225 +19,254 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _organisationUnits = require("../../api/organisationUnits");
 
+var _index = _interopRequireDefault(require("../../locales/index.js"));
+
 var _ouIdHelper = require("../../modules/ouIdHelper");
 
 var _predefinedDimensions = require("../../modules/predefinedDimensions");
 
 var _OrgUnitDimension = _interopRequireDefault(require("./styles/OrgUnitDimension.style"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-const defaultState = {
-  root: undefined,
-  roots: undefined,
-  // use "selected" property for cloning org units while user org unit(s) is (are) selected
-  selected: [],
-  ouLevels: [],
-  ouGroups: [],
-  showOrgUnitsTree: true
-};
-exports.defaultState = defaultState;
-
-class OrgUnitDimension extends _react.Component {
-  constructor(props) {
-    super(props);
-
-    _defineProperty(this, "showOrgUnitsTree", () => {
-      this.setState({
-        showOrgUnitsTree: true
-      });
-    });
-
-    _defineProperty(this, "hideOrgUnitsTree", () => {
-      this.setState({
-        showOrgUnitsTree: false
-      });
-    });
-
-    _defineProperty(this, "getUserOrgUnitsFromIds", ids => {
-      return _d2UiOrgUnitDialog.userOrgUnits.filter(ou => ids.includes(ou.id));
-    });
-
-    _defineProperty(this, "onLevelChange", event => {
-      const levelIds = event.target.value.filter(id => !!id);
-      this.props.onSelect({
-        dimensionId: _predefinedDimensions.DIMENSION_ID_ORGUNIT,
-        items: [...this.props.ouItems.filter(ou => !_ouIdHelper.ouIdHelper.hasLevelPrefix(ou.id)), ...levelIds.map(id => {
-          const levelOu = this.state.ouLevels.find(ou => ou.id === id);
-          return { ...levelOu,
-            id: _ouIdHelper.ouIdHelper.addLevelPrefix(levelOu.id)
-          };
-        })]
+const DYNAMIC_ORG_UNITS = [_ouIdHelper.USER_ORG_UNIT, _ouIdHelper.USER_ORG_UNIT_CHILDREN, _ouIdHelper.USER_ORG_UNIT_GRANDCHILDREN];
+
+const OrgUnitDimension = ({
+  roots,
+  selected,
+  onSelect
+}) => {
+  const [ouLevels, setOuLevels] = (0, _react.useState)([]);
+  const [ouGroups, setOuGroups] = (0, _react.useState)([]);
+  const dataEngine = (0, _appRuntime.useDataEngine)();
+
+  const onSelectItems = selectedItem => {
+    const {
+      id,
+      checked,
+      displayName,
+      path
+    } = selectedItem;
+    let result = [...selected];
+
+    if (checked && DYNAMIC_ORG_UNITS.includes(id)) {
+      result = [...result.filter(item => DYNAMIC_ORG_UNITS.includes(item.id) || _ouIdHelper.ouIdHelper.hasLevelPrefix(item.id) || _ouIdHelper.ouIdHelper.hasGroupPrefix(item.id)), {
+        id,
+        displayName
+      }];
+    } else if (checked) {
+      result.push({
+        id,
+        path,
+        name: displayName
       });
-    });
-
-    _defineProperty(this, "onGroupChange", event => {
-      const groupIds = event.target.value.filter(id => !!id);
-      this.props.onSelect({
-        dimensionId: _predefinedDimensions.DIMENSION_ID_ORGUNIT,
-        items: [...this.props.ouItems.filter(ou => !_ouIdHelper.ouIdHelper.hasGroupPrefix(ou.id)), ...groupIds.map(id => {
-          const groupOu = this.state.ouGroups.find(ou => ou.id === id);
-          return { ...groupOu,
-            id: _ouIdHelper.ouIdHelper.addGroupPrefix(id)
-          };
-        })]
-      });
-    });
+    } else {
+      result = [...result.filter(item => item.id !== id)];
+    }
 
-    _defineProperty(this, "onDeselectAllClick", () => this.props.onDeselect({
+    onSelect({
       dimensionId: _predefinedDimensions.DIMENSION_ID_ORGUNIT,
-      itemIdsToRemove: this.props.ouItems.map(ou => ou.id)
-    }));
-
-    _defineProperty(this, "loadOrgUnitTree", (d2, displayNameProperty) => {
-      (0, _organisationUnits.apiFetchOrganisationUnits)(d2, displayNameProperty).then(rootLevel => rootLevel.toArray()).then(roots => {
-        this.setState({
-          roots,
-          root: roots[0]
-        });
-      });
+      items: result
     });
-
-    _defineProperty(this, "loadOrgUnitGroups", (d2, displayNameProperty) => {
-      (0, _organisationUnits.apiFetchOrganisationUnitGroups)(d2, displayNameProperty).then(organisationUnitGroups => this.setState({
-        ouGroups: organisationUnitGroups
-      }));
+  };
+
+  const clearSelection = () => onSelect({
+    dimensionId: _predefinedDimensions.DIMENSION_ID_ORGUNIT,
+    items: []
+  });
+
+  (0, _react.useEffect)(() => {
+    const doFetchOuLevels = async () => {
+      const result = await (0, _organisationUnits.apiFetchOrganisationUnitLevels)(dataEngine);
+      result.sort((a, b) => a.level > b.level ? 1 : -1);
+      setOuLevels(result);
+    };
+
+    const doFetchOuGroups = async () => {
+      const result = await (0, _organisationUnits.apiFetchOrganisationUnitGroups)(dataEngine);
+      setOuGroups(result);
+    };
+
+    doFetchOuLevels();
+    doFetchOuGroups();
+  }, [dataEngine]);
+
+  const onLevelChange = ids => {
+    const items = ids.map(id => ({
+      id: _ouIdHelper.ouIdHelper.addLevelPrefix(id),
+      name: ouLevels.find(level => level.id === id).displayName
+    }));
+    onSelect({
+      dimensionId: _predefinedDimensions.DIMENSION_ID_ORGUNIT,
+      items: [...selected.filter(ou => !_ouIdHelper.ouIdHelper.hasLevelPrefix(ou.id)), ...items]
     });
+  };
 
-    _defineProperty(this, "loadOrgUnitLevels", d2 => {
-      (0, _organisationUnits.apiFetchOrganisationUnitLevels)(d2).then(organisationUnitLevels => this.setState({
-        ouLevels: (0, _sortBy.default)(organisationUnitLevels, ['level'])
-      }));
+  const onGroupChange = ids => {
+    const items = ids.map(id => ({
+      id: _ouIdHelper.ouIdHelper.addGroupPrefix(id),
+      name: ouGroups.find(group => group.id === id).displayName
+    }));
+    onSelect({
+      dimensionId: _predefinedDimensions.DIMENSION_ID_ORGUNIT,
+      items: [...selected.filter(ou => !_ouIdHelper.ouIdHelper.hasGroupPrefix(ou.id)), ...items]
     });
-
-    _defineProperty(this, "handleOrgUnitClick", (event, orgUnit) => {
-      const selected = this.props.ouItems;
-
-      if (selected.some(ou => ou.path === orgUnit.path)) {
-        this.props.onDeselect({
-          dimensionId: _predefinedDimensions.DIMENSION_ID_ORGUNIT,
-          itemIdsToRemove: [orgUnit.id]
-        });
-      } else {
-        this.props.onSelect({
-          dimensionId: _predefinedDimensions.DIMENSION_ID_ORGUNIT,
-          items: [...selected, { ...orgUnit,
-            name: orgUnit.name || orgUnit.displayName
-          }]
-        });
+  };
+
+  const getSummary = () => {
+    let summary;
+
+    if (selected.length) {
+      const numberOfOrgUnits = selected.filter(item => !DYNAMIC_ORG_UNITS.includes(item.id) && !_ouIdHelper.ouIdHelper.hasLevelPrefix(item.id) && !_ouIdHelper.ouIdHelper.hasGroupPrefix(item.id)).length;
+      const numberOfLevels = selected.filter(item => _ouIdHelper.ouIdHelper.hasLevelPrefix(item.id)).length;
+      const numberOfGroups = selected.filter(item => _ouIdHelper.ouIdHelper.hasGroupPrefix(item.id)).length;
+      const numberOfUserOrgUnits = selected.filter(item => DYNAMIC_ORG_UNITS.includes(item.id)).length;
+      const parts = [];
+
+      if (numberOfOrgUnits) {
+        parts.push(_index.default.t('{{count}} org units', {
+          count: numberOfOrgUnits,
+          defaultValue: '{{count}} org unit',
+          defaultValue_plural: '{{count}} org units'
+        }));
       }
-    });
 
-    _defineProperty(this, "handleUserOrgUnitClick", (event, checked) => {
-      if (checked) {
-        if (!this.state.selected.length) {
-          this.setState({
-            selected: this.props.ouItems.slice()
-          });
-        }
-
-        this.props.onSelect({
-          dimensionId: _predefinedDimensions.DIMENSION_ID_ORGUNIT,
-          items: [...this.props.ouItems.filter(ou => this.userOrgUnitIds.includes(ou.id)), _d2UiOrgUnitDialog.userOrgUnits.find(ou => ou.id === event.target.name)]
-        });
-      } else {
-        if (this.props.ouItems.length === 1 && this.state.selected.length > 0) {
-          this.props.onSelect({
-            dimensionId: _predefinedDimensions.DIMENSION_ID_ORGUNIT,
-            items: this.state.selected
-          });
-        } else {
-          this.props.onDeselect({
-            dimensionId: _predefinedDimensions.DIMENSION_ID_ORGUNIT,
-            itemIdsToRemove: [event.target.name]
-          });
-        }
+      if (numberOfLevels) {
+        parts.push(_index.default.t('{{count}} levels', {
+          count: numberOfLevels,
+          defaultValue: '{{count}} level',
+          defaultValue_plural: '{{count}} levels'
+        }));
       }
-    });
 
-    _defineProperty(this, "handleMultipleOrgUnitsSelect", orgUnits => {
-      const selected = this.props.ouItems;
-      this.props.onSelect({
-        dimensionId: _predefinedDimensions.DIMENSION_ID_ORGUNIT,
-        items: [...selected, ...orgUnits.reduce((obj, ou) => {
-          // avoid duplicates when clicking "Select children" multiple times
-          if (!selected.find(i => i.id === ou.id)) {
-            obj.push({ ...ou,
-              name: ou.name || ou.displayName
-            });
-          }
-
-          return obj;
-        }, [])]
-      });
-    });
+      if (numberOfGroups) {
+        parts.push(_index.default.t('{{count}} groups', {
+          count: numberOfGroups,
+          defaultValue: '{{count}} group',
+          defaultValue_plural: '{{count}} groups'
+        }));
+      }
 
-    _defineProperty(this, "render", () => {
-      const ids = this.props.ouItems.map(ou => ou.id);
-      const selected = this.props.ouItems.filter(ou => !this.userOrgUnitIds.includes(ou.id) && !_ouIdHelper.ouIdHelper.hasLevelPrefix(ou.id) && !_ouIdHelper.ouIdHelper.hasGroupPrefix(ou.id));
-      const userOrgUnits = this.getUserOrgUnitsFromIds(ids);
-      const level = ids.filter(_ouIdHelper.ouIdHelper.hasLevelPrefix).map(_ouIdHelper.ouIdHelper.removePrefix);
-      const group = ids.filter(_ouIdHelper.ouIdHelper.hasGroupPrefix).map(_ouIdHelper.ouIdHelper.removePrefix);
-      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, this.state.root && this.state.showOrgUnitsTree && /*#__PURE__*/_react.default.createElement(_d2UiOrgUnitDialog.OrgUnitSelector, {
-        d2: this.props.d2,
-        root: this.state.root,
-        roots: this.state.roots,
-        selected: selected,
-        userOrgUnits: userOrgUnits,
-        level: level,
-        group: group,
-        levelOptions: this.state.ouLevels,
-        groupOptions: this.state.ouGroups,
-        onLevelChange: this.onLevelChange,
-        onGroupChange: this.onGroupChange,
-        onDeselectAllClick: this.onDeselectAllClick,
-        handleUserOrgUnitClick: this.handleUserOrgUnitClick,
-        handleOrgUnitClick: this.handleOrgUnitClick,
-        handleMultipleOrgUnitsSelect: this.handleMultipleOrgUnitsSelect,
-        checkboxColor: "secondary",
-        deselectAllTooltipFontColor: _ui.colors.grey900,
-        deselectAllTooltipBackgroundColor: _ui.colors.grey300,
-        displayNameProperty: this.props.displayNameProperty,
-        isUserDataViewFallback: true
-      }), !this.state.root && /*#__PURE__*/_react.default.createElement("div", {
-        className: "jsx-".concat(_OrgUnitDimension.default.__hash) + " " + "loader"
-      }, /*#__PURE__*/_react.default.createElement(_ui.CircularLoader, null)), /*#__PURE__*/_react.default.createElement(_style.default, {
-        id: _OrgUnitDimension.default.__hash
-      }, _OrgUnitDimension.default));
-    });
+      if (numberOfUserOrgUnits) {
+        parts.push(_index.default.t('{{count}} user org units', {
+          count: numberOfUserOrgUnits,
+          defaultValue: '{{count}} user org unit',
+          defaultValue_plural: '{{count}} user org units'
+        }));
+      }
 
-    this.state = defaultState;
-    this.userOrgUnitIds = _d2UiOrgUnitDialog.userOrgUnits.map(ou => ou.id);
-    this.loadOrgUnitTree(props.d2, props.displayNameProperty);
-    this.loadOrgUnitGroups(props.d2, props.displayNameProperty);
-    this.loadOrgUnitLevels(props.d2);
-  }
-
-  componentDidUpdate(prevProps) {
-    const previousId = prevProps.current ? prevProps.current.id : null;
-    const currentId = this.props.current ? this.props.current.id : null; // remount org units selector component to ensure
-    // only selected org units are expanded
-
-    if (previousId !== currentId) {
-      this.hideOrgUnitsTree();
-      setTimeout(this.showOrgUnitsTree, 0);
+      summary = _index.default.t('Selected: ') + parts.join(', ');
+    } else {
+      summary = _index.default.t('Nothing selected');
     }
-  }
 
-}
+    return summary;
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: `jsx-${_OrgUnitDimension.default.__hash}` + " " + "container"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: `jsx-${_OrgUnitDimension.default.__hash}` + " " + "userOrgUnitsWrapper"
+  }, /*#__PURE__*/_react.default.createElement(_ui.Checkbox, {
+    label: _index.default.t('User organisation unit'),
+    checked: selected.some(item => item.id === _ouIdHelper.USER_ORG_UNIT),
+    onChange: ({
+      checked
+    }) => onSelectItems({
+      id: _ouIdHelper.USER_ORG_UNIT,
+      checked,
+      displayName: _index.default.t('User organisation unit')
+    }),
+    dense: true
+  }), /*#__PURE__*/_react.default.createElement(_ui.Checkbox, {
+    label: _index.default.t('User sub-units'),
+    checked: selected.some(item => item.id === _ouIdHelper.USER_ORG_UNIT_CHILDREN),
+    onChange: ({
+      checked
+    }) => onSelectItems({
+      id: _ouIdHelper.USER_ORG_UNIT_CHILDREN,
+      checked,
+      displayName: _index.default.t('User sub-units')
+    }),
+    dense: true
+  }), /*#__PURE__*/_react.default.createElement(_ui.Checkbox, {
+    label: _index.default.t('User sub-x2-units'),
+    checked: selected.some(item => item.id === _ouIdHelper.USER_ORG_UNIT_GRANDCHILDREN),
+    onChange: ({
+      checked
+    }) => onSelectItems({
+      id: _ouIdHelper.USER_ORG_UNIT_GRANDCHILDREN,
+      checked,
+      displayName: _index.default.t('User sub-x2-units')
+    }),
+    dense: true
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: `jsx-${_OrgUnitDimension.default.__hash}` + " " + ((0, _classnames.default)('orgUnitTreeWrapper', {
+      disabled: selected.some(item => DYNAMIC_ORG_UNITS.includes(item.id))
+    }) || "")
+  }, /*#__PURE__*/_react.default.createElement(_ui.OrganisationUnitTree, {
+    roots: roots,
+    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)],
+    selected: selected.filter(item => !DYNAMIC_ORG_UNITS.includes(item.id) && !_ouIdHelper.ouIdHelper.hasLevelPrefix(item.id) && !_ouIdHelper.ouIdHelper.hasGroupPrefix(item.id)).map(item => item.path),
+    onChange: onSelectItems,
+    dataTest: 'org-unit-tree'
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: `jsx-${_OrgUnitDimension.default.__hash}` + " " + "selectsWrapper"
+  }, /*#__PURE__*/_react.default.createElement(_ui.MultiSelect, {
+    selected: ouLevels.length ? selected.filter(item => _ouIdHelper.ouIdHelper.hasLevelPrefix(item.id)).map(item => _ouIdHelper.ouIdHelper.removePrefix(item.id)) : [],
+    onChange: ({
+      selected
+    }) => onLevelChange(selected),
+    placeholder: _index.default.t('Select a level'),
+    loading: !ouLevels.length,
+    dense: true,
+    dataTest: 'org-unit-level-select'
+  }, ouLevels.map(level => /*#__PURE__*/_react.default.createElement(_ui.MultiSelectOption, {
+    key: level.id,
+    value: level.id,
+    label: level.displayName,
+    dataTest: `org-unit-level-select-option-${level.id}`
+  }))), /*#__PURE__*/_react.default.createElement(_ui.MultiSelect, {
+    selected: ouGroups.length ? selected.filter(item => _ouIdHelper.ouIdHelper.hasGroupPrefix(item.id)).map(item => _ouIdHelper.ouIdHelper.removePrefix(item.id)) : [],
+    onChange: ({
+      selected
+    }) => onGroupChange(selected),
+    placeholder: _index.default.t('Select a group'),
+    loading: !ouGroups.length,
+    dense: true,
+    dataTest: 'org-unit-group-select'
+  }, ouGroups.map(group => /*#__PURE__*/_react.default.createElement(_ui.MultiSelectOption, {
+    key: group.id,
+    value: group.id,
+    label: group.displayName,
+    dataTest: `org-unit-group-select-option-${group.id}`
+  })))), /*#__PURE__*/_react.default.createElement("div", {
+    className: `jsx-${_OrgUnitDimension.default.__hash}` + " " + "summaryWrapper"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: `jsx-${_OrgUnitDimension.default.__hash}` + " " + "summaryText"
+  }, getSummary()), /*#__PURE__*/_react.default.createElement("div", {
+    className: `jsx-${_OrgUnitDimension.default.__hash}` + " " + "deselectButton"
+  }, /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    secondary: true,
+    small: true,
+    onClick: clearSelection,
+    disabled: !selected.length
+  }, _index.default.t('Deselect all')))), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: _OrgUnitDimension.default.__hash
+  }, _OrgUnitDimension.default));
+};
 
 OrgUnitDimension.propTypes = {
-  current: _propTypes.default.object,
-  d2: _propTypes.default.object,
-  displayNameProperty: _propTypes.default.string,
-  ouItems: _propTypes.default.array,
-  onDeselect: _propTypes.default.func,
+  roots: _propTypes.default.arrayOf(_propTypes.default.string),
+  selected: _propTypes.default.arrayOf(_propTypes.default.shape({
+    id: _propTypes.default.string.isRequired,
+    name: _propTypes.default.string.isRequired,
+    path: _propTypes.default.string
+  })),
   onSelect: _propTypes.default.func
 };
 var _default = OrgUnitDimension;