Merge pull request #432 from aehrc/feature/draft-indicator

Clean up functionality for expanding/collapsing completed tabs
aehrc · Sep 4, 2023 · f063284 · f063284
2 parents 2cc7944 + 7574337
commit f063284
Show file tree

Hide file tree

Showing 7 changed files with 184 additions and 212 deletions.
diff --git a/apps/smart-forms-app/src/utils/initaliseForm.ts b/apps/smart-forms-app/src/utils/initaliseForm.ts
diff --git a/apps/smart-forms-app/src/utils/tabs.ts b/apps/smart-forms-app/src/utils/tabs.ts
diff --git a/packages/smart-forms-renderer/src/components/Renderer/FormBodyTabbed.tsx b/packages/smart-forms-renderer/src/components/Renderer/FormBodyTabbed.tsx
@@ -23,7 +23,7 @@ import TabPanel from '@mui/lab/TabPanel';
 import { getQrItemsIndex, mapQItemsIndex } from '../../utils/mapItem';
 import GroupItem from '../FormComponents/GroupItem/GroupItem';
 import { updateQrGroup } from '../../utils/qrItem';
-import FormBodyTabList from '../Tabs/FormBodyTabList';
+import FormBodyTabListWrapper from '../Tabs/FormBodyTabListWrapper';
 import type { PropsWithQrItemChangeHandler } from '../../interfaces/renderProps.interface';
 import useQuestionnaireStore from '../../stores/useQuestionnaireStore';
 
@@ -61,7 +61,7 @@ function FormBodyTabbed(props: FormBodyTabbedProps) {
     <Grid container spacing={2}>
       <TabContext value={currentTab.toString()}>
         <Grid item xs={12} md={3.5} lg={3} xl={2.75}>
-          <FormBodyTabList qFormItems={qItems} currentTabIndex={currentTab} tabs={tabs} />
+          <FormBodyTabListWrapper qFormItems={qItems} currentTabIndex={currentTab} tabs={tabs} />
         </Grid>
 
         <Grid item xs={12} md={8.5} lg={9} xl={9.25}>

diff --git a/packages/smart-forms-renderer/src/components/Tabs/FormBodySingleTab.tsx b/packages/smart-forms-renderer/src/components/Tabs/FormBodySingleTab.tsx
@@ -15,53 +15,28 @@
  * limitations under the License.
  */
 
-import React, { memo, useMemo } from 'react';
+import React, { memo } from 'react';
 import Box from '@mui/material/Box';
 import ListItemButton from '@mui/material/ListItemButton';
 import ListItemText from '@mui/material/ListItemText';
 import Typography from '@mui/material/Typography';
 
 import useQuestionnaireStore from '../../stores/useQuestionnaireStore';
 import type { QuestionnaireItem } from 'fhir/r4';
-import { getContextDisplays } from '../../utils/tabs';
-import ItemLabelText from '../FormComponents/ItemParts/ItemLabelText';
-import { isHidden } from '../../utils/qItem';
+import ContextDisplayItem from '../FormComponents/ItemParts/ContextDisplayItem';
 
 interface FormBodySingleTabProps {
-  qItem: QuestionnaireItem;
+  contextDisplayItems: QuestionnaireItem[];
   selected: boolean;
   tabLabel: string;
   listIndex: number;
-  completedTabsCollapsed: boolean;
 }
 
 const FormBodySingleTab = memo(function FormBodySingleTab(props: FormBodySingleTabProps) {
-  const { qItem, selected, tabLabel, listIndex, completedTabsCollapsed } = props;
+  const { contextDisplayItems, selected, tabLabel, listIndex } = props;
 
-  const enableWhenIsActivated = useQuestionnaireStore((state) => state.enableWhenIsActivated);
-  const enableWhenItems = useQuestionnaireStore((state) => state.enableWhenItems);
-  const enableWhenExpressions = useQuestionnaireStore((state) => state.enableWhenExpressions);
   const switchTab = useQuestionnaireStore((state) => state.switchTab);
 
-  const visibleContextDisplayItems = useMemo(
-    () =>
-      getContextDisplays(qItem).filter(
-        (contextDisplayItem) =>
-          !isHidden({
-            questionnaireItem: contextDisplayItem,
-            enableWhenIsActivated,
-            enableWhenItems,
-            enableWhenExpressions
-          })
-      ),
-    [enableWhenExpressions, enableWhenIsActivated, enableWhenItems, qItem]
-  );
-
-  const tabIsCompleted = visibleContextDisplayItems.find((item) => item.text === 'Complete');
-  if (tabIsCompleted && completedTabsCollapsed) {
-    return null;
-  }
-
   function handleTabClick() {
     switchTab(listIndex);
     window.scrollTo(0, 0);
@@ -78,9 +53,9 @@ const FormBodySingleTab = memo(function FormBodySingleTab(props: FormBodySingleT
             <Box display="flex" alignItems="center" justifyContent="space-between">
               <Typography variant="subtitle2">{tabLabel}</Typography>
               <Box display="flex" minHeight={24} minWidth={24} ml={1}>
-                {visibleContextDisplayItems.map((item) => (
-                  <ItemLabelText key={item.linkId} qItem={item} />
-                ))}
+                {contextDisplayItems.map((item) => {
+                  return <ContextDisplayItem key={item.linkId} displayItem={item} />;
+                })}
               </Box>
             </Box>
           }

diff --git a/packages/smart-forms-renderer/src/components/Tabs/FormBodyTabList.tsx b/packages/smart-forms-renderer/src/components/Tabs/FormBodyTabList.tsx
@@ -15,99 +15,70 @@
  * limitations under the License.
  */
 
-import React, { memo, useState } from 'react';
-import Box from '@mui/material/Box';
-import Card from '@mui/material/Card';
+import React, { memo, useMemo } from 'react';
 import Collapse from '@mui/material/Collapse';
-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';
-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 { getContextDisplays, isTabHidden } from '../../utils/tabs';
 
 interface FormBodyTabListProps {
-  qFormItems: QuestionnaireItem[];
+  topLevelItems: QuestionnaireItem[];
   currentTabIndex: number;
   tabs: Tabs;
+  completedTabsCollapsed: boolean;
 }
 
 const FormBodyTabList = memo(function FormBodyTabList(props: FormBodyTabListProps) {
-  const { qFormItems, currentTabIndex, tabs } = props;
-
-  const [completedTabsExpanded, setCompletedTabsExpanded] = useState(true);
+  const { topLevelItems, currentTabIndex, tabs, completedTabsCollapsed } = 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={{ 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>
-          <Divider sx={{ mx: 1 }} light />
+  const allContextDisplayItems = useMemo(
+    () => topLevelItems.map((topLevelItem) => getContextDisplays(topLevelItem)),
+    [topLevelItems]
+  );
 
-          <TransitionGroup>
-            {qFormItems.map((qItem, i) => {
-              const isTab = !!tabs[qItem.linkId];
+  return (
+    <TransitionGroup>
+      {topLevelItems.map((qItem, i) => {
+        const contextDisplayItems = allContextDisplayItems[i];
+        const isTab = !!tabs[qItem.linkId];
 
-              if (
-                !isTab ||
-                isHidden({
-                  questionnaireItem: qItem,
-                  enableWhenIsActivated,
-                  enableWhenItems,
-                  enableWhenExpressions
-                })
-              ) {
-                return null;
-              }
+        if (
+          isTabHidden({
+            qItem,
+            contextDisplayItems,
+            isTab,
+            enableWhenIsActivated,
+            enableWhenItems,
+            enableWhenExpressions,
+            completedTabsCollapsed
+          })
+        ) {
+          return null;
+        }
 
-              const tabIsSelected = currentTabIndex.toString() === i.toString();
-              const tabLabel = getShortText(qItem) ?? qItem.text ?? '';
+        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}
-                    completedTabsCollapsed={!completedTabsExpanded}
-                  />
-                </Collapse>
-              );
-            })}
-          </TransitionGroup>
-        </PrimarySelectableList>
-      </Box>
-    </Card>
+        return (
+          <Collapse key={qItem.linkId} timeout={100}>
+            <FormBodySingleTab
+              contextDisplayItems={contextDisplayItems}
+              selected={tabIsSelected}
+              tabLabel={tabLabel}
+              listIndex={i}
+            />
+          </Collapse>
+        );
+      })}
+    </TransitionGroup>
   );
 });