display units and min/max from number component instead of field labe…

…l, add test concept with units and range
openmrs · Jan 9, 2025 · a8f625a · a8f625a
1 parent 035c318
commit a8f625a
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 9 deletions.
diff --git a/src/components/inputs/number/number.component.tsx b/src/components/inputs/number/number.component.tsx
@@ -11,6 +11,30 @@ import { useFormProviderContext } from '../../../provider/form-provider';
 import FieldLabel from '../../field-label/field-label.component';
 import { isEmpty } from '../../../validators/form-validator';
 
+const extractFieldUnitsAndRange = (concept) => {
+  if (!concept) {
+    return '';
+  }
+
+  let unitsDisplay = '';
+  if (concept.units) {
+    unitsDisplay = ` (${concept.units})`;
+  }
+
+  let rangeDisplay = '';
+  if (concept.lowAbsolute != null && concept.hiAbsolute != null) {
+    rangeDisplay = ` (${concept.lowAbsolute}-${concept.hiAbsolute})`;
+  }
+  else if (concept.lowAbsolute != null) {
+    rangeDisplay = ` (Min ${concept.lowAbsolute})`;
+  }
+  else if (concept.hiAbsolute != null) {
+    rangeDisplay = ` (Max ${concept.hiAbsolute})`;
+  }
+
+  return unitsDisplay + rangeDisplay;
+};
+
 const NumberField: React.FC<FormFieldInputProps> = ({ field, value, errors, warnings, setFieldValue }) => {
   const { t } = useTranslation();
   const [lastBlurredValue, setLastBlurredValue] = useState(value);
@@ -61,7 +85,7 @@ const NumberField: React.FC<FormFieldInputProps> = ({ field, value, errors, warn
           id={field.id}
           invalid={errors.length > 0}
           invalidText={errors[0]?.message}
-          label={<FieldLabel field={field} />}
+          label={<FieldLabel field={field} customLabel={t(field.label) + extractFieldUnitsAndRange(field.meta?.concept)} />}
           max={Number(field.questionOptions.max) || undefined}
           min={Number(field.questionOptions.min) || undefined}
           name={field.id}

diff --git a/src/components/inputs/number/number.test.tsx b/src/components/inputs/number/number.test.tsx
@@ -22,6 +22,25 @@ const numberFieldMock = {
   readonly: false,
 };
 
+const numberFieldMockWithUnitsAndRange = {
+  label: 'Weight',
+  type: 'obs',
+  id: 'weight',
+  questionOptions: {
+    rendering: 'number',
+  },
+  meta: {
+    concept: {
+      units: 'kg',
+      lowAbsolute: 0,
+      hiAbsolute: 200,
+    }
+  },
+  isHidden: false,
+  isDisabled: false,
+  readonly: false,
+};
+
 const renderNumberField = async (props) => {
   await act(() => render(<NumberField {...props} />));
 };
@@ -104,4 +123,15 @@ describe('NumberField Component', () => {
     const inputElement = screen.getByLabelText('Weight(kg):') as HTMLInputElement;
     expect(inputElement).toBeDisabled();
   });
+
+  it('renders units and range', async () => {    
+    await renderNumberField({
+      field: numberFieldMockWithUnitsAndRange,
+      value: '',
+      errors: [],
+      warnings: [],
+      setFieldValue: jest.fn(),
+    });
+    expect(screen.getByLabelText('Weight (kg) (0-200)')).toBeInTheDocument();
+  });
 });
diff --git a/src/hooks/useFormFieldsMeta.ts b/src/hooks/useFormFieldsMeta.ts
@@ -11,16 +11,16 @@ export function useFormFieldsMeta(rawFormFields: FormField[], concepts: OpenmrsR
         const matchingConcept = findConceptByReference(field.questionOptions.concept, concepts);
         field.questionOptions.concept = matchingConcept ? matchingConcept.uuid : field.questionOptions.concept;
         field.label = field.label ? field.label : matchingConcept?.display;
-        if(matchingConcept)
-        {
-          if(matchingConcept.units)
-          {
-            field.label = field.label + " (" + matchingConcept.units + ")";
+
+        if (matchingConcept) {
+          if (matchingConcept.lowAbsolute != undefined && matchingConcept.hiAbsolute != undefined) {
+            field.questionOptions.min = matchingConcept.lowAbsolute;
+            field.questionOptions.max = matchingConcept.hiAbsolute;  
           }
-          if(matchingConcept.lowAbsolute && matchingConcept.hiAbsolute)
-          {
-            field.label = field.label + " (" + matchingConcept.lowAbsolute + "-" + matchingConcept.hiAbsolute + ")";
+          else if (matchingConcept.lowAbsolute != undefined) {
             field.questionOptions.min = matchingConcept.lowAbsolute;
+          }
+          else if (matchingConcept.hiAbsolute != undefined) {
             field.questionOptions.max = matchingConcept.hiAbsolute;
           }
         }