@aehrc/smart-forms-renderer 0.7.1 → 0.8.0

package/src/components/index.ts

@@ -16,3 +16,4 @@
  */
 
 export * from './Renderer';
+export * from './FormComponents';

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export { default as useHidden } from './useHidden';

package/src/hooks/useContextDisplayItems.ts

@@ -0,0 +1,40 @@
+/*
+ * 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 { useMemo } from 'react';
+import { getContextDisplays } from '../utils/tabs';
+import type { QuestionnaireItem } from 'fhir/r4';
+
+function useContextDisplayItems(topLevelItems: QuestionnaireItem[]) {
+  return useMemo(() => {
+    let completedDisplayItemExists = false;
+
+    const allContextDisplayItems = topLevelItems.map((topLevelItem) =>
+      getContextDisplays(topLevelItem)
+    );
+
+    completedDisplayItemExists = allContextDisplayItems.some((contextDisplayItems) => {
+      return contextDisplayItems.some(
+        (contextDisplayItem) => contextDisplayItem.text === 'Complete'
+      );
+    });
+
+    return { allContextDisplayItems, completedDisplayItemExists };
+  }, [topLevelItems]);
+}
+
+export default useContextDisplayItems;

package/src/hooks/useInitialiseRenderer.ts

@@ -17,7 +17,7 @@
 
 import type { Questionnaire, QuestionnaireResponse } from 'fhir/r4';
 import { useLayoutEffect, useState } from 'react';
-import { createQuestionnaireResponse } from '../utils/qrItem';
+import { createEmptyQuestionnaireResponse } from '../utils/qrItem';
 import useQuestionnaireStore from '../stores/useQuestionnaireStore';
 import useQuestionnaireResponseStore from '../stores/useQuestionnaireResponseStore';
 import type Client from 'fhirclient/lib/Client';
@@ -80,7 +80,7 @@ function useInitialiseRenderer(
       additionalVariables,
       terminologyServerUrl
     ).then(() => {
-      buildSourceResponse(createQuestionnaireResponse(questionnaire));
+      buildSourceResponse(createEmptyQuestionnaireResponse(questionnaire));
 
       if (questionnaireResponse) {
         const updatedResponse = updatePopulatedProperties(questionnaireResponse);

package/src/hooks/useInitialiseRepeatAnswers.ts

@@ -15,28 +15,39 @@
  * limitations under the License.
  */
 
-import type { QuestionnaireResponseItem } from 'fhir/r4';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import type { RepeatAnswer } from '../interfaces/repeatItem.interface';
 import { nanoid } from 'nanoid';
+import { useMemo } from 'react';
 
-function useInitialiseRepeatAnswers(qrItem: QuestionnaireResponseItem): RepeatAnswer[] {
-  let initialRepeatAnswers: RepeatAnswer[] = [
-    {
-      nanoId: nanoid(),
-      answer: null
-    }
-  ];
+function useInitialiseRepeatAnswers(
+  qItem: QuestionnaireItem,
+  qrItem: QuestionnaireResponseItem
+): RepeatAnswer[] {
+  return useMemo(
+    () => {
+      let initialRepeatAnswers: RepeatAnswer[] = [
+        {
+          nanoId: nanoid(),
+          answer: null
+        }
+      ];
 
-  if (qrItem?.answer) {
-    initialRepeatAnswers = qrItem.answer.map((answer) => {
-      return {
-        nanoId: nanoid(),
-        answer
-      };
-    });
-  }
+      if (qrItem?.answer) {
+        initialRepeatAnswers = qrItem.answer.map((answer) => {
+          return {
+            nanoId: nanoid(),
+            answer
+          };
+        });
+      }
 
-  return initialRepeatAnswers;
+      return initialRepeatAnswers;
+    },
+    // init initialRepeatAnswers on first render only, leave dependency array empty
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [qItem]
+  );
 }
 
 export default useInitialiseRepeatAnswers;

package/src/hooks/useInitialiseRepeatGroups.ts

@@ -16,27 +16,38 @@
  */
 
 import type { QuestionnaireResponseItem } from 'fhir/r4';
+import type { QuestionnaireItem } from 'fhir/r4';
 import { nanoid } from 'nanoid';
 import type { RepeatGroupSingle } from '../interfaces/repeatGroup.interface';
+import { useMemo } from 'react';
 
-function useInitialiseRepeatGroups(qrItems: QuestionnaireResponseItem[]): RepeatGroupSingle[] {
-  let initialRepeatGroupAnswers: RepeatGroupSingle[] = [
-    {
-      nanoId: nanoid(),
-      qrItem: null
-    }
-  ];
+function useInitialiseRepeatGroups(
+  qItem: QuestionnaireItem,
+  qrItems: QuestionnaireResponseItem[]
+): RepeatGroupSingle[] {
+  return useMemo(
+    () => {
+      let initialRepeatGroupAnswers: RepeatGroupSingle[] = [
+        {
+          nanoId: nanoid(),
+          qrItem: null
+        }
+      ];
 
-  if (qrItems.length > 0) {
-    initialRepeatGroupAnswers = qrItems.map((qrItem) => {
-      return {
-        nanoId: nanoid(),
-        qrItem
-      };
-    });
-  }
-
-  return initialRepeatGroupAnswers;
+      if (qrItems.length > 0) {
+        initialRepeatGroupAnswers = qrItems.map((qrItem) => {
+          return {
+            nanoId: nanoid(),
+            qrItem
+          };
+        });
+      }
+      return initialRepeatGroupAnswers;
+    },
+    // init initialRepeatAnswers on first render only, leave dependency array empty
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [qItem]
+  );
 }
 
 export default useInitialiseRepeatGroups;

package/src/hooks/useNumberInput.ts

@@ -0,0 +1,38 @@
+/*
+ * 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 { Dispatch, SetStateAction } from 'react';
+import { useEffect, useState } from 'react';
+
+function useNumberInput(valueFromProps: number): [number, Dispatch<SetStateAction<number>>] {
+  const [value, setValue] = useState(valueFromProps);
+
+  useEffect(
+    () => {
+      if (value !== valueFromProps) {
+        setValue(valueFromProps);
+      }
+    },
+    // Only trigger this effect if prop value changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [valueFromProps]
+  );
+
+  return [value, setValue];
+}
+
+export default useNumberInput;

package/src/hooks/useStringInput.ts

@@ -0,0 +1,38 @@
+/*
+ * 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 { Dispatch, SetStateAction } from 'react';
+import { useEffect, useState } from 'react';
+
+function useStringInput(valueFromProps: string): [string, Dispatch<SetStateAction<string>>] {
+  const [input, setInput] = useState(valueFromProps);
+
+  useEffect(
+    () => {
+      if (input !== valueFromProps) {
+        setInput(valueFromProps);
+      }
+    },
+    // Only trigger this effect if prop value changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [valueFromProps]
+  );
+
+  return [input, setInput];
+}
+
+export default useStringInput;

package/src/hooks/useTerminologyServerQuery.ts

@@ -34,7 +34,6 @@ function useTerminologyServerQuery(
 
   let fullUrl = '';
   let options: Coding[] = [];
-  let loading = false;
   let feedback: { message: string; color: AlertColor } | undefined;
 
   if (input.length === 0) {
@@ -64,7 +63,7 @@ function useTerminologyServerQuery(
 
   // Perform query
   const terminologyServerUrl = getTerminologyServerUrl(qItem) ?? defaultTerminologyServerUrl;
-  const { isInitialLoading, error, data } = useQuery<ValueSet>(
+  const { isFetching, error, data } = useQuery<ValueSet>(
     ['expandValueSet', fullUrl],
     () => getValueSetPromise(fullUrl, terminologyServerUrl),
     {
@@ -72,9 +71,7 @@ function useTerminologyServerQuery(
     }
   );
 
-  if (isInitialLoading) {
-    loading = true;
-  }
+  console.log(isFetching);
 
   if (error) {
     console.warn('Ontoserver query failed. Details below: \n' + error);
@@ -95,6 +92,6 @@ function useTerminologyServerQuery(
     }
   }
 
-  return { options, loading, feedback };
+  return { options, loading: isFetching, feedback };
 }
 export default useTerminologyServerQuery;

package/src/index.ts

@@ -1,11 +1,17 @@
 import useQuestionnaireStore from './stores/useQuestionnaireStore';
 import type { Questionnaire, QuestionnaireResponse } from 'fhir/r4';
-import { createQuestionnaireResponse } from './utils/qrItem';
+import { createEmptyQuestionnaireResponse } from './utils/qrItem';
 import useQuestionnaireResponseStore from './stores/useQuestionnaireResponseStore';
 import { removeHiddenAnswers } from './utils/removeHidden';
+import type { ItemToRepopulate } from './utils/repopulateItems';
+import { getItemsToRepopulate } from './utils/repopulateItems';
+import { repopulateItemsIntoResponse } from './utils/repopulateIntoResponse';
 
 export * from './components';
 export * from './stores';
+export * from './hooks';
+export * from './utils';
+export type { ItemToRepopulate };
 
 /**
  * Build the form with an initial Questionnaire and an optional filled QuestionnaireResponse.
@@ -22,7 +28,7 @@ export async function buildForm(
   if (!questionnaireResponse) {
     useQuestionnaireResponseStore
       .getState()
-      .buildSourceResponse(createQuestionnaireResponse(questionnaire));
+      .buildSourceResponse(createEmptyQuestionnaireResponse(questionnaire));
     return;
   }
 
@@ -72,3 +78,40 @@ export function removeHiddenAnswersFromResponse(
     enableWhenExpressions
   });
 }
+
+/**
+ * Re-populate stuff
+ *
+ * @author Sean Fong
+ */
+export function generateItemsToRepopulate(populatedResponse: QuestionnaireResponse) {
+  const sourceQuestionnaire = useQuestionnaireStore.getState().sourceQuestionnaire;
+  const itemTypes = useQuestionnaireStore.getState().itemTypes;
+  const tabs = useQuestionnaireStore.getState().tabs;
+  const updatableResponse = useQuestionnaireResponseStore.getState().updatableResponse;
+  console.log(updatableResponse);
+
+  return getItemsToRepopulate(
+    sourceQuestionnaire,
+    itemTypes,
+    tabs,
+    populatedResponse,
+    updatableResponse
+  );
+}
+
+/**
+ * Re-populate stuff
+ *
+ * @author Sean Fong
+ */
+export function repopulate(checkedItemsToRepopulate: Record<string, ItemToRepopulate>) {
+  const sourceQuestionnaire = useQuestionnaireStore.getState().sourceQuestionnaire;
+  const updatableResponse = useQuestionnaireResponseStore.getState().updatableResponse;
+
+  return repopulateItemsIntoResponse(
+    sourceQuestionnaire,
+    updatableResponse,
+    checkedItemsToRepopulate
+  );
+}

package/src/interfaces/questionnaireStore.interface.ts

@@ -24,6 +24,7 @@ import type { AnswerExpression } from './answerExpression.interface';
 import type { Coding } from 'fhir/r4';
 
 export interface QuestionnaireModel {
+  itemTypes: Record<string, string>;
   tabs: Tabs;
   variables: Variables;
   launchContexts: Record<string, LaunchContext>;

package/src/interfaces/renderProps.interface.ts

@@ -32,3 +32,7 @@ export interface PropsWithIsRepeatedAttribute {
 export interface PropsWithIsTabledAttribute {
   isTabled: boolean;
 }
+
+export interface PropsWithTextShownAttribute {
+  textShown?: boolean;
+}

package/src/stores/useQuestionnaireResponseStore.ts

@@ -2,11 +2,13 @@ import { create } from 'zustand';
 import type { QuestionnaireResponse } from 'fhir/r4';
 import { emptyResponse } from '../utils/emptyResource';
 import cloneDeep from 'lodash.clonedeep';
+import type { Diff } from 'deep-diff';
+import { diff } from 'deep-diff';
 
 export interface UseQuestionnaireResponseStoreType {
   sourceResponse: QuestionnaireResponse;
   updatableResponse: QuestionnaireResponse;
-  hasChanges: boolean;
+  formChangesHistory: (Diff<QuestionnaireResponse, QuestionnaireResponse>[] | null)[];
   buildSourceResponse: (response: QuestionnaireResponse) => void;
   setUpdatableResponseAsPopulated: (populatedResponse: QuestionnaireResponse) => void;
   updateResponse: (updatedResponse: QuestionnaireResponse) => void;
@@ -15,10 +17,10 @@ export interface UseQuestionnaireResponseStoreType {
   destroySourceResponse: () => void;
 }
 
-const useQuestionnaireResponseStore = create<UseQuestionnaireResponseStoreType>()((set) => ({
+const useQuestionnaireResponseStore = create<UseQuestionnaireResponseStoreType>()((set, get) => ({
   sourceResponse: cloneDeep(emptyResponse),
   updatableResponse: cloneDeep(emptyResponse),
-  hasChanges: false,
+  formChangesHistory: [],
   buildSourceResponse: (questionnaireResponse: QuestionnaireResponse) => {
     set(() => ({
       sourceResponse: questionnaireResponse,
@@ -26,32 +28,35 @@ const useQuestionnaireResponseStore = create<UseQuestionnaireResponseStoreType>(
     }));
   },
   setUpdatableResponseAsPopulated: (populatedResponse: QuestionnaireResponse) => {
+    const formChanges = diff(get().updatableResponse, populatedResponse) ?? null;
     set(() => ({
       updatableResponse: populatedResponse,
-      hasChanges: false
+      formChangesHistory: [...get().formChangesHistory, formChanges]
     }));
   },
-  updateResponse: (updatedResponse: QuestionnaireResponse) =>
+  updateResponse: (updatedResponse: QuestionnaireResponse) => {
+    const formChanges = diff(get().updatableResponse, updatedResponse) ?? null;
     set(() => ({
       updatableResponse: updatedResponse,
-      hasChanges: true
-    })),
+      formChangesHistory: [...get().formChangesHistory, formChanges]
+    }));
+  },
   setUpdatableResponseAsSaved: (savedResponse: QuestionnaireResponse) =>
     set(() => ({
       sourceResponse: savedResponse,
       updatableResponse: savedResponse,
-      hasChanges: false
+      formChangesHistory: []
     })),
   setUpdatableResponseAsEmpty: (clearedResponse: QuestionnaireResponse) =>
     set(() => ({
       updatableResponse: clearedResponse,
-      hasChanges: false
+      formChangesHistory: []
     })),
   destroySourceResponse: () =>
     set(() => ({
       sourceResponse: cloneDeep(emptyResponse),
       updatableResponse: cloneDeep(emptyResponse),
-      hasChanges: false
+      formChangesHistory: []
     }))
 }));
 

package/src/stores/useQuestionnaireStore.ts

@@ -42,6 +42,7 @@ import useTerminologyServerStore from './useTerminologyServerStore';
 
 export interface UseQuestionnaireStoreType {
   sourceQuestionnaire: Questionnaire;
+  itemTypes: Record<string, string>;
   tabs: Tabs;
   currentTabIndex: number;
   variables: Variables;
@@ -68,11 +69,15 @@ export interface UseQuestionnaireStoreType {
   toggleEnableWhenActivation: (isActivated: boolean) => void;
   updateExpressions: (updatedResponse: QuestionnaireResponse) => void;
   addCodingToCache: (valueSetUrl: string, codings: Coding[]) => void;
-  updatePopulatedProperties: (populatedResponse: QuestionnaireResponse) => QuestionnaireResponse;
+  updatePopulatedProperties: (
+    populatedResponse: QuestionnaireResponse,
+    persistTabIndex?: boolean
+  ) => QuestionnaireResponse;
 }
 
 const useQuestionnaireStore = create<UseQuestionnaireStoreType>()((set, get) => ({
   sourceQuestionnaire: cloneDeep(emptyQuestionnaire),
+  itemTypes: {},
   tabs: {},
   currentTabIndex: 0,
   variables: { fhirPathVariables: {}, xFhirQueryVariables: {} },
@@ -115,6 +120,7 @@ const useQuestionnaireStore = create<UseQuestionnaireStoreType>()((set, get) =>
 
     set({
       sourceQuestionnaire: questionnaire,
+      itemTypes: questionnaireModel.itemTypes,
       tabs: questionnaireModel.tabs,
       currentTabIndex: firstVisibleTab,
       variables: questionnaireModel.variables,
@@ -131,6 +137,7 @@ const useQuestionnaireStore = create<UseQuestionnaireStoreType>()((set, get) =>
   destroySourceQuestionnaire: () =>
     set({
       sourceQuestionnaire: cloneDeep(emptyQuestionnaire),
+      itemTypes: {},
       tabs: {},
       currentTabIndex: 0,
       variables: { fhirPathVariables: {}, xFhirQueryVariables: {} },
@@ -197,7 +204,7 @@ const useQuestionnaireStore = create<UseQuestionnaireStoreType>()((set, get) =>
         [valueSetUrl]: codings
       }
     })),
-  updatePopulatedProperties: (populatedResponse: QuestionnaireResponse) => {
+  updatePopulatedProperties: (populatedResponse: QuestionnaireResponse, persistTabIndex) => {
     const initialCalculatedExpressions = evaluateInitialCalculatedExpressions({
       initialResponse: populatedResponse,
       calculatedExpressions: get().calculatedExpressions,
@@ -229,7 +236,7 @@ const useQuestionnaireStore = create<UseQuestionnaireStoreType>()((set, get) =>
       enableWhenLinkedQuestions: initialEnableWhenLinkedQuestions,
       enableWhenExpressions: initialEnableWhenExpressions,
       calculatedExpressions: initialCalculatedExpressions,
-      currentTabIndex: firstVisibleTab
+      currentTabIndex: persistTabIndex ? get().currentTabIndex : firstVisibleTab
     }));
 
     return updatedResponse;

package/src/theme/overrides/Overrides.ts

@@ -20,7 +20,6 @@ import Paper from './Paper';
 import Input from './Input';
 import Table from './Table';
 import Button from './Button';
-import Backdrop from './Backdrop';
 import Autocomplete from './Autocomplete';
 import Accordion from './Accordion';
 import SpeedDial from './SpeedDial';
@@ -34,7 +33,6 @@ function ComponentsOverrides(theme: Theme) {
     Input(theme),
     Paper(),
     Button(theme),
-    Backdrop(theme),
     Autocomplete(theme),
     SpeedDial(theme)
   );

package/src/utils/calculatedExpression.ts

@@ -30,7 +30,7 @@ import _isEqual from 'lodash/isEqual';
 import { emptyResponse } from './emptyResource';
 import { createFhirPathContext } from './fhirpath';
 import { getQrItemsIndex, mapQItemsIndex } from './mapItem';
-import { updateQrGroup } from './qrItem';
+import { updateQrItemsInGroup } from './qrItem';
 import cloneDeep from 'lodash.clonedeep';
 
 interface EvaluateInitialCalculatedExpressionsParams {
@@ -213,7 +213,7 @@ function initialiseItemCalculatedExpressionValueRecursive(
       }
 
       if (newQrItem) {
-        updateQrGroup(
+        updateQrItemsInGroup(
           newQrItem,
           null,
           qrItem ?? { linkId: qItem.linkId, text: qItem.text, item: [] },