(fix) O3-3970 Fix readonly support for fields (#397)

* (fix) O3-3970 Re-enable readonly fields * fixes import * fixes to multiselect readonly after rebase * date readonly * review changes * reverts yarn changes
openmrs · Sep 30, 2024 · 29071e5 · 29071e5
1 parent d1a9a16
commit 29071e5
Show file tree

Hide file tree

Showing 9 changed files with 13 additions and 8 deletions.
diff --git a/src/components/inputs/date/date.component.tsx b/src/components/inputs/date/date.component.tsx
@@ -118,6 +118,7 @@ const DateField: React.FC<FormFieldInputProps> = ({ field, value: dateValue, err
                 disabled={field.datePickerFormat === 'timer' ? field.isDisabled : !dateValue ? true : false}
                 invalid={errors.length > 0}
                 invalidText={errors[0]?.message}
+                readOnly={isTrue(field.readonly)}
                 warning={warnings.length > 0}
                 warningText={warnings[0]?.message}
                 value={

diff --git a/src/components/inputs/multi-select/multi-select.component.tsx b/src/components/inputs/multi-select/multi-select.component.tsx
@@ -25,6 +25,7 @@ const MultiSelect: React.FC<FormFieldInputProps> = ({ field, value, errors, warn
       label: answer.label,
       key: index,
       disabled: answer.disable?.isDisabled,
+      readonly: isTrue(field.readonly),
     }));
 
   const initiallySelectedQuestionItems = useMemo(() => {
@@ -110,10 +111,10 @@ const MultiSelect: React.FC<FormFieldInputProps> = ({ field, value, errors, warn
                 invalidText={errors[0]?.message}
                 warn={warnings.length > 0}
                 warnText={warnings[0]?.message}
-                readOnly={field.readonly}
+                readOnly={isTrue(field.readonly)}
               />
             ) : (
-              <CheckboxGroup legendText={label} name={field.id}>
+              <CheckboxGroup legendText={label} name={field.id} readOnly={isTrue(field.readonly)}>
                 {field.questionOptions.answers?.map((value, index) => {
                   return (
                     <Checkbox
@@ -129,6 +130,7 @@ const MultiSelect: React.FC<FormFieldInputProps> = ({ field, value, errors, warn
                       checked={initiallyCheckedQuestionItems.some((item) => item === value.concept)}
                       onBlur={onblur}
                       disabled={value.disable?.isDisabled}
+                      readOnly={isTrue(field.readonly)}
                     />
                   );
                 })}

diff --git a/src/components/inputs/number/number.component.tsx b/src/components/inputs/number/number.component.tsx
@@ -65,7 +65,7 @@ const NumberField: React.FC<FormFieldInputProps> = ({ field, value, errors, warn
           hideSteppers={true}
           onWheel={(e) => e.target.blur()}
           disabled={field.isDisabled}
-          readOnly={field.readonly}
+          readOnly={isTrue(field.readonly)}
           className={classNames(styles.controlWidthConstrained, styles.boldedLabel)}
           warn={warnings.length > 0}
           warnText={warnings[0]?.message}

diff --git a/src/components/inputs/radio/radio.component.tsx b/src/components/inputs/radio/radio.component.tsx
@@ -42,6 +42,7 @@ const Radio: React.FC<FormFieldInputProps> = ({ field, value, errors, warnings,
           name={field.id}
           valueSelected={value}
           onChange={handleChange}
+          readOnly={isTrue(field.readonly)}
           orientation={field.questionOptions?.orientation || 'vertical'}>
           {field.questionOptions.answers
             .filter((answer) => !answer.isHidden)

diff --git a/src/components/inputs/select/dropdown.component.tsx b/src/components/inputs/select/dropdown.component.tsx
@@ -69,7 +69,7 @@ const Dropdown: React.FC<FormFieldInputProps> = ({ field, value, errors, warning
             selectedItem={isEmpty(value) ? NullSelectOption : value}
             onChange={handleChange}
             disabled={field.isDisabled}
-            readOnly={field.readonly}
+            readOnly={isTrue(field.readonly)}
             invalid={errors.length > 0}
             invalidText={errors[0]?.message}
             warn={warnings.length > 0}

diff --git a/src/components/inputs/text-area/text-area.component.tsx b/src/components/inputs/text-area/text-area.component.tsx
@@ -48,7 +48,7 @@ const TextArea: React.FC<FormFieldInputProps> = ({ field, value, errors, warning
             value={value || ''}
             rows={field.questionOptions.rows || 4}
             disabled={field.isDisabled}
-            readOnly={field.readonly}
+            readOnly={isTrue(field.readonly)}
             invalid={errors.length > 0}
             invalidText={errors[0]?.message}
             warn={warnings.length > 0}

diff --git a/src/components/inputs/toggle/toggle.component.tsx b/src/components/inputs/toggle/toggle.component.tsx
@@ -56,7 +56,7 @@ const Toggle: React.FC<FormFieldInputProps> = ({ field, value, errors, warnings,
           onToggle={handleChange}
           toggled={!!value}
           disabled={field.isDisabled}
-          readOnly={field.readonly}
+          readOnly={isTrue(field.readonly)}
         />
       </div>
     )

diff --git a/src/components/inputs/ui-select-extended/ui-select-extended.component.tsx b/src/components/inputs/ui-select-extended/ui-select-extended.component.tsx
@@ -154,7 +154,7 @@ const UiSelectExtended: React.FC<FormFieldInputProps> = ({ field, errors, warnin
               setFieldValue(selectedItem?.uuid);
             }}
             disabled={field.isDisabled}
-            readOnly={field.readonly}
+            readOnly={isTrue(field.readonly)}
             invalid={errors.length > 0}
             invalidText={errors.length && errors[0].message}
             onInputChange={(value) => {

diff --git a/src/components/inputs/workspace-launcher/workspace-launcher.component.tsx b/src/components/inputs/workspace-launcher/workspace-launcher.component.tsx
@@ -4,6 +4,7 @@ import { showSnackbar } from '@openmrs/esm-framework';
 import { useLaunchWorkspaceRequiringVisit } from '@openmrs/esm-patient-common-lib';
 import { Button } from '@carbon/react';
 import { type FormFieldInputProps } from '../../../types';
+import { isTrue } from '../../../utils/boolean-utils';
 import styles from './workspace-launcher.scss';
 
 const WorkspaceLauncher: React.FC<FormFieldInputProps> = ({ field }) => {
@@ -27,7 +28,7 @@ const WorkspaceLauncher: React.FC<FormFieldInputProps> = ({ field }) => {
       <div>
         <div className={styles.label}>{t(field.label)}</div>
         <div className={styles.workspaceButton}>
-          <Button onClick={handleLaunchWorkspace}>{field.questionOptions?.buttonLabel ?? t('launchWorkspace')}</Button>
+          <Button disabled={isTrue(field.readonly)}  onClick={handleLaunchWorkspace}>{field.questionOptions?.buttonLabel ?? t('launchWorkspace')}</Button>
         </div>
       </div>
     )