@aehrc/smart-forms-renderer 0.8.0 → 0.9.0

package/src/hooks/useDateValidation.tsx

@@ -0,0 +1,79 @@
+/*
+ * 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 {
+  getNumOfSeparators,
+  validateThreeMatches,
+  validateTwoMatches
+} from '../components/FormComponents/CustomDateItem/customDateTimePicker/utils/parseDates';
+import dayjs from 'dayjs';
+
+function useDateValidation(input: string, parseFail: boolean = false): string | null {
+  if (input === '') {
+    return null;
+  }
+
+  if (input.includes('-')) {
+    return 'Input does not match the required format with "/" as the separator.';
+  }
+
+  const numOfSeparators = getNumOfSeparators(input, '/');
+
+  if (numOfSeparators === 2) {
+    const threeMatchesDate = dayjs(input, `DD/MM/YYYY`);
+    if (!threeMatchesDate.isValid()) {
+      return 'Input does not match the format DD/MM/YYYY.';
+    }
+
+    const matches = input.split('/');
+    if (!validateThreeMatches(matches[0], matches[1], matches[2])) {
+      return 'Input is an invalid date.';
+    }
+
+    return null;
+  }
+
+  if (numOfSeparators === 1) {
+    const twoMatchesDate = dayjs(input, `MM/YYYY`);
+    if (!twoMatchesDate.isValid()) {
+      return 'Input does not match the formats MM/YYYY or DD/MM/YYYY.';
+    }
+
+    const matches = input.split('/');
+
+    if (validateTwoMatches(matches[0], matches[1])) {
+      return null;
+    }
+
+    return null;
+  }
+
+  if (input.length === 4) {
+    const oneMatchDate = dayjs(input, 'YYYY');
+    if (oneMatchDate.isValid()) {
+      return null;
+    }
+  }
+
+  if (parseFail) {
+    return 'The date entered is not valid.';
+  }
+
+  return 'Input does not match any date format.';
+}
+
+export default useDateValidation;

package/src/hooks/useDecimalCalculatedExpression.ts

@@ -16,7 +16,7 @@
  */
 
 import { useEffect, useState } from 'react';
-import { createEmptyQrItemWithUnit } from '../utils/qrItem';
+import { createEmptyQrItem } from '../utils/qrItem';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import useQuestionnaireStore from '../stores/useQuestionnaireStore';
 
@@ -27,7 +27,6 @@ interface UseDecimalCalculatedExpression {
 interface useDecimalCalculatedExpressionProps {
   qItem: QuestionnaireItem;
   inputValue: string;
-  displayUnit: string;
   precision: number | null;
   setInputValue: (value: string) => void;
   onQrItemChange: (qrItem: QuestionnaireResponseItem) => void;
@@ -36,7 +35,7 @@ interface useDecimalCalculatedExpressionProps {
 function useDecimalCalculatedExpression(
   props: useDecimalCalculatedExpressionProps
 ): UseDecimalCalculatedExpression {
-  const { qItem, inputValue, displayUnit, precision, setInputValue, onQrItemChange } = props;
+  const { qItem, inputValue, precision, setInputValue, onQrItemChange } = props;
 
   const calculatedExpressions = useQuestionnaireStore((state) => state.calculatedExpressions);
 
@@ -63,7 +62,7 @@ function useDecimalCalculatedExpression(
           // update questionnaireResponse
           setInputValue(precision ? value.toFixed(precision) : value.toString());
           onQrItemChange({
-            ...createEmptyQrItemWithUnit(qItem, displayUnit),
+            ...createEmptyQrItem(qItem),
             answer: [{ valueDecimal: value }]
           });
         }

package/src/hooks/useInitialiseRepeatAnswers.ts

@@ -22,7 +22,7 @@ import { useMemo } from 'react';
 
 function useInitialiseRepeatAnswers(
   qItem: QuestionnaireItem,
-  qrItem: QuestionnaireResponseItem
+  qrItem: QuestionnaireResponseItem | null
 ): RepeatAnswer[] {
   return useMemo(
     () => {

package/src/hooks/useIntegerCalculatedExpression.ts

@@ -16,7 +16,7 @@
  */
 
 import { useEffect, useState } from 'react';
-import { createEmptyQrItemWithUnit } from '../utils/qrItem';
+import { createEmptyQrItem } from '../utils/qrItem';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import useQuestionnaireStore from '../stores/useQuestionnaireStore';
 
@@ -27,7 +27,6 @@ interface UseIntegerCalculatedExpression {
 interface useIntegerCalculatedExpressionProps {
   qItem: QuestionnaireItem;
   inputValue: number;
-  displayUnit: string;
   setInputValue: (value: number) => void;
   onQrItemChange: (qrItem: QuestionnaireResponseItem) => void;
 }
@@ -35,7 +34,7 @@ interface useIntegerCalculatedExpressionProps {
 function useIntegerCalculatedExpression(
   props: useIntegerCalculatedExpressionProps
 ): UseIntegerCalculatedExpression {
-  const { qItem, inputValue, displayUnit, setInputValue, onQrItemChange } = props;
+  const { qItem, inputValue, setInputValue, onQrItemChange } = props;
 
   const calculatedExpressions = useQuestionnaireStore((state) => state.calculatedExpressions);
 
@@ -56,7 +55,7 @@ function useIntegerCalculatedExpression(
         // update questionnaireResponse
         setInputValue(calcExpression.value);
         onQrItemChange({
-          ...createEmptyQrItemWithUnit(qItem, displayUnit),
+          ...createEmptyQrItem(qItem),
           answer: [{ valueInteger: calcExpression.value }]
         });
       }

package/src/hooks/useReadOnly.ts

@@ -0,0 +1,30 @@
+/*
+ * 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 { QuestionnaireItem } from 'fhir/r4';
+import useRenderingExtensions from './useRenderingExtensions';
+
+function useReadOnly(qItem: QuestionnaireItem, parentIsReadOnly: boolean | undefined): boolean {
+  let { readOnly } = useRenderingExtensions(qItem);
+  if (typeof parentIsReadOnly === 'boolean' && parentIsReadOnly) {
+    readOnly = parentIsReadOnly;
+  }
+
+  return readOnly;
+}
+
+export default useReadOnly;

package/src/hooks/useSliderExtensions.ts

@@ -0,0 +1,50 @@
+/*
+ * 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 { getTextDisplayLower, getTextDisplayUpper } from '../utils/itemControl';
+import type { QuestionnaireItem } from 'fhir/r4';
+import { getMaxValue, getMinValue, getSliderStepValue } from '../utils/slider';
+
+const defaultMinValue = 0;
+const defaultMinLabel = '0';
+
+const defaultMaxValue = 100;
+const defaultMaxLabel = '100';
+
+const defaultStepValue = 1;
+
+interface SliderExtensions {
+  minValue: number;
+  minLabel: string;
+  maxValue: number;
+  maxLabel: string;
+  stepValue: number;
+}
+
+function useSliderExtensions(qItem: QuestionnaireItem): SliderExtensions {
+  const minValue = getMinValue(qItem) ?? defaultMinValue;
+  const maxValue = getMaxValue(qItem) ?? defaultMaxValue;
+  return {
+    minValue: minValue,
+    minLabel: getTextDisplayLower(qItem) ?? minValue.toString() ?? defaultMinLabel,
+    maxValue: maxValue,
+    maxLabel: getTextDisplayUpper(qItem) ?? maxValue.toString() ?? defaultMaxLabel,
+    stepValue: getSliderStepValue(qItem) ?? defaultStepValue
+  };
+}
+
+export default useSliderExtensions;

package/src/hooks/useTerminologyServerQuery.ts

@@ -71,8 +71,6 @@ function useTerminologyServerQuery(
     }
   );
 
-  console.log(isFetching);
-
   if (error) {
     console.warn('Ontoserver query failed. Details below: \n' + error);
     feedback = {

package/src/index.ts

@@ -80,32 +80,35 @@ export function removeHiddenAnswersFromResponse(
 }
 
 /**
- * Re-populate stuff
+ * Compare latest data from the server with the current QuestionnaireResponse and decide items to re-populate.
  *
  * @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);
+  const enableWhenIsActivated = useQuestionnaireStore.getState().enableWhenIsActivated;
+  const enableWhenItems = useQuestionnaireStore.getState().enableWhenItems;
+  const enableWhenExpressions = useQuestionnaireStore.getState().enableWhenExpressions;
 
-  return getItemsToRepopulate(
+  return getItemsToRepopulate({
     sourceQuestionnaire,
-    itemTypes,
     tabs,
     populatedResponse,
-    updatableResponse
-  );
+    updatableResponse,
+    enableWhenIsActivated,
+    enableWhenItems,
+    enableWhenExpressions
+  });
 }
 
 /**
- * Re-populate stuff
+ * Re-populate checked items in the re-population dialog into the current QuestionnaireResponse.
  *
  * @author Sean Fong
  */
-export function repopulate(checkedItemsToRepopulate: Record<string, ItemToRepopulate>) {
+export function repopulateResponse(checkedItemsToRepopulate: Record<string, ItemToRepopulate>) {
   const sourceQuestionnaire = useQuestionnaireStore.getState().sourceQuestionnaire;
   const updatableResponse = useQuestionnaireResponseStore.getState().updatableResponse;
 

package/src/interfaces/calculatedExpression.interface.ts

@@ -1,4 +1,4 @@
 export interface CalculatedExpression {
   expression: string;
-  value?: number | string;
+  value?: number | string | object;
 }

package/src/interfaces/questionnaireStore.interface.ts

@@ -34,4 +34,5 @@ export interface QuestionnaireModel {
   answerExpressions: Record<string, AnswerExpression>;
   processedValueSetCodings: Record<string, Coding[]>;
   processedValueSetUrls: Record<string, string>;
+  fhirPathContext: Record<string, any>;
 }

package/src/interfaces/renderProps.interface.ts

@@ -16,8 +16,9 @@
  */
 
 import type { QrRepeatGroup } from './repeatGroup.interface';
+import type { QuestionnaireResponseItem } from 'fhir/r4';
 
-export interface PropsWithQrItemChangeHandler<QuestionnaireResponseItem> {
+export interface PropsWithQrItemChangeHandler {
   onQrItemChange: (qrItem: QuestionnaireResponseItem) => unknown;
 }
 
@@ -33,6 +34,10 @@ export interface PropsWithIsTabledAttribute {
   isTabled: boolean;
 }
 
-export interface PropsWithTextShownAttribute {
-  textShown?: boolean;
+export interface PropsWithShowMinimalViewAttribute {
+  showMinimalView?: boolean;
+}
+
+export interface PropsWithParentIsReadOnlyAttribute {
+  parentIsReadOnly?: boolean;
 }

package/src/stores/useQuestionnaireStore.ts

@@ -56,6 +56,7 @@ export interface UseQuestionnaireStoreType {
   processedValueSetCodings: Record<string, Coding[]>;
   processedValueSetUrls: Record<string, string>;
   cachedValueSetCodings: Record<string, Coding[]>;
+  fhirPathContext: Record<string, any>;
   buildSourceQuestionnaire: (
     questionnaire: Questionnaire,
     questionnaireResponse?: QuestionnaireResponse,
@@ -91,6 +92,7 @@ const useQuestionnaireStore = create<UseQuestionnaireStoreType>()((set, get) =>
   processedValueSetCodings: {},
   processedValueSetUrls: {},
   cachedValueSetCodings: {},
+  fhirPathContext: {},
   buildSourceQuestionnaire: async (
     questionnaire,
     questionnaireResponse = cloneDeep(emptyResponse),
@@ -108,14 +110,16 @@ const useQuestionnaireStore = create<UseQuestionnaireStoreType>()((set, get) =>
       initialEnableWhenLinkedQuestions,
       initialEnableWhenExpressions,
       initialCalculatedExpressions,
-      firstVisibleTab
+      firstVisibleTab,
+      updatedFhirPathContext
     } = initialiseFormFromResponse({
       questionnaireResponse,
       enableWhenItems: questionnaireModel.enableWhenItems,
       enableWhenExpressions: questionnaireModel.enableWhenExpressions,
       calculatedExpressions: questionnaireModel.calculatedExpressions,
       variablesFhirPath: questionnaireModel.variables.fhirPathVariables,
-      tabs: questionnaireModel.tabs
+      tabs: questionnaireModel.tabs,
+      fhirPathContext: questionnaireModel.fhirPathContext
     });
 
     set({
@@ -131,7 +135,8 @@ const useQuestionnaireStore = create<UseQuestionnaireStoreType>()((set, get) =>
       calculatedExpressions: initialCalculatedExpressions,
       answerExpressions: questionnaireModel.answerExpressions,
       processedValueSetCodings: questionnaireModel.processedValueSetCodings,
-      processedValueSetUrls: questionnaireModel.processedValueSetUrls
+      processedValueSetUrls: questionnaireModel.processedValueSetUrls,
+      fhirPathContext: updatedFhirPathContext
     });
   },
   destroySourceQuestionnaire: () =>
@@ -148,7 +153,8 @@ const useQuestionnaireStore = create<UseQuestionnaireStoreType>()((set, get) =>
       calculatedExpressions: {},
       answerExpressions: {},
       processedValueSetCodings: {},
-      processedValueSetUrls: {}
+      processedValueSetUrls: {},
+      fhirPathContext: {}
     }),
   switchTab: (newTabIndex: number) => set(() => ({ currentTabIndex: newTabIndex })),
   markTabAsComplete: (tabLinkId: string) => {
@@ -182,20 +188,31 @@ const useQuestionnaireStore = create<UseQuestionnaireStoreType>()((set, get) =>
   toggleEnableWhenActivation: (isActivated: boolean) =>
     set(() => ({ enableWhenIsActivated: isActivated })),
   updateExpressions: (updatedResponse: QuestionnaireResponse) => {
-    const { isUpdated, updatedCalculatedExpressions, updatedEnableWhenExpressions } =
-      evaluateUpdatedExpressions({
-        updatedResponse: updatedResponse,
-        enableWhenExpressions: get().enableWhenExpressions,
-        calculatedExpressions: get().calculatedExpressions,
-        variablesFhirPath: get().variables.fhirPathVariables
-      });
+    const {
+      isUpdated,
+      updatedEnableWhenExpressions,
+      updatedCalculatedExpressions,
+      updatedFhirPathContext
+    } = evaluateUpdatedExpressions({
+      updatedResponse,
+      enableWhenExpressions: get().enableWhenExpressions,
+      calculatedExpressions: get().calculatedExpressions,
+      variablesFhirPath: get().variables.fhirPathVariables,
+      existingFhirPathContext: get().fhirPathContext
+    });
 
     if (isUpdated) {
       set(() => ({
         enableWhenExpressions: updatedEnableWhenExpressions,
-        calculatedExpressions: updatedCalculatedExpressions
+        calculatedExpressions: updatedCalculatedExpressions,
+        fhirPathContext: updatedFhirPathContext
       }));
+      return 0;
     }
+
+    set(() => ({
+      fhirPathContext: updatedFhirPathContext
+    }));
   },
   addCodingToCache: (valueSetUrl: string, codings: Coding[]) =>
     set(() => ({
@@ -205,11 +222,14 @@ const useQuestionnaireStore = create<UseQuestionnaireStoreType>()((set, get) =>
       }
     })),
   updatePopulatedProperties: (populatedResponse: QuestionnaireResponse, persistTabIndex) => {
-    const initialCalculatedExpressions = evaluateInitialCalculatedExpressions({
+    const evaluateInitialCalculatedExpressionsResult = evaluateInitialCalculatedExpressions({
       initialResponse: populatedResponse,
       calculatedExpressions: get().calculatedExpressions,
-      variablesFhirPath: get().variables.fhirPathVariables
+      variablesFhirPath: get().variables.fhirPathVariables,
+      existingFhirPathContext: get().fhirPathContext
     });
+    const { initialCalculatedExpressions } = evaluateInitialCalculatedExpressionsResult;
+    let updatedFhirPathContext = evaluateInitialCalculatedExpressionsResult.updatedFhirPathContext;
 
     const updatedResponse = initialiseCalculatedExpressionValues(
       get().sourceQuestionnaire,
@@ -228,15 +248,18 @@ const useQuestionnaireStore = create<UseQuestionnaireStoreType>()((set, get) =>
       enableWhenExpressions: get().enableWhenExpressions,
       calculatedExpressions: initialCalculatedExpressions,
       variablesFhirPath: get().variables.fhirPathVariables,
-      tabs: get().tabs
+      tabs: get().tabs,
+      fhirPathContext: updatedFhirPathContext
     });
+    updatedFhirPathContext = evaluateInitialCalculatedExpressionsResult.updatedFhirPathContext;
 
     set(() => ({
       enableWhenItems: initialEnableWhenItems,
       enableWhenLinkedQuestions: initialEnableWhenLinkedQuestions,
       enableWhenExpressions: initialEnableWhenExpressions,
       calculatedExpressions: initialCalculatedExpressions,
-      currentTabIndex: persistTabIndex ? get().currentTabIndex : firstVisibleTab
+      currentTabIndex: persistTabIndex ? get().currentTabIndex : firstVisibleTab,
+      fhirPathContext: updatedFhirPathContext
     }));
 
     return updatedResponse;

package/src/theme/customGlobalStyles.tsx

@@ -57,10 +57,6 @@ export default function CustomGlobalStyles() {
         img: {
           display: 'block',
           maxWidth: '100%'
-        },
-        ul: {
-          margin: 0,
-          padding: 0
         }
       }}
     />

package/src/theme/typography.ts

@@ -38,9 +38,7 @@ export function responsiveFontSizes(props: { sm: number; md: number; lg: number
 
 const typography = {
   fontFamily: ['Inter', 'sans-serif', 'Roboto', 'Arial', '"Helvetica Neue"', 'Helvetica'].join(','),
-  fontWeightRegular: 400,
-  fontWeightMedium: 600,
-  fontWeightBold: 700,
+  fontWeightRegular: 500,
   h1: {
     fontWeight: 800,
     lineHeight: 80 / 64,
@@ -85,11 +83,11 @@ const typography = {
   subtitle2: {
     fontWeight: 600,
     lineHeight: 22 / 14,
-    fontSize: pxToRem(11)
+    fontSize: pxToRem(11.5)
   },
   body1: {
     lineHeight: 1.5,
-    fontSize: pxToRem(12)
+    fontSize: pxToRem(12.25)
   },
   body2: {
     lineHeight: 22 / 14,