@aehrc/smart-forms-renderer 0.36.0 → 0.37.2

package/src/components/Renderer/FormTopLevelItem.tsx

@@ -18,7 +18,9 @@
 import React from 'react';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import FormBodyTabbed from './FormBodyTabbed';
+import FormBodyPage from './FormBodyPage';
 import { containsTabs, isTabContainer } from '../../utils/tabs';
+import { containsPages, isPage } from '../../utils/page';
 import GroupItem from '../FormComponents/GroupItem/GroupItem';
 import SingleItem from '../FormComponents/SingleItem/SingleItem';
 import type {
@@ -53,6 +55,9 @@ function FormTopLevelItem(props: FormTopLevelItemProps) {
   const itemIsTabContainer = isTabContainer(topLevelQItem);
   const itemContainsTabs = containsTabs(topLevelQItem);
 
+  const itemIsPageContainer = isPage(topLevelQItem);
+  const itemContainsPages = containsPages(topLevelQItem);
+
   const isTablet = useResponsive('up', 'md');
 
   const itemIsGroup = topLevelQItem.type === 'group';
@@ -106,6 +111,18 @@ function FormTopLevelItem(props: FormTopLevelItemProps) {
     );
   }
 
+  if (itemContainsPages || itemIsPageContainer) {
+    return (
+      <FormBodyPage
+        key={topLevelQItem.linkId}
+        topLevelQItem={topLevelQItem}
+        topLevelQRItem={topLevelQRItem}
+        parentIsReadOnly={readOnly}
+        onQrItemChange={onQrItemChange}
+      />
+    );
+  }
+
   // If form is untabbed, it is rendered as a regular group
   if (itemIsGroup) {
     return (

package/src/components/Renderer/FormTopLevelPage.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import Grid from '@mui/material/Grid';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import TabContext from '@mui/lab/TabContext';
+import TabPanel from '@mui/lab/TabPanel';
+import GroupItem from '../FormComponents/GroupItem/GroupItem';
+import type {
+  PropsWithParentIsReadOnlyAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../interfaces/renderProps.interface';
+import { useQuestionnaireStore } from '../../stores';
+
+interface FormTopLevelPageProps
+  extends PropsWithQrItemChangeHandler,
+    PropsWithParentIsReadOnlyAttribute {
+  topLevelQItems: QuestionnaireItem[];
+  topLevelQRItems: (QuestionnaireResponseItem | QuestionnaireResponseItem[] | undefined)[];
+}
+
+function FormTopLevelPage(props: FormTopLevelPageProps) {
+  const { topLevelQItems, topLevelQRItems, parentIsReadOnly, onQrItemChange } = props;
+
+  const pages = useQuestionnaireStore.use.pages();
+  const currentPage = useQuestionnaireStore.use.currentPageIndex();
+
+  return (
+    <Grid container spacing={1.5}>
+      <TabContext value={currentPage.toString()}>
+        <Grid item xs={12} md={12} lg={12}>
+          {topLevelQItems.map((qItem, i) => {
+            const qrItem = topLevelQRItems[i];
+
+            const isNotRepeatGroup = !Array.isArray(qrItem);
+            const isPage = !!pages[qItem.linkId];
+
+            if (!isPage || !isNotRepeatGroup) {
+              // Something has gone horribly wrong
+              return null;
+            }
+
+            const isRepeated = qItem.repeats ?? false;
+            const pageIsMarkedAsComplete = pages[qItem.linkId].isComplete ?? false;
+
+            return (
+              <TabPanel
+                key={qItem.linkId}
+                sx={{ p: 0 }}
+                value={i.toString()}
+                data-test="renderer-page-panel">
+                <GroupItem
+                  qItem={qItem}
+                  qrItem={qrItem ?? null}
+                  isRepeated={isRepeated}
+                  groupCardElevation={1}
+                  pageIsMarkedAsComplete={pageIsMarkedAsComplete}
+                  pages={pages}
+                  currentPageIndex={currentPage}
+                  parentIsReadOnly={parentIsReadOnly}
+                  onQrItemChange={onQrItemChange}
+                />
+              </TabPanel>
+            );
+          })}
+        </Grid>
+      </TabContext>
+    </Grid>
+  );
+}
+
+export default FormTopLevelPage;

package/src/hooks/useCodingCalculatedExpression.ts

@@ -16,7 +16,7 @@
  */
 
 import { useEffect, useState } from 'react';
-import type { QuestionnaireItem } from 'fhir/r4';
+import type { Coding, QuestionnaireItem } from 'fhir/r4';
 import { useQuestionnaireStore } from '../stores';
 
 interface UseCodingCalculatedExpression {
@@ -56,6 +56,7 @@ function useCodingCalculatedExpression(
         calcExpression.value !== valueInString &&
         (typeof calcExpression.value === 'string' ||
           typeof calcExpression.value === 'number' ||
+          typeof calcExpression.value === 'object' ||
           calcExpression.value === null)
       ) {
         // update ui to show calculated value changes
@@ -70,6 +71,14 @@ function useCodingCalculatedExpression(
           return;
         }
 
+        // calculatedExpression value is object, check if it is a Coding object
+        if (typeof calcExpression.value === 'object' && objectIsCoding(calcExpression.value)) {
+          if (calcExpression.value.code) {
+            onChangeByCalcExpressionString(calcExpression.value.code);
+            return;
+          }
+        }
+
         // calculatedExpression value is a string or number
         const newValueString =
           typeof calcExpression.value === 'string'
@@ -87,4 +96,8 @@ function useCodingCalculatedExpression(
   return { calcExpUpdated: calcExpUpdated };
 }
 
+function objectIsCoding(obj: any): obj is Coding {
+  return obj && obj.code && typeof obj.code === 'string';
+}
+
 export default useCodingCalculatedExpression;

package/src/hooks/useNextAndPreviousVisiblePages.ts

@@ -0,0 +1,69 @@
+import { useQuestionnaireStore } from '../stores';
+import type { Pages } from '../interfaces/page.interface';
+import { constructPagesWithVisibility } from '../utils/page';
+
+function useNextAndPreviousVisiblePages(
+  currentPageIndex?: number,
+  pages?: Pages
+): { previousPageIndex: number | null; nextPageIndex: number | null; numOfVisiblePages: number } {
+  const enableWhenIsActivated = useQuestionnaireStore.use.enableWhenIsActivated();
+  const enableWhenItems = useQuestionnaireStore.use.enableWhenItems();
+  const enableWhenExpressions = useQuestionnaireStore.use.enableWhenExpressions();
+
+  const pagesNotDefined = currentPageIndex === undefined || pages === undefined;
+
+  if (pagesNotDefined) {
+    return { previousPageIndex: null, nextPageIndex: null, numOfVisiblePages: 0 };
+  }
+
+  const pagesWithVisibility = constructPagesWithVisibility({
+    pages,
+    enableWhenIsActivated,
+    enableWhenItems,
+    enableWhenExpressions
+  });
+
+  return {
+    previousPageIndex: getPreviousPageIndex(currentPageIndex, pagesWithVisibility),
+    nextPageIndex: getNextPageIndex(currentPageIndex, pagesWithVisibility),
+    numOfVisiblePages: pagesWithVisibility.filter((tab) => tab.isVisible).length
+  };
+}
+
+function getPreviousPageIndex(
+  currentPageIndex: number,
+  pagesWithVisibility: { linkId: string; isVisible: boolean }[]
+): number | null {
+  const previousPages = pagesWithVisibility.slice(0, currentPageIndex);
+  const foundIndex = previousPages.reverse().findIndex((tab) => tab.isVisible);
+
+  // Previous visible tab not found
+  if (foundIndex === -1) {
+    return null;
+  }
+
+  // Previous visible tab less than 0
+  const previousPageIndex = currentPageIndex - foundIndex - 1;
+  if (previousPageIndex < 0) {
+    return null;
+  }
+
+  return previousPageIndex;
+}
+
+function getNextPageIndex(
+  currentPageIndex: number,
+  pagesWithVisibility: { linkId: string; isVisible: boolean }[]
+): number | null {
+  const subsequentPages = pagesWithVisibility.slice(currentPageIndex + 1);
+  const foundIndex = subsequentPages.findIndex((tab) => tab.isVisible);
+
+  // Next visible tab not found, something is wrong
+  if (foundIndex === -1) {
+    return null;
+  }
+
+  return currentPageIndex + foundIndex + 1;
+}
+
+export default useNextAndPreviousVisiblePages;

package/src/interfaces/page.interface.ts

@@ -0,0 +1,13 @@
+/**
+ * Page interface
+ *
+ * @property pageIndex - The index of the page
+ * @property isComplete - Whether the page is marked as complete
+ * @property isHidden - Whether the page is hidden
+ */
+export type Page = { pageIndex: number; isComplete: boolean; isHidden: boolean };
+
+/**
+ * Key-value pair of pages `Record<linkId, Page>`
+ */
+export type Pages = Record<string, Page>;

package/src/interfaces/questionnaireStore.interface.ts

@@ -16,6 +16,7 @@
  */
 
 import type { Tabs } from './tab.interface';
+import type { Pages } from './page.interface';
 import type { Variables } from './variables.interface';
 import type { LaunchContext } from './populate.interface';
 import type { EnableWhenExpressions, EnableWhenItems } from './enableWhen.interface';
@@ -27,6 +28,7 @@ import type { InitialExpression } from './initialExpression.interface';
 export interface QuestionnaireModel {
   itemTypes: Record<string, string>;
   tabs: Tabs;
+  pages: Pages;
   variables: Variables;
   launchContexts: Record<string, LaunchContext>;
   enableWhenItems: EnableWhenItems;

package/src/stores/questionnaireStore.ts

@@ -28,6 +28,7 @@ import type { CalculatedExpression } from '../interfaces/calculatedExpression.in
 import type { EnableWhenExpressions, EnableWhenItems } from '../interfaces/enableWhen.interface';
 import type { AnswerExpression } from '../interfaces/answerExpression.interface';
 import type { Tabs } from '../interfaces/tab.interface';
+import type { Pages } from '../interfaces/page.interface';
 import {
   mutateRepeatEnableWhenItemInstances,
   updateEnableWhenItemAnswer
@@ -58,6 +59,8 @@ import type { InitialExpression } from '../interfaces/initialExpression.interfac
  * @property itemTypes - Key-value pair of item types `Record<linkId, item.type>`
  * @property tabs - Key-value pair of tabs `Record<linkId, Tab>`
  * @property currentTabIndex - Index of the current tab
+ * @property pages - Key-value pair of pages `Record<linkId, Page>`
+ * @property currentPageIndex - Index of the current page
  * @property variables - Questionnaire variables object containing FHIRPath and x-fhir-query variables
  * @property launchContexts - Key-value pair of launch contexts `Record<launch context name, launch context properties>`
  * @property enableWhenItems - EnableWhenItems object containing enableWhen items and their linked questions
@@ -76,7 +79,9 @@ import type { InitialExpression } from '../interfaces/initialExpression.interfac
  * @property buildSourceQuestionnaire - Used to build the source questionnaire with the provided questionnaire and optionally questionnaire response, additional variables, terminology server url and readyOnly flag
  * @property destroySourceQuestionnaire - Used to destroy the source questionnaire and reset all properties
  * @property switchTab - Used to switch the current tab index
+ * @property switchPage - Used to switch the current page index
  * @property markTabAsComplete - Used to mark a tab index as complete
+ * @property markPageAsComplete - Used to mark a page index as complete
  * @property updateEnableWhenItem - Used to update linked enableWhen items by updating a question with a new answer
  * @property mutateRepeatEnableWhenItems - Used to add or remove instances of repeating enableWhen items
  * @property toggleEnableWhenActivation - Used to toggle enableWhen checks on/off
@@ -94,6 +99,8 @@ export interface QuestionnaireStoreType {
   itemTypes: Record<string, string>;
   tabs: Tabs;
   currentTabIndex: number;
+  pages: Pages;
+  currentPageIndex: number;
   variables: Variables;
   launchContexts: Record<string, LaunchContext>;
   enableWhenItems: EnableWhenItems;
@@ -119,7 +126,9 @@ export interface QuestionnaireStoreType {
   ) => Promise<void>;
   destroySourceQuestionnaire: () => void;
   switchTab: (newTabIndex: number) => void;
+  switchPage: (newPageIndex: number) => void;
   markTabAsComplete: (tabLinkId: string) => void;
+  markPageAsComplete: (pageLinkId: string) => void;
   updateEnableWhenItem: (
     linkId: string,
     newAnswer: QuestionnaireResponseItemAnswer[] | undefined,
@@ -155,6 +164,8 @@ export const questionnaireStore = createStore<QuestionnaireStoreType>()((set, ge
   itemTypes: {},
   tabs: {},
   currentTabIndex: 0,
+  pages: {},
+  currentPageIndex: 0,
   variables: { fhirPathVariables: {}, xFhirQueryVariables: {} },
   launchContexts: {},
   calculatedExpressions: {},
@@ -197,6 +208,7 @@ export const questionnaireStore = createStore<QuestionnaireStoreType>()((set, ge
       initialEnableWhenExpressions,
       initialCalculatedExpressions,
       firstVisibleTab,
+      firstVisiblePage,
       updatedFhirPathContext
     } = initialiseFormFromResponse({
       questionnaireResponse,
@@ -205,6 +217,7 @@ export const questionnaireStore = createStore<QuestionnaireStoreType>()((set, ge
       calculatedExpressions: questionnaireModel.calculatedExpressions,
       variablesFhirPath: questionnaireModel.variables.fhirPathVariables,
       tabs: questionnaireModel.tabs,
+      pages: questionnaireModel.pages,
       fhirPathContext: questionnaireModel.fhirPathContext
     });
 
@@ -213,6 +226,8 @@ export const questionnaireStore = createStore<QuestionnaireStoreType>()((set, ge
       itemTypes: questionnaireModel.itemTypes,
       tabs: questionnaireModel.tabs,
       currentTabIndex: firstVisibleTab,
+      pages: questionnaireModel.pages,
+      currentPageIndex: firstVisiblePage,
       variables: questionnaireModel.variables,
       launchContexts: questionnaireModel.launchContexts,
       enableWhenItems: initialEnableWhenItems,
@@ -233,6 +248,8 @@ export const questionnaireStore = createStore<QuestionnaireStoreType>()((set, ge
       itemTypes: {},
       tabs: {},
       currentTabIndex: 0,
+      pages: {},
+      currentPageIndex: 0,
       variables: { fhirPathVariables: {}, xFhirQueryVariables: {} },
       launchContexts: {},
       enableWhenItems: { singleItems: {}, repeatItems: {} },
@@ -246,6 +263,7 @@ export const questionnaireStore = createStore<QuestionnaireStoreType>()((set, ge
       fhirPathContext: {}
     }),
   switchTab: (newTabIndex: number) => set(() => ({ currentTabIndex: newTabIndex })),
+  switchPage: (newPageIndex: number) => set(() => ({ currentPageIndex: newPageIndex })),
   markTabAsComplete: (tabLinkId: string) => {
     const tabs = get().tabs;
     set(() => ({
@@ -255,6 +273,15 @@ export const questionnaireStore = createStore<QuestionnaireStoreType>()((set, ge
       }
     }));
   },
+  markPageAsComplete: (pageLinkId: string) => {
+    const pages = get().pages;
+    set(() => ({
+      pages: {
+        ...pages,
+        [pageLinkId]: { ...pages[pageLinkId], isComplete: !pages[pageLinkId].isComplete }
+      }
+    }));
+  },
   updateEnableWhenItem: (
     linkId: string,
     newAnswer: QuestionnaireResponseItemAnswer[] | undefined,
@@ -355,7 +382,8 @@ export const questionnaireStore = createStore<QuestionnaireStoreType>()((set, ge
   updatePopulatedProperties: (
     populatedResponse: QuestionnaireResponse,
     populatedContext?: Record<string, any>,
-    persistTabIndex?: boolean
+    persistTabIndex?: boolean,
+    persistPageIndex?: boolean
   ) => {
     const initialResponseItemMap = createQuestionnaireResponseItemMap(populatedResponse);
 
@@ -379,7 +407,8 @@ export const questionnaireStore = createStore<QuestionnaireStoreType>()((set, ge
       initialEnableWhenItems,
       initialEnableWhenLinkedQuestions,
       initialEnableWhenExpressions,
-      firstVisibleTab
+      firstVisibleTab,
+      firstVisiblePage
     } = initialiseFormFromResponse({
       questionnaireResponse: updatedResponse,
       enableWhenItems: get().enableWhenItems,
@@ -387,6 +416,7 @@ export const questionnaireStore = createStore<QuestionnaireStoreType>()((set, ge
       calculatedExpressions: initialCalculatedExpressions,
       variablesFhirPath: get().variables.fhirPathVariables,
       tabs: get().tabs,
+      pages: get().pages,
       fhirPathContext: updatedFhirPathContext
     });
     updatedFhirPathContext = evaluateInitialCalculatedExpressionsResult.updatedFhirPathContext;
@@ -397,6 +427,7 @@ export const questionnaireStore = createStore<QuestionnaireStoreType>()((set, ge
       enableWhenExpressions: initialEnableWhenExpressions,
       calculatedExpressions: initialCalculatedExpressions,
       currentTabIndex: persistTabIndex ? get().currentTabIndex : firstVisibleTab,
+      currentPageIndex: persistPageIndex ? get().currentPageIndex : firstVisiblePage,
       fhirPathContext: updatedFhirPathContext,
       populatedContext: populatedContext ?? get().populatedContext
     }));

package/src/stories/assets/questionnaires/AuCoreTestingJson/AuCoreAllergyIntolerance.json

@@ -0,0 +1,209 @@
+{
+  "resourceType": "Questionnaire",
+  "id": "AuCoreAllergyIntolerance",
+  "extension": [
+    {
+      "url": "http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-launchContext",
+      "extension": [
+        {
+          "url": "name",
+          "valueCoding": {
+            "system": "http://hl7.org/fhir/uv/sdc/CodeSystem/launchContext",
+            "code": "patient"
+          }
+        },
+        {
+          "url": "type",
+          "valueCode": "Patient"
+        },
+        {
+          "url": "description",
+          "valueString": "The patient that is to be used to pre-populate the form"
+        }
+      ]
+    },
+    {
+      "url": "http://hl7.org/fhir/StructureDefinition/variable",
+      "valueExpression": {
+        "name": "AllergyIntolerance",
+        "language": "application/x-fhir-query",
+        "expression": "AllergyIntolerance?patient={{%patient.id}}"
+      }
+    }
+  ],
+  "version": "0.5.0-ci-build",
+  "name": "AU Core AllergyIntolerance",
+  "title": "AU Core AllergyIntolerance",
+  "status": "draft",
+  "date": "2024-07-15",
+  "item": [
+    {
+      "linkId": "allergy-intolerance",
+      "text": "AU Core AllergyIntolerance",
+      "type": "group",
+      "repeats": false,
+      "item": [
+        {
+          "linkId": "patient-details",
+          "text": "Patient Details",
+          "type": "group",
+          "item": [
+            {
+              "extension": [
+                {
+                  "url": "http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-initialExpression",
+                  "valueExpression": {
+                    "language": "text/fhirpath",
+                    "expression": "%patient.id"
+                  }
+                }
+              ],
+              "linkId": "patient-id",
+              "text": "Patient ID",
+              "type": "string",
+              "required": true,
+              "readOnly": true
+            },
+            {
+              "extension": [
+                {
+                  "url": "http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-initialExpression",
+                  "valueExpression": {
+                    "language": "text/fhirpath",
+                    "expression": "(%patient.name.where(use='official').select((family | (given | prefix).join(' ')).join(', ').where($this != '') | text)).first()"
+                  }
+                }
+              ],
+              "linkId": "patient-name",
+              "text": "Patient Name",
+              "type": "string",
+              "required": true,
+              "readOnly": true
+            }
+          ]
+        },
+        {
+          "linkId": "first-resource-note",
+          "text": "This questionnaire only uses the first AllergyTolerance resource of a reference patient.",
+          "_text": {
+            "extension": [
+              {
+                "url": "http://hl7.org/fhir/StructureDefinition/rendering-xhtml",
+                "valueString": "<div xmlns=\"http://www.w3.org/1999/xhtml\" style=\"padding-bottom: 8px;\">\r\n  <b>This questionnaire only uses the first AllergyIntolerance resource of a reference patient.</b>\r\n</div>"
+              }
+            ]
+          },
+          "type": "display"
+        },
+        {
+          "extension": [
+            {
+              "url": "http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-initialExpression",
+              "valueExpression": {
+                "language": "text/fhirpath",
+                "expression": "%AllergyIntolerance.entry[0].resource.clinicalStatus.coding"
+              }
+            }
+          ],
+          "linkId": "clinical-status",
+          "text": "Clinical Status",
+          "type": "choice",
+          "answerValueSet": "http://hl7.org/fhir/ValueSet/allergyintolerance-clinical"
+        },
+        {
+          "extension": [
+            {
+              "url": "http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-initialExpression",
+              "valueExpression": {
+                "language": "text/fhirpath",
+                "expression": "%AllergyIntolerance.entry[0].resource.verificationStatus.coding"
+              }
+            }
+          ],
+          "linkId": "verification-status",
+          "text": "Verification Status",
+          "type": "choice",
+          "answerValueSet": "http://hl7.org/fhir/ValueSet/allergyintolerance-verification"
+        },
+        {
+          "extension": [
+            {
+              "url": "http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl",
+              "valueCodeableConcept": {
+                "coding": [
+                  {
+                    "system": "http://hl7.org/fhir/questionnaire-item-control",
+                    "code": "autocomplete"
+                  }
+                ]
+              }
+            },
+            {
+              "url": "http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-initialExpression",
+              "valueExpression": {
+                "language": "text/fhirpath",
+                "expression": "%AllergyIntolerance.entry[0].resource.code.coding"
+              }
+            }
+          ],
+          "linkId": "code",
+          "text": "Code",
+          "type": "open-choice",
+          "required": true,
+          "answerValueSet": "https://healthterminologies.gov.au/fhir/ValueSet/indicator-hypersensitivity-intolerance-to-substance-2"
+        },
+        {
+          "extension": [
+            {
+              "url": "http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-initialExpression",
+              "valueExpression": {
+                "language": "text/fhirpath",
+                "expression": "%AllergyIntolerance.entry[0].resource.onset"
+              }
+            }
+          ],
+          "linkId": "onset",
+          "text": "Onset[x]",
+          "type": "string"
+        },
+        {
+          "linkId": "reaction",
+          "text": "Reaction",
+          "type": "group",
+          "item": [
+            {
+              "extension": [
+                {
+                  "url": "http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-initialExpression",
+                  "valueExpression": {
+                    "language": "text/fhirpath",
+                    "expression": "%AllergyIntolerance.entry[0].resource.reaction.manifestation[0].coding"
+                  }
+                }
+              ],
+              "linkId": "reaction-manifestation",
+              "text": "Reaction Manifestation",
+              "type": "choice",
+              "answerValueSet": "https://healthterminologies.gov.au/fhir/ValueSet/clinical-finding-1"
+            },
+            {
+              "extension": [
+                {
+                  "url": "http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-initialExpression",
+                  "valueExpression": {
+                    "language": "text/fhirpath",
+                    "expression": "%AllergyIntolerance.entry[0].resource.reaction.severity"
+                  }
+                }
+              ],
+              "linkId": "reaction-severity",
+              "text": "Reaction Severity",
+              "type": "choice",
+              "answerValueSet": "http://hl7.org/fhir/ValueSet/reaction-event-severity"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}