Merge pull request #634 from aehrc/issue/622

Issue/622 - Temporarily merge changes, will re-open in the future
aehrc · Feb 20, 2024 · 119a167 · 119a167
2 parents 41006c6 + 750ceff
commit 119a167
Show file tree

Hide file tree

Showing 39 changed files with 743 additions and 391 deletions.
diff --git a/.../components/DashboardPages/QuestionnairePage/TableComponents/QuestionnaireLabel.styles.ts b/.../components/DashboardPages/QuestionnairePage/TableComponents/QuestionnaireLabel.styles.ts
@@ -53,7 +53,6 @@ export const QuestionnaireStyledLabel = styled(Box, {
   minWidth: 22,
   lineHeight: 0,
   borderRadius: 6,
-  cursor: 'default',
   alignItems: 'center',
   whiteSpace: 'nowrap',
   display: 'inline-flex',

diff --git a/...dashboard/components/DashboardPages/ResponsesPage/TableComponents/ResponseLabel.styles.ts b/...dashboard/components/DashboardPages/ResponsesPage/TableComponents/ResponseLabel.styles.ts
@@ -58,7 +58,6 @@ export const ResponseStyledLabel = styled(Box, {
   minWidth: 22,
   lineHeight: 0,
   borderRadius: 6,
-  cursor: 'default',
   alignItems: 'center',
   whiteSpace: 'nowrap',
   display: 'inline-flex',

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.12.1",
+  "version": "0.13.1",
   "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/BooleanItem/BooleanItem.tsx b/packages/smart-forms-renderer/src/components/FormComponents/BooleanItem/BooleanItem.tsx
@@ -44,7 +44,7 @@ function BooleanItem(props: BooleanItemProps) {
   const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
-  const { displayInstructions } = useRenderingExtensions(qItem);
+  const { displayInstructions, required } = useRenderingExtensions(qItem);
 
   // Init input value
   let checked = false;
@@ -75,7 +75,11 @@ function BooleanItem(props: BooleanItemProps) {
   }
   return (
     <FullWidthFormComponentBox data-test="q-item-boolean-box">
-      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions} readOnly={readOnly}>
+      <ItemFieldGrid
+        qItem={qItem}
+        displayInstructions={displayInstructions}
+        required={required}
+        readOnly={readOnly}>
         <BooleanField checked={checked} readOnly={readOnly} onCheckedChange={handleCheckedChange} />
       </ItemFieldGrid>
     </FullWidthFormComponentBox>

diff --git a/...smart-forms-renderer/src/components/FormComponents/ChoiceItems/ChoiceAutocompleteItem.tsx b/...smart-forms-renderer/src/components/FormComponents/ChoiceItems/ChoiceAutocompleteItem.tsx
@@ -16,7 +16,6 @@
  */
 
 import React, { useState } from 'react';
-import Grid from '@mui/material/Grid';
 import type { Coding, QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 
 import { createEmptyQrItem } from '../../../utils/qrItem';
@@ -31,10 +30,9 @@ import type {
   PropsWithQrItemChangeHandler
 } from '../../../interfaces/renderProps.interface';
 import { AUTOCOMPLETE_DEBOUNCE_DURATION } from '../../../utils/debounce';
-import DisplayInstructions from '../DisplayItem/DisplayInstructions';
-import LabelWrapper from '../ItemParts/ItemLabelWrapper';
 import useReadOnly from '../../../hooks/useReadOnly';
 import ChoiceAutocompleteField from './ChoiceAutocompleteField';
+import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 
 interface ChoiceAutocompleteItemProps
   extends PropsWithQrItemChangeHandler,
@@ -56,7 +54,7 @@ function ChoiceAutocompleteItem(props: ChoiceAutocompleteItemProps) {
   }
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
-  const { displayInstructions } = useRenderingExtensions(qItem);
+  const { displayInstructions, required } = useRenderingExtensions(qItem);
 
   const maxList = 10;
 
@@ -106,25 +104,23 @@ function ChoiceAutocompleteItem(props: ChoiceAutocompleteItemProps) {
 
   return (
     <FullWidthFormComponentBox>
-      <Grid container columnSpacing={6}>
-        <Grid item xs={5}>
-          <LabelWrapper qItem={qItem} readOnly={readOnly} />
-        </Grid>
-        <Grid item xs={7}>
-          <ChoiceAutocompleteField
-            qItem={qItem}
-            options={options}
-            valueCoding={valueCoding ?? null}
-            loading={loading}
-            feedback={feedback ?? null}
-            readOnly={readOnly}
-            isTabled={isTabled}
-            onInputChange={setInput}
-            onValueChange={handleValueChange}
-          />
-          <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
-        </Grid>
-      </Grid>
+      <ItemFieldGrid
+        qItem={qItem}
+        displayInstructions={displayInstructions}
+        required={required}
+        readOnly={readOnly}>
+        <ChoiceAutocompleteField
+          qItem={qItem}
+          options={options}
+          valueCoding={valueCoding ?? null}
+          loading={loading}
+          feedback={feedback ?? null}
+          readOnly={readOnly}
+          isTabled={isTabled}
+          onInputChange={setInput}
+          onValueChange={handleValueChange}
+        />
+      </ItemFieldGrid>
     </FullWidthFormComponentBox>
   );
 }

diff --git a/...rms-renderer/src/components/FormComponents/ChoiceItems/ChoiceCheckboxAnswerOptionItem.tsx b/...rms-renderer/src/components/FormComponents/ChoiceItems/ChoiceCheckboxAnswerOptionItem.tsx
@@ -16,7 +16,6 @@
  */
 
 import React from 'react';
-import Grid from '@mui/material/Grid';
 import type { ChoiceItemOrientation } from '../../../interfaces/choice.enum';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { createEmptyQrItem } from '../../../utils/qrItem';
@@ -30,9 +29,9 @@ import type {
   PropsWithShowMinimalViewAttribute
 } from '../../../interfaces/renderProps.interface';
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
-import LabelWrapper from '../ItemParts/ItemLabelWrapper';
 import ChoiceCheckboxAnswerValueSetFields from './ChoiceCheckboxAnswerOptionFields';
 import useReadOnly from '../../../hooks/useReadOnly';
+import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 
 interface ChoiceCheckboxAnswerOptionItemProps
   extends PropsWithQrItemChangeHandler,
@@ -60,7 +59,7 @@ function ChoiceCheckboxAnswerOptionItem(props: ChoiceCheckboxAnswerOptionItemPro
   const answers = qrChoiceCheckbox.answer ? qrChoiceCheckbox.answer : [];
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
-  const { displayInstructions } = useRenderingExtensions(qItem);
+  const { displayInstructions, required } = useRenderingExtensions(qItem);
 
   // Event handlers
   function handleCheckedChange(changedValue: string) {
@@ -97,21 +96,19 @@ function ChoiceCheckboxAnswerOptionItem(props: ChoiceCheckboxAnswerOptionItemPro
 
   return (
     <FullWidthFormComponentBox data-test="q-item-choice-checkbox-answer-option-box">
-      <Grid container columnSpacing={6}>
-        <Grid item xs={5}>
-          <LabelWrapper qItem={qItem} readOnly={readOnly} />
-        </Grid>
-        <Grid item xs={7}>
-          <ChoiceCheckboxAnswerValueSetFields
-            qItem={qItem}
-            answers={answers}
-            orientation={orientation}
-            readOnly={readOnly}
-            onCheckedChange={handleCheckedChange}
-          />
-          <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
-        </Grid>
-      </Grid>
+      <ItemFieldGrid
+        qItem={qItem}
+        displayInstructions={displayInstructions}
+        required={required}
+        readOnly={readOnly}>
+        <ChoiceCheckboxAnswerValueSetFields
+          qItem={qItem}
+          answers={answers}
+          orientation={orientation}
+          readOnly={readOnly}
+          onCheckedChange={handleCheckedChange}
+        />
+      </ItemFieldGrid>
     </FullWidthFormComponentBox>
   );
 }

diff --git a/...s-renderer/src/components/FormComponents/ChoiceItems/ChoiceCheckboxAnswerValueSetItem.tsx b/...s-renderer/src/components/FormComponents/ChoiceItems/ChoiceCheckboxAnswerValueSetItem.tsx
@@ -16,7 +16,6 @@
  */
 
 import React from 'react';
-import Grid from '@mui/material/Grid';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { createEmptyQrItem } from '../../../utils/qrItem';
 import useValueSetCodings from '../../../hooks/useValueSetCodings';
@@ -31,9 +30,9 @@ import type {
   PropsWithShowMinimalViewAttribute
 } from '../../../interfaces/renderProps.interface';
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
-import LabelWrapper from '../ItemParts/ItemLabelWrapper';
 import ChoiceCheckboxAnswerValueSetFields from './ChoiceCheckboxAnswerValueSetFields';
 import useReadOnly from '../../../hooks/useReadOnly';
+import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 
 interface ChoiceCheckboxAnswerValueSetItemProps
   extends PropsWithQrItemChangeHandler,
@@ -62,7 +61,7 @@ function ChoiceCheckboxAnswerValueSetItem(props: ChoiceCheckboxAnswerValueSetIte
   const answers = qrChoiceCheckbox.answer ? qrChoiceCheckbox.answer : [];
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
-  const { displayInstructions } = useRenderingExtensions(qItem);
+  const { displayInstructions, required } = useRenderingExtensions(qItem);
 
   // Get codings/options from valueSet
   const { codings, serverError } = useValueSetCodings(qItem);
@@ -102,22 +101,20 @@ function ChoiceCheckboxAnswerValueSetItem(props: ChoiceCheckboxAnswerValueSetIte
 
   return (
     <FullWidthFormComponentBox data-test="q-item-choice-checkbox-answer-value-set-box">
-      <Grid container columnSpacing={6}>
-        <Grid item xs={5}>
-          <LabelWrapper qItem={qItem} readOnly={readOnly} />
-        </Grid>
-        <Grid item xs={7}>
-          <ChoiceCheckboxAnswerValueSetFields
-            codings={codings}
-            answers={answers}
-            orientation={orientation}
-            readOnly={readOnly}
-            serverError={serverError}
-            onCheckedChange={handleCheckedChange}
-          />
-          <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
-        </Grid>
-      </Grid>
+      <ItemFieldGrid
+        qItem={qItem}
+        displayInstructions={displayInstructions}
+        required={required}
+        readOnly={readOnly}>
+        <ChoiceCheckboxAnswerValueSetFields
+          codings={codings}
+          answers={answers}
+          orientation={orientation}
+          readOnly={readOnly}
+          serverError={serverError}
+          onCheckedChange={handleCheckedChange}
+        />
+      </ItemFieldGrid>
     </FullWidthFormComponentBox>
   );
 }