@aehrc/smart-forms-renderer 0.7.2 → 0.8.1

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,137 @@
+/*
+ * 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,
+  PropsWithParentIsReadOnlyAttribute
+} from '../../../interfaces/renderProps.interface';
+import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+import type { AlertColor } from '@mui/material/Alert';
+
+interface OpenChoiceAutocompleteFieldProps
+  extends PropsWithIsTabledAttribute,
+    PropsWithParentIsReadOnlyAttribute {
+  qItem: QuestionnaireItem;
+  options: Coding[];
+  valueAutocomplete: string | Coding;
+  input: string;
+  loading: boolean;
+  feedback: { message: string; color: AlertColor } | null;
+  readOnly: boolean;
+  onInputChange: (newInput: string) => void;
+  onValueChange: (newValue: Coding | string | null) => void;
+  onUnfocus: () => void;
+}
+
+function OpenChoiceAutocompleteField(props: OpenChoiceAutocompleteFieldProps) {
+  const {
+    qItem,
+    options,
+    valueAutocomplete,
+    input,
+    loading,
+    feedback,
+    readOnly,
+    isTabled,
+    onInputChange,
+    onValueChange,
+    onUnfocus
+  } = props;
+
+  const { displayUnit, displayPrompt, 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;

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

@@ -15,47 +15,43 @@
  * limitations under the License.
  */
 
-import type { ChangeEvent, SyntheticEvent } from 'react';
 import React, { useState } from 'react';
-import Autocomplete from '@mui/material/Autocomplete';
-import Box from '@mui/material/Box';
-import CircularProgress from '@mui/material/CircularProgress';
-import Fade from '@mui/material/Fade';
 import Grid from '@mui/material/Grid';
-import Tooltip from '@mui/material/Tooltip';
 
 import type { Coding, QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 
 import { createEmptyQrItem } from '../../../utils/qrItem';
-import { StandardTextField } from '../Textfield.styles';
 import { FullWidthFormComponentBox } from '../../Box.styles';
-import SearchIcon from '@mui/icons-material/Search';
 import useDebounce from '../../../hooks/useDebounce';
 import useTerminologyServerQuery from '../../../hooks/useTerminologyServerQuery';
-import WarningAmberIcon from '@mui/icons-material/WarningAmber';
-import InfoIcon from '@mui/icons-material/Info';
-import DoneIcon from '@mui/icons-material/Done';
-import ErrorIcon from '@mui/icons-material/Error';
 import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
+  PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler
 } from '../../../interfaces/renderProps.interface';
 import { AUTOCOMPLETE_DEBOUNCE_DURATION } from '../../../utils/debounce';
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
 import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+import OpenChoiceAutocompleteField from './OpenChoiceAutocompleteField';
+import useReadOnly from '../../../hooks/useReadOnly';
 
 interface OpenChoiceAutocompleteItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
     PropsWithIsRepeatedAttribute,
-    PropsWithIsTabledAttribute {
+    PropsWithIsTabledAttribute,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem;
 }
 
 function OpenChoiceAutocompleteItem(props: OpenChoiceAutocompleteItemProps) {
-  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+  const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
+
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
+  const { displayInstructions } = useRenderingExtensions(qItem);
+
   const qrOpenChoice = qrItem ?? createEmptyQrItem(qItem);
 
   // Init input value
@@ -69,11 +65,6 @@ function OpenChoiceAutocompleteItem(props: OpenChoiceAutocompleteItemProps) {
     valueAutocomplete = '';
   }
 
-  // Get additional rendering extensions
-  const { displayUnit, displayPrompt, displayInstructions, readOnly, entryFormat } =
-    useRenderingExtensions(qItem);
-
-  // Query ontoserver for options
   const maxList = 10;
 
   const [input, setInput] = useState('');
@@ -91,7 +82,7 @@ function OpenChoiceAutocompleteItem(props: OpenChoiceAutocompleteItemProps) {
   }
 
   // Event handlers
-  function handleValueChange(_: SyntheticEvent<Element, Event>, newValue: Coding | string | null) {
+  function handleValueChange(newValue: Coding | string | null) {
     if (newValue === null) {
       setInput('');
       newValue = '';
@@ -114,95 +105,55 @@ function OpenChoiceAutocompleteItem(props: OpenChoiceAutocompleteItemProps) {
     }
   }
 
-  const openChoiceAutocomplete = (
-    <>
-      <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={handleValueChange}
-          filterOptions={(x) => x}
-          renderInput={(params) => (
-            <StandardTextField
-              {...params}
-              value={input}
-              onBlur={() => {
-                // set answer to current input when text field is unfocused
-                if (!valueAutocomplete && input !== '') {
-                  onQrItemChange({
-                    ...createEmptyQrItem(qItem),
-                    answer: [{ valueString: input }]
-                  });
-                }
-              }}
-              onChange={(e: ChangeEvent<HTMLInputElement>) => setInput(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>
-    </>
-  );
+  function handleUnfocus() {
+    // set answer to current input when text field is unfocused
+    if (!valueAutocomplete && input !== '') {
+      onQrItemChange({
+        ...createEmptyQrItem(qItem),
+        answer: [{ valueString: input }]
+      });
+    }
+  }
 
   if (isRepeated) {
-    return <>{openChoiceAutocomplete}</>;
+    return (
+      <OpenChoiceAutocompleteField
+        qItem={qItem}
+        options={options}
+        valueAutocomplete={valueAutocomplete}
+        input={input}
+        loading={loading}
+        feedback={feedback ?? null}
+        readOnly={readOnly}
+        isTabled={isTabled}
+        onInputChange={(newValue) => setInput(newValue)}
+        onValueChange={handleValueChange}
+        onUnfocus={handleUnfocus}
+      />
+    );
   }
 
   return (
     <FullWidthFormComponentBox>
       <Grid container columnSpacing={6}>
         <Grid item xs={5}>
-          <LabelWrapper qItem={qItem} />
+          <LabelWrapper qItem={qItem} readOnly={readOnly} />
         </Grid>
         <Grid item xs={7}>
-          {openChoiceAutocomplete}
-          <DisplayInstructions displayInstructions={displayInstructions} />
+          <OpenChoiceAutocompleteField
+            qItem={qItem}
+            options={options}
+            valueAutocomplete={valueAutocomplete}
+            input={input}
+            loading={loading}
+            feedback={feedback ?? null}
+            readOnly={readOnly}
+            isTabled={isTabled}
+            onInputChange={(newValue) => setInput(newValue)}
+            onValueChange={handleValueChange}
+            onUnfocus={handleUnfocus}
+          />
+          <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
         </Grid>
       </Grid>
     </FullWidthFormComponentBox>

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

@@ -0,0 +1,112 @@
+/*
+ * 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 { StyledFormGroup } from '../Item.styles';
+import { ChoiceItemOrientation } from '../../../interfaces/choice.enum';
+import CheckboxSingle from '../ItemParts/CheckboxSingle';
+import CheckboxSingleWithOpenLabel from '../ItemParts/CheckboxSingleWithOpenLabel';
+import type { QuestionnaireItem, QuestionnaireResponseItemAnswer } from 'fhir/r4';
+
+interface OpenChoiceCheckboxAnswerOptionFieldsProps {
+  qItem: QuestionnaireItem;
+  answers: QuestionnaireResponseItemAnswer[];
+  openLabelText: string | null;
+  openLabelValue: string;
+  openLabelChecked: boolean;
+  readOnly: boolean;
+  orientation: ChoiceItemOrientation;
+  onValueChange: (changedOptionValue: string | null, changedOpenLabelValue: string | null) => void;
+  onOpenLabelCheckedChange: (checked: boolean) => void;
+  onOpenLabelInputChange: (input: string) => void;
+}
+
+function OpenChoiceCheckboxAnswerOptionFields(props: OpenChoiceCheckboxAnswerOptionFieldsProps) {
+  const {
+    qItem,
+    answers,
+    openLabelText,
+    openLabelValue,
+    openLabelChecked,
+    readOnly,
+    orientation,
+    onValueChange,
+    onOpenLabelCheckedChange,
+    onOpenLabelInputChange
+  } = props;
+
+  return (
+    <StyledFormGroup row={orientation === ChoiceItemOrientation.Horizontal}>
+      {qItem.answerOption?.map((option) => {
+        if (option['valueCoding']) {
+          return (
+            <CheckboxSingle
+              key={option.valueCoding.code ?? ''}
+              value={option.valueCoding.code ?? ''}
+              label={option.valueCoding.display ?? `${option.valueCoding.code}`}
+              readOnly={readOnly}
+              isChecked={answers.some(
+                (answer) => JSON.stringify(answer) === JSON.stringify(option)
+              )}
+              onCheckedChange={(changedValue) => onValueChange(changedValue, null)}
+            />
+          );
+        }
+
+        if (option['valueString']) {
+          return (
+            <CheckboxSingle
+              key={option.valueString}
+              value={option.valueString}
+              label={option.valueString}
+              readOnly={readOnly}
+              isChecked={answers.some((answer) => answer.valueString === option.valueString)}
+              onCheckedChange={(changedValue) => onValueChange(changedValue, null)}
+            />
+          );
+        }
+
+        if (option['valueInteger']) {
+          return (
+            <CheckboxSingle
+              key={option.valueInteger}
+              value={option.valueInteger.toString()}
+              label={option.valueInteger.toString()}
+              readOnly={readOnly}
+              isChecked={answers.some((answer) => answer.valueInteger === option.valueInteger)}
+              onCheckedChange={(changedValue) => onValueChange(changedValue, null)}
+            />
+          );
+        }
+
+        return null;
+      })}
+
+      {openLabelText ? (
+        <CheckboxSingleWithOpenLabel
+          value={openLabelValue}
+          label={openLabelText}
+          isChecked={openLabelChecked}
+          onCheckedChange={onOpenLabelCheckedChange}
+          onInputChange={onOpenLabelInputChange}
+        />
+      ) : null}
+    </StyledFormGroup>
+  );
+}
+
+export default OpenChoiceCheckboxAnswerOptionFields;