@aehrc/smart-forms-renderer 0.27.4 → 0.29.0

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

@@ -35,6 +35,7 @@ interface ChoiceRadioAnswerOptionViewProps
   calcExpUpdated: boolean;
   onCheckedChange: (linkId: string) => void;
   onFocusLinkId: () => void;
+  onClear: () => void;
 }
 
 function ChoiceRadioAnswerOptionView(props: ChoiceRadioAnswerOptionViewProps) {
@@ -47,7 +48,8 @@ function ChoiceRadioAnswerOptionView(props: ChoiceRadioAnswerOptionViewProps) {
     readOnly,
     calcExpUpdated,
     onFocusLinkId,
-    onCheckedChange
+    onCheckedChange,
+    onClear
   } = props;
 
   if (isRepeated) {
@@ -60,6 +62,7 @@ function ChoiceRadioAnswerOptionView(props: ChoiceRadioAnswerOptionViewProps) {
         readOnly={readOnly}
         calcExpUpdated={calcExpUpdated}
         onCheckedChange={onCheckedChange}
+        onClear={onClear}
       />
     );
   }
@@ -78,6 +81,7 @@ function ChoiceRadioAnswerOptionView(props: ChoiceRadioAnswerOptionViewProps) {
           isTabled={isTabled}
           calcExpUpdated={calcExpUpdated}
           onCheckedChange={onCheckedChange}
+          onClear={onClear}
         />
       </ItemFieldGrid>
     </FullWidthFormComponentBox>

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

@@ -28,6 +28,10 @@ import FadingCheckIcon from '../ItemParts/FadingCheckIcon';
 import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
 import Box from '@mui/material/Box';
 import RadioOptionList from '../ItemParts/RadioOptionList';
+import Tooltip from '@mui/material/Tooltip';
+import Button from '@mui/material/Button';
+import { grey } from '@mui/material/colors';
+import Fade from '@mui/material/Fade';
 
 interface ChoiceRadioAnswerValueSetFieldsProps extends PropsWithIsTabledAttribute {
   qItem: QuestionnaireItem;
@@ -37,6 +41,7 @@ interface ChoiceRadioAnswerValueSetFieldsProps extends PropsWithIsTabledAttribut
   calcExpUpdated: boolean;
   terminologyError: TerminologyError;
   onCheckedChange: (newValue: string) => void;
+  onClear: () => void;
 }
 
 function ChoiceRadioAnswerValueSetFields(props: ChoiceRadioAnswerValueSetFieldsProps) {
@@ -48,7 +53,8 @@ function ChoiceRadioAnswerValueSetFields(props: ChoiceRadioAnswerValueSetFieldsP
     calcExpUpdated,
     terminologyError,
     isTabled,
-    onCheckedChange
+    onCheckedChange,
+    onClear
   } = props;
 
   const orientation = getChoiceOrientation(qItem) ?? ChoiceItemOrientation.Vertical;
@@ -69,6 +75,19 @@ function ChoiceRadioAnswerValueSetFields(props: ChoiceRadioAnswerValueSetFieldsP
         <Box flexGrow={1} />
 
         <FadingCheckIcon fadeIn={calcExpUpdated} disabled={readOnly} />
+        <Fade in={!!valueRadio} timeout={100}>
+          <Tooltip title="Set question as unanswered">
+            <Button
+              sx={{
+                color: grey['500'],
+                '&:hover': { backgroundColor: grey['200'] }
+              }}
+              disabled={readOnly}
+              onClick={onClear}>
+              Clear
+            </Button>
+          </Tooltip>
+        </Fade>
       </Box>
     );
   }

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

@@ -82,6 +82,10 @@ function ChoiceRadioAnswerValueSetItem(props: ChoiceRadioAnswerValueSetItemProps
     }
   }
 
+  function handleClear() {
+    onQrItemChange(createEmptyQrItem(qItem));
+  }
+
   if (isRepeated) {
     return (
       <ChoiceRadioAnswerValueSetFields
@@ -93,6 +97,7 @@ function ChoiceRadioAnswerValueSetItem(props: ChoiceRadioAnswerValueSetItemProps
         terminologyError={terminologyError}
         isTabled={isTabled}
         onCheckedChange={handleChange}
+        onClear={handleClear}
       />
     );
   }
@@ -112,6 +117,7 @@ function ChoiceRadioAnswerValueSetItem(props: ChoiceRadioAnswerValueSetItemProps
           terminologyError={terminologyError}
           isTabled={isTabled}
           onCheckedChange={handleChange}
+          onClear={handleClear}
         />
       </ItemFieldGrid>
     </FullWidthFormComponentBox>

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

@@ -79,6 +79,10 @@ function ChoiceSelectAnswerOptionItem(props: ChoiceSelectAnswerOptionItemProps)
     );
   }
 
+  function handleClear() {
+    onQrItemChange(createEmptyQrItem(qItem));
+  }
+
   return (
     <ChoiceSelectAnswerOptionView
       qItem={qItem}
@@ -90,6 +94,7 @@ function ChoiceSelectAnswerOptionItem(props: ChoiceSelectAnswerOptionItemProps)
       isTabled={isTabled}
       onFocusLinkId={() => onFocusLinkId(qItem.linkId)}
       onSelectChange={handleChange}
+      onClear={handleClear}
     />
   );
 }

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

@@ -35,6 +35,7 @@ interface ChoiceSelectAnswerOptionViewProps
   calcExpUpdated: boolean;
   onSelectChange: (linkId: string) => void;
   onFocusLinkId: () => void;
+  onClear: () => void;
 }
 
 function ChoiceSelectAnswerOptionView(props: ChoiceSelectAnswerOptionViewProps) {
@@ -47,7 +48,8 @@ function ChoiceSelectAnswerOptionView(props: ChoiceSelectAnswerOptionViewProps)
     readOnly,
     calcExpUpdated,
     onFocusLinkId,
-    onSelectChange
+    onSelectChange,
+    onClear
   } = props;
 
   if (isRepeated) {

package/src/components/FormComponents/DateTimeItems/CustomDateTimeItem/DateTimeField.tsx

@@ -15,7 +15,8 @@
  * limitations under the License.
  */
 
-import React, { Dispatch, SetStateAction } from 'react';
+import type { Dispatch, SetStateAction } from 'react';
+import React from 'react';
 import type { PropsWithIsTabledAttribute } from '../../../../interfaces/renderProps.interface';
 import CustomDateField from '../CustomDateItem/CustomDateField';
 import CustomTimeField from './CustomTimeField';

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

@@ -40,6 +40,7 @@ import useDecimalCalculatedExpression from '../../../hooks/useDecimalCalculatedE
 import useStringInput from '../../../hooks/useStringInput';
 import useReadOnly from '../../../hooks/useReadOnly';
 import { useQuestionnaireStore } from '../../../stores';
+import Box from '@mui/material/Box';
 
 interface DecimalItemProps
   extends PropsWithQrItemChangeHandler,
@@ -127,18 +128,20 @@ function DecimalItem(props: DecimalItemProps) {
 
   if (isRepeated) {
     return (
-      <DecimalField
-        linkId={qItem.linkId}
-        input={input}
-        feedback={feedback}
-        displayPrompt={displayPrompt}
-        displayUnit={displayUnit}
-        entryFormat={entryFormat}
-        readOnly={readOnly}
-        calcExpUpdated={calcExpUpdated}
-        isTabled={isTabled}
-        onInputChange={handleInputChange}
-      />
+      <Box data-test="q-item-decimal-box">
+        <DecimalField
+          linkId={qItem.linkId}
+          input={input}
+          feedback={feedback}
+          displayPrompt={displayPrompt}
+          displayUnit={displayUnit}
+          entryFormat={entryFormat}
+          readOnly={readOnly}
+          calcExpUpdated={calcExpUpdated}
+          isTabled={isTabled}
+          onInputChange={handleInputChange}
+        />
+      </Box>
     );
   }
 

package/src/hooks/useValidationFeedback.ts

@@ -70,7 +70,7 @@ function useValidationFeedback(qItem: QuestionnaireItem, input: string): string
     return `Input is lower than the expected minimum value of ${minValue}.`;
   }
 
-  // Test min value
+  // Test max value
   if (
     invalidType === ValidationResult.maxValue &&
     (typeof maxValue === 'string' || typeof maxValue === 'number')

package/src/stories/BuildFormWrapper.tsx

@@ -15,13 +15,14 @@
  * limitations under the License.
  */
 
-import React, { useLayoutEffect, useState } from 'react';
+// @ts-ignore
+import React from 'react';
 import type { Questionnaire, QuestionnaireResponse } from 'fhir/r4';
 import { BaseRenderer } from '../components';
 import { QueryClientProvider } from '@tanstack/react-query';
 import ThemeProvider from '../theme/Theme';
 import useQueryClient from '../hooks/useQueryClient';
-import { buildForm } from '../utils';
+import useBuildFormForStorybook from './useBuildFormForStorybook';
 
 interface BuildFormWrapperProps {
   questionnaire: Questionnaire;
@@ -31,17 +32,11 @@ interface BuildFormWrapperProps {
 function BuildFormWrapper(props: BuildFormWrapperProps) {
   const { questionnaire, questionnaireResponse } = props;
 
-  const [isLoading, setIsLoading] = useState(true);
-
-  useLayoutEffect(() => {
-    buildForm(questionnaire, questionnaireResponse).then(() => {
-      setIsLoading(false);
-    });
-  }, [questionnaire, questionnaireResponse]);
-
   const queryClient = useQueryClient();
 
-  if (isLoading) {
+  const isBuilding = useBuildFormForStorybook(questionnaire, questionnaireResponse);
+
+  if (isBuilding) {
     return <div>Loading...</div>;
   }
 

package/src/stories/PrePopButtonForStorybook.tsx

@@ -0,0 +1,54 @@
+/*
+ * Copyright 2024 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.
+ */
+
+// @ts-ignore
+import React from 'react';
+import { Box, CircularProgress, Fade, IconButton, Tooltip } from '@mui/material';
+import PlayCircleIcon from '@mui/icons-material/PlayCircle';
+import Typography from '@mui/material/Typography';
+
+interface PrePopButtonProps {
+  isPopulating: boolean;
+  onPopulate: () => void;
+}
+
+function PrePopButtonForStorybook(props: PrePopButtonProps) {
+  const { isPopulating, onPopulate } = props;
+
+  return (
+    <Box display="flex" mb={0.5} alignItems="center" columnGap={3}>
+      <Tooltip title="Pre-populate form" placement="right">
+        <IconButton disabled={isPopulating} onClick={onPopulate} size="small" color="primary">
+          {isPopulating ? (
+            <CircularProgress size={20} color="inherit" sx={{ mb: 0.5 }} />
+          ) : (
+            <PlayCircleIcon />
+          )}
+        </IconButton>
+      </Tooltip>
+      {isPopulating ? (
+        <Fade in={true} timeout={100}>
+          <Typography variant="body2" color="text.secondary">
+            Pre-populating form...
+          </Typography>
+        </Fade>
+      ) : null}
+    </Box>
+  );
+}
+
+export default PrePopButtonForStorybook;

package/src/stories/PrePopWrapper.tsx

@@ -0,0 +1,92 @@
+/*
+ * Copyright 2024 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.
+ */
+
+// @ts-ignore
+import React, { useState } from 'react';
+import type { Patient, Practitioner, Questionnaire } from 'fhir/r4';
+import { BaseRenderer } from '../components';
+import { QueryClientProvider } from '@tanstack/react-query';
+import ThemeProvider from '../theme/Theme';
+import useQueryClient from '../hooks/useQueryClient';
+import type Client from 'fhirclient/lib/Client';
+import useBuildFormForStorybook from './useBuildFormForStorybook';
+import { buildForm } from '../utils';
+import PrePopButtonForStorybook from './PrePopButtonForStorybook';
+import { populateQuestionnaire } from '@aehrc/sdc-populate';
+import { fetchResourceCallback } from './populateCallbackForStorybook';
+
+interface PrePopWrapperProps {
+  questionnaire: Questionnaire;
+  fhirClient: Client;
+  patient: Patient;
+  user: Practitioner;
+}
+
+function PrePopWrapper(props: PrePopWrapperProps) {
+  const { questionnaire, fhirClient, patient, user } = props;
+
+  const [isPopulating, setIsPopulating] = useState(false);
+
+  const isBuilding = useBuildFormForStorybook(questionnaire);
+
+  const queryClient = useQueryClient();
+
+  function handlePrepopulate() {
+    setIsPopulating(true);
+
+    populateQuestionnaire({
+      questionnaire: questionnaire,
+      fetchResourceCallback: fetchResourceCallback,
+      requestConfig: {
+        clientEndpoint: fhirClient.state.serverUrl,
+        authToken: null
+      },
+      patient: patient,
+      user: user
+    }).then(async ({ populateSuccess, populateResult }) => {
+      if (!populateSuccess || !populateResult) {
+        setIsPopulating(false);
+        return;
+      }
+
+      const { populatedResponse } = populateResult;
+
+      // buildForm is used here because there is a really bizarre bug - using the store hooks directly doesn't update the baseRenderer
+      // could be the fact that it doesn't play well with storybook
+      await buildForm(questionnaire, populatedResponse);
+
+      setIsPopulating(false);
+    });
+  }
+
+  if (isBuilding) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <ThemeProvider>
+      <QueryClientProvider client={queryClient}>
+        <div>
+          <PrePopButtonForStorybook isPopulating={isPopulating} onPopulate={handlePrepopulate} />
+          {isPopulating ? null : <BaseRenderer />}
+        </div>
+      </QueryClientProvider>
+    </ThemeProvider>
+  );
+}
+
+export default PrePopWrapper;

package/src/stories/assets/fhirClient/mockFhirClient.ts

@@ -0,0 +1,52 @@
+/*
+ * Copyright 2024 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 Client from 'fhirclient/lib/Client';
+
+const iss = 'https://proxy.smartforms.io/v/r4/fhir';
+
+const clientId = 'smart-forms-storybook';
+
+const scope =
+  'fhirUser online_access openid profile patient/Condition.rs patient/Observation.rs launch patient/Encounter.rs patient/Patient.rs';
+
+// This must be a patient ID that exists in the EHR
+const patientId = 'pat-sf';
+
+// This must be a practitioner ID that exists in the EHR
+const userId = 'primary-peter';
+
+export const mockFhirClient = {
+  state: {
+    clientId: clientId,
+    scope: scope,
+    serverUrl: iss,
+    tokenResponse: {
+      access_token: 'mock_access_token'
+    }
+  },
+  patient: {
+    id: patientId
+  },
+  encounter: { id: null },
+
+  user: {
+    id: userId,
+    fhirUser: `Practitioner/${userId}`,
+    resourceType: 'Practitioner'
+  }
+} as unknown as Client;