Add support for collapsible in repeat groups

aehrc · Jun 5, 2024 · 1e21bbe · 1e21bbe
1 parent f6acc12
commit 1e21bbe
Show file tree

Hide file tree

Showing 10 changed files with 406 additions and 92 deletions.
diff --git a/Conformance.md b/Conformance.md
@@ -51,11 +51,11 @@ View the source here: http://hl7.org/fhir/uv/sdc/expressions.html
 View the source here: http://hl7.org/fhir/uv/sdc/rendering.html
 
 #### [Text Appearance](http://hl7.org/fhir/uv/sdc/rendering.html#extension-overview)
-- [ ] rendering-style
+- [x] rendering-style
 - [x] rendering-xhtml
 - [x] displayCategory
 - [x] openLabel
-- [x] hidden
+- [x] hidden  
 - [ ] itemMedia
 - [ ] itemAnswerMedia
 
@@ -64,7 +64,7 @@ View the source here: http://hl7.org/fhir/uv/sdc/rendering.html
 - [x] choiceOrientation
 - [x] sliderStepValue
 - [ ] width
-- [ ] collapsible
+- [x] collapsible
 
 **Questionnaire `itemControl` Checklist**
 

diff --git a/documentation/docs/devUsage/renderer-overview.mdx b/documentation/docs/devUsage/renderer-overview.mdx
@@ -312,7 +312,7 @@ The button will look different in the output, but it still functions the same wa
   <TabItem value="output">
     <IframeContainer storyUrl="https://smartforms.csiro.au/storybook/index.html?path=/story/component-testing-build-form-button-tester--build-form-button-tester">
       <iframe
-        src="http://localhost:6006/iframe.html?args=&id=component-testing-build-form-button-tester--build-form-button-tester"
+        src="https://smartforms.csiro.au/storybook/iframe.html?args=&id=component-testing-build-form-button-tester--build-form-button-tester"
         width="100%"
         height="130"
       />

diff --git a/documentation/docs/sdc/advanced/question.mdx b/documentation/docs/sdc/advanced/question.mdx
@@ -22,6 +22,7 @@ The extensions that fall under this subsection are:
 
 - [choiceOrientation](http://hl7.org/fhir/uv/sdc/rendering.html#choiceOrientation)
 - [sliderStepValue](http://hl7.org/fhir/uv/sdc/rendering.html#sliderStepValue)
+- [collapsible](http://hl7.org/fhir/uv/sdc/rendering.html#collapsible)
 - [entryFormat](http://hl7.org/fhir/uv/sdc/rendering.html#entryFormat)
 - [questionnaire-unit](https://hl7.org/fhir/extensions/StructureDefinition-questionnaire-unit.html)
 
@@ -209,6 +210,49 @@ SliderStepValue is only supported on the [itemControl](https://hl7.org/fhir/exte
   />
 </IframeContainer>
 
+### Collapsible
+
+Allows the child items of a group to be displayed in a collapsible form where items can be shown and hidden from the view. It is useful for particularly long questionnaires.
+
+Collapsible is only supported on **group** items.
+
+#### Default Open Usage
+
+<IframeContainer storyUrl="https://smartforms.csiro.au/storybook/?path=/story/component-sdc-8-1-2-advanced-control-appearance--collapsible-default-open">
+  <iframe
+    src="https://smartforms.csiro.au/storybook/iframe.html?args=&id=component-sdc-8-1-2-advanced-control-appearance--collapsible-default-open"
+    width="100%"
+    height="260"
+  />
+</IframeContainer>
+
+#### Default Closed Usage
+
+<IframeContainer storyUrl="https://smartforms.csiro.au/storybook/?path=/story/component-sdc-8-1-2-advanced-control-appearance--collapsible-default-closed">
+  <iframe
+    src="https://smartforms.csiro.au/storybook/iframe.html?args=&id=component-sdc-8-1-2-advanced-control-appearance--collapsible-default-closed"
+    width="100%"
+    height="260"
+  />
+</IframeContainer>
+
+#### Nested Usage
+
+<IframeContainer storyUrl="https://smartforms.csiro.au/storybook/?path=/story/component-sdc-8-1-2-advanced-control-appearance--collapsible-nested">
+  <iframe
+    src="https://smartforms.csiro.au/storybook/iframe.html?args=&id=component-sdc-8-1-2-advanced-control-appearance--collapsible-nested"
+    width="100%"
+    height="760"
+  />
+</IframeContainer>
+
+:::note
+
+When a parent of a child collapsible item is collapsed, its child items effectively stopped being rendered by React.
+This means the collapsible status of any child collapsible groups will return to the default values ("default-open" or "default-closed") as defined in the Questionnaire.
+
+:::
+
 ### EntryFormat
 
 Displays a "ghost" text in the field. Acts as a guide for the user on what to enter in the field.

diff --git a/documentation/docs/sdc/index.mdx b/documentation/docs/sdc/index.mdx
@@ -11,7 +11,7 @@ The SDC specification provides a set of guidance around the use of Questionnaire
 
 :::tip
 
-Before diving into this section, it might be worth reading the [usage examples guide](http://localhost:3000/docs/components#usage-examples) in the Components section.
+Before diving into this section, it might be worth reading the [usage examples guide](/docs/components#usage-examples) in the Components section.
 
 :::
 
@@ -54,7 +54,7 @@ View the source here: http://hl7.org/fhir/uv/sdc/rendering.html
 
 #### [Text Appearance](http://hl7.org/fhir/uv/sdc/rendering.html#extension-overview)
 
-- [ ] rendering-style
+- [x] rendering-style
 - [x] rendering-xhtml
 - [x] displayCategory
 - [x] openLabel
@@ -68,7 +68,7 @@ View the source here: http://hl7.org/fhir/uv/sdc/rendering.html
 - [x] choiceOrientation
 - [x] sliderStepValue
 - [ ] width
-- [ ] collapsible
+- [x] collapsible
 
 **Questionnaire `itemControl` Checklist**
 

diff --git a/packages/smart-forms-renderer/src/components/FormComponents/GroupItem/GroupItemView.tsx b/packages/smart-forms-renderer/src/components/FormComponents/GroupItem/GroupItemView.tsx
@@ -72,8 +72,10 @@ function GroupItemView(props: GroupItemViewProps) {
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
 
+  // Render collapsible group item
+  // If group item is a repeating instance, do not render group item as collapsible
   const groupIsCollapsible = getGroupCollapsible(qItem);
-  if (groupIsCollapsible) {
+  if (groupIsCollapsible && !isRepeated) {
     const isDefaultOpen = groupIsCollapsible === 'default-open';
     return (
       <GroupAccordion
@@ -84,7 +86,7 @@ function GroupItemView(props: GroupItemViewProps) {
         slotProps={{
           transition: { unmountOnExit: true, timeout: 250 }
         }}>
-        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />} sx={{ minHeight: '28px' }}>
           <GroupHeading
             qItem={qItem}
             readOnly={readOnly}

diff --git a/packages/smart-forms-renderer/src/components/FormComponents/RepeatGroup/RepeatGroup.tsx b/packages/smart-forms-renderer/src/components/FormComponents/RepeatGroup/RepeatGroup.tsx
@@ -24,21 +24,11 @@ import type {
 } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import useInitialiseRepeatGroups from '../../../hooks/useInitialiseRepeatGroups';
-import { QGroupContainerBox } from '../../Box.styles';
-import Card from '@mui/material/Card';
-import Collapse from '@mui/material/Collapse';
-import Divider from '@mui/material/Divider';
-import { TransitionGroup } from 'react-transition-group';
-import { createEmptyQrItem } from '../../../utils/qrItem';
 import { nanoid } from 'nanoid';
-import RepeatGroupItem from './RepeatGroupItem';
-import AddItemButton from './AddItemButton';
-import LabelWrapper from '../ItemParts/ItemLabelWrapper';
 import cloneDeep from 'lodash.clonedeep';
-import useReadOnly from '../../../hooks/useReadOnly';
-import Typography from '@mui/material/Typography';
 import { useQuestionnaireStore } from '../../../stores';
 import useRepeatGroups from '../../../hooks/useRepeatGroups';
+import RepeatGroupView from './RepeatGroupView';
 
 interface RepeatGroupProps
   extends PropsWithQrRepeatGroupChangeHandler,
@@ -68,8 +58,6 @@ function RepeatGroup(props: RepeatGroupProps) {
 
   const mutateRepeatEnableWhenItems = useQuestionnaireStore.use.mutateRepeatEnableWhenItems();
 
-  const readOnly = useReadOnly(qItem, parentIsReadOnly);
-
   const initialRepeatGroups = useInitialiseRepeatGroups(qItem, qrItems);
 
   const [repeatGroups, setRepeatGroups] = useRepeatGroups(initialRepeatGroups);
@@ -122,76 +110,17 @@ function RepeatGroup(props: RepeatGroupProps) {
     ]);
   }
 
-  if (showMinimalView) {
-    return (
-      <QGroupContainerBox key={qItem.linkId} cardElevation={groupCardElevation} isRepeated={true}>
-        <Card elevation={groupCardElevation} sx={{ p: 2 }}>
-          {repeatGroups.map(({ nanoId, qrItem: nullableQrItem }, index) => {
-            const answeredQrItem = createEmptyQrItem(qItem);
-            if (nullableQrItem) {
-              answeredQrItem.item = nullableQrItem.item;
-            }
-
-            return (
-              <RepeatGroupItem
-                key={nanoId}
-                qItem={qItem}
-                repeatGroupIndex={index}
-                answeredQrItem={answeredQrItem}
-                nullableQrItem={nullableQrItem}
-                numOfRepeatGroups={repeatGroups.length}
-                groupCardElevation={groupCardElevation + 1}
-                showMinimalView={showMinimalView}
-                parentIsReadOnly={parentIsReadOnly}
-                onDeleteItem={() => handleDeleteItem(index)}
-                onQrItemChange={(newQrItem) => handleAnswerChange(newQrItem, index)}
-              />
-            );
-          })}
-        </Card>
-      </QGroupContainerBox>
-    );
-  }
-
   return (
-    <QGroupContainerBox key={qItem.linkId} cardElevation={groupCardElevation} isRepeated={true}>
-      <Card elevation={groupCardElevation} sx={{ p: 3, py: 2.5, mb: 3.5 }}>
-        {qItem.text ? (
-          <>
-            <Typography variant="h6" color={readOnly ? 'text.secondary' : 'text.primary'}>
-              <LabelWrapper qItem={qItem} readOnly={readOnly} />
-            </Typography>
-            <Divider sx={{ mt: 1, mb: 1.5 }} light />
-          </>
-        ) : null}
-        <TransitionGroup>
-          {repeatGroups.map(({ nanoId, qrItem: nullableQrItem }, index) => {
-            const answeredQrItem = createEmptyQrItem(qItem);
-            if (nullableQrItem) {
-              answeredQrItem.item = nullableQrItem.item;
-            }
-
-            return (
-              <Collapse key={nanoId} timeout={200}>
-                <RepeatGroupItem
-                  qItem={qItem}
-                  repeatGroupIndex={index}
-                  answeredQrItem={answeredQrItem}
-                  nullableQrItem={nullableQrItem}
-                  numOfRepeatGroups={repeatGroups.length}
-                  groupCardElevation={groupCardElevation + 1}
-                  parentIsReadOnly={parentIsReadOnly}
-                  onDeleteItem={() => handleDeleteItem(index)}
-                  onQrItemChange={(newQrItem) => handleAnswerChange(newQrItem, index)}
-                />
-              </Collapse>
-            );
-          })}
-        </TransitionGroup>
-
-        <AddItemButton repeatGroups={repeatGroups} readOnly={readOnly} onAddItem={handleAddItem} />
-      </Card>
-    </QGroupContainerBox>
+    <RepeatGroupView
+      qItem={qItem}
+      repeatGroups={repeatGroups}
+      groupCardElevation={groupCardElevation}
+      showMinimalView={showMinimalView}
+      parentIsReadOnly={parentIsReadOnly}
+      onAnswerChange={handleAnswerChange}
+      onAddItem={handleAddItem}
+      onDeleteItem={handleDeleteItem}
+    />
   );
 }