@aehrc/smart-forms-renderer 0.7.2 → 0.8.0

package/src/components/Tabs/FormBodyTabListWrapper.tsx

@@ -21,15 +21,13 @@ import Card from '@mui/material/Card';
 import { PrimarySelectableList } from '../Lists.styles';
 import type { QuestionnaireItem } from 'fhir/r4';
 import type { Tabs } from '../../interfaces/tab.interface';
-import { IconButton } from '@mui/material';
-import ExpandLess from '@mui/icons-material/ExpandLess';
-import ExpandMore from '@mui/icons-material/ExpandMore';
-import Typography from '@mui/material/Typography';
 import Divider from '@mui/material/Divider';
 import FormBodyTabList from './FormBodyTabList';
+import ShowCompletedTabsSection from './ShowCompletedTabsSection';
+import useContextDisplayItems from '../../hooks/useContextDisplayItems';
 
 interface FormBodyTabListWrapperProps {
-  qFormItems: QuestionnaireItem[];
+  topLevelItems: QuestionnaireItem[];
   currentTabIndex: number;
   tabs: Tabs;
 }
@@ -37,39 +35,30 @@ interface FormBodyTabListWrapperProps {
 const FormBodyTabListWrapper = memo(function FormBodyTabListWrapper(
   props: FormBodyTabListWrapperProps
 ) {
-  const { qFormItems, currentTabIndex, tabs } = props;
+  const { topLevelItems, currentTabIndex, tabs } = props;
 
   const [completedTabsExpanded, setCompletedTabsExpanded] = useState(true);
 
+  const { allContextDisplayItems, completedDisplayItemExists } =
+    useContextDisplayItems(topLevelItems);
+
   return (
     <Card sx={{ p: 0.75, mb: 2 }}>
       <Box sx={{ flexGrow: 1 }}>
         <PrimarySelectableList dense disablePadding sx={{ mb: 1 }} data-test="renderer-tab-list">
-          <Box display="flex" justifyContent="center" alignItems="center" mx={2} columnGap={0.5}>
-            <Typography
-              variant="overline"
-              fontSize={9}
-              color={completedTabsExpanded ? 'text.secondary' : 'text.disabled'}>
-              Completed tabs {completedTabsExpanded ? 'shown' : 'hidden'}
-            </Typography>
-            <IconButton
-              size="small"
-              onClick={() => {
-                setCompletedTabsExpanded(!completedTabsExpanded);
-              }}>
-              {completedTabsExpanded ? (
-                <ExpandLess fontSize="small" />
-              ) : (
-                <ExpandMore fontSize="small" />
-              )}
-            </IconButton>
-          </Box>
+          {completedDisplayItemExists ? (
+            <ShowCompletedTabsSection
+              completedTabsExpanded={completedTabsExpanded}
+              setCompletedTabsExpanded={setCompletedTabsExpanded}
+            />
+          ) : null}
           <Divider sx={{ mx: 1 }} light />
           <FormBodyTabList
-            topLevelItems={qFormItems}
+            topLevelItems={topLevelItems}
             currentTabIndex={currentTabIndex}
             tabs={tabs}
             completedTabsCollapsed={!completedTabsExpanded}
+            allContextDisplayItems={allContextDisplayItems}
           />
         </PrimarySelectableList>
       </Box>

package/src/components/Tabs/ShowCompletedTabsSection.tsx

@@ -0,0 +1,52 @@
+/*
+ * 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 Typography from '@mui/material/Typography';
+import { IconButton } from '@mui/material';
+import ExpandLess from '@mui/icons-material/ExpandLess';
+import ExpandMore from '@mui/icons-material/ExpandMore';
+
+interface ShowCompletedTabsSectionProps {
+  completedTabsExpanded: boolean;
+  setCompletedTabsExpanded: (newExpanded: boolean) => void;
+}
+
+function ShowCompletedTabsSection(props: ShowCompletedTabsSectionProps) {
+  const { completedTabsExpanded, setCompletedTabsExpanded } = props;
+
+  return (
+    <Box display="flex" justifyContent="center" alignItems="center" mx={2} columnGap={0.5}>
+      <Typography
+        variant="overline"
+        fontSize={9}
+        color={completedTabsExpanded ? 'text.secondary' : 'text.disabled'}>
+        Completed tabs {completedTabsExpanded ? 'shown' : 'hidden'}
+      </Typography>
+      <IconButton
+        size="small"
+        onClick={() => {
+          setCompletedTabsExpanded(!completedTabsExpanded);
+        }}>
+        {completedTabsExpanded ? <ExpandLess fontSize="small" /> : <ExpandMore fontSize="small" />}
+      </IconButton>
+    </Box>
+  );
+}
+
+export default ShowCompletedTabsSection;

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/useInitialiseRepeatGroups.ts

@@ -16,7 +16,7 @@
  */
 
 import type { QuestionnaireResponseItem } from 'fhir/r4';
-import { QuestionnaireItem } from 'fhir/r4';
+import type { QuestionnaireItem } from 'fhir/r4';
 import { nanoid } from 'nanoid';
 import type { RepeatGroupSingle } from '../interfaces/repeatGroup.interface';
 import { useMemo } from 'react';

package/src/hooks/useNumberInput.ts

@@ -15,7 +15,8 @@
  * limitations under the License.
  */
 
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import type { Dispatch, SetStateAction } from 'react';
+import { useEffect, useState } from 'react';
 
 function useNumberInput(valueFromProps: number): [number, Dispatch<SetStateAction<number>>] {
   const [value, setValue] = useState(valueFromProps);

package/src/hooks/useStringInput.ts

@@ -15,7 +15,8 @@
  * limitations under the License.
  */
 
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import type { Dispatch, SetStateAction } from 'react';
+import { useEffect, useState } from 'react';
 
 function useStringInput(valueFromProps: string): [string, Dispatch<SetStateAction<string>>] {
   const [input, setInput] = useState(valueFromProps);

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,6 +1,6 @@
 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';
@@ -28,7 +28,7 @@ export async function buildForm(
   if (!questionnaireResponse) {
     useQuestionnaireResponseStore
       .getState()
-      .buildSourceResponse(createQuestionnaireResponse(questionnaire));
+      .buildSourceResponse(createEmptyQuestionnaireResponse(questionnaire));
     return;
   }
 

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,12 +2,13 @@ import { create } from 'zustand';
 import type { QuestionnaireResponse } from 'fhir/r4';
 import { emptyResponse } from '../utils/emptyResource';
 import cloneDeep from 'lodash.clonedeep';
-import { diff } from 'json-diff';
+import type { Diff } from 'deep-diff';
+import { diff } from 'deep-diff';
 
 export interface UseQuestionnaireResponseStoreType {
   sourceResponse: QuestionnaireResponse;
   updatableResponse: QuestionnaireResponse;
-  formChangesHistory: object[];
+  formChangesHistory: (Diff<QuestionnaireResponse, QuestionnaireResponse>[] | null)[];
   buildSourceResponse: (response: QuestionnaireResponse) => void;
   setUpdatableResponseAsPopulated: (populatedResponse: QuestionnaireResponse) => void;
   updateResponse: (updatedResponse: QuestionnaireResponse) => void;
@@ -27,14 +28,14 @@ const useQuestionnaireResponseStore = create<UseQuestionnaireResponseStoreType>(
     }));
   },
   setUpdatableResponseAsPopulated: (populatedResponse: QuestionnaireResponse) => {
-    const formChanges = diff(get().updatableResponse, populatedResponse, { full: true });
+    const formChanges = diff(get().updatableResponse, populatedResponse) ?? null;
     set(() => ({
       updatableResponse: populatedResponse,
       formChangesHistory: [...get().formChangesHistory, formChanges]
     }));
   },
   updateResponse: (updatedResponse: QuestionnaireResponse) => {
-    const formChanges = diff(get().updatableResponse, updatedResponse, { full: true });
+    const formChanges = diff(get().updatableResponse, updatedResponse) ?? null;
     set(() => ({
       updatableResponse: updatedResponse,
       formChangesHistory: [...get().formChangesHistory, formChanges]

package/src/utils/qrItem.ts

@@ -25,12 +25,13 @@ import type {
 import type { QrRepeatGroup } from '../interfaces/repeatGroup.interface';
 
 /**
- * Create a questionnaireResponse from a given questionnaire form item
- * A questionnaire form item is the first item of a questionnaire
+ * Create an empty questionnaireResponse from a given questionnaire
  *
  * @author Sean Fong
  */
-export function createQuestionnaireResponse(questionnaire: Questionnaire): QuestionnaireResponse {
+export function createEmptyQuestionnaireResponse(
+  questionnaire: Questionnaire
+): QuestionnaireResponse {
   const questionnaireResponse: QuestionnaireResponse = {
     resourceType: 'QuestionnaireResponse',
     status: 'in-progress'

package/src/utils/repopulateIntoResponse.ts

@@ -1,10 +1,10 @@
-import {
+import type {
   Questionnaire,
   QuestionnaireItem,
   QuestionnaireResponse,
   QuestionnaireResponseItem
 } from 'fhir/r4';
-import { ItemToRepopulate } from './repopulateItems';
+import type { ItemToRepopulate } from './repopulateItems';
 import { getQrItemsIndex, mapQItemsIndex } from './mapItem';
 import { updateQrItemsInGroup } from './qrItem';
 

package/src/utils/repopulateItems.ts

@@ -114,7 +114,6 @@ function getCorrespondingQuestionnaireItemsRecursive(
     }
 
     // TODO it seems like there can only be one answer per linkId, we might need to do repeat groups differently
-    // so we need to fix this one first it seems like
 
     /* Repeat group implementation */
     if (qItem.type === 'group' && qItem.repeats) {