Skip to content

Commit

Permalink
Unique ID
Browse files Browse the repository at this point in the history
  • Loading branch information
ibolton336 committed Apr 2, 2024
1 parent 8041a12 commit e227f7a
Showing 3 changed files with 37 additions and 42 deletions.
8 changes: 7 additions & 1 deletion client/src/app/api/models.ts
Original file line number Diff line number Diff line change
@@ -799,6 +799,12 @@ export interface AssessmentsWithArchetype {
archetype: Archetype;
assessments: Assessment[];
}

export enum StakeholderType {
Stakeholder = "Stakeholder",
StakeholderGroup = "Stakeholder Group",
}
export interface GroupedStakeholderRef extends Ref {
group: "Stakeholder" | "Stakeholder Group";
group: StakeholderType.Stakeholder | StakeholderType.StakeholderGroup;
uniqueId: string;
}
42 changes: 15 additions & 27 deletions client/src/app/components/Autocomplete.tsx
Original file line number Diff line number Diff line change
@@ -18,8 +18,6 @@ import {
const toString = (input: string | (() => string)) =>
typeof input === "function" ? input() : input;

const createCompositeKey = (group: string, id: number) => `${group}:${id}`;

export interface AutocompleteOptionProps {
/** id for the option */
id: number;
@@ -34,6 +32,9 @@ export interface AutocompleteOptionProps {
tooltip?: string | (() => string);
/** the group to display the option in */
group?: string;

/** a unique identifier for the option */
uniqueId?: string;
}

export interface IAutocompleteProps {
@@ -151,12 +152,10 @@ export const Autocomplete: React.FC<IAutocompleteProps> = ({
};

/** lookup the option matching the itemId and add as a selection */
const addSelectionByItemId = (compositeKey: string) => {
const [group, idStr] = compositeKey.split(":");
const id = parseInt(idStr, 10);
const addSelectionByItemId = (identifier: string) => {
const matchingOption = options.find(
({ id: optionId, group: optionGroup }) =>
id === optionId && group === optionGroup
(option) =>
option.uniqueId === identifier || option.id.toString() === identifier
);

if (matchingOption) {
@@ -186,12 +185,10 @@ export const Autocomplete: React.FC<IAutocompleteProps> = ({
const handleTab = (event: React.KeyboardEvent) => {
if (filteredOptions.length === 1) {
const option = filteredOptions[0];
const compositeKey =
isGrouped && option.group
? createCompositeKey(option.group, option.id)
: option.id.toString();

const identifier = option.uniqueId || option.id.toString();
setInputValue(toString(option.name));
setTabSelectedItemId(compositeKey);
setTabSelectedItemId(identifier);
event.preventDefault();
}
setMenuIsOpen(false);
@@ -248,21 +245,16 @@ export const Autocomplete: React.FC<IAutocompleteProps> = ({
closeMenu && setMenuIsOpen(false);
};

/** add the text of the selected menu item to the selected items */
const handleMenuItemOnSelect = (
event: React.MouseEvent<Element, MouseEvent> | undefined,
itemId: number,
groupName?: string
option: AutocompleteOptionProps
) => {
if (!event) return;
event.stopPropagation();
focusTextInput(true);

const compositeKey =
isGrouped && groupName
? createCompositeKey(groupName, itemId)
: itemId.toString();
addSelectionByItemId(compositeKey);
const identifier = option.uniqueId || option.id.toString();
addSelectionByItemId(identifier);
};

/** close the menu when a click occurs outside of the menu or text input group */
@@ -339,13 +331,9 @@ export const Autocomplete: React.FC<IAutocompleteProps> = ({
<MenuList>
{groupOptions.map((option) => (
<MenuItem
key={option.id}
key={option.uniqueId}
itemId={option.id.toString()}
onClick={(e) =>
isGrouped
? handleMenuItemOnSelect(e, option.id, groupName)
: handleMenuItemOnSelect(e, option.id)
}
onClick={(e) => handleMenuItemOnSelect(e, option)}
>
{toString(option.name)}
</MenuItem>
@@ -394,7 +382,7 @@ export const Autocomplete: React.FC<IAutocompleteProps> = ({
<MenuItem
key={option.id}
itemId={option.id.toString()}
onClick={(e) => handleMenuItemOnSelect(e, option.id)}
onClick={(e) => handleMenuItemOnSelect(e, option)}
>
{toString(option.name)}
</MenuItem>
Original file line number Diff line number Diff line change
@@ -14,7 +14,7 @@ import { useFetchStakeholders } from "@app/queries/stakeholders";
import { useFetchStakeholderGroups } from "@app/queries/stakeholdergroups";
import { HookFormAutocomplete } from "@app/components/HookFormPFFields";
import { AssessmentWizardValues } from "../assessment-wizard/assessment-wizard";
import { GroupedStakeholderRef, Ref } from "@app/api/models";
import { GroupedStakeholderRef, Ref, StakeholderType } from "@app/api/models";

export const AssessmentStakeholdersForm: React.FC = () => {
const { t } = useTranslation();
@@ -64,23 +64,24 @@ export const AssessmentStakeholdersForm: React.FC = () => {
);
};

const createCompositeKey = (group: string, id: number) => `${group}:${id}`;

export const combineAndGroupStakeholderRefs = (
stakeholderRefs: Ref[],
stakeholderGroupRefs: Ref[]
): GroupedStakeholderRef[] => {
) => {
const groupedRefs: GroupedStakeholderRef[] = [
...stakeholderRefs.map((ref) => createGroupedRef(ref, "Stakeholder")),
...stakeholderGroupRefs.map((ref) =>
createGroupedRef(ref, "Stakeholder Group")
),
...stakeholderRefs.map((ref) => ({
...ref,
uniqueId: createCompositeKey("Stakeholder", ref.id),
group: StakeholderType.Stakeholder,
})),
...stakeholderGroupRefs.map((ref) => ({
...ref,
uniqueId: createCompositeKey("Stakeholder Group", ref.id),
group: StakeholderType.StakeholderGroup,
})),
];

return groupedRefs;
};

export const createGroupedRef = (
ref: Ref,
group: "Stakeholder" | "Stakeholder Group"
): GroupedStakeholderRef => ({
...ref,
group,
});

0 comments on commit e227f7a

Please sign in to comment.