Organization Unit Set Selector

This component allows you to select Organization Unit Sets with or without subsets, and it also allows you to create a Custom or an AdHoc Organization Unit Set.

This component is built using the CreateOUSetForm and OUSetAutocomplet components.

Props

The component only needs the ID (number) / IDs (number[]) of the selected set(s) and a way to modify that data, so that you can easily use it in requests outside of this component.

You can use this component with Formik, you can control whether the user can create a Custom / AdHoc Set (when selecting sets with subsets), and you can also define an initial state for the SegmentedButton (if you have an initial selection, then the component will set this state based on it).

The typings are designed in a way that they won't allow invalid combinations of these props.

Prop types (click to show / hide)

interface IOUSetSelectProps {
  // Props to use with Formik  error?: boolean;  helperText?: string;  onBlur?: (    event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>,  ) => void;
  options?: {    canCreateOUSet?: boolean; // You can control whether the Create (+) button is shown    mixed?: boolean; // You can cotrol whether you can select OUSets from both autocompletes                     // (with or without subsets), or if upon switching the SegmentedButton                     // the selection should be cleared (see OUSet Autocomplete | Mixed section)  };  initialSwitchOption?: 'single' | 'multi'; // You can control the initial state of the SegmentedButton - when you have a initial selection, then the type(s) of the OUSet(s) determines the initial state
  // Use either one or the other, but not both (this will result in an error)!
      // Props to use for single selection      selectedOUSetID: number | undefined;      setSelectedOUSetID: (newSelection: number | undefined) => void;
      // Props to use for multi selection      multi: true;      selectedOUSetIDs: number[] | undefined;      setSelectedOUSetIDs: (newSelection: number[] | undefined) => void;}

Usage

Single Selection

Use it like this when you want to select a single Organization Unit Set (number | undefined).

import { useState } from 'react';import { OUSetSelect } from '@springtree/eva-suite-composite';
const Example = () => {  const [selectedOUSetID, setSelectedOUSetID] = useState<number | undefined>(undefined);
  return (    <OUSetSelect      options={{ canCreateOUSet: true }}      selectedOUSetID={selectedOUSetID}      setSelectedOUSetID={setSelectedOUSetID}    />  );};

Multi Selection

Use it like this when you want to select multiple Organization Unit Sets (number[] | undefined).

import { useState } from 'react';import { OUSetSelect } from '@springtree/eva-suite-composite';
const Example = () => {  const [selectedOUSetIDs, setSelectedOUSetIDs] = useState<number[] | undefined>(undefined);
  return (    <OUSetSelect      options={{ canCreateOUSet: true }}      multi      selectedOUSetIDs={selectedOUSetIDs}      setSelectedOUSetIDs={setSelectedOUSetIDs}    />  );};

Translations

Place these lines in your translations file(s) (remove duplicates)

{  "generic.label.no": "No",  "generic.label.yes": "Yes",  "generic.action.clear": "Clear",  "generic.action.cancel": "Cancel",  "generic.action.create": "Create",  "generic.action.search": "Search",  "create-ouset-form.name.label": "Name",  "ouset-subsets-list.table.headers.id": "ID",  "ouset-subsets-list.table.headers.name": "Name",  "ouset-subsets-list.table.headers.type": "Type",  "ouset-selector.multi.subsets.tooltip": "Subsets",  "ouset-subsets-list.table.headers.type.0": "System",  "ouset-subsets-list.table.headers.type.1": "Custom",  "ouset-subsets-list.table.headers.type.2": "Ad-hoc",  "ouset-subsets-list.table.headers.actions": "Actions",  "create-ouset-form.name.required": "Name is required",  "ouset-selector.switch.multi": "Organization unit set",  "create-ouset-form.title": "Create organization unit set",  "ouset-selector.switch.single": "Single organization unit",  "create-ouset-form.ouset-type.required": "Type is required",  "ouset-subsets-list.table.headers.has-subsets": "Has Subsets",  "ouset-selector.multi.create.tooltip": "Create organization unit set",  "create-ouset-form.subsets.created": "Organization unit subsets added",  "ouset-subsets-list.table.actions.search.label": "Filter on name or ID",  "create-ouset-form.ousets-link-tooltip": "Go to organization unit sets",  "create-ouset-form.included-sets.label": "Include organization unit set",  "create-ouset-form.excluded-sets.label": "Exclude organization unit set",  "ouset-subsets-list.table.row.open-in-organizations": "Open in organizations",  "ouset-selector.multi.autocomplete.label": "Select set of organization units",  "ouset-selector.single.autocomplete.label": "Select single organization unit",  "ouset-selector.switch.label": "Select a single or multiple organization units",  "create-ouset-form.ouset-type.custom.label": "Reuse custom organization unit set (save)",  "ouset-selector.multi.autocomplete.helper-text": "All shops within this set will be called",  "ouset-selector.single.autocomplete.helper-text": "All shops within this set will be called",  "ouset-subsets-list.table.title": "Filtered subsets of organization unit set {ouSetName} ({total})",  "create-ouset-form.subsets.included-error": "Failed to include organization unit: {organizationUnit}",  "create-ouset-form.subsets.excluded-error": "Failed to exclude organization unit: {organizationUnit}",  "create-ouset-form.ouset-type.ad-hoc.label": "Only use custom organization unit set for this selection",}