@aehrc/smart-forms-renderer 0.7.1 → 0.8.0

package/src/components/FormComponents/ChoiceItems/ChoiceSelectAnswerValueSetItem.tsx

@@ -15,27 +15,22 @@
  * limitations under the License.
  */
 
-import type { SyntheticEvent } from 'react';
 import React, { useEffect, useMemo } from 'react';
-import Autocomplete from '@mui/material/Autocomplete';
 import Grid from '@mui/material/Grid';
-import Typography from '@mui/material/Typography';
 
 import type { Coding, QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { createEmptyQrItem } from '../../../utils/qrItem';
-import { StandardTextField } from '../Textfield.styles';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import useValueSetCodings from '../../../hooks/useValueSetCodings';
 import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
-import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
   PropsWithQrItemChangeHandler
 } from '../../../interfaces/renderProps.interface';
-import { StyledAlert } from '../../Alert.styles';
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
 import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+import ChoiceSelectAnswerValueSetFields from './ChoiceSelectAnswerValueSetFields';
 
 interface ChoiceSelectAnswerValueSetItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
@@ -50,14 +45,13 @@ function ChoiceSelectAnswerValueSetItem(props: ChoiceSelectAnswerValueSetItemPro
 
   // Init input value
   const qrChoiceSelect = qrItem ?? createEmptyQrItem(qItem);
-  let valueCoding: Coding | undefined;
+  let valueCoding: Coding | null = null;
   if (qrChoiceSelect.answer) {
-    valueCoding = qrChoiceSelect.answer[0].valueCoding;
+    valueCoding = qrChoiceSelect.answer[0].valueCoding ?? null;
   }
 
   // Get additional rendering extensions
-  const { displayUnit, displayPrompt, displayInstructions, readOnly, entryFormat } =
-    useRenderingExtensions(qItem);
+  const { displayInstructions } = useRenderingExtensions(qItem);
 
   // Get codings/options from valueSet
   const { codings, serverError } = useValueSetCodings(qItem);
@@ -84,7 +78,7 @@ function ChoiceSelectAnswerValueSetItem(props: ChoiceSelectAnswerValueSetItemPro
   );
 
   // Event handlers
-  function handleChange(_: SyntheticEvent<Element, Event>, newValue: Coding | null) {
+  function handleChange(newValue: Coding | null) {
     if (newValue) {
       onQrItemChange({
         ...createEmptyQrItem(qItem),
@@ -95,56 +89,17 @@ function ChoiceSelectAnswerValueSetItem(props: ChoiceSelectAnswerValueSetItemPro
     onQrItemChange(createEmptyQrItem(qItem));
   }
 
-  const choiceSelectAnswerValueSet =
-    codings.length > 0 ? (
-      <Autocomplete
-        id={qItem.id}
-        options={codings}
-        getOptionLabel={(option) => `${option.display}`}
-        value={valueCoding ?? null}
-        onChange={handleChange}
-        openOnFocus
-        autoHighlight
-        sx={{ maxWidth: !isTabled ? 280 : 3000, minWidth: 160, flexGrow: 1 }}
-        size="small"
-        disabled={readOnly}
-        placeholder={entryFormat}
-        renderInput={(params) => (
-          <StandardTextField
-            isTabled={isTabled}
-            label={displayPrompt}
-            {...params}
-            InputProps={{
-              ...params.InputProps,
-              endAdornment: (
-                <>
-                  {params.InputProps.endAdornment}
-                  {displayUnit}
-                </>
-              )
-            }}
-            data-test="q-item-choice-dropdown-answer-value-set-field"
-          />
-        )}
+  if (isRepeated) {
+    return (
+      <ChoiceSelectAnswerValueSetFields
+        qItem={qItem}
+        codings={codings}
+        valueCoding={valueCoding}
+        serverError={serverError}
+        isTabled={isTabled}
+        onSelectChange={handleChange}
       />
-    ) : serverError ? (
-      <StyledAlert color="error">
-        <ErrorOutlineIcon color="error" sx={{ pr: 0.75 }} />
-        <Typography variant="subtitle2">
-          There was an error fetching options from the terminology server
-        </Typography>
-      </StyledAlert>
-    ) : (
-      <StyledAlert color="error">
-        <ErrorOutlineIcon color="error" sx={{ pr: 0.75 }} />
-        <Typography variant="subtitle2">
-          Unable to fetch options from the questionnaire or launch context
-        </Typography>
-      </StyledAlert>
     );
-
-  if (isRepeated) {
-    return <>{choiceSelectAnswerValueSet}</>;
   }
 
   return (
@@ -154,7 +109,14 @@ function ChoiceSelectAnswerValueSetItem(props: ChoiceSelectAnswerValueSetItemPro
           <LabelWrapper qItem={qItem} />
         </Grid>
         <Grid item xs={7}>
-          {choiceSelectAnswerValueSet}
+          <ChoiceSelectAnswerValueSetFields
+            qItem={qItem}
+            codings={codings}
+            valueCoding={valueCoding}
+            serverError={serverError}
+            isTabled={isTabled}
+            onSelectChange={handleChange}
+          />
           <DisplayInstructions displayInstructions={displayInstructions} />
         </Grid>
       </Grid>

package/src/components/FormComponents/DecimalItem/DecimalItem.tsx

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
@@ -36,6 +36,7 @@ import {
 } from '../../../utils/parseInputs';
 import { getDecimalPrecision } from '../../../utils/itemControl';
 import useDecimalCalculatedExpression from '../../../hooks/useDecimalCalculatedExpression';
+import useStringInput from '../../../hooks/useStringInput';
 
 interface DecimalItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
@@ -74,7 +75,7 @@ function DecimalItem(props: DecimalItemProps) {
 
     initialInput = precision ? valueDecimal.toFixed(precision) : valueDecimal.toString();
   }
-  const [input, setInput] = useState(initialInput);
+  const [input, setInput] = useStringInput(initialInput);
 
   // Perform validation checks
   const feedback = useValidationError(input, regexValidation, maxLength);

package/src/components/FormComponents/GridGroup/GridGroup.tsx

@@ -18,7 +18,7 @@
 import React, { useMemo } from 'react';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import type { PropsWithQrItemChangeHandler } from '../../../interfaces/renderProps.interface';
-import { createQrGroup, updateQrGroup } from '../../../utils/qrItem';
+import { createQrGroup, updateQrItemsInGroup } from '../../../utils/qrItem';
 import useHidden from '../../../hooks/useHidden';
 import { QGroupContainerBox } from '../../Box.styles';
 import Divider from '@mui/material/Divider';
@@ -66,7 +66,7 @@ function GridGroup(props: GridGroupProps) {
   // Event Handlers
   function handleRowChange(newQrItem: QuestionnaireResponseItem) {
     const updatedQrGroup: QuestionnaireResponseItem = { ...qrGroup };
-    updateQrGroup(newQrItem, null, updatedQrGroup, qItemsIndexMap);
+    updateQrItemsInGroup(newQrItem, null, updatedQrGroup, qItemsIndexMap);
     onQrItemChange(updatedQrGroup);
   }
 

package/src/components/FormComponents/GridGroup/GridRow.tsx

@@ -18,7 +18,7 @@
 import React, { useMemo } from 'react';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import type { PropsWithQrItemChangeHandler } from '../../../interfaces/renderProps.interface';
-import { createQrGroup, updateQrGroup } from '../../../utils/qrItem';
+import { createQrGroup, updateQrItemsInGroup } from '../../../utils/qrItem';
 import { GridAnswerTableCell, GridTextTableCell } from '../Tables/Table.styles';
 import SingleItem from '../SingleItem/SingleItem';
 import { getQrItemsIndex, mapQItemsIndex } from '../../../utils/mapItem';
@@ -52,7 +52,7 @@ function GridRow(props: GridRowProps) {
 
   function handleQrRowItemChange(newQrRowItem: QuestionnaireResponseItem) {
     const qrRow: QuestionnaireResponseItem = { ...row };
-    updateQrGroup(newQrRowItem, null, qrRow, qItemsIndexMap);
+    updateQrItemsInGroup(newQrRowItem, null, qrRow, qItemsIndexMap);
     onQrItemChange(qrRow);
   }
 

package/src/components/FormComponents/GroupItem/GroupItem.tsx

@@ -18,7 +18,7 @@
 import React, { useMemo } from 'react';
 import { getQrItemsIndex, mapQItemsIndex } from '../../../utils/mapItem';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
-import { createQrGroup, updateQrGroup } from '../../../utils/qrItem';
+import { createQrGroup, updateQrItemsInGroup } from '../../../utils/qrItem';
 import { QGroupContainerBox } from '../../Box.styles';
 import type {
   PropsWithIsRepeatedAttribute,
@@ -70,13 +70,13 @@ function GroupItem(props: GroupItemProps) {
   // Event Handlers
   function handleQrItemChange(newQrItem: QuestionnaireResponseItem) {
     const updatedQrGroup: QuestionnaireResponseItem = { ...qrGroup };
-    updateQrGroup(newQrItem, null, updatedQrGroup, qItemsIndexMap);
+    updateQrItemsInGroup(newQrItem, null, updatedQrGroup, qItemsIndexMap);
     onQrItemChange(updatedQrGroup);
   }
 
   function handleQrRepeatGroupChange(qrRepeatGroup: QrRepeatGroup) {
     const updatedQrGroup: QuestionnaireResponseItem = { ...qrGroup };
-    updateQrGroup(null, qrRepeatGroup, updatedQrGroup, qItemsIndexMap);
+    updateQrItemsInGroup(null, qrRepeatGroup, updatedQrGroup, qItemsIndexMap);
     onQrItemChange(updatedQrGroup);
   }
 

package/src/components/FormComponents/GroupItem/GroupItemSwitcher.tsx

@@ -21,8 +21,8 @@ import type {
   PropsWithQrRepeatGroupChangeHandler
 } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
-import { isSpecificItemControl } from '../../../utils/itemControl';
-import QItemGroupTable from '../Tables/QItemGroupTable';
+import { isSpecificItemControl } from '../../../utils';
+import GroupTable from '../Tables/GroupTable';
 import RepeatGroup from '../RepeatGroup/RepeatGroup';
 import { isRepeatItemAndNotCheckbox } from '../../../utils/qItem';
 import RepeatItem from '../RepeatItem/RepeatItem';
@@ -60,7 +60,7 @@ function GroupItemSwitcher(props: GroupItemSwitcherProps) {
 
     if (isSpecificItemControl(qItem, 'gtable')) {
       return (
-        <QItemGroupTable
+        <GroupTable
           qItem={qItem}
           qrItems={qrItems}
           groupCardElevation={groupCardElevation + 1}
@@ -100,7 +100,7 @@ function GroupItemSwitcher(props: GroupItemSwitcherProps) {
       // their qrItem array should always be empty
       if (isSpecificItemControl(qItem, 'gtable')) {
         return (
-          <QItemGroupTable
+          <GroupTable
             qItem={qItem}
             qrItems={[]}
             groupCardElevation={groupCardElevation + 1}

package/src/components/FormComponents/IntegerItem/IntegerItem.tsx

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
@@ -32,6 +32,7 @@ import IntegerField from './IntegerField';
 import useIntegerCalculatedExpression from '../../../hooks/useIntegerCalculatedExpression';
 import { parseValidInteger } from '../../../utils/parseInputs';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+import useNumberInput from '../../../hooks/useNumberInput';
 
 interface IntegerItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
@@ -65,7 +66,7 @@ function IntegerItem(props: IntegerItemProps) {
       valueInteger = Math.round(qrItem.answer[0].valueDecimal);
     }
   }
-  const [value, setValue] = useState(valueInteger);
+  const [value, setValue] = useNumberInput(valueInteger);
 
   // Perform validation checks
   const feedback = useValidationError(value.toString(), regexValidation, maxLength);

package/src/components/FormComponents/Item.styles.ts

@@ -20,11 +20,11 @@ import RadioGroup from '@mui/material/RadioGroup';
 import Typography from '@mui/material/Typography';
 import { styled } from '@mui/material/styles';
 
-export const QFormGroup = styled(FormGroup)(() => ({
+export const StyledFormGroup = styled(FormGroup)(() => ({
   marginBottom: 4
 }));
 
-export const QRadioGroup = styled(RadioGroup)(() => ({
+export const StyledRadioGroup = styled(RadioGroup)(() => ({
   marginBottom: 4
 }));
 

package/src/components/FormComponents/ItemParts/RadioAnswerOptionButtons.tsx

@@ -0,0 +1,72 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import ChoiceRadioSingle from '../ChoiceItems/ChoiceRadioSingle';
+import type { QuestionnaireItem } from 'fhir/r4';
+
+interface RadioAnswerOptionButtonsProps {
+  qItem: QuestionnaireItem;
+  readOnly: boolean;
+}
+
+function RadioAnswerOptionButtons(props: RadioAnswerOptionButtonsProps) {
+  const { qItem, readOnly } = props;
+
+  return (
+    <>
+      {qItem.answerOption?.map((option) => {
+        if (option['valueCoding']) {
+          return (
+            <ChoiceRadioSingle
+              key={option.valueCoding.code ?? ''}
+              value={option.valueCoding.code ?? ''}
+              label={option.valueCoding.display ?? `${option.valueCoding.code}`}
+              readOnly={readOnly}
+            />
+          );
+        }
+
+        if (option['valueString']) {
+          return (
+            <ChoiceRadioSingle
+              key={option.valueString}
+              value={option.valueString}
+              label={option.valueString}
+              readOnly={readOnly}
+            />
+          );
+        }
+
+        if (option['valueInteger']) {
+          return (
+            <ChoiceRadioSingle
+              key={option.valueInteger}
+              value={option.valueInteger.toString()}
+              label={option.valueInteger.toString()}
+              readOnly={readOnly}
+            />
+          );
+        }
+
+        return null;
+      })}
+    </>
+  );
+}
+
+export default RadioAnswerOptionButtons;

package/src/components/FormComponents/OpenChoiceItems/OpenChoiceAutocompleteField.tsx

@@ -0,0 +1,131 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import Box from '@mui/material/Box';
+import Autocomplete from '@mui/material/Autocomplete';
+import { StandardTextField } from '../Textfield.styles';
+import SearchIcon from '@mui/icons-material/Search';
+import CircularProgress from '@mui/material/CircularProgress';
+import Fade from '@mui/material/Fade';
+import Tooltip from '@mui/material/Tooltip';
+import InfoIcon from '@mui/icons-material/Info';
+import WarningAmberIcon from '@mui/icons-material/WarningAmber';
+import DoneIcon from '@mui/icons-material/Done';
+import ErrorIcon from '@mui/icons-material/Error';
+import type { Coding, QuestionnaireItem } from 'fhir/r4';
+import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
+import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+import type { AlertColor } from '@mui/material/Alert';
+
+interface OpenChoiceAutocompleteFieldProps extends PropsWithIsTabledAttribute {
+  qItem: QuestionnaireItem;
+  options: Coding[];
+  valueAutocomplete: string | Coding;
+  input: string;
+  loading: boolean;
+  feedback: { message: string; color: AlertColor } | null;
+  onInputChange: (newInput: string) => void;
+  onValueChange: (newValue: Coding | string | null) => void;
+  onUnfocus: () => void;
+}
+
+function OpenChoiceAutocompleteField(props: OpenChoiceAutocompleteFieldProps) {
+  const {
+    qItem,
+    options,
+    valueAutocomplete,
+    input,
+    loading,
+    feedback,
+    isTabled,
+    onInputChange,
+    onValueChange,
+    onUnfocus
+  } = props;
+
+  // Get additional rendering extensions
+  const { displayUnit, displayPrompt, readOnly, entryFormat } = useRenderingExtensions(qItem);
+
+  return (
+    <Box display="flex">
+      <Autocomplete
+        id={qItem.id}
+        value={valueAutocomplete}
+        options={options}
+        getOptionLabel={(option) => (typeof option === 'string' ? option : `${option.display}`)}
+        disabled={readOnly}
+        loading={loading}
+        loadingText={'Fetching results...'}
+        clearOnEscape
+        freeSolo
+        autoHighlight
+        sx={{ maxWidth: !isTabled ? 280 : 3000, minWidth: 220, flexGrow: 1 }}
+        placeholder={entryFormat}
+        onChange={(_, newValue) => onValueChange(newValue)}
+        filterOptions={(x) => x}
+        renderInput={(params) => (
+          <StandardTextField
+            {...params}
+            value={input}
+            onBlur={onUnfocus}
+            onChange={(e) => onInputChange(e.target.value)}
+            isTabled={isTabled}
+            label={displayPrompt}
+            size="small"
+            InputProps={{
+              ...params.InputProps,
+              startAdornment: (
+                <>
+                  {!valueAutocomplete || valueAutocomplete === '' ? (
+                    <SearchIcon fontSize="small" sx={{ ml: 0.5 }} />
+                  ) : null}
+                  {params.InputProps.startAdornment}
+                </>
+              ),
+              endAdornment: (
+                <>
+                  {loading ? (
+                    <CircularProgress color="inherit" size={16} />
+                  ) : feedback ? (
+                    <Fade in={!!feedback} timeout={300}>
+                      <Tooltip title={feedback.message} arrow sx={{ ml: 1 }}>
+                        {
+                          {
+                            info: <InfoIcon fontSize="small" color="info" />,
+                            warning: <WarningAmberIcon fontSize="small" color="warning" />,
+                            success: <DoneIcon fontSize="small" color="success" />,
+                            error: <ErrorIcon fontSize="small" color="error" />
+                          }[feedback.color]
+                        }
+                      </Tooltip>
+                    </Fade>
+                  ) : null}
+                  {params.InputProps.endAdornment}
+                  {displayUnit}
+                </>
+              )
+            }}
+            data-test="q-item-open-choice-autocomplete-field"
+          />
+        )}
+      />
+    </Box>
+  );
+}
+
+export default OpenChoiceAutocompleteField;