@aehrc/smart-forms-renderer 0.4.0 → 0.6.0

package/src/components/{FormRenderer → Renderer}/SmartFormsRenderer.tsx

@@ -18,25 +18,32 @@
 import React from 'react';
 import type { Questionnaire, QuestionnaireResponse } from 'fhir/r4';
 import useInitialiseRenderer from '../../hooks/useInitialiseRenderer';
-import { Box, CircularProgress, Typography } from '@mui/material';
+import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
+import Typography from '@mui/material/Typography';
+
 import { QueryClientProvider } from '@tanstack/react-query';
 import useQueryClient from '../../hooks/useQueryClient';
 import BaseRenderer from './BaseRenderer';
+import ThemeProvider from '../../theme/Theme';
+import type Client from 'fhirclient/lib/Client';
 
 interface SmartFormsRendererProps {
   questionnaire: Questionnaire;
   questionnaireResponse?: QuestionnaireResponse;
   additionalVariables?: Record<string, object>;
+  fhirClient?: Client;
 }
 
 // TODO add terminiology server
 function SmartFormsRenderer(props: SmartFormsRendererProps) {
-  const { questionnaire, questionnaireResponse, additionalVariables } = props;
+  const { questionnaire, questionnaireResponse, additionalVariables, fhirClient } = props;
 
   const isLoading = useInitialiseRenderer(
     questionnaire,
     questionnaireResponse,
-    additionalVariables
+    additionalVariables,
+    fhirClient
   );
   const queryClient = useQueryClient();
 
@@ -50,9 +57,11 @@ function SmartFormsRenderer(props: SmartFormsRendererProps) {
   }
 
   return (
-    <QueryClientProvider client={queryClient}>
-      <BaseRenderer />
-    </QueryClientProvider>
+    <ThemeProvider>
+      <QueryClientProvider client={queryClient}>
+        <BaseRenderer />
+      </QueryClientProvider>
+    </ThemeProvider>
   );
 }
 

package/src/components/Tabs/CompleteTabButton.tsx

@@ -16,7 +16,8 @@
  */
 
 import React, { memo } from 'react';
-import { IconButton, Tooltip } from '@mui/material';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import useQuestionnaireStore from '../../stores/useQuestionnaireStore';
 

package/src/components/Tabs/FormBodySingleTab.tsx

@@ -16,7 +16,11 @@
  */
 
 import React, { memo } from 'react';
-import { Box, ListItemButton, ListItemText, Typography } from '@mui/material';
+import Box from '@mui/material/Box';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemText from '@mui/material/ListItemText';
+import Typography from '@mui/material/Typography';
+
 import useQuestionnaireStore from '../../stores/useQuestionnaireStore';
 import type { QuestionnaireItem } from 'fhir/r4';
 import { getContextDisplays } from '../../utils/tabs';

package/src/components/Tabs/FormBodyTabList.tsx

@@ -16,7 +16,9 @@
  */
 
 import React, { memo } from 'react';
-import { Box, Card, Collapse } from '@mui/material';
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import Collapse from '@mui/material/Collapse';
 import { PrimarySelectableList } from '../Lists.styles';
 import { TransitionGroup } from 'react-transition-group';
 import { isHidden } from '../../utils/qItem';

package/src/components/index.ts

@@ -15,4 +15,4 @@
  * limitations under the License.
  */
 
-export * from './FormRenderer';
+export * from './Renderer';

package/src/hooks/useInitialiseRenderer.ts

@@ -20,29 +20,53 @@ import { useLayoutEffect, useState } from 'react';
 import { createQuestionnaireResponse } from '../utils/qrItem';
 import useQuestionnaireStore from '../stores/useQuestionnaireStore';
 import useQuestionnaireResponseStore from '../stores/useQuestionnaireResponseStore';
+import type Client from 'fhirclient/lib/Client';
+import useSmartConfigStore from '../stores/useSmartConfigStore';
+import { readEncounter, readPatient, readUser } from '../api/smartClient';
 
 function useInitialiseRenderer(
   questionnaire: Questionnaire,
   questionnaireResponse?: QuestionnaireResponse,
-  additionalVariables?: Record<string, object>
+  additionalVariables?: Record<string, object>,
+  fhirClient?: Client
 ): boolean {
   const buildSourceQuestionnaire = useQuestionnaireStore((state) => state.buildSourceQuestionnaire);
   const updatePopulatedProperties = useQuestionnaireStore(
     (state) => state.updatePopulatedProperties
   );
   const buildSourceResponse = useQuestionnaireResponseStore((state) => state.buildSourceResponse);
-  const populateResponse = useQuestionnaireResponseStore((state) => state.populateResponse);
+  const setUpdatableResponseAsPopulated = useQuestionnaireResponseStore(
+    (state) => state.setUpdatableResponseAsPopulated
+  );
+
+  const setSmartClient = useSmartConfigStore((state) => state.setClient);
+  const setPatient = useSmartConfigStore((state) => state.setPatient);
+  const setUser = useSmartConfigStore((state) => state.setUser);
+  const setEncounter = useSmartConfigStore((state) => state.setEncounter);
 
   const [loading, setLoading] = useState(true);
 
   useLayoutEffect(() => {
     setLoading(true);
+    if (fhirClient) {
+      setSmartClient(fhirClient);
+      readPatient(fhirClient).then((patient) => {
+        setPatient(patient);
+      });
+      readUser(fhirClient).then((user) => {
+        setUser(user);
+      });
+      readEncounter(fhirClient).then((encounter) => {
+        setEncounter(encounter);
+      });
+    }
+
     buildSourceQuestionnaire(questionnaire, questionnaireResponse, additionalVariables).then(() => {
       buildSourceResponse(createQuestionnaireResponse(questionnaire));
 
       if (questionnaireResponse) {
         const updatedResponse = updatePopulatedProperties(questionnaireResponse);
-        populateResponse(updatedResponse);
+        setUpdatableResponseAsPopulated(updatedResponse);
       }
       setLoading(false);
     });
@@ -51,9 +75,14 @@ function useInitialiseRenderer(
     questionnaireResponse,
     buildSourceQuestionnaire,
     buildSourceResponse,
-    populateResponse,
+    setUpdatableResponseAsPopulated,
     updatePopulatedProperties,
-    additionalVariables
+    additionalVariables,
+    fhirClient,
+    setSmartClient,
+    setPatient,
+    setUser,
+    setEncounter
   ]);
 
   return loading;

package/src/hooks/useTerminologyServerQuery.ts

@@ -19,7 +19,7 @@ import { useQuery } from '@tanstack/react-query';
 import type { Coding, ValueSet } from 'fhir/r4';
 import { getValueSetCodings, getValueSetPromise } from '../utils/valueSet';
 
-import type { AlertColor } from '@mui/material';
+import type { AlertColor } from '@mui/material/Alert';
 import useQuestionnaireStore from '../stores/useQuestionnaireStore';
 
 function useTerminologyServerQuery(

package/src/hooks/useValueSetCodings.ts

@@ -26,13 +26,13 @@ import {
 import { getAnswerExpression } from '../utils/itemControl';
 import fhirpath from 'fhirpath';
 import fhirpath_r4_model from 'fhirpath/fhir-context/r4';
-import useConfigStore from '../stores/useConfigStore';
+import useSmartConfigStore from '../stores/useSmartConfigStore';
 import useQuestionnaireStore from '../stores/useQuestionnaireStore';
 
 function useValueSetCodings(qItem: QuestionnaireItem) {
-  const patient = useConfigStore((state) => state.patient);
-  const user = useConfigStore((state) => state.user);
-  const encounter = useConfigStore((state) => state.encounter);
+  const patient = useSmartConfigStore((state) => state.patient);
+  const user = useSmartConfigStore((state) => state.user);
+  const encounter = useSmartConfigStore((state) => state.encounter);
 
   const launchContexts = useQuestionnaireStore((state) => state.launchContexts);
   const processedValueSetCodings = useQuestionnaireStore((state) => state.processedValueSetCodings);

package/src/index.ts

@@ -6,68 +6,11 @@ import { removeHiddenAnswers } from './utils/removeHidden';
 
 export * from './components';
 export * from './hooks';
-
-/**
- * Get the initial Questionnaire.
- *
- * @author Sean Fong
- */
-export function useSourceQuestionnaire(): Questionnaire {
-  return useQuestionnaireStore.getState().sourceQuestionnaire;
-}
-
-/**
- * Get the initial QuestionnaireResponse.
- * An empty QuestionnaireResponse is returned if no initial QuestionnaireResponse is provided when building the form.
- *
- * @author Sean Fong
- */
-export function useSourceResponse(): QuestionnaireResponse {
-  return useQuestionnaireResponseStore.getState().sourceResponse;
-}
-
-/**
- * Get the filled QuestionnaireResponse.
- * If no changes have been made to the form, the initial QuestionnaireResponse is returned.
- *
- * @author Sean Fong
- */
-export function useUpdatableResponse(): QuestionnaireResponse {
-  return useQuestionnaireResponseStore.getState().updatableResponse;
-}
-
-/**
- * Get the boolean value of whether any changes have been made to the form.
- *
- * @author Sean Fong
- */
-export function useFormHasChanges(): boolean {
-  return useQuestionnaireResponseStore.getState().hasChanges;
-}
-
-/**
- * Get the boolean value of whether enableWhen (and enableWhenExpression) is activated.
- *
- * @author Sean Fong
- */
-export function useEnableWhenActivated(): boolean {
-  return useQuestionnaireStore.getState().enableWhenIsActivated;
-}
-
-/**
- * Set the initial Questionnaire.
- * In most cases, <pre>buildForm()</pre> should be used instead.
- *
- * @author Sean Fong
- */
-export async function setSourceQuestionnaire(questionnaire: Questionnaire): Promise<void> {
-  await useQuestionnaireStore.getState().buildSourceQuestionnaire(questionnaire);
-}
+export * from './stores';
 
 /**
  * Build the form with an initial Questionnaire and an optional filled QuestionnaireResponse.
  * If a QuestionnaireResponse is not provided, an empty QuestionnaireResponse is set as the initial QuestionnaireResponse.
- * In most cases, <pre>buildForm()</pre> is sufficient. Other fine-grained functions are provided for more control.
  *
  * @author Sean Fong
  */
@@ -89,7 +32,7 @@ export async function buildForm(
 }
 
 /**
- * Destroy the form to clean up the store.
+ * Destroy the form to clean up the questionnaire and questionnaireResponse stores.
  *
  * @author Sean Fong
  */
@@ -99,44 +42,13 @@ export function destroyForm(): void {
 }
 
 /**
- * Toggle activation of enableWhen (and enableWhenExpression).
- *
- * @author Sean Fong
- */
-export function setEnableWhenActivation(isActivated: boolean): void {
-  useQuestionnaireStore.getState().toggleEnableWhenActivation(isActivated);
-}
-
-/**
- * Set the filled QuestionnaireResponse.
- * In most cases, <pre>buildForm()</pre> should be used instead.
- *
- * @author Sean Fong
- */
-export function setUpdatableResponse(populatedResponse: QuestionnaireResponse): void {
-  const updatedResponse = useQuestionnaireStore
-    .getState()
-    .updatePopulatedProperties(populatedResponse);
-  useQuestionnaireResponseStore.getState().populateResponse(updatedResponse);
-}
-
-/**
- * Set the filled QuestionnaireResponse to be empty.
- * This is used to quickly clear the form.
- *
- * @author Sean Fong
- */
-export function setUpdatableResponseAsEmpty(emptyResponse: QuestionnaireResponse): void {
-  return useQuestionnaireResponseStore.getState().clearResponse(emptyResponse);
-}
-
-/**
- * Save the filled QuestionnaireResponse to be the initial QuestionnaireResponse and reset the <pre>hasChanges</pre> flag.
+ * Get the filled QuestionnaireResponse at its current state.
+ * If no changes have been made to the form, the initial QuestionnaireResponse is returned.
  *
  * @author Sean Fong
  */
-export function setUpdatableResponseAsSaved(savedResponse: QuestionnaireResponse): void {
-  return useQuestionnaireResponseStore.getState().saveResponse(savedResponse);
+export function getUpdatableResponse(): QuestionnaireResponse {
+  return useQuestionnaireResponseStore.getState().updatableResponse;
 }
 
 /**

package/src/interfaces/choice.enum.ts

@@ -15,26 +15,26 @@
  * limitations under the License.
  */
 
-export enum QItemChoiceControl {
+export enum ChoiceItemControl {
   Radio = 'radio',
   Select = 'select',
   Autocomplete = 'autocomplete',
   Checkbox = 'check-box'
 }
 
-export enum QItemOpenChoiceControl {
+export enum OpenChoiceItemControl {
   Select = 'select',
   Autocomplete = 'autocomplete',
   Checkbox = 'check-box',
   Radio = 'radio'
 }
 
-export enum QItemChoiceOrientation {
+export enum ChoiceItemOrientation {
   Horizontal = 'horizontal',
   Vertical = 'vertical'
 }
 
-export enum CheckBoxOptionType {
+export enum CheckBoxOption {
   AnswerOption = 'answerOption',
   AnswerValueSet = 'answerValueSet'
 }

package/src/stores/index.ts

@@ -0,0 +1,3 @@
+export { default as useQuestionnaireStore } from './useQuestionnaireStore';
+export { default as useQuestionnaireResponseStore } from './useQuestionnaireResponseStore';
+export { default as useSmartConfigStore } from './useSmartConfigStore';

package/src/stores/useQuestionnaireResponseStore.ts

@@ -8,10 +8,10 @@ export interface UseQuestionnaireResponseStoreType {
   updatableResponse: QuestionnaireResponse;
   hasChanges: boolean;
   buildSourceResponse: (response: QuestionnaireResponse) => void;
-  populateResponse: (response: QuestionnaireResponse) => void;
+  setUpdatableResponseAsPopulated: (populatedResponse: QuestionnaireResponse) => void;
   updateResponse: (updatedResponse: QuestionnaireResponse) => void;
-  saveResponse: (savedResponse: QuestionnaireResponse) => void;
-  clearResponse: (clearedResponse: QuestionnaireResponse) => void;
+  setUpdatableResponseAsSaved: (savedResponse: QuestionnaireResponse) => void;
+  setUpdatableResponseAsEmpty: (clearedResponse: QuestionnaireResponse) => void;
   destroySourceResponse: () => void;
 }
 
@@ -19,16 +19,16 @@ const useQuestionnaireResponseStore = create<UseQuestionnaireResponseStoreType>(
   sourceResponse: cloneDeep(emptyResponse),
   updatableResponse: cloneDeep(emptyResponse),
   hasChanges: false,
-
   buildSourceResponse: (questionnaireResponse: QuestionnaireResponse) => {
     set(() => ({
       sourceResponse: questionnaireResponse,
       updatableResponse: questionnaireResponse
     }));
   },
-  populateResponse: (populatedResponse: QuestionnaireResponse) => {
+  setUpdatableResponseAsPopulated: (populatedResponse: QuestionnaireResponse) => {
     set(() => ({
-      updatableResponse: populatedResponse
+      updatableResponse: populatedResponse,
+      hasChanges: false
     }));
   },
   updateResponse: (updatedResponse: QuestionnaireResponse) =>
@@ -36,13 +36,13 @@ const useQuestionnaireResponseStore = create<UseQuestionnaireResponseStoreType>(
       updatableResponse: updatedResponse,
       hasChanges: true
     })),
-  saveResponse: (savedResponse: QuestionnaireResponse) =>
+  setUpdatableResponseAsSaved: (savedResponse: QuestionnaireResponse) =>
     set(() => ({
       sourceResponse: savedResponse,
       updatableResponse: savedResponse,
       hasChanges: false
     })),
-  clearResponse: (clearedResponse: QuestionnaireResponse) =>
+  setUpdatableResponseAsEmpty: (clearedResponse: QuestionnaireResponse) =>
     set(() => ({
       updatableResponse: clearedResponse,
       hasChanges: false

package/src/stores/useSmartConfigStore.ts

@@ -0,0 +1,27 @@
+import { create } from 'zustand';
+import type { Encounter, Patient, Practitioner } from 'fhir/r4';
+import type Client from 'fhirclient/lib/Client';
+
+export interface UseSmartConfigStoreType {
+  client: Client | null;
+  patient: Patient | null;
+  user: Practitioner | null;
+  encounter: Encounter | null;
+  setClient: (client: Client) => void;
+  setPatient: (patient: Patient) => void;
+  setUser: (user: Practitioner) => void;
+  setEncounter: (encounter: Encounter) => void;
+}
+
+const useSmartConfigStore = create<UseSmartConfigStoreType>()((set) => ({
+  client: null,
+  patient: null,
+  user: null,
+  encounter: null,
+  setClient: (client: Client) => set(() => ({ client: client })),
+  setPatient: (patient: Patient) => set(() => ({ patient: patient })),
+  setUser: (user: Practitioner) => set(() => ({ user: user })),
+  setEncounter: (encounter: Encounter) => set(() => ({ encounter: encounter }))
+}));
+
+export default useSmartConfigStore;

package/src/stories/SmartFormsRenderer.stories.ts

@@ -86,19 +86,28 @@ export const QTestGridWithResponseAddFhirPath: Story = {
   }
 };
 
-// export const QTestGridWithResponseAddXFhirQuery: Story = {
-//   args: {
-//     questionnaire: QTestGrid,
-//     questionnaireResponse: RTestGrid,
-//     additionalVariables: {
-//       addVar2: {
-//         url: 'http://hl7.org/fhir/StructureDefinition/variable',
-//         valueExpression: {
-//           name: 'addVar2',
-//           language: 'application/x-fhir-query',
-//           expression: 'Condition?patient={{%patient.id}}'
-//         }
-//       }
-//     }
-//   }
-// };
+export const QTestGridWithResponseAddXFhirQuery: Story = {
+  args: {
+    questionnaire: QTestGrid,
+    questionnaireResponse: RTestGrid,
+    additionalVariables: {
+      addVar1: {
+        url: 'http://hl7.org/fhir/StructureDefinition/variable',
+        valueExpression: {
+          name: 'addVar1',
+          language: 'text/fhirpath',
+          expression:
+            "%resource.item.where(linkId='grid').item.where(linkId='1').item.where(linkId='1.1').item.where(linkId='1.1.1').answer.value"
+        }
+      },
+      addVar2: {
+        url: 'http://hl7.org/fhir/StructureDefinition/variable',
+        valueExpression: {
+          name: 'addVar2',
+          language: 'application/x-fhir-query',
+          expression: 'Condition?patient={{%patient.id}}'
+        }
+      }
+    }
+  }
+};