Add group table support to repopulated items

apps/smart-forms-app/src/features/repopulate/components/RepopulateGroupTable.tsx

@@ -0,0 +1,63 @@
+/*
+ * 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 { Grid, Typography } from '@mui/material';
+import { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import { GroupTable } from '@aehrc/smart-forms-renderer';
+
+interface RepopulateRepeatGroupProps {
+  qItem: QuestionnaireItem;
+  oldQRItem?: QuestionnaireResponseItem;
+  newQRItem: QuestionnaireResponseItem;
+}
+
+function RepopulateGroupTable(props: RepopulateRepeatGroupProps) {
+  const { qItem, oldQRItem, newQRItem } = props;
+
+  if (!newQRItem.item) {
+    return null;
+  }
+
+  return (
+    <Grid container columnSpacing={2} mt={0.25}>
+      <Grid item xs={12}>
+        <Typography color="text.secondary" variant="overline" fontSize={7.5}>
+          Old answer
+        </Typography>
+        <GroupTable
+          qItem={qItem}
+          qrItems={oldQRItem ? [oldQRItem] : []}
+          groupCardElevation={1}
+          onQrRepeatGroupChange={() => void 0}
+        />
+      </Grid>
+      <Grid item xs={12}>
+        <Typography color="text.secondary" variant="overline" fontSize={7.5}>
+          New answer
+        </Typography>
+        <GroupTable
+          qItem={qItem}
+          qrItems={[newQRItem]}
+          groupCardElevation={1}
+          onQrRepeatGroupChange={() => void 0}
+        />
+      </Grid>
+    </Grid>
+  );
+}
+
+export default RepopulateGroupTable;

apps/smart-forms-app/src/features/repopulate/components/RepopulateItemSwitcher.tsx

@@ -0,0 +1,39 @@
+/*
+ * 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 { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import RepopulateSingleItem from './RepopulateSingleItem.tsx';
+import RepopulateGroupTable from './RepopulateGroupTable.tsx';
+import { isSpecificItemControl } from '@aehrc/smart-forms-renderer';
+
+interface RepopulateItemSwitcherProps {
+  qItem: QuestionnaireItem;
+  oldQRItem?: QuestionnaireResponseItem;
+  newQRItem: QuestionnaireResponseItem;
+}
+
+function RepopulateItemSwitcher(props: RepopulateItemSwitcherProps) {
+  const { qItem, oldQRItem, newQRItem } = props;
+
+  if (qItem.type === 'group' && qItem.repeats && isSpecificItemControl(qItem, 'gtable')) {
+    return <RepopulateGroupTable qItem={qItem} newQRItem={newQRItem} oldQRItem={oldQRItem} />;
+  }
+
+  return <RepopulateSingleItem qItem={qItem} oldQRItem={oldQRItem} newQRItem={newQRItem} />;
+}
+
+export default RepopulateItemSwitcher;

apps/smart-forms-app/src/features/repopulate/components/RepopulateListItem.tsx

@@ -16,10 +16,12 @@
  */
 
 import ListItem from '@mui/material/ListItem';
-import { Checkbox, Grid, ListItemButton, ListItemIcon, Typography } from '@mui/material';
+import { Checkbox, ListItemButton, ListItemIcon, Typography } from '@mui/material';
 import ListItemText from '@mui/material/ListItemText';
-import { SingleItem, useHidden } from '@aehrc/smart-forms-renderer';
+import { useHidden } from '@aehrc/smart-forms-renderer';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import cloneDeep from 'lodash.clonedeep';
+import RepopulateItemSwitcher from './RepopulateItemSwitcher.tsx';
 
 interface RepopulateListItemProps {
   checkedIds: string[];
@@ -37,13 +39,13 @@ function RepopulateListItem(props: RepopulateListItemProps) {
     return null;
   }
 
-  qItem.readOnly = true;
-  const linkId = qItem.linkId;
-  const itemText = qItem.text ?? '';
+  const qItemToRepopulate = cloneDeep({ ...qItem, readOnly: true });
+  const linkId = qItemToRepopulate.linkId;
+  const itemText = qItemToRepopulate.text ?? '';
 
   return (
     <ListItem disablePadding>
-      <ListItemButton onClick={onCheckItem}>
+      <ListItemButton onClick={onCheckItem} disableRipple>
         <ListItemIcon>
           <Checkbox
             edge="start"
@@ -56,37 +58,11 @@ function RepopulateListItem(props: RepopulateListItemProps) {
           primary={<Typography variant="subtitle2">{itemText}</Typography>}
           secondary={
             <Typography component="span">
-              <Grid container columnSpacing={2} mt={0.25}>
-                <Grid item xs={12} md={6}>
-                  <Typography color="text.secondary" variant="overline" fontSize={7.5}>
-                    Old answer
-                  </Typography>
-                  <SingleItem
-                    qItem={qItem}
-                    qrItem={
-                      oldQRItem ?? {
-                        linkId: qItem.linkId,
-                        text: qItem.text
-                      }
-                    }
-                    isRepeated={true}
-                    isTabled={false}
-                    onQrItemChange={() => void 0}
-                  />
-                </Grid>
-                <Grid item xs={12} md={6}>
-                  <Typography color="text.secondary" variant="overline" fontSize={7.5}>
-                    New answer
-                  </Typography>
-                  <SingleItem
-                    qItem={qItem}
-                    qrItem={newQRItem}
-                    isRepeated={true}
-                    isTabled={false}
-                    onQrItemChange={() => void 0}
-                  />
-                </Grid>
-              </Grid>
+              <RepopulateItemSwitcher
+                qItem={qItemToRepopulate}
+                newQRItem={newQRItem}
+                oldQRItem={oldQRItem}
+              />
             </Typography>
           }
         />

apps/smart-forms-app/src/features/repopulate/components/RepopulateSingleItem.tsx

@@ -0,0 +1,70 @@
+/*
+ * 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 { Grid, Stack, Typography } from '@mui/material';
+import { SingleItem } from '@aehrc/smart-forms-renderer';
+import { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+
+interface RepopulateSingleItemProps {
+  qItem: QuestionnaireItem;
+  oldQRItem?: QuestionnaireResponseItem;
+  newQRItem: QuestionnaireResponseItem;
+}
+
+function RepopulateSingleItem(props: RepopulateSingleItemProps) {
+  const { qItem, oldQRItem, newQRItem } = props;
+
+  return (
+    <Grid container columnSpacing={2} mt={0.25}>
+      <Grid item xs={12} md={6}>
+        <Stack rowGap={0.25}>
+          <Typography color="text.secondary" variant="overline" fontSize={7.5}>
+            Old answer
+          </Typography>
+          <SingleItem
+            qItem={qItem}
+            qrItem={
+              oldQRItem ?? {
+                linkId: qItem.linkId,
+                text: qItem.text
+              }
+            }
+            isRepeated={true}
+            isTabled={false}
+            onQrItemChange={() => void 0}
+          />
+        </Stack>
+      </Grid>
+      <Grid item xs={12} md={6}>
+        <Stack rowGap={0.25}>
+          <Typography color="text.secondary" variant="overline" fontSize={7.5}>
+            New answer
+          </Typography>
+          <SingleItem
+            qItem={qItem}
+            qrItem={newQRItem}
+            isRepeated={true}
+            isTabled={false}
+            onQrItemChange={() => void 0}
+          />
+        </Stack>
+      </Grid>
+    </Grid>
+  );
+}
+
+export default RepopulateSingleItem;

packages/smart-forms-renderer/src/components/FormComponents/RepeatGroup/index.ts

@@ -0,0 +1,18 @@
+/*
+ * 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.
+ */
+
+export { default as RepeatGroup } from './RepeatGroup';

packages/smart-forms-renderer/src/components/FormComponents/Tables/QItemGroupTable.tsx

@@ -117,10 +117,14 @@ function QItemGroupTable(props: Props) {
 
   return (
     <QGroupContainerBox cardElevation={groupCardElevation} isRepeated={false} py={3}>
-      <Typography fontSize={13} variant="h6">
-        <LabelWrapper qItem={qItem} />
-      </Typography>
-      <Divider sx={{ my: 1 }} light />
+      {groupCardElevation !== 1 ? (
+        <>
+          <Typography fontSize={13} variant="h6">
+            <LabelWrapper qItem={qItem} />
+          </Typography>
+          <Divider sx={{ my: 1 }} light />
+        </>
+      ) : null}
       <TableContainer component={Paper} elevation={groupCardElevation}>
         <Table>
           <caption>

packages/smart-forms-renderer/src/components/FormComponents/Tables/index.ts

@@ -0,0 +1,18 @@
+/*
+ * 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.
+ */
+
+export { default as GroupTable } from './QItemGroupTable';

packages/smart-forms-renderer/src/components/FormComponents/index.ts

@@ -16,3 +16,5 @@
  */
 
 export * from './SingleItem';
+export * from './RepeatGroup';
+export * from './Tables';

packages/smart-forms-renderer/src/index.ts

@@ -8,6 +8,7 @@ import { getItemsToRepopulate } from './utils/repopulate';
 export * from './components';
 export * from './stores';
 export * from './hooks';
+export * from './utils';
 export type { ItemToRepopulate } from './utils/repopulate';
 
 /**

packages/smart-forms-renderer/src/utils/index.ts

@@ -0,0 +1,18 @@
+/*
+ * 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.
+ */
+
+export { isSpecificItemControl } from './itemControl';