Merge pull request #333 from aehrc/feature/context-display

Add support for context displays
aehrc · Jul 24, 2023 · e7b5440 · e7b5440
2 parents 716aa2d + b2650af
commit e7b5440
Show file tree

Hide file tree

Showing 15 changed files with 180 additions and 137 deletions.
diff --git a/apps/smart-forms-app/package.json b/apps/smart-forms-app/package.json
@@ -60,7 +60,7 @@
     "@jest/globals": "^29.5.0",
     "@sentry/cli": "^2.19.4",
     "@tanstack/react-query-devtools": "^4.29.6",
-    "@types/fhir": "^0.0.36",
+    "@types/fhir": "^0.0.37",
     "@types/jest": "^29.5.2",
     "@types/lodash.clonedeep": "^4.5.7",
     "@types/lodash.debounce": "^4.0.7",

diff --git a/...features/dashboard/components/DashboardPages/QuestionnairePage/QuestionnaireTableView.tsx b/...features/dashboard/components/DashboardPages/QuestionnairePage/QuestionnaireTableView.tsx
@@ -16,7 +16,6 @@
  */
 
 import QuestionnaireListToolbar from './TableComponents/QuestionnaireListToolbar.tsx';
-import Scrollbar from '../../../../../components/Scrollbar/Scrollbar.tsx';
 import { Fade, Table as MuiTable, TableBody, TableContainer, Typography } from '@mui/material';
 import DashboardTableHead from '../DashboardTableHead.tsx';
 import QuestionnaireTableRow from './TableComponents/QuestionnaireTableRow.tsx';
@@ -71,38 +70,36 @@ function QuestionnaireTableView(props: QuestionnaireTableViewProps) {
         onSearch={onSearch}
       />
 
-      <Scrollbar>
-        <TableContainer sx={{ minWidth: 575 }}>
-          <MuiTable>
-            <DashboardTableHead headers={headers} />
-            <TableBody>
-              {table.getRowModel().rows.map((row) => {
-                const rowData = row.original;
-                const isSelected = selectedQuestionnaire?.listItem.id === rowData.id;
+      <TableContainer sx={{ minWidth: 575 }}>
+        <MuiTable stickyHeader>
+          <DashboardTableHead headers={headers} />
+          <TableBody>
+            {table.getRowModel().rows.map((row) => {
+              const rowData = row.original;
+              const isSelected = selectedQuestionnaire?.listItem.id === rowData.id;
 
-                return (
-                  <QuestionnaireTableRow
-                    key={rowData.id}
-                    row={rowData}
-                    isSelected={isSelected}
-                    onRowClick={() => onRowClick(rowData.id)}
-                  />
-                );
-              })}
-            </TableBody>
+              return (
+                <QuestionnaireTableRow
+                  key={rowData.id}
+                  row={rowData}
+                  isSelected={isSelected}
+                  onRowClick={() => onRowClick(rowData.id)}
+                />
+              );
+            })}
+          </TableBody>
 
-            {isEmpty || fetchStatus === 'error' || isInitialLoading ? (
-              <QuestionnaireListFeedback
-                isEmpty={isEmpty}
-                isInitialLoading={isInitialLoading}
-                status={fetchStatus}
-                searchInput={searchInput}
-                error={fetchError}
-              />
-            ) : null}
-          </MuiTable>
-        </TableContainer>
-      </Scrollbar>
+          {isEmpty || fetchStatus === 'error' || isInitialLoading ? (
+            <QuestionnaireListFeedback
+              isEmpty={isEmpty}
+              isInitialLoading={isInitialLoading}
+              status={fetchStatus}
+              searchInput={searchInput}
+              error={fetchError}
+            />
+          ) : null}
+        </MuiTable>
+      </TableContainer>
 
       <DashboardTablePagination table={table}>
         <Fade in={isFetching}>

diff --git a/...app/src/features/renderer/components/FormPage/QFormComponents/BooleanItem/BooleanItem.tsx b/...app/src/features/renderer/components/FormPage/QFormComponents/BooleanItem/BooleanItem.tsx
@@ -26,7 +26,6 @@ import { createEmptyQrItem } from '../../../../utils/qrItem.ts';
 import { FullWidthFormComponentBox } from '../../../../../../components/Box/Box.styles.tsx';
 import FieldGrid from '../FieldGrid.tsx';
 import BooleanField from './BooleanField.tsx';
-import useInitialiseBooleanFalse from '../../../../hooks/useInitialiseBooleanFalse.ts';
 import { Box } from '@mui/material';
 
 interface BooleanItemProps
@@ -49,8 +48,6 @@ function BooleanItem(props: BooleanItemProps) {
     checked = qrItem.answer[0].valueBoolean;
   }
 
-  useInitialiseBooleanFalse(qItem, qrItem, onQrItemChange);
-
   // Event handlers
   function handleCheckedChange(newChecked: boolean) {
     onQrItemChange({

diff --git a/...app/src/features/renderer/components/FormPage/QFormComponents/DisplayItem/DisplayItem.tsx b/...app/src/features/renderer/components/FormPage/QFormComponents/DisplayItem/DisplayItem.tsx
@@ -19,6 +19,7 @@ import { memo } from 'react';
 import type { QuestionnaireItem } from 'fhir/r4';
 import { FullWidthFormComponentBox } from '../../../../../../components/Box/Box.styles.tsx';
 import LabelText from '../QItemParts/LabelText.tsx';
+import { isSpecificItemControl } from '../../../../utils/itemControl.ts';
 
 interface DisplayItemProps {
   qItem: QuestionnaireItem;
@@ -27,6 +28,11 @@ interface DisplayItemProps {
 const DisplayItem = memo(function DisplayItem(props: DisplayItemProps) {
   const { qItem } = props;
 
+  const isContextDisplay = isSpecificItemControl(qItem, 'context-display');
+  if (isContextDisplay) {
+    return null;
+  }
+
   return (
     <FullWidthFormComponentBox>
       <LabelText qItem={qItem} />

diff --git a/...-app/src/features/renderer/components/FormPage/QFormComponents/GroupItem/GroupHeading.tsx b/...-app/src/features/renderer/components/FormPage/QFormComponents/GroupItem/GroupHeading.tsx
@@ -19,9 +19,10 @@ import { memo } from 'react';
 import { Box, Divider } from '@mui/material';
 import { QGroupHeadingTypography } from '../Typography.styles.ts';
 import LabelText from '../QItemParts/LabelText.tsx';
-import CompleteTabButton from '../../Tabs/CompleteTabButton.tsx';
 import type { PropsWithIsRepeatedAttribute } from '../../../../types/renderProps.interface.ts';
 import type { QuestionnaireItem } from 'fhir/r4';
+import { getContextDisplays } from '../../../../utils/tabs.ts';
+import GroupHeadingIcon from './GroupHeadingIcon.tsx';
 
 interface GroupHeadingProps extends PropsWithIsRepeatedAttribute {
   qItem: QuestionnaireItem;
@@ -31,6 +32,8 @@ interface GroupHeadingProps extends PropsWithIsRepeatedAttribute {
 const GroupHeading = memo(function GroupHeading(props: GroupHeadingProps) {
   const { qItem, tabIsMarkedAsComplete, isRepeated } = props;
 
+  const contextDisplayItems = getContextDisplays(qItem);
+
   if (isRepeated) {
     return null;
   }
@@ -42,12 +45,11 @@ const GroupHeading = memo(function GroupHeading(props: GroupHeadingProps) {
           <LabelText qItem={qItem} />
         </QGroupHeadingTypography>
 
-        {tabIsMarkedAsComplete !== undefined ? (
-          <CompleteTabButton
-            tabLinkId={qItem.linkId}
-            tabIsMarkedAsComplete={tabIsMarkedAsComplete}
-          />
-        ) : null}
+        <Box display="flex" columnGap={1}>
+          {contextDisplayItems.map((item) => {
+            return <GroupHeadingIcon key={item.linkId} displayItem={item} />;
+          })}
+        </Box>
       </Box>
       {qItem.text ? <Divider sx={{ mt: 1, mb: 1.5 }} light /> : null}
     </>

diff --git a/.../src/features/renderer/components/FormPage/QFormComponents/GroupItem/GroupHeadingIcon.tsx b/.../src/features/renderer/components/FormPage/QFormComponents/GroupItem/GroupHeadingIcon.tsx
@@ -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 { memo } from 'react';
+import type { QuestionnaireItem } from 'fhir/r4';
+import useHidden from '../../../../hooks/useHidden.ts';
+import LabelText from '../QItemParts/LabelText.tsx';
+
+interface GroupHeadingIconProps {
+  displayItem: QuestionnaireItem;
+}
+
+const GroupHeadingIcon = memo(function GroupHeadingIcon(props: GroupHeadingIconProps) {
+  const { displayItem } = props;
+
+  const itemIsHidden = useHidden(displayItem);
+  if (itemIsHidden) {
+    return null;
+  }
+
+  return <LabelText qItem={displayItem} />;
+});
+
+export default GroupHeadingIcon;
diff --git a/...ms-app/src/features/renderer/components/FormPage/QFormComponents/QItemParts/LabelText.tsx b/...ms-app/src/features/renderer/components/FormPage/QFormComponents/QItemParts/LabelText.tsx
@@ -32,15 +32,16 @@ const LabelText = memo(function LabelText(props: LabelTextProps) {
 
   // parse xHTML if found
   const xHtmlString = getXHtmlString(qItem);
+
   if (xHtmlString) {
-    return <Box sx={{ mt: 0.5 }}>{parse(xHtmlString)}</Box>;
+    return <Box>{parse(xHtmlString)}</Box>;
   }
 
   // parse xHTML if found
   const markdownString = getMarkdownString(qItem);
   if (markdownString) {
     return (
-      <Box sx={{ mt: 0.5 }}>
+      <Box>
         <ReactMarkdown>{markdownString}</ReactMarkdown>
       </Box>
     );

diff --git a/...-app/src/features/renderer/components/FormPage/QFormComponents/Tables/QItemGroupTable.tsx b/...-app/src/features/renderer/components/FormPage/QFormComponents/Tables/QItemGroupTable.tsx
@@ -145,11 +145,6 @@ function QItemGroupTable(props: Props) {
                 answeredQrItem.item = nullableQrItem.item;
               }
 
-              console.log('----');
-              console.log(qItem);
-              console.log(answeredQrItem);
-              console.log('----');
-
               return (
                 <TableRow key={nanoId}>
                   <QItemGroupTableRow

diff --git a/apps/smart-forms-app/src/features/renderer/components/FormPage/Tabs/FormBodySingleTab.tsx b/apps/smart-forms-app/src/features/renderer/components/FormPage/Tabs/FormBodySingleTab.tsx
@@ -16,52 +16,48 @@
  */
 
 import { memo } from 'react';
-import {
-  Box,
-  ListItemButton,
-  ListItemIcon,
-  ListItemText,
-  Tooltip,
-  Typography
-} from '@mui/material';
-import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import Iconify from '../../../../../components/Iconify/Iconify.tsx';
+import { Box, ListItemButton, ListItemText, Typography } from '@mui/material';
 import useQuestionnaireStore from '../../../../../stores/useQuestionnaireStore.ts';
+import type { QuestionnaireItem } from 'fhir/r4';
+import { getContextDisplays } from '../../../utils/tabs.ts';
+import GroupHeadingIcon from '../QFormComponents/GroupItem/GroupHeadingIcon.tsx';
 
 interface FormBodySingleTabProps {
+  qItem: QuestionnaireItem;
   selected: boolean;
   tabLabel: string;
   listIndex: number;
-  markedAsComplete: boolean;
 }
 
 const FormBodySingleTab = memo(function FormBodySingleTab(props: FormBodySingleTabProps) {
-  const { selected, tabLabel, listIndex, markedAsComplete } = props;
+  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.5, py: 0.6 }} onClick={handleTabClick}>
-      <ListItemIcon sx={{ minWidth: 36 }}>
-        {markedAsComplete ? (
-          <Tooltip title="Completed">
-            <CheckCircleIcon fontSize="small" color="secondary" />
-          </Tooltip>
-        ) : (
-          <Tooltip title="In progress">
-            <Box display="flex">
-              <Iconify icon={'carbon:in-progress'} />
+    <>
+      <ListItemButton selected={selected} sx={{ my: 0.25, py: 0.75 }} onClick={handleTabClick}>
+        <ListItemText
+          primary={
+            <Box display="flex" alignItems="center" justifyContent="space-between">
+              <Typography variant="subtitle2">{tabLabel}</Typography>
+              <Box display="flex">
+                {contextDisplayItems.map((item) => {
+                  return <GroupHeadingIcon key={item.linkId} displayItem={item} />;
+                })}
+              </Box>
             </Box>
-          </Tooltip>
-        )}
-      </ListItemIcon>
-      <ListItemText primary={<Typography variant="subtitle2">{tabLabel}</Typography>} />
-    </ListItemButton>
+          }
+        />
+      </ListItemButton>
+    </>
   );
 });
 

diff --git a/apps/smart-forms-app/src/features/renderer/components/FormPage/Tabs/FormBodyTabList.tsx b/apps/smart-forms-app/src/features/renderer/components/FormPage/Tabs/FormBodyTabList.tsx
@@ -61,15 +61,14 @@ const FormBodyTabList = memo(function FormBodyTabList(props: FormBodyTabListProp
 
               const tabIsSelected = currentTabIndex.toString() === i.toString();
               const tabLabel = getShortText(qItem) ?? qItem.text ?? '';
-              const tabIsMarkedAsComplete = tabs[qItem.linkId].isComplete ?? false;
 
               return (
                 <Collapse key={qItem.linkId} timeout={100}>
                   <FormBodySingleTab
+                    qItem={qItem}
                     selected={tabIsSelected}
                     tabLabel={tabLabel}
                     listIndex={i}
-                    markedAsComplete={tabIsMarkedAsComplete}
                   />
                 </Collapse>
               );

diff --git a/apps/smart-forms-app/src/features/renderer/hooks/useInitialiseBooleanFalse.ts b/apps/smart-forms-app/src/features/renderer/hooks/useInitialiseBooleanFalse.ts