Add option to expand/collapse completed tabs

aehrc · Sep 4, 2023 · 89b3bf7 · 89b3bf7
1 parent efeb1e7
commit 89b3bf7
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 13 deletions.
diff --git a/...art-forms-app/src/features/renderer/components/RendererNav/ExistingResponsesBadgeIcon.tsx b/...art-forms-app/src/features/renderer/components/RendererNav/ExistingResponsesBadgeIcon.tsx
@@ -28,14 +28,14 @@ function ExistingResponsesBadgeIcon(props: ExistingResponsesBadgeProps) {
 
   if (fetchError) {
     return (
-      <Badge color="error" badgeContent=" " variant="dot">
+      <Badge color="warning" badgeContent=" " variant="dot">
         <GradingIcon />
       </Badge>
     );
   }
 
   return (
-    <Badge color="primary" badgeContent={numOfDraftResponses}>
+    <Badge color="error" badgeContent={numOfDraftResponses}>
       <GradingIcon />
     </Badge>
   );

diff --git a/packages/smart-forms-renderer/src/components/Tabs/FormBodySingleTab.tsx b/packages/smart-forms-renderer/src/components/Tabs/FormBodySingleTab.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import React, { memo } from 'react';
+import React, { memo, useMemo } from 'react';
 import Box from '@mui/material/Box';
 import ListItemButton from '@mui/material/ListItemButton';
 import ListItemText from '@mui/material/ListItemText';
@@ -24,21 +24,43 @@ import Typography from '@mui/material/Typography';
 import useQuestionnaireStore from '../../stores/useQuestionnaireStore';
 import type { QuestionnaireItem } from 'fhir/r4';
 import { getContextDisplays } from '../../utils/tabs';
-import ContextDisplayItem from '../FormComponents/ItemParts/ContextDisplayItem';
+import ItemLabelText from '../FormComponents/ItemParts/ItemLabelText';
+import { isHidden } from '../../utils/qItem';
 
 interface FormBodySingleTabProps {
   qItem: QuestionnaireItem;
   selected: boolean;
   tabLabel: string;
   listIndex: number;
+  completedTabsCollapsed: boolean;
 }
 
 const FormBodySingleTab = memo(function FormBodySingleTab(props: FormBodySingleTabProps) {
-  const { qItem, selected, tabLabel, listIndex } = props;
+  const { qItem, selected, tabLabel, listIndex, completedTabsCollapsed } = 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 contextDisplayItems = getContextDisplays(qItem);
+  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);
@@ -55,10 +77,10 @@ const FormBodySingleTab = memo(function FormBodySingleTab(props: FormBodySingleT
           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 display="flex" minHeight={24} minWidth={24} ml={1}>
+                {visibleContextDisplayItems.map((item) => (
+                  <ItemLabelText key={item.linkId} qItem={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,7 +15,7 @@
  * limitations under the License.
  */
 
-import React, { memo } from 'react';
+import React, { memo, useState } from 'react';
 import Box from '@mui/material/Box';
 import Card from '@mui/material/Card';
 import Collapse from '@mui/material/Collapse';
@@ -27,6 +27,11 @@ 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';
 
 interface FormBodyTabListProps {
   qFormItems: QuestionnaireItem[];
@@ -37,14 +42,37 @@ interface FormBodyTabListProps {
 const FormBodyTabList = memo(function FormBodyTabList(props: FormBodyTabListProps) {
   const { qFormItems, currentTabIndex, tabs } = props;
 
+  const [completedTabsExpanded, setCompletedTabsExpanded] = useState(true);
+
   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">
+        <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 />
+
           <TransitionGroup>
             {qFormItems.map((qItem, i) => {
               const isTab = !!tabs[qItem.linkId];
@@ -71,6 +99,7 @@ const FormBodyTabList = memo(function FormBodyTabList(props: FormBodyTabListProp
                     selected={tabIsSelected}
                     tabLabel={tabLabel}
                     listIndex={i}
+                    completedTabsCollapsed={!completedTabsExpanded}
                   />
                 </Collapse>
               );

diff --git a/packages/smart-forms-renderer/src/utils/qItem.ts b/packages/smart-forms-renderer/src/utils/qItem.ts
@@ -32,7 +32,7 @@ interface isHiddenParams {
 /**
  * Test the given QItem on a series of checks to verify if the item should be displayed
  * Check if qItem has hidden attribute
- * Check if qItem fufilled its enableWhen criteria
+ * Check if qItem fulfilled its enableWhen criteria
  *
  * @author Sean Fong
  */