Skip to main content

Organization unit selector

This component can be used to provide a way for the user to switch between organizations. This is done via a dropdown in the app header that contains the available organization units in a tree-like structure.

Usage#

Props#

interface IOrganizationUnitSelectorProps {  // Optional Props  onSelectOrganizationUnitCallback?: (selectedOrganizationUnit: IOrganizationUnitStructure) => void;  isLogoutEnabled?: boolean;}

Add the OrganizationUnitSelector component to the application header#

Adding the component usually means rendering it in the application header. If required, a callback can be passed in to handle additional logic such as setting the organization request header in the service sdk.

import { useCallback } from 'react';import { Header } from '@springtree/eva-suite-ui';import {  OrganizationUnitSelector,  IOrganizationUnitStructure,} from '@springtree/eva-suite-composite';
const AppHeader = () => {  // ...
  const handleCurrentOrganizationUnitChanged = useCallback(    (newOrganizationUnit: IOrganizationUnitStructure) => {      // app-wide consequence of ou changing such as setting the request header      setServiceSetting('requestedOrganizationUnitID', newOrganizationUnit.ID);    },    [],  );
  return (    <Header      appDetails=""      appName={appName}      onLogoClick={onLogoClick}      onLogoutClick={onLogoutClick}      hideDashboardButton={hideDashboardButton}    >      <OrganizationUnitSelector        onSelectOrganizationUnitCallback={handleCurrentOrganizationUnitChanged}        isLogoutEnabled={!!onLogoutClick}      />    </Header>  );};

The useOrganizationUnitSelector hook#

Use this hook in your page to enable the orgnaization unit selector for that page. If required, a callback can be passed in to handle additional logic such as refetching an overview list with the new selected organization unit.

import useIncomingShipments from 'hooks/useIncomingShipments';import { useOrganizationUnitSelector } from '@springtree/eva-suite-composite';import { hooks } from '@springtree/eva-sdk-react-recoil';import { getUserTaskCountsServiceState } from 'store/get-user-task-counts';
const IncomingShipmentOverviewPage = () => {    const { refetch, availableTasks, availableTasksLoading, loadingWithoutPreviousResponse } = useIncomingShipments();  const setCountsStale = hooks.useSetServiceStale({ serviceState: getUserTaskCountsServiceState });
    useOrganizationUnitSelector({      onSelectedOrganizationUnitChanged: () => {        setCountsStale();        refetch();      },    });
  return (    // ...  );}

Additional options are available to control whether the selector should hide or reset when navigating away from the page. By default, it will hide for other pages, but will not reset the selected organization.

The useSelectedOrganizationUnit hook#

This hooks provides access to access to the selected organization unit and callbacks to set or reset it imperatively if such is required. For example it can be used if you need information on your selected organization for filters etc.

import { useSelectedOrganizationUnit } from '@springtree/eva-suite-composite';import {  replenishmentProductsLimitSelector,  replenishmentProductsStartSelector,  replenishmentProductsServiceState,} from '../state/replenishment-products.state';
const useReplenishmentProducts = () => {  const [start, setStart] = useRecoilState(replenishmentProductsStartSelector);  const [limit, setLimit] = useRecoilState(replenishmentProductsLimitSelector);
  const { selectedOrganizationUnit } = useSelectedOrganizationUnit();
  const newRequest = useMemo<EVA.Replenishment.ListReplenishmentProducts | undefined>(() => {    return selectedOrganizationUnit      ? {          PageConfig: {            Start: start,            Limit: limit,            Filter: {              OrganizationUnitID: selectedOrganizationUnit.ID,            },          },        }      : undefined;  }, [selectedOrganizationUnit, limit, productIdsFromFilters, start]);
  const [request, setRequest] = useRecoilState(replenishmentProductsServiceState.request);
  useEffect(() => {    if (!isEqual(request, newRequest)) {      setRequest(newRequest);    }  }, [newRequest, request, setRequest]);};

Translations#

Add these translations to the module. Make sure there are no duplicates.

{  "organization-unit-selector.filter.label": "Organization unit",  "organization-unit-selector.no-results.label": "No results"}