Add support for non-repeating group table

aehrc · Aug 23, 2024 · 82bb4bd · 82bb4bd
1 parent 9a77e7f
commit 82bb4bd
Show file tree

Hide file tree

Showing 13 changed files with 414 additions and 123 deletions.
diff --git a/apps/demo-renderer-app/package.json b/apps/demo-renderer-app/package.json
@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@aehrc/sdc-populate": "^2.3.1",
-    "@aehrc/smart-forms-renderer": "^0.37.2",
+    "@aehrc/smart-forms-renderer": "^0.38.3",
     "@tanstack/react-query": "^4.36.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/apps/smart-forms-app/package.json b/apps/smart-forms-app/package.json
@@ -28,7 +28,7 @@
   "dependencies": {
     "@aehrc/sdc-assemble": "^1.3.1",
     "@aehrc/sdc-populate": "^2.3.1",
-    "@aehrc/smart-forms-renderer": "^0.37.2",
+    "@aehrc/smart-forms-renderer": "^0.38.3",
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.11.5",
     "@fontsource/material-icons": "^5.0.18",

diff --git a/documentation/package.json b/documentation/package.json
@@ -15,7 +15,7 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@aehrc/smart-forms-renderer": "^0.37.2",
+    "@aehrc/smart-forms-renderer": "^0.38.3",
     "@docusaurus/core": "^3.4.0",
     "@docusaurus/preset-classic": "^3.4.0",
     "@docusaurus/theme-live-codeblock": "^3.4.0",

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/smart-forms-renderer/package.json b/packages/smart-forms-renderer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@aehrc/smart-forms-renderer",
-  "version": "0.38.2",
+  "version": "0.38.3",
   "description": "FHIR Structured Data Captured (SDC) rendering engine for Smart Forms",
   "main": "lib/index.js",
   "scripts": {

diff --git a/packages/smart-forms-renderer/src/components/FormComponents/GroupItem/GroupItemSwitcher.tsx b/packages/smart-forms-renderer/src/components/FormComponents/GroupItem/GroupItemSwitcher.tsx
@@ -76,6 +76,7 @@ function GroupItemSwitcher(props: GroupItemSwitcherProps) {
           qItem={qItem}
           qrItems={qrItems}
           groupCardElevation={groupCardElevation + 1}
+          isRepeated={true}
           parentIsReadOnly={parentIsReadOnly}
           onQrRepeatGroupChange={onQrRepeatGroupChange}
         />
@@ -119,6 +120,7 @@ function GroupItemSwitcher(props: GroupItemSwitcherProps) {
             qItem={qItem}
             qrItems={[]}
             groupCardElevation={groupCardElevation + 1}
+            isRepeated={true}
             parentIsReadOnly={parentIsReadOnly}
             onQrRepeatGroupChange={onQrRepeatGroupChange}
           />
@@ -149,6 +151,20 @@ function GroupItemSwitcher(props: GroupItemSwitcherProps) {
 
   // if qItem is not a repeating question or is a checkbox
   if (qItem.type === 'group') {
+    // GroupTable "gtable" can be rendered with either repeats:true or false
+    if (isSpecificItemControl(qItem, 'gtable')) {
+      return (
+        <GroupTable
+          qItem={qItem}
+          qrItems={qrItem ? [qrItem] : []}
+          groupCardElevation={groupCardElevation + 1}
+          isRepeated={false}
+          parentIsReadOnly={parentIsReadOnly}
+          onQrRepeatGroupChange={onQrRepeatGroupChange}
+        />
+      );
+    }
+
     return (
       <GroupItem
         qItem={qItem}

diff --git a/packages/smart-forms-renderer/src/components/FormComponents/Tables/GroupTable.tsx b/packages/smart-forms-renderer/src/components/FormComponents/Tables/GroupTable.tsx
@@ -20,6 +20,7 @@ import React, { useMemo } from 'react';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { mapQItemsIndex } from '../../../utils/mapItem';
 import type {
+  PropsWithIsRepeatedAttribute,
   PropsWithParentIsReadOnlyAttribute,
   PropsWithQrRepeatGroupChangeHandler,
   PropsWithShowMinimalViewAttribute
@@ -34,6 +35,7 @@ import { flushSync } from 'react-dom';
 
 interface GroupTableProps
   extends PropsWithQrRepeatGroupChangeHandler,
+    PropsWithIsRepeatedAttribute,
     PropsWithShowMinimalViewAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
@@ -52,6 +54,7 @@ function GroupTable(props: GroupTableProps) {
     qItem,
     qrItems,
     groupCardElevation,
+    isRepeated,
     showMinimalView,
     parentIsReadOnly,
     onQrRepeatGroupChange
@@ -166,6 +169,7 @@ function GroupTable(props: GroupTableProps) {
       qItem={qItem}
       qItemsIndexMap={qItemsIndexMap}
       groupCardElevation={groupCardElevation}
+      isRepeated={isRepeated}
       readOnly={readOnly}
       tableRows={tableRows}
       selectedIds={selectedIds}

diff --git a/packages/smart-forms-renderer/src/components/FormComponents/Tables/GroupTableBody.tsx b/packages/smart-forms-renderer/src/components/FormComponents/Tables/GroupTableBody.tsx
@@ -20,6 +20,7 @@ import { createEmptyQrItem } from '../../../utils/qrItem';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import type { GroupTableRowModel } from '../../../interfaces/groupTable.interface';
 import type {
+  PropsWithIsRepeatedAttribute,
   PropsWithParentIsReadOnlyAttribute,
   PropsWithShowMinimalViewAttribute
 } from '../../../interfaces/renderProps.interface';
@@ -30,7 +31,8 @@ import { reorderRows } from '../../../utils/groupTable';
 import TableBody from '@mui/material/TableBody';
 
 interface GroupTableBodyProps
-  extends PropsWithParentIsReadOnlyAttribute,
+  extends PropsWithIsRepeatedAttribute,
+    PropsWithParentIsReadOnlyAttribute,
     PropsWithShowMinimalViewAttribute {
   tableQItem: QuestionnaireItem;
   readOnly: boolean;
@@ -50,6 +52,7 @@ function GroupTableBody(props: GroupTableBodyProps) {
     tableRows,
     selectedIds,
     qItemsIndexMap,
+    isRepeated,
     showMinimalView,
     parentIsReadOnly,
     onRowChange,
@@ -93,6 +96,7 @@ function GroupTableBody(props: GroupTableBodyProps) {
                   answeredQrItem={answeredQrItem}
                   nullableQrItem={nullableQrItem}
                   readOnly={readOnly}
+                  isRepeated={isRepeated}
                   hoverDisabled={snapshot.isDraggingOver}
                   tableRows={tableRows}
                   itemIsSelected={itemIsSelected}

diff --git a/packages/smart-forms-renderer/src/components/FormComponents/Tables/GroupTableRow.tsx b/packages/smart-forms-renderer/src/components/FormComponents/Tables/GroupTableRow.tsx
@@ -18,10 +18,12 @@
 import React from 'react';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import type {
+  PropsWithIsRepeatedAttribute,
   PropsWithParentIsReadOnlyAttribute,
   PropsWithShowMinimalViewAttribute
 } from '../../../interfaces/renderProps.interface';
 import type { TableRowProps } from '@mui/material/TableRow';
+import TableRow from '@mui/material/TableRow';
 import SelectRowButton from './SelectRowButton';
 import GroupTableRowCells from './GroupTableRowCells';
 import RemoveRowButton from './RemoveRowButton';
@@ -33,7 +35,8 @@ import { Draggable } from 'react-beautiful-dnd';
 import { StyledGroupTableRow } from './Table.styles';
 
 interface GroupTableRowProps
-  extends PropsWithShowMinimalViewAttribute,
+  extends PropsWithIsRepeatedAttribute,
+    PropsWithShowMinimalViewAttribute,
     PropsWithParentIsReadOnlyAttribute,
     TableRowProps {
   nanoId: string;
@@ -42,6 +45,7 @@ interface GroupTableRowProps
   answeredQrItem: QuestionnaireResponseItem;
   nullableQrItem: QuestionnaireResponseItem | null;
   readOnly: boolean;
+  isRepeated: boolean;
   hoverDisabled: boolean;
   tableRows: GroupTableRowModel[];
   itemIsSelected: boolean;
@@ -60,6 +64,7 @@ function GroupTableRow(props: GroupTableRowProps) {
     answeredQrItem,
     nullableQrItem,
     readOnly,
+    isRepeated,
     hoverDisabled,
     tableRows,
     itemIsSelected,
@@ -71,55 +76,102 @@ function GroupTableRow(props: GroupTableRowProps) {
     onSelectRow
   } = props;
 
-  return (
-    <Draggable draggableId={nanoId} index={index}>
-      {(draggableProvided, snapshot) => (
-        <StyledGroupTableRow
-          itemIsDragged={snapshot.isDragging}
-          itemIsSelected={itemIsSelected}
-          hoverDisabled={hoverDisabled}
-          hover={!hoverDisabled}
-          ref={draggableProvided.innerRef}
-          {...draggableProvided.draggableProps}>
-          {showMinimalView ? null : (
-            <>
-              <TableCell padding="none">
-                <Box
-                  display="flex"
-                  alignItems="center"
-                  justifyContent="center"
-                  {...(readOnly ? {} : draggableProvided.dragHandleProps)}>
-                  <DragIndicator
-                    fontSize="small"
-                    sx={{ color: readOnly ? 'text.disabled' : 'inherit' }}
-                  />
-                </Box>
-              </TableCell>
-              <SelectRowButton
-                isSelected={itemIsSelected}
+  if (isRepeated) {
+    return (
+      <Draggable draggableId={nanoId} index={index}>
+        {(draggableProvided, snapshot) => (
+          <StyledGroupTableRow
+            itemIsDragged={snapshot.isDragging}
+            itemIsSelected={itemIsSelected}
+            hoverDisabled={hoverDisabled}
+            hover={!hoverDisabled}
+            ref={draggableProvided.innerRef}
+            {...draggableProvided.draggableProps}>
+            {showMinimalView || !isRepeated ? (
+              <TableCell padding="checkbox" />
+            ) : (
+              <>
+                <TableCell padding="none">
+                  <Box
+                    display="flex"
+                    alignItems="center"
+                    justifyContent="center"
+                    {...(readOnly ? {} : draggableProvided.dragHandleProps)}>
+                    <DragIndicator
+                      fontSize="small"
+                      sx={{ color: readOnly ? 'text.disabled' : 'inherit' }}
+                    />
+                  </Box>
+                </TableCell>
+                <SelectRowButton
+                  isSelected={itemIsSelected}
+                  readOnly={readOnly}
+                  onSelectItem={() => onSelectRow(nanoId)}
+                />
+              </>
+            )}
+            <GroupTableRowCells
+              qItem={tableQItem}
+              qrItem={answeredQrItem}
+              qItemsIndexMap={qItemsIndexMap}
+              parentIsReadOnly={parentIsReadOnly}
+              onQrItemChange={(newQrGroup) => onRowChange(newQrGroup, index)}
+            />
+            {showMinimalView || !isRepeated ? (
+              <TableCell padding="checkbox" />
+            ) : (
+              <RemoveRowButton
+                nullableQrItem={nullableQrItem}
+                numOfRows={tableRows.length}
                 readOnly={readOnly}
-                onSelectItem={() => onSelectRow(nanoId)}
+                onRemoveItem={() => onRemoveRow(index)}
               />
-            </>
-          )}
-          <GroupTableRowCells
-            qItem={tableQItem}
-            qrItem={answeredQrItem}
-            qItemsIndexMap={qItemsIndexMap}
-            parentIsReadOnly={parentIsReadOnly}
-            onQrItemChange={(newQrGroup) => onRowChange(newQrGroup, index)}
+            )}
+          </StyledGroupTableRow>
+        )}
+      </Draggable>
+    );
+  }
+
+  return (
+    <TableRow>
+      {showMinimalView || !isRepeated ? (
+        <TableCell padding="checkbox" />
+      ) : (
+        <>
+          <TableCell padding="none">
+            <Box display="flex" alignItems="center" justifyContent="center">
+              <DragIndicator
+                fontSize="small"
+                sx={{ color: readOnly ? 'text.disabled' : 'inherit' }}
+              />
+            </Box>
+          </TableCell>
+          <SelectRowButton
+            isSelected={itemIsSelected}
+            readOnly={readOnly}
+            onSelectItem={() => onSelectRow(nanoId)}
           />
-          {showMinimalView ? null : (
-            <RemoveRowButton
-              nullableQrItem={nullableQrItem}
-              numOfRows={tableRows.length}
-              readOnly={readOnly}
-              onRemoveItem={() => onRemoveRow(index)}
-            />
-          )}
-        </StyledGroupTableRow>
+        </>
+      )}
+      <GroupTableRowCells
+        qItem={tableQItem}
+        qrItem={answeredQrItem}
+        qItemsIndexMap={qItemsIndexMap}
+        parentIsReadOnly={parentIsReadOnly}
+        onQrItemChange={(newQrGroup) => onRowChange(newQrGroup, index)}
+      />
+      {showMinimalView || !isRepeated ? (
+        <TableCell padding="checkbox" />
+      ) : (
+        <RemoveRowButton
+          nullableQrItem={nullableQrItem}
+          numOfRows={tableRows.length}
+          readOnly={readOnly}
+          onRemoveItem={() => onRemoveRow(index)}
+        />
       )}
-    </Draggable>
+    </TableRow>
   );
 }