@aehrc/smart-forms-renderer 0.3.0 → 0.5.0

package/src/components/FormComponents/QItemChoice/QItemChoiceRadioSingle.tsx

@@ -0,0 +1,41 @@
+/*
+ * 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 { FormControlLabel, Radio } from '@mui/material';
+
+interface Props {
+  value: string;
+  label: string;
+  readOnly: boolean;
+}
+
+function QItemChoiceRadioSingle(props: Props) {
+  const { value, label, readOnly } = props;
+
+  return (
+    <FormControlLabel
+      disabled={readOnly}
+      value={value}
+      control={<Radio size="small" />}
+      label={label}
+      sx={{ mr: 3 }}
+    />
+  );
+}
+
+export default QItemChoiceRadioSingle;

package/src/components/FormComponents/QItemChoice/QItemChoiceSelectAnswerOption.tsx

@@ -0,0 +1,130 @@
+/*
+ * 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, { Fragment } from 'react';
+import type { SelectChangeEvent } from '@mui/material';
+import { Grid, InputAdornment, MenuItem, Select } from '@mui/material';
+
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import { findInAnswerOptions, getQrChoiceValue } from '../../../utils/choice';
+import { createEmptyQrItem } from '../../../utils/qrItem';
+import { FullWidthFormComponentBox } from '../../Box.styles';
+import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+import type {
+  PropsWithIsRepeatedAttribute,
+  PropsWithIsTabledAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../../interfaces/renderProps.interface';
+import DisplayInstructions from '../DisplayItem/DisplayInstructions';
+import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+
+interface Props
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithIsRepeatedAttribute,
+    PropsWithIsTabledAttribute {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+}
+
+function QItemChoiceSelectAnswerOption(props: Props) {
+  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+
+  // Init input value
+  const qrChoiceSelect = qrItem ?? createEmptyQrItem(qItem);
+  let valueSelect = getQrChoiceValue(qrChoiceSelect);
+  if (valueSelect === null) {
+    valueSelect = '';
+  }
+
+  // Get additional rendering extensions
+  const { displayUnit, displayPrompt, displayInstructions, readOnly, entryFormat } =
+    useRenderingExtensions(qItem);
+
+  // Event handlers
+  function handleChange(e: SelectChangeEvent) {
+    if (qItem.answerOption) {
+      const qrAnswer = findInAnswerOptions(qItem.answerOption, e.target.value);
+      if (qrAnswer) {
+        onQrItemChange({ ...createEmptyQrItem(qItem), answer: [qrAnswer] });
+        return;
+      }
+    }
+    onQrItemChange(createEmptyQrItem(qItem));
+  }
+
+  const choiceSelectAnswerOption = (
+    <Select
+      id={qItem.id}
+      name={qItem.text}
+      value={valueSelect}
+      disabled={readOnly}
+      fullWidth
+      placeholder={entryFormat}
+      label={displayPrompt}
+      endAdornment={<InputAdornment position={'end'}>{displayUnit}</InputAdornment>}
+      sx={{ maxWidth: !isTabled ? 280 : 3000, minWidth: 160 }}
+      size="small"
+      onChange={handleChange}>
+      {qItem.answerOption?.map((option, index) => {
+        if (option['valueCoding']) {
+          return (
+            <MenuItem key={option.valueCoding.code} value={option.valueCoding.code}>
+              {option.valueCoding.display ?? option.valueCoding.code}
+            </MenuItem>
+          );
+        }
+
+        if (option['valueString']) {
+          return (
+            <MenuItem key={option.valueString} value={option.valueString}>
+              {option.valueString}
+            </MenuItem>
+          );
+        }
+
+        if (option['valueInteger']) {
+          return (
+            <MenuItem key={option.valueInteger} value={option.valueInteger.toString()}>
+              {option.valueInteger}
+            </MenuItem>
+          );
+        }
+
+        return <Fragment key={index} />;
+      })}
+    </Select>
+  );
+
+  const renderQItemChoiceSelectAnswerOption = isRepeated ? (
+    <>{choiceSelectAnswerOption}</>
+  ) : (
+    <FullWidthFormComponentBox data-test="q-item-choice-select-answer-option-box">
+      <Grid container columnSpacing={6}>
+        <Grid item xs={5}>
+          <LabelWrapper qItem={qItem} />
+        </Grid>
+        <Grid item xs={7}>
+          {choiceSelectAnswerOption}
+          <DisplayInstructions displayInstructions={displayInstructions} />
+        </Grid>
+      </Grid>
+    </FullWidthFormComponentBox>
+  );
+  return <>{renderQItemChoiceSelectAnswerOption}</>;
+}
+
+export default QItemChoiceSelectAnswerOption;

package/src/components/FormComponents/QItemChoice/QItemChoiceSelectAnswerValueSet.tsx

@@ -0,0 +1,162 @@
+/*
+ * 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 type { SyntheticEvent } from 'react';
+import React, { useEffect, useMemo } from 'react';
+import { Autocomplete, Grid, Typography } from '@mui/material';
+
+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';
+
+interface Props
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithIsRepeatedAttribute,
+    PropsWithIsTabledAttribute {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+}
+
+function QItemChoiceSelectAnswerValueSet(props: Props) {
+  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+
+  // Init input value
+  const qrChoiceSelect = qrItem ?? createEmptyQrItem(qItem);
+  let valueCoding: Coding | undefined;
+  if (qrChoiceSelect.answer) {
+    valueCoding = qrChoiceSelect.answer[0].valueCoding;
+  }
+
+  // Get additional rendering extensions
+  const { displayUnit, displayPrompt, displayInstructions, readOnly, entryFormat } =
+    useRenderingExtensions(qItem);
+
+  // Get codings/options from valueSet
+  const { codings, serverError } = useValueSetCodings(qItem);
+
+  valueCoding = useMemo(() => {
+    const updatedValueCoding = codings.find(
+      (queriedCoding) => queriedCoding.code === valueCoding?.code
+    );
+    return updatedValueCoding ?? valueCoding;
+  }, [codings, valueCoding]);
+
+  // Check and remove populated answer if it is a string
+  // NOTE: $populate will try to populate answer as valueCoding,
+  //       but will fail if answer provided is not within options
+  useEffect(
+    () => {
+      if (qrChoiceSelect.answer && qrChoiceSelect.answer[0].valueString) {
+        onQrItemChange(createEmptyQrItem(qItem));
+      }
+    },
+    // Only run effect once - on populate
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  // Event handlers
+  function handleChange(_: SyntheticEvent<Element, Event>, newValue: Coding | null) {
+    if (newValue) {
+      onQrItemChange({
+        ...createEmptyQrItem(qItem),
+        answer: [{ valueCoding: newValue }]
+      });
+      return;
+    }
+    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"
+          />
+        )}
+      />
+    ) : 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>
+    );
+
+  const renderQItemChoiceSelectAnswerValueSet = isRepeated ? (
+    <>{choiceSelectAnswerValueSet}</>
+  ) : (
+    <FullWidthFormComponentBox data-test="q-item-choice-dropdown-answer-value-set-box">
+      <Grid container columnSpacing={6}>
+        <Grid item xs={5}>
+          <LabelWrapper qItem={qItem} />
+        </Grid>
+        <Grid item xs={7}>
+          {choiceSelectAnswerValueSet}
+          <DisplayInstructions displayInstructions={displayInstructions} />
+        </Grid>
+      </Grid>
+    </FullWidthFormComponentBox>
+  );
+  return <>{renderQItemChoiceSelectAnswerValueSet}</>;
+}
+
+export default QItemChoiceSelectAnswerValueSet;

package/src/components/FormComponents/QItemOpenChoice/QItemOpenChoice.tsx

@@ -0,0 +1,104 @@
+/*
+ * 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 { QItemOpenChoiceControl } from '../../../interfaces/choice.enum';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import QItemOpenChoiceSelectAnswerOption from './QItemOpenChoiceSelectAnswerOption';
+import QItemOpenChoiceSelectAnswerValueSet from './QItemOpenChoiceSelectAnswerValueSet';
+import QItemOpenChoiceAutocomplete from './QItemOpenChoiceAutocomplete';
+import { getOpenChoiceControlType } from '../../../utils/openChoice';
+import { getChoiceOrientation } from '../../../utils/choice';
+import QItemOpenChoiceCheckboxAnswerOption from './QItemOpenChoiceCheckboxAnswerOption';
+import QItemOpenChoiceRadioAnswerOption from './QItemOpenChoiceRadioAnswerOption';
+import type {
+  PropsWithIsRepeatedAttribute,
+  PropsWithIsTabledAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../../interfaces/renderProps.interface';
+
+interface Props
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithIsRepeatedAttribute,
+    PropsWithIsTabledAttribute {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+}
+
+function QItemOpenChoice(props: Props) {
+  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+  const orientation = getChoiceOrientation(qItem);
+
+  switch (getOpenChoiceControlType(qItem)) {
+    case QItemOpenChoiceControl.Checkbox:
+      return (
+        <QItemOpenChoiceCheckboxAnswerOption
+          qItem={qItem}
+          qrItem={qrItem}
+          isRepeated={qItem['repeats'] ?? false}
+          onQrItemChange={onQrItemChange}
+          orientation={orientation}
+        />
+      );
+    case QItemOpenChoiceControl.Radio:
+      return (
+        <QItemOpenChoiceRadioAnswerOption
+          qItem={qItem}
+          qrItem={qrItem}
+          isRepeated={qItem['repeats'] ?? false}
+          onQrItemChange={onQrItemChange}
+          orientation={orientation}
+        />
+      );
+    case QItemOpenChoiceControl.Autocomplete:
+      return (
+        <QItemOpenChoiceAutocomplete
+          qItem={qItem}
+          qrItem={qrItem}
+          isRepeated={isRepeated}
+          isTabled={isTabled}
+          onQrItemChange={onQrItemChange}
+        />
+      );
+    case QItemOpenChoiceControl.Select:
+      if (qItem.answerValueSet) {
+        return (
+          <QItemOpenChoiceSelectAnswerValueSet
+            qItem={qItem}
+            qrItem={qrItem}
+            isRepeated={isRepeated}
+            isTabled={isTabled}
+            onQrItemChange={onQrItemChange}
+          />
+        );
+      } else {
+        return (
+          <QItemOpenChoiceSelectAnswerOption
+            qItem={qItem}
+            qrItem={qrItem}
+            isRepeated={isRepeated}
+            isTabled={isTabled}
+            onQrItemChange={onQrItemChange}
+          />
+        );
+      }
+    default:
+      return null;
+  }
+}
+
+export default QItemOpenChoice;

package/src/components/FormComponents/QItemOpenChoice/QItemOpenChoiceAutocomplete.tsx

@@ -0,0 +1,207 @@
+/*
+ * 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 type { ChangeEvent, SyntheticEvent } from 'react';
+import React, { useState } from 'react';
+import { Autocomplete, Box, CircularProgress, Fade, Grid, Tooltip } from '@mui/material';
+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 { getTerminologyServerUrl } from '../../../utils/valueSet';
+import type {
+  PropsWithIsRepeatedAttribute,
+  PropsWithIsTabledAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../../interfaces/renderProps.interface';
+import { AUTOCOMPLETE_DEBOUNCE_DURATION } from '../../../utils/debounce';
+import DisplayInstructions from '../DisplayItem/DisplayInstructions';
+import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+
+interface QItemOpenChoiceAutocompleteProps
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithIsRepeatedAttribute,
+    PropsWithIsTabledAttribute {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+}
+
+function QItemOpenChoiceAutocomplete(props: QItemOpenChoiceAutocompleteProps) {
+  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+  const qrOpenChoice = qrItem ?? createEmptyQrItem(qItem);
+
+  // Init input value
+  let valueAutocomplete: Coding | string | undefined;
+  if (qrOpenChoice.answer) {
+    const answer = qrOpenChoice.answer[0];
+    valueAutocomplete = answer.valueCoding ? answer.valueCoding : answer.valueString;
+  }
+
+  if (!valueAutocomplete) {
+    valueAutocomplete = '';
+  }
+
+  // Get additional rendering extensions
+  const { displayUnit, displayPrompt, displayInstructions, readOnly, entryFormat } =
+    useRenderingExtensions(qItem);
+
+  // Query ontoserver for options
+  const maxList = 10;
+
+  const [input, setInput] = useState('');
+  const debouncedInput = useDebounce(input, AUTOCOMPLETE_DEBOUNCE_DURATION);
+
+  const answerValueSetUrl = qItem.answerValueSet;
+  const terminologyServerUrl = getTerminologyServerUrl(qItem);
+  const { options, loading, feedback } = useTerminologyServerQuery(
+    answerValueSetUrl,
+    maxList,
+    input,
+    debouncedInput,
+    terminologyServerUrl
+  );
+
+  if (!answerValueSetUrl) return null;
+
+  // Event handlers
+  function handleValueChange(_: SyntheticEvent<Element, Event>, newValue: Coding | string | null) {
+    if (newValue === null) {
+      setInput('');
+      newValue = '';
+    }
+
+    if (typeof newValue === 'string') {
+      if (newValue !== '') {
+        onQrItemChange({
+          ...createEmptyQrItem(qItem),
+          answer: [{ valueString: newValue }]
+        });
+      } else {
+        onQrItemChange(createEmptyQrItem(qItem));
+      }
+    } else {
+      onQrItemChange({
+        ...createEmptyQrItem(qItem),
+        answer: [{ valueCoding: newValue }]
+      });
+    }
+  }
+
+  const openChoiceAutocomplete = (
+    <>
+      <Box display="flex">
+        <Autocomplete
+          id={qItem.id}
+          value={valueAutocomplete}
+          options={options}
+          getOptionLabel={(option) => (typeof option === 'string' ? option : `${option.display}`)}
+          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}
+              disabled={readOnly}
+              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>
+    </>
+  );
+
+  const renderQItemOpenChoiceAutocomplete = isRepeated ? (
+    <>{openChoiceAutocomplete}</>
+  ) : (
+    <FullWidthFormComponentBox>
+      <Grid container columnSpacing={6}>
+        <Grid item xs={5}>
+          <LabelWrapper qItem={qItem} />
+        </Grid>
+        <Grid item xs={7}>
+          {openChoiceAutocomplete}
+          <DisplayInstructions displayInstructions={displayInstructions} />
+        </Grid>
+      </Grid>
+    </FullWidthFormComponentBox>
+  );
+  return <>{renderQItemOpenChoiceAutocomplete}</>;
+}
+
+export default QItemOpenChoiceAutocomplete;