From 51550fc543fd1f24380d27b8d98d062e77001259 Mon Sep 17 00:00:00 2001 From: Sean Fong Date: Tue, 27 Aug 2024 15:35:51 +0930 Subject: [PATCH] Reduce stuttering of items using dynamic answerExpressions --- .../src/components/Alert.styles.ts | 5 ++- .../ChoiceRadioAnswerValueSetFields.tsx | 43 +++++++++++++------ .../ChoiceRadioAnswerValueSetItem.tsx | 2 + .../ChoiceSelectAnswerValueSetFields.tsx | 30 +++++++------ .../OpenChoiceRadioAnswerValueSetFields.tsx | 29 +++++++------ .../src/hooks/useValueSetCodings.ts | 3 +- 6 files changed, 69 insertions(+), 43 deletions(-) diff --git a/packages/smart-forms-renderer/src/components/Alert.styles.ts b/packages/smart-forms-renderer/src/components/Alert.styles.ts index 4a9f2dc64..2c784cff0 100644 --- a/packages/smart-forms-renderer/src/components/Alert.styles.ts +++ b/packages/smart-forms-renderer/src/components/Alert.styles.ts @@ -20,11 +20,12 @@ import Box from '@mui/material/Box'; import ListItemIcon from '@mui/material/ListItemIcon'; export const StyledAlert = styled(Box, { - shouldForwardProp: (prop) => prop !== 'color' -})<{ color: 'info' | 'error' }>(({ theme, color }) => ({ + shouldForwardProp: (prop) => prop !== 'color' && prop != 'height' +})<{ color: 'info' | 'error'; height?: number }>(({ theme, color, height }) => ({ display: 'flex', alignItems: 'center', padding: theme.spacing(1.25), + height: height ?? 'auto', borderRadius: Number(theme.shape.borderRadius) * 1.5, backgroundColor: alpha( color === 'error' ? theme.palette.error.light : theme.palette.info.light, diff --git a/packages/smart-forms-renderer/src/components/FormComponents/ChoiceItems/ChoiceRadioAnswerValueSetFields.tsx b/packages/smart-forms-renderer/src/components/FormComponents/ChoiceItems/ChoiceRadioAnswerValueSetFields.tsx index f1c0a2e73..9ebe35f67 100644 --- a/packages/smart-forms-renderer/src/components/FormComponents/ChoiceItems/ChoiceRadioAnswerValueSetFields.tsx +++ b/packages/smart-forms-renderer/src/components/FormComponents/ChoiceItems/ChoiceRadioAnswerValueSetFields.tsx @@ -31,10 +31,13 @@ import Tooltip from '@mui/material/Tooltip'; import Button from '@mui/material/Button'; import { grey } from '@mui/material/colors'; import Fade from '@mui/material/Fade'; +import CircularProgress from '@mui/material/CircularProgress'; +import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'; interface ChoiceRadioAnswerValueSetFieldsProps { qItem: QuestionnaireItem; options: QuestionnaireItemAnswerOption[]; + optionsLoading: boolean; valueRadio: string | null; readOnly: boolean; calcExpUpdated: boolean; @@ -47,6 +50,7 @@ function ChoiceRadioAnswerValueSetFields(props: ChoiceRadioAnswerValueSetFieldsP const { qItem, options, + optionsLoading, valueRadio, readOnly, calcExpUpdated, @@ -57,6 +61,17 @@ function ChoiceRadioAnswerValueSetFields(props: ChoiceRadioAnswerValueSetFieldsP const orientation = getChoiceOrientation(qItem) ?? ChoiceItemOrientation.Vertical; + if (optionsLoading) { + return ( + + + + Loading options... + + + ); + } + if (options.length > 0) { return ( @@ -94,23 +109,25 @@ function ChoiceRadioAnswerValueSetFields(props: ChoiceRadioAnswerValueSetFieldsP if (terminologyError.error) { return ( - - - - There was an error fetching options from the terminology server for{' '} - {terminologyError.answerValueSet} - - + + + + + There was an error fetching options from the terminology server for{' '} + {terminologyError.answerValueSet} + + + ); } return ( - - - - Unable to fetch options from the questionnaire or launch context - - + + + + No options available + + ); } diff --git a/packages/smart-forms-renderer/src/components/FormComponents/ChoiceItems/ChoiceRadioAnswerValueSetItem.tsx b/packages/smart-forms-renderer/src/components/FormComponents/ChoiceItems/ChoiceRadioAnswerValueSetItem.tsx index 400a1e66a..395b13b5f 100644 --- a/packages/smart-forms-renderer/src/components/FormComponents/ChoiceItems/ChoiceRadioAnswerValueSetItem.tsx +++ b/packages/smart-forms-renderer/src/components/FormComponents/ChoiceItems/ChoiceRadioAnswerValueSetItem.tsx @@ -91,6 +91,7 @@ function ChoiceRadioAnswerValueSetItem(props: ChoiceRadioAnswerValueSetItemProps - - There are no options available for {terminologyError.answerValueSet} - - + + + + + There was an error fetching options from the terminology server for{' '} + {terminologyError.answerValueSet} + + + ); } - // Fallback when something went wrong return ( - - - - Unable to fetch options from the questionnaire or launch context - - + + + + No options available + + ); } diff --git a/packages/smart-forms-renderer/src/components/FormComponents/OpenChoiceItems/OpenChoiceRadioAnswerValueSetFields.tsx b/packages/smart-forms-renderer/src/components/FormComponents/OpenChoiceItems/OpenChoiceRadioAnswerValueSetFields.tsx index 676077903..ca9473767 100644 --- a/packages/smart-forms-renderer/src/components/FormComponents/OpenChoiceItems/OpenChoiceRadioAnswerValueSetFields.tsx +++ b/packages/smart-forms-renderer/src/components/FormComponents/OpenChoiceItems/OpenChoiceRadioAnswerValueSetFields.tsx @@ -26,6 +26,7 @@ import { getChoiceOrientation } from '../../../utils/choice'; import type { TerminologyError } from '../../../hooks/useValueSetCodings'; import { StyledAlert } from '../../Alert.styles'; import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'; +import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'; import Typography from '@mui/material/Typography'; import { Fade } from '@mui/material'; import Box from '@mui/material/Box'; @@ -97,23 +98,25 @@ function OpenChoiceRadioAnswerValueSetFields(props: OpenChoiceRadioAnswerValueSe if (terminologyError.error) { return ( - - - - There was an error fetching options from the terminology server for{' '} - {terminologyError.answerValueSet} - - + + + + + There was an error fetching options from the terminology server for{' '} + {terminologyError.answerValueSet} + + + ); } return ( - - - - Unable to fetch options from the questionnaire or launch context - - + + + + No options available + + ); } diff --git a/packages/smart-forms-renderer/src/hooks/useValueSetCodings.ts b/packages/smart-forms-renderer/src/hooks/useValueSetCodings.ts index dee121cc7..f31cbbd71 100644 --- a/packages/smart-forms-renderer/src/hooks/useValueSetCodings.ts +++ b/packages/smart-forms-renderer/src/hooks/useValueSetCodings.ts @@ -131,9 +131,8 @@ function useValueSetCodings( // Dynamic answerExpression const answerExpression: AnswerExpression | null = answerExpressions[qItem.linkId] ?? null; useEffect(() => { - let newCodings: Coding[] = []; if (answerExpression && Array.isArray(answerExpression.options)) { - newCodings = convertAnswerOptionsToCodings(answerExpression.options); + const newCodings = convertAnswerOptionsToCodings(answerExpression.options); if (!_isEqual(newCodings, codings)) { setCodings(newCodings); onDynamicValueSetCodingsChange();