@dhis2-ui/organisation-unit-tree 10.16.2 → 10.16.3

package/src/organisation-unit-node/organisation-unit-node.js

@@ -0,0 +1,190 @@
+import { Node } from '@dhis2-ui/node'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { leftTrimToRootId } from '../helpers/index.js'
+import i18n from '../locales/index.js'
+import { orgUnitPathPropType } from '../prop-types.js'
+import { ErrorMessage } from './error-message.js'
+import { hasDescendantSelectedPaths } from './has-descendant-selected-paths.js'
+import { Label } from './label/index.js'
+import { LoadingSpinner } from './loading-spinner.js'
+import { OrganisationUnitNodeChildren } from './organisation-unit-node-children.js'
+import { useOpenState } from './use-open-state.js'
+import { useOrgData } from './use-org-data/index.js'
+
+export const OrganisationUnitNode = ({
+    autoExpandLoadingError,
+    dataTest,
+    disableSelection,
+    displayName,
+    displayProperty,
+    expanded,
+    highlighted,
+    id,
+    isUserDataViewFallback,
+    path,
+    renderNodeLabel,
+    rootId,
+    selected,
+    singleSelection,
+    filter,
+    suppressAlphabeticalSorting,
+    onChange,
+    onChildrenLoaded,
+    onCollapse,
+    onExpand,
+}) => {
+    const orgData = useOrgData(id, {
+        isUserDataViewFallback,
+        displayName,
+    })
+
+    const strippedPath = leftTrimToRootId(path, rootId)
+    const node = {
+        // guarantee that displayName and id are avaiable before data loaded
+        displayName,
+        id,
+        ...(orgData.data || {}),
+        // do not override strippedPath with path from loaded data
+        path: strippedPath,
+    }
+    const hasChildren = !!node.children && node.children > 0
+
+    const hasSelectedDescendants = hasDescendantSelectedPaths(
+        strippedPath,
+        selected,
+        rootId
+    )
+    const isHighlighted = highlighted.includes(path)
+    const { open, onToggleOpen } = useOpenState({
+        autoExpandLoadingError,
+        errorMessage: orgData.error && orgData.error.toString(),
+        path: strippedPath,
+        expanded,
+        onExpand,
+        onCollapse,
+    })
+
+    const isSelected = !!selected.find((curPath) =>
+        curPath.match(new RegExp(`${strippedPath}$`))
+    )
+
+    const labelContent = renderNodeLabel({
+        disableSelection,
+        hasChildren,
+        hasSelectedDescendants,
+        loading: orgData.loading,
+        error: orgData.error,
+        selected,
+        open,
+        path,
+        singleSelection,
+        node,
+        label: displayName,
+        checked: isSelected,
+        highlighted: isHighlighted,
+    })
+
+    const label = (
+        <Label
+            node={node}
+            fullPath={path}
+            open={open}
+            loading={orgData.loading}
+            checked={isSelected}
+            rootId={rootId}
+            onChange={onChange}
+            dataTest={`${dataTest}-label`}
+            selected={selected}
+            hasChildren={hasChildren}
+            highlighted={isHighlighted}
+            onToggleOpen={onToggleOpen}
+            disableSelection={disableSelection}
+            singleSelection={singleSelection}
+            hasSelectedDescendants={hasSelectedDescendants}
+        >
+            {labelContent}
+        </Label>
+    )
+
+    /**
+     * No children means no arrow, therefore we have to provide something.
+     * While "loading" is true, "hasChildren" is false
+     * There are some possible children variants as content of this node:
+     *
+     * 1. Nothing; There are no children
+     * 2. Placeholder: There are children, but the Node is closed (show arrow)
+     * 3. Error: There are children and loading information somehow failed
+     * 4. Child nodes: There are children and the node is open
+     */
+    const showPlaceholder = hasChildren && !open && !orgData.error
+    const showChildNodes = hasChildren && open && !orgData.error
+
+    return (
+        <Node
+            dataTest={`${dataTest}-node`}
+            open={open}
+            onOpen={onToggleOpen}
+            onClose={onToggleOpen}
+            component={label}
+            icon={orgData.loading && <LoadingSpinner />}
+        >
+            {orgData.error && (
+                <ErrorMessage dataTest={dataTest}>
+                    {i18n.t('Could not load children')}
+                </ErrorMessage>
+            )}
+            {showPlaceholder && <span data-test={`${dataTest}-placeholder`} />}
+            {showChildNodes && (
+                <OrganisationUnitNodeChildren
+                    // Prevent cirular imports
+                    OrganisationUnitNode={OrganisationUnitNode}
+                    node={node}
+                    autoExpandLoadingError={autoExpandLoadingError}
+                    dataTest={dataTest}
+                    disableSelection={disableSelection}
+                    displayProperty={displayProperty}
+                    expanded={expanded}
+                    filter={filter}
+                    highlighted={highlighted}
+                    isUserDataViewFallback={isUserDataViewFallback}
+                    onChange={onChange}
+                    onChildrenLoaded={onChildrenLoaded}
+                    onCollapse={onCollapse}
+                    onExpand={onExpand}
+                    parentPath={path}
+                    renderNodeLabel={renderNodeLabel}
+                    rootId={rootId}
+                    selected={selected}
+                    singleSelection={singleSelection}
+                    suppressAlphabeticalSorting={suppressAlphabeticalSorting}
+                />
+            )}
+        </Node>
+    )
+}
+
+OrganisationUnitNode.propTypes = {
+    dataTest: PropTypes.string.isRequired,
+    id: PropTypes.string.isRequired,
+    renderNodeLabel: PropTypes.func.isRequired,
+    rootId: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+
+    autoExpandLoadingError: PropTypes.bool,
+    disableSelection: PropTypes.bool,
+    displayName: PropTypes.string,
+    displayProperty: PropTypes.oneOf(['displayName', 'displayShortName']),
+    expanded: PropTypes.arrayOf(orgUnitPathPropType),
+    filter: PropTypes.arrayOf(orgUnitPathPropType),
+    highlighted: PropTypes.arrayOf(orgUnitPathPropType),
+    isUserDataViewFallback: PropTypes.bool,
+    path: orgUnitPathPropType,
+    selected: PropTypes.arrayOf(orgUnitPathPropType),
+    singleSelection: PropTypes.bool,
+    suppressAlphabeticalSorting: PropTypes.bool,
+
+    onChildrenLoaded: PropTypes.func,
+    onCollapse: PropTypes.func,
+    onExpand: PropTypes.func,
+}

package/src/organisation-unit-node/use-open-state.js

@@ -0,0 +1,37 @@
+import { useEffect, useState } from 'react'
+
+/**
+ * @param {Object} args
+ * @param {string} args.path
+ * @param {string} [args.errorMessage]
+ * @param {string} [args.autoExpandLoadingError]
+ * @param {string[]} args.expanded
+ * @param {Function} [args.onExpand]
+ * @param {Function} [args.onCollapse]
+ * @returns {Object}
+ */
+export const useOpenState = ({
+    path,
+    expanded,
+    onExpand,
+    onCollapse,
+    errorMessage,
+    autoExpandLoadingError,
+}) => {
+    const autoExpand = autoExpandLoadingError && !!errorMessage
+    const [openedOnceDueToError, setOpenedOnce] = useState(!!errorMessage)
+
+    useEffect(() => {
+        if (autoExpand && !openedOnceDueToError) {
+            onExpand({ path })
+            setOpenedOnce(true)
+        }
+    }, [autoExpand, openedOnceDueToError])
+
+    const open =
+        (autoExpand && !openedOnceDueToError) || !!expanded.includes(path)
+    const onToggleOpen = () =>
+        !open ? onExpand({ path }) : onCollapse({ path })
+
+    return { open, onToggleOpen, openedOnceDueToError }
+}

package/src/organisation-unit-node/use-open-state.test.js

@@ -0,0 +1,111 @@
+import { renderHook } from '@testing-library/react'
+import { useOpenState } from './use-open-state.js'
+
+describe('OrganisationUnitTree - useOpenState', () => {
+    const onExpand = jest.fn()
+    const onCollapse = jest.fn()
+
+    afterEach(() => {
+        onExpand.mockClear()
+        onCollapse.mockClear()
+    })
+
+    it('should set open to false if the path is not in the expanded array', () => {
+        const path = '/foo'
+        const expanded = ['/bar']
+        const expected = false
+        const { result } = renderHook(() => useOpenState({ path, expanded }))
+        const { open: actual } = result.current
+
+        expect(actual).toBe(expected)
+    })
+
+    it('should set open to true if the path is in the expanded array', () => {
+        const path = '/foo'
+        const expanded = ['/foo']
+        const expected = true
+        const { result } = renderHook(() => useOpenState({ path, expanded }))
+        const { open: actual } = result.current
+
+        expect(actual).toBe(expected)
+    })
+
+    it('should call onCollapse when calling onToggleOpen while open is true', () => {
+        const path = '/foo'
+        const expanded = ['/foo']
+
+        const { result } = renderHook(() =>
+            useOpenState({ path, expanded, onCollapse })
+        )
+        const { onToggleOpen } = result.current
+        onToggleOpen()
+
+        expect(onCollapse).toHaveBeenCalledWith({ path: '/foo' })
+        expect(onExpand).toHaveBeenCalledTimes(0)
+    })
+
+    it('should call onExpand when calling onToggleOpen while open is false', () => {
+        const path = '/foo'
+        const expanded = []
+
+        const { result } = renderHook(() =>
+            useOpenState({ path, expanded, onExpand })
+        )
+        const { onToggleOpen } = result.current
+        onToggleOpen()
+
+        expect(onExpand).toHaveBeenCalledWith({ path: '/foo' })
+        expect(onCollapse).toHaveBeenCalledTimes(0)
+    })
+
+    it('should set openedOnceDueToError to true if there is an error and autoExpandLoadingError is true', async () => {
+        const path = '/foo'
+        const { result } = renderHook(() =>
+            useOpenState({
+                autoExpandLoadingError: true,
+                errorMessage: 'error message',
+                path,
+                expanded: [],
+                onExpand,
+                onCollapse,
+            })
+        )
+
+        const { openedOnceDueToError } = result.current
+        expect(openedOnceDueToError).toBe(true)
+    })
+
+    it('should not set open to true if there is an error but autoExpandLoadingError is falsy', () => {
+        const path = '/foo'
+        const { result } = renderHook(() =>
+            useOpenState({
+                autoExpandLoadingError: undefined,
+                errorMessage: 'error message',
+                path,
+                expanded: [],
+                onExpand,
+                onCollapse,
+            })
+        )
+        const { open } = result.current
+
+        expect(open).toBe(false)
+    })
+
+    it('should not set open to true if autoExpandLoadingError is true but there is no error', () => {
+        const path = '/foo'
+        const { result } = renderHook(() =>
+            useOpenState({
+                autoExpandLoadingError: true,
+                errorMessage: '',
+                path,
+                expanded: [],
+                onExpand,
+                onCollapse,
+            })
+        )
+        const { open } = result.current
+
+        expect(open).toBe(false)
+    })
+})

package/src/organisation-unit-node/use-org-children.js

@@ -0,0 +1,63 @@
+import { useDataQuery } from '@dhis2/app-runtime'
+import { useMemo, useEffect, useRef } from 'react'
+import { sortNodeChildrenAlphabetically } from '../helpers/index.js'
+
+const ORG_DATA_QUERY = {
+    orgUnit: {
+        resource: `organisationUnits`,
+        id: ({ id }) => id,
+        params: ({ displayProperty }) => ({
+            fields:
+                displayProperty === 'displayName'
+                    ? 'children[id,path,displayName]'
+                    : `children[id,path,${displayProperty}~rename(displayName)]`,
+        }),
+    },
+}
+
+/**
+ * @param {string[]} ids
+ * @param {Object} options
+ * @param {string} options.displayName
+ * @param {boolean} [options.withChildren]
+ * @param {'displayName'|'displayShortName'} [options.displayProperty]
+ * @returns {Object}
+ */
+export const useOrgChildren = ({
+    node,
+    suppressAlphabeticalSorting,
+    onComplete,
+    displayProperty = 'displayName',
+}) => {
+    const onCompleteCalledRef = useRef(false)
+    const { called, loading, error, data } = useDataQuery(ORG_DATA_QUERY, {
+        variables: { id: node.id, displayProperty },
+    })
+
+    const orgChildren = useMemo(() => {
+        if (!data) {
+            return undefined
+        }
+
+        // undefined or zero
+        if (!node.children) {
+            return []
+        }
+
+        const { orgUnit } = data
+
+        return suppressAlphabeticalSorting
+            ? orgUnit.children
+            : sortNodeChildrenAlphabetically(orgUnit.children)
+    }, [data, node.children, suppressAlphabeticalSorting])
+
+    useEffect(() => {
+        if (onComplete && orgChildren && !onCompleteCalledRef.current) {
+            // For backwards compatibility: Pass entire node incl. children
+            onComplete({ ...node, children: orgChildren })
+            onCompleteCalledRef.current = true
+        }
+    }, [node, onComplete, orgChildren, onCompleteCalledRef])
+
+    return { called, loading, error: error || null, data: orgChildren }
+}