@aehrc/smart-forms-renderer 0.3.0 → 0.5.0

package/src/components/Lists.styles.ts

@@ -0,0 +1,39 @@
+/*
+ * 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 { List, styled } from '@mui/material';
+import { alpha } from '@mui/material/styles';
+
+export const PrimarySelectableList = styled(List)(({ theme }) => ({
+  '&& .Mui-selected': {
+    color: theme.palette.primary.dark,
+    backgroundColor: alpha(theme.palette.primary.main, 0.2),
+    borderRadius: 30,
+    '& .MuiTypography-root': {
+      fontWeight: 'bold'
+    }
+  },
+  '& .MuiListItemButton-root': {
+    color: '#444746',
+    borderRadius: 30
+  },
+  '& .MuiListItemButton-root:hover': {
+    color: theme.palette.primary.dark,
+    backgroundColor: alpha(theme.palette.primary.main, 0.09),
+    borderRadius: 30
+  }
+}));

package/src/components/Tabs/CompleteTabButton.tsx

@@ -0,0 +1,42 @@
+/*
+ * 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, { memo } from 'react';
+import { IconButton, Tooltip } from '@mui/material';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import useQuestionnaireStore from '../../stores/useQuestionnaireStore';
+
+interface CompleteTabButtonProps {
+  tabLinkId: string;
+  tabIsMarkedAsComplete: boolean;
+}
+
+const CompleteTabButton = memo(function CompleteTabButton(props: CompleteTabButtonProps) {
+  const { tabLinkId, tabIsMarkedAsComplete } = props;
+
+  const markTabAsComplete = useQuestionnaireStore((state) => state.markTabAsComplete);
+
+  return (
+    <Tooltip title={tabIsMarkedAsComplete ? 'Mark as incomplete' : 'Complete tab'}>
+      <IconButton onClick={() => markTabAsComplete(tabLinkId)}>
+        <CheckCircleIcon color={tabIsMarkedAsComplete ? 'success' : 'inherit'} />
+      </IconButton>
+    </Tooltip>
+  );
+});
+
+export default CompleteTabButton;

package/src/components/Tabs/FormBodySingleTab.tsx

@@ -0,0 +1,67 @@
+/*
+ * 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, { memo } from 'react';
+import { Box, ListItemButton, ListItemText, Typography } from '@mui/material';
+import useQuestionnaireStore from '../../stores/useQuestionnaireStore';
+import type { QuestionnaireItem } from 'fhir/r4';
+import { getContextDisplays } from '../../utils/tabs';
+import ContextDisplayItem from '../FormComponents/ItemParts/ContextDisplayItem';
+
+interface FormBodySingleTabProps {
+  qItem: QuestionnaireItem;
+  selected: boolean;
+  tabLabel: string;
+  listIndex: number;
+}
+
+const FormBodySingleTab = memo(function FormBodySingleTab(props: FormBodySingleTabProps) {
+  const { qItem, selected, tabLabel, listIndex } = props;
+
+  const switchTab = useQuestionnaireStore((state) => state.switchTab);
+
+  const contextDisplayItems = getContextDisplays(qItem);
+
+  function handleTabClick() {
+    switchTab(listIndex);
+    window.scrollTo(0, 0);
+  }
+
+  return (
+    <>
+      <ListItemButton
+        selected={selected}
+        sx={{ my: 0.2, minHeight: '36px' }}
+        onClick={handleTabClick}>
+        <ListItemText
+          primary={
+            <Box display="flex" alignItems="center" justifyContent="space-between">
+              <Typography variant="subtitle2">{tabLabel}</Typography>
+              <Box display="flex">
+                {contextDisplayItems.map((item) => {
+                  return <ContextDisplayItem key={item.linkId} displayItem={item} />;
+                })}
+              </Box>
+            </Box>
+          }
+        />
+      </ListItemButton>
+    </>
+  );
+});
+
+export default FormBodySingleTab;

package/src/components/Tabs/FormBodyTabList.tsx

@@ -0,0 +1,83 @@
+/*
+ * 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, { memo } from 'react';
+import { Box, Card, Collapse } from '@mui/material';
+import { PrimarySelectableList } from '../Lists.styles';
+import { TransitionGroup } from 'react-transition-group';
+import { isHidden } from '../../utils/qItem';
+import { getShortText } from '../../utils/itemControl';
+import type { QuestionnaireItem } from 'fhir/r4';
+import FormBodySingleTab from './FormBodySingleTab';
+import type { Tabs } from '../../interfaces/tab.interface';
+import useQuestionnaireStore from '../../stores/useQuestionnaireStore';
+
+interface FormBodyTabListProps {
+  qFormItems: QuestionnaireItem[];
+  currentTabIndex: number;
+  tabs: Tabs;
+}
+
+const FormBodyTabList = memo(function FormBodyTabList(props: FormBodyTabListProps) {
+  const { qFormItems, currentTabIndex, tabs } = props;
+
+  const enableWhenIsActivated = useQuestionnaireStore((state) => state.enableWhenIsActivated);
+  const enableWhenItems = useQuestionnaireStore((state) => state.enableWhenItems);
+  const enableWhenExpressions = useQuestionnaireStore((state) => state.enableWhenExpressions);
+
+  return (
+    <Card sx={{ p: 0.75, mb: 2 }}>
+      <Box sx={{ flexGrow: 1 }}>
+        <PrimarySelectableList dense disablePadding sx={{ my: 1 }} data-test="renderer-tab-list">
+          <TransitionGroup>
+            {qFormItems.map((qItem, i) => {
+              const isTab = !!tabs[qItem.linkId];
+
+              if (
+                !isTab ||
+                isHidden({
+                  questionnaireItem: qItem,
+                  enableWhenIsActivated,
+                  enableWhenItems,
+                  enableWhenExpressions
+                })
+              ) {
+                return null;
+              }
+
+              const tabIsSelected = currentTabIndex.toString() === i.toString();
+              const tabLabel = getShortText(qItem) ?? qItem.text ?? '';
+
+              return (
+                <Collapse key={qItem.linkId} timeout={100}>
+                  <FormBodySingleTab
+                    qItem={qItem}
+                    selected={tabIsSelected}
+                    tabLabel={tabLabel}
+                    listIndex={i}
+                  />
+                </Collapse>
+              );
+            })}
+          </TransitionGroup>
+        </PrimarySelectableList>
+      </Box>
+    </Card>
+  );
+});
+
+export default FormBodyTabList;

package/src/components/index.ts

@@ -0,0 +1,18 @@
+/*
+ * 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.
+ */
+
+export * from './FormRenderer';

package/src/hooks/index.ts

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

package/src/hooks/useBackToTop.ts

@@ -0,0 +1,29 @@
+/*
+ * 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 { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+function useBackToTop() {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+}
+
+export default useBackToTop;

package/src/hooks/useDebounce.ts

@@ -0,0 +1,45 @@
+/*
+ * 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 { useEffect, useState } from 'react';
+
+// Lifted from https://usehooks.com/useDebounce/
+function useDebounce(value: string, delay: number): string {
+  // State and setters for debounced value
+  const [debouncedValue, setDebouncedValue] = useState<string>(value);
+
+  useEffect(
+    () => {
+      // Update debounced value after delay
+      const handler = setTimeout(() => {
+        setDebouncedValue(value);
+      }, delay);
+
+      // Cancel the timeout if value changes (also on delay change or unmount)
+      // This is how we prevent debounced value from updating if value is changed ...
+      // .. within the delay period. Timeout gets cleared and restarted.
+      return () => {
+        clearTimeout(handler);
+      };
+    },
+    [value, delay] // Only re-call effect if value or delay changes
+  );
+
+  return debouncedValue;
+}
+
+export default useDebounce;

package/src/hooks/useDecimalCalculatedExpression.ts

@@ -0,0 +1,80 @@
+/*
+ * 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 { useEffect, useState } from 'react';
+import { createEmptyQrItemWithUnit } from '../utils/qrItem';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import useQuestionnaireStore from '../stores/useQuestionnaireStore';
+
+interface UseDecimalCalculatedExpression {
+  calcExpUpdated: boolean;
+}
+
+interface useDecimalCalculatedExpressionProps {
+  qItem: QuestionnaireItem;
+  inputValue: string;
+  displayUnit: string;
+  precision: number | null;
+  setInputValue: (value: string) => void;
+  onQrItemChange: (qrItem: QuestionnaireResponseItem) => void;
+}
+
+function useDecimalCalculatedExpression(
+  props: useDecimalCalculatedExpressionProps
+): UseDecimalCalculatedExpression {
+  const { qItem, inputValue, displayUnit, precision, setInputValue, onQrItemChange } = props;
+
+  const calculatedExpressions = useQuestionnaireStore((state) => state.calculatedExpressions);
+
+  const [calcExpUpdated, setCalcExpUpdated] = useState(false);
+
+  useEffect(
+    () => {
+      const calcExpression = calculatedExpressions[qItem.linkId];
+
+      // only update if calculated value is different from current value
+      if (calcExpression?.value !== inputValue && typeof calcExpression?.value === 'number') {
+        const value = precision
+          ? parseFloat(calcExpression.value.toFixed(precision))
+          : calcExpression.value;
+
+        // only update if calculated value is different from current value
+        if (value !== parseFloat(inputValue)) {
+          // update ui to show calculated value changes
+          setCalcExpUpdated(true);
+          setTimeout(() => {
+            setCalcExpUpdated(false);
+          }, 500);
+
+          // update questionnaireResponse
+          setInputValue(precision ? value.toFixed(precision) : value.toString());
+          onQrItemChange({
+            ...createEmptyQrItemWithUnit(qItem, displayUnit),
+            answer: [{ valueDecimal: value }]
+          });
+        }
+      }
+    },
+    // Only trigger this effect if calculatedExpression of item changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [calculatedExpressions]
+  );
+
+  return { calcExpUpdated: calcExpUpdated };
+}
+
+export default useDecimalCalculatedExpression;

package/src/hooks/useHidden.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 type { QuestionnaireItem } from 'fhir/r4';
+import { hasHiddenExtension } from '../utils/itemControl';
+import useQuestionnaireStore from '../stores/useQuestionnaireStore';
+import { isHiddenByEnableWhens } from '../utils/qItem';
+
+function useHidden(qItem: QuestionnaireItem): boolean {
+  const enableWhenIsActivated = useQuestionnaireStore((state) => state.enableWhenIsActivated);
+  const enableWhenItems = useQuestionnaireStore((state) => state.enableWhenItems);
+  const enableWhenExpressions = useQuestionnaireStore((state) => state.enableWhenExpressions);
+
+  if (hasHiddenExtension(qItem)) {
+    return true;
+  }
+
+  return isHiddenByEnableWhens({
+    linkId: qItem.linkId,
+    enableWhenIsActivated,
+    enableWhenItems,
+    enableWhenExpressions
+  });
+}
+
+export default useHidden;

package/src/hooks/useInitialiseGroupTable.ts

@@ -0,0 +1,42 @@
+/*
+ * 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 { QuestionnaireResponseItem } from 'fhir/r4';
+import { nanoid } from 'nanoid';
+import type { GroupTableRow } from '../interfaces/groupTable.interface';
+
+function useInitialiseGroupTable(qrItems: QuestionnaireResponseItem[]): GroupTableRow[] {
+  let initialGroupTableRows: GroupTableRow[] = [
+    {
+      nanoId: nanoid(),
+      qrItem: null
+    }
+  ];
+
+  if (qrItems.length > 0) {
+    initialGroupTableRows = qrItems.map((qrItem) => {
+      return {
+        nanoId: nanoid(),
+        qrItem
+      };
+    });
+  }
+
+  return initialGroupTableRows;
+}
+
+export default useInitialiseGroupTable;

package/src/hooks/useInitialiseRenderer.ts

@@ -0,0 +1,62 @@
+/*
+ * 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 { Questionnaire, QuestionnaireResponse } from 'fhir/r4';
+import { useLayoutEffect, useState } from 'react';
+import { createQuestionnaireResponse } from '../utils/qrItem';
+import useQuestionnaireStore from '../stores/useQuestionnaireStore';
+import useQuestionnaireResponseStore from '../stores/useQuestionnaireResponseStore';
+
+function useInitialiseRenderer(
+  questionnaire: Questionnaire,
+  questionnaireResponse?: QuestionnaireResponse,
+  additionalVariables?: Record<string, object>
+): 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 [loading, setLoading] = useState(true);
+
+  useLayoutEffect(() => {
+    setLoading(true);
+    buildSourceQuestionnaire(questionnaire, questionnaireResponse, additionalVariables).then(() => {
+      buildSourceResponse(createQuestionnaireResponse(questionnaire));
+
+      if (questionnaireResponse) {
+        const updatedResponse = updatePopulatedProperties(questionnaireResponse);
+        populateResponse(updatedResponse);
+      }
+      setLoading(false);
+    });
+  }, [
+    questionnaire,
+    questionnaireResponse,
+    buildSourceQuestionnaire,
+    buildSourceResponse,
+    populateResponse,
+    updatePopulatedProperties,
+    additionalVariables
+  ]);
+
+  return loading;
+}
+
+export default useInitialiseRenderer;

package/src/hooks/useInitialiseRepeatAnswers.ts

@@ -0,0 +1,42 @@
+/*
+ * 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 { QuestionnaireResponseItem } from 'fhir/r4';
+import type { RepeatAnswer } from '../interfaces/repeatItem.interface';
+import { nanoid } from 'nanoid';
+
+function useInitialiseRepeatAnswers(qrItem: QuestionnaireResponseItem): RepeatAnswer[] {
+  let initialRepeatAnswers: RepeatAnswer[] = [
+    {
+      nanoId: nanoid(),
+      answer: null
+    }
+  ];
+
+  if (qrItem?.answer) {
+    initialRepeatAnswers = qrItem.answer.map((answer) => {
+      return {
+        nanoId: nanoid(),
+        answer
+      };
+    });
+  }
+
+  return initialRepeatAnswers;
+}
+
+export default useInitialiseRepeatAnswers;

package/src/hooks/useInitialiseRepeatGroups.ts

@@ -0,0 +1,42 @@
+/*
+ * 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 { QuestionnaireResponseItem } from 'fhir/r4';
+import { nanoid } from 'nanoid';
+import type { RepeatGroupSingle } from '../interfaces/repeatGroup.interface';
+
+function useInitialiseRepeatGroups(qrItems: QuestionnaireResponseItem[]): RepeatGroupSingle[] {
+  let initialRepeatGroupAnswers: RepeatGroupSingle[] = [
+    {
+      nanoId: nanoid(),
+      qrItem: null
+    }
+  ];
+
+  if (qrItems.length > 0) {
+    initialRepeatGroupAnswers = qrItems.map((qrItem) => {
+      return {
+        nanoId: nanoid(),
+        qrItem
+      };
+    });
+  }
+
+  return initialRepeatGroupAnswers;
+}
+
+export default useInitialiseRepeatGroups;