Associate labels in ItemLabelText explicitly to all items

aehrc · Feb 28, 2025 · d5eb54d · d5eb54d
1 parent 50709af
commit d5eb54d
Show file tree

Hide file tree

Showing 43 changed files with 133 additions and 48 deletions.
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": "1.0.0-alpha.24",
+  "version": "1.0.0-alpha.25",
   "description": "FHIR Structured Data Captured (SDC) rendering engine for Smart Forms",
   "main": "lib/index.js",
   "scripts": {

diff --git a/...ges/smart-forms-renderer/src/components/FormComponents/AttachmentItem/AttachmentField.tsx b/...ges/smart-forms-renderer/src/components/FormComponents/AttachmentItem/AttachmentField.tsx
@@ -29,6 +29,7 @@ import { StyledRequiredTypography } from '../Item.styles';
 
 interface AttachmentFieldProps extends PropsWithIsTabledAttribute {
   linkId: string;
+  itemType: string;
   attachmentValues: AttachmentValues;
   feedback: string;
   readOnly: boolean;
@@ -40,6 +41,7 @@ interface AttachmentFieldProps extends PropsWithIsTabledAttribute {
 function AttachmentField(props: AttachmentFieldProps) {
   const {
     linkId,
+    itemType,
     attachmentValues,
     feedback,
     readOnly,
@@ -55,7 +57,7 @@ function AttachmentField(props: AttachmentFieldProps) {
 
   return (
     <>
-      <Stack rowGap={1}>
+      <Stack rowGap={1} id={itemType + '-' + linkId}>
         <Typography variant="subtitle2" color={readOnly ? 'text.disabled' : 'text.primary'}>
           An attachment must either have a file or a URL, or both.
         </Typography>

diff --git a/...rt-forms-renderer/src/components/FormComponents/AttachmentItem/AttachmentFieldWrapper.tsx b/...rt-forms-renderer/src/components/FormComponents/AttachmentItem/AttachmentFieldWrapper.tsx
@@ -59,6 +59,7 @@ function AttachmentFieldWrapper(props: AttachmentFieldWrapperProps) {
     return (
       <AttachmentField
         linkId={qItem.linkId}
+        itemType={qItem.type}
         attachmentValues={attachmentValues}
         feedback={feedback}
         readOnly={readOnly}
@@ -82,6 +83,7 @@ function AttachmentFieldWrapper(props: AttachmentFieldWrapperProps) {
         fieldChildren={
           <AttachmentField
             linkId={qItem.linkId}
+            itemType={qItem.type}
             attachmentValues={attachmentValues}
             feedback={feedback}
             readOnly={readOnly}

diff --git a/packages/smart-forms-renderer/src/components/FormComponents/BooleanItem/BooleanField.tsx b/packages/smart-forms-renderer/src/components/FormComponents/BooleanItem/BooleanField.tsx
@@ -63,7 +63,7 @@ const BooleanField = memo(function BooleanField(props: BooleanFieldProps) {
       <Box display="flex" alignItems="center">
         {booleanAsCheckbox ? (
           <FormControlLabel
-            id={qItem.linkId}
+            id={qItem.type + '-' + qItem.linkId}
             disabled={readOnly}
             control={
               <Checkbox
@@ -84,9 +84,8 @@ const BooleanField = memo(function BooleanField(props: BooleanFieldProps) {
           />
         ) : (
           <StyledRadioGroup
-            id={qItem.linkId}
+            id={qItem.type + '-' + qItem.linkId}
             row={orientation === ChoiceItemOrientation.Horizontal}
-            name={qItem.text}
             sx={inputsFlexGrow ? { width: '100%', flexWrap: 'nowrap' } : {}}
             onChange={(e) => onCheckedChange(e.target.value)}
             value={selection}>

diff --git a/...mart-forms-renderer/src/components/FormComponents/ChoiceItems/ChoiceAutocompleteField.tsx b/...mart-forms-renderer/src/components/FormComponents/ChoiceItems/ChoiceAutocompleteField.tsx
@@ -70,7 +70,7 @@ function ChoiceAutocompleteField(props: ChoiceAutocompleteFieldsProps) {
 
   return (
     <Autocomplete
-      id={qItem.linkId}
+      id={qItem.type + '-' + qItem.linkId}
       value={valueCoding ?? null}
       options={options}
       getOptionLabel={(option) => option.display ?? `${option.code}`}

diff --git a/...s-renderer/src/components/FormComponents/ChoiceItems/ChoiceCheckboxAnswerOptionFields.tsx b/...s-renderer/src/components/FormComponents/ChoiceItems/ChoiceCheckboxAnswerOptionFields.tsx
@@ -25,6 +25,7 @@ import { getChoiceOrientation } from '../../../utils/choice';
 import { ChoiceItemOrientation } from '../../../interfaces/choice.enum';
 import CheckboxOptionList from './CheckboxOptionList';
 import { StyledFormGroup, StyledRequiredTypography } from '../Item.styles';
+import { Box } from '@mui/material';
 
 interface ChoiceCheckboxAnswerOptionFieldsProps {
   qItem: QuestionnaireItem;
@@ -42,7 +43,7 @@ function ChoiceCheckboxAnswerOptionFields(props: ChoiceCheckboxAnswerOptionField
 
   if (options.length > 0) {
     return (
-      <>
+      <Box id={qItem.type + '-' + qItem.linkId}>
         <StyledFormGroup row={orientation === ChoiceItemOrientation.Horizontal}>
           <CheckboxOptionList
             options={options}
@@ -53,7 +54,7 @@ function ChoiceCheckboxAnswerOptionFields(props: ChoiceCheckboxAnswerOptionField
         </StyledFormGroup>
 
         {feedback ? <StyledRequiredTypography>{feedback}</StyledRequiredTypography> : null}
-      </>
+      </Box>
     );
   }
 

diff --git a/...renderer/src/components/FormComponents/ChoiceItems/ChoiceCheckboxAnswerValueSetFields.tsx b/...renderer/src/components/FormComponents/ChoiceItems/ChoiceCheckboxAnswerValueSetFields.tsx
@@ -29,6 +29,7 @@ import { getChoiceOrientation } from '../../../utils/choice';
 import { ChoiceItemOrientation } from '../../../interfaces/choice.enum';
 import CheckboxOptionList from './CheckboxOptionList';
 import { StyledFormGroup, StyledRequiredTypography } from '../Item.styles';
+import { Box } from '@mui/material';
 
 interface ChoiceCheckboxAnswerValueSetFieldsProps {
   qItem: QuestionnaireItem;
@@ -47,7 +48,7 @@ function ChoiceCheckboxAnswerValueSetFields(props: ChoiceCheckboxAnswerValueSetF
 
   if (options.length > 0) {
     return (
-      <>
+      <Box id={qItem.type + '-' + qItem.linkId}>
         <StyledFormGroup row={orientation === ChoiceItemOrientation.Horizontal}>
           <CheckboxOptionList
             options={options}
@@ -58,7 +59,7 @@ function ChoiceCheckboxAnswerValueSetFields(props: ChoiceCheckboxAnswerValueSetF
         </StyledFormGroup>
 
         {feedback ? <StyledRequiredTypography>{feedback}</StyledRequiredTypography> : null}
-      </>
+      </Box>
     );
   }
 

diff --git a/...orms-renderer/src/components/FormComponents/ChoiceItems/ChoiceRadioAnswerOptionFields.tsx b/...orms-renderer/src/components/FormComponents/ChoiceItems/ChoiceRadioAnswerOptionFields.tsx
@@ -65,9 +65,8 @@ function ChoiceRadioAnswerOptionFields(props: ChoiceRadioAnswerOptionFieldsProps
         }}>
         <Box display="flex" sx={inputsFlexGrow ? { width: '100%', flexWrap: 'nowrap' } : {}}>
           <StyledRadioGroup
-            id={qItem.linkId}
+            id={qItem.type + '-' + qItem.linkId}
             row={orientation === ChoiceItemOrientation.Horizontal}
-            name={qItem.text}
             sx={inputsFlexGrow ? { width: '100%', flexWrap: 'nowrap' } : {}}
             onChange={(e) => onCheckedChange(e.target.value)}
             value={valueRadio}

diff --git a/...ms-renderer/src/components/FormComponents/ChoiceItems/ChoiceRadioAnswerValueSetFields.tsx b/...ms-renderer/src/components/FormComponents/ChoiceItems/ChoiceRadioAnswerValueSetFields.tsx
@@ -72,9 +72,8 @@ function ChoiceRadioAnswerValueSetFields(props: ChoiceRadioAnswerValueSetFieldsP
           }}>
           <Box display="flex" sx={inputsFlexGrow ? { width: '100%', flexWrap: 'nowrap' } : {}}>
             <StyledRadioGroup
-              id={qItem.linkId}
+              id={qItem.type + '-' + qItem.linkId}
               row={orientation === ChoiceItemOrientation.Horizontal}
-              name={qItem.text}
               sx={inputsFlexGrow ? { width: '100%', flexWrap: 'nowrap' } : {}}
               onChange={(e) => onCheckedChange(e.target.value)}
               value={valueRadio}

diff --git a/...rms-renderer/src/components/FormComponents/ChoiceItems/ChoiceSelectAnswerOptionFields.tsx b/...rms-renderer/src/components/FormComponents/ChoiceItems/ChoiceSelectAnswerOptionFields.tsx
@@ -62,7 +62,7 @@ function ChoiceSelectAnswerOptionFields(props: ChoiceSelectAnswerOptionFieldsPro
   return (
     <>
       <Autocomplete
-        id={qItem.linkId}
+        id={qItem.type + '-' + qItem.linkId}
         value={valueSelect ?? null}
         options={options}
         getOptionLabel={(option) => getAnswerOptionLabel(option)}

diff --git a/...s-renderer/src/components/FormComponents/ChoiceItems/ChoiceSelectAnswerValueSetFields.tsx b/...s-renderer/src/components/FormComponents/ChoiceItems/ChoiceSelectAnswerValueSetFields.tsx
@@ -66,7 +66,7 @@ function ChoiceSelectAnswerValueSetFields(props: ChoiceSelectAnswerValueSetField
     return (
       <>
         <Autocomplete
-          id={qItem.linkId}
+          id={qItem.type + '-' + qItem.linkId}
           options={codings}
           getOptionLabel={(option) => option.display ?? `${option.code}`}
           value={valueCoding ?? null}

diff --git a/...s-renderer/src/components/FormComponents/DateTimeItems/CustomDateItem/CustomDateField.tsx b/...s-renderer/src/components/FormComponents/DateTimeItems/CustomDateItem/CustomDateField.tsx
@@ -26,13 +26,15 @@ import { useRendererStylingStore } from '../../../../stores';
 
 interface CustomDateFieldProps extends PropsWithIsTabledAttribute {
   linkId: string;
+  itemType: string;
   valueDate: string;
   input: string;
   feedback: string;
   isFocused: boolean;
   displayPrompt: string;
   entryFormat: string;
   readOnly: boolean;
+  isPartOfDateTime: boolean;
   setFocused: Dispatch<SetStateAction<boolean>>;
   onInputChange: (newInput: string) => void;
   onSelectDate: (newDateValue: string) => void;
@@ -41,13 +43,15 @@ interface CustomDateFieldProps extends PropsWithIsTabledAttribute {
 function CustomDateField(props: CustomDateFieldProps) {
   const {
     linkId,
+    itemType,
     valueDate,
     input,
     feedback,
     isFocused,
     displayPrompt,
     entryFormat,
     readOnly,
+    isPartOfDateTime,
     isTabled,
     setFocused,
     onInputChange,
@@ -58,10 +62,13 @@ function CustomDateField(props: CustomDateFieldProps) {
 
   const anchorRef: RefObject<HTMLDivElement> = useRef(null);
 
+  // If this reusable date field is part of a DateTime component, the id should be appended with '-date'
+  const id = isPartOfDateTime ? itemType + '-' + linkId + '-date' : itemType + '-' + linkId;
+
   return (
     <Tooltip title={isTabled ? feedback : ''}>
       <StandardTextField
-        id={linkId + '-date'}
+        id={id}
         ref={anchorRef}
         fullWidth
         textFieldWidth={textFieldWidth}

diff --git a/...ms-renderer/src/components/FormComponents/DateTimeItems/CustomDateItem/CustomDateItem.tsx b/...ms-renderer/src/components/FormComponents/DateTimeItems/CustomDateItem/CustomDateItem.tsx
@@ -116,13 +116,15 @@ function CustomDateItem(props: CustomDateItemProps) {
     return (
       <CustomDateField
         linkId={qItem.linkId}
+        itemType={qItem.type}
         valueDate={displayDate}
         input={input}
         feedback={errorFeedback ?? ''}
         isFocused={focused}
         displayPrompt={displayPrompt}
         entryFormat={entryFormat}
         readOnly={readOnly}
+        isPartOfDateTime={false}
         isTabled={isTabled}
         setFocused={setFocused}
         onInputChange={handleInputChange}
@@ -143,13 +145,15 @@ function CustomDateItem(props: CustomDateItemProps) {
         fieldChildren={
           <CustomDateField
             linkId={qItem.linkId}
+            itemType={qItem.type}
             valueDate={displayDate}
             input={input}
             feedback={errorFeedback ?? ''}
             isFocused={focused}
             displayPrompt={displayPrompt}
             entryFormat={entryFormat}
             readOnly={readOnly}
+            isPartOfDateTime={false}
             isTabled={isTabled}
             setFocused={setFocused}
             onInputChange={handleInputChange}

diff --git a/...rer/src/components/FormComponents/DateTimeItems/CustomDateTimeItem/CustomDateTimeItem.tsx b/...rer/src/components/FormComponents/DateTimeItems/CustomDateTimeItem/CustomDateTimeItem.tsx
@@ -186,6 +186,7 @@ function CustomDateTimeItem(props: CustomDateTimeItemProps) {
       <Stack>
         <DateTimeField
           linkId={qItem.linkId}
+          itemType={qItem.type}
           displayDate={displayDate}
           dateInput={dateInput}
           timeInput={timeInput}
@@ -219,6 +220,7 @@ function CustomDateTimeItem(props: CustomDateTimeItemProps) {
         fieldChildren={
           <DateTimeField
             linkId={qItem.linkId}
+            itemType={qItem.type}
             displayDate={displayDate}
             dateInput={dateInput}
             timeInput={timeInput}

diff --git a/...nderer/src/components/FormComponents/DateTimeItems/CustomDateTimeItem/CustomTimeField.tsx b/...nderer/src/components/FormComponents/DateTimeItems/CustomDateTimeItem/CustomTimeField.tsx
@@ -29,42 +29,54 @@ import { useRendererStylingStore } from '../../../../stores';
 
 interface CustomTimeFieldProps extends PropsWithIsTabledAttribute {
   linkId: string;
+  itemType: string;
   timeInput: string;
   periodInput: string;
   is24HourNotation: boolean;
   feedback: string;
   displayPrompt: string;
   readOnly: boolean;
+  isPartOfDateTime: boolean;
   onTimeInputChange: (newInput: string) => void;
   onPeriodChange: (newPeriod: string) => void;
 }
 
 function CustomTimeField(props: CustomTimeFieldProps) {
   const {
     linkId,
+    itemType,
     timeInput,
     periodInput,
     is24HourNotation,
     feedback,
     displayPrompt,
     readOnly,
+    isPartOfDateTime,
     isTabled,
     onTimeInputChange,
     onPeriodChange
   } = props;
 
   const textFieldWidth = useRendererStylingStore.use.textFieldWidth();
 
+  // If this reusable time field is part of a DateTime component, do not assign an id to the wrapping <Box/>
+  // If this reusable time field is from a Time component, the wrapping <Box/> should have an id
+  const itemId = isPartOfDateTime ? undefined : itemType + '-' + linkId;
+
+  const timeId = itemType + '-' + linkId + '-time';
+  const periodId = itemType + '-' + linkId + '-period';
+
   return (
     <Tooltip title={isTabled ? feedback : ''}>
       <>
         <Box
+          id={itemId}
           display="flex"
           alignItems="center"
           columnGap={1}
           sx={{ maxWidth: !isTabled ? textFieldWidth : 3000, minWidth: 160 }}>
           <MuiTextField
-            id={linkId + '-time'}
+            id={timeId}
             value={timeInput}
             error={!!feedback}
             fullWidth
@@ -76,7 +88,7 @@ function CustomTimeField(props: CustomTimeFieldProps) {
             size="small"
           />
           <Select
-            id={linkId + '-period'}
+            id={periodId}
             value={is24HourNotation ? '' : periodInput}
             error={!!feedback}
             disabled={readOnly || is24HourNotation}

diff --git a/...renderer/src/components/FormComponents/DateTimeItems/CustomDateTimeItem/DateTimeField.tsx b/...renderer/src/components/FormComponents/DateTimeItems/CustomDateTimeItem/DateTimeField.tsx
@@ -24,6 +24,7 @@ import Stack from '@mui/material/Stack';
 
 interface DateTimeFieldProps extends PropsWithIsTabledAttribute {
   linkId: string;
+  itemType: string;
   displayDate: string;
   dateInput: string;
   timeInput: string;
@@ -44,6 +45,7 @@ interface DateTimeFieldProps extends PropsWithIsTabledAttribute {
 function DateTimeField(props: DateTimeFieldProps) {
   const {
     linkId,
+    itemType,
     displayDate,
     dateInput,
     timeInput,
@@ -63,29 +65,33 @@ function DateTimeField(props: DateTimeFieldProps) {
   } = props;
 
   return (
-    <Stack rowGap={1}>
+    <Stack id={itemType + '-' + linkId} rowGap={1}>
       <CustomDateField
         linkId={linkId}
+        itemType={itemType}
         valueDate={displayDate}
         input={dateInput}
         feedback={dateFeedback ?? ''}
         isFocused={dateFocused}
         displayPrompt={displayPrompt}
         entryFormat={entryFormat}
         readOnly={readOnly}
+        isPartOfDateTime={true}
         isTabled={isTabled}
         setFocused={setDateFocused}
         onInputChange={onDateInputChange}
         onSelectDate={onSelectDate}
       />
       <CustomTimeField
         linkId={linkId}
+        itemType={itemType}
         timeInput={timeInput}
         periodInput={periodInput}
         is24HourNotation={is24HourNotation}
         feedback={timeFeedback ?? ''}
         displayPrompt={displayPrompt}
         readOnly={readOnly}
+        isPartOfDateTime={true}
         isTabled={isTabled}
         onTimeInputChange={(newTimeInput) => onTimeInputChange(newTimeInput, periodInput)}
         onPeriodChange={(newPeriodInput) => onTimeInputChange(timeInput, newPeriodInput)}