Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor previous value #164

Closed
wants to merge 4 commits into from
Closed

Refactor previous value #164

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5b9d05e
Proof of concept
arodidev Jan 18, 2024
79e2df4
Modified prevValue logic on number control
arodidev Jan 19, 2024
323a3aa
refactor for date control
arodidev Jan 23, 2024
714dd5b
refactored controls
arodidev Jan 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/api/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,7 @@ export interface OHRIFormFieldProps {
handler: SubmissionHandler;
// This is of util to components defined out of the engine
useField?: (fieldId: string) => [FieldInputProps<any>, FieldMetaProps<any>, FieldHelperProps<any>];
previousValue?: Record<string, any>;
}
export interface OHRIFormSection {
hide?: HideProps;
Expand Down
28 changes: 28 additions & 0 deletions src/components/group/ohri-obs-group.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,20 @@ import styles from './ohri-obs-group.scss';
import { useField } from 'formik';
import { getFieldControlWithFallback, isUnspecifiedSupported } from '../section/helpers';
import { OHRITooltip } from '../inputs/tooltip/ohri-tooltip';
import { isTrue } from '../../utils/boolean-utils';
import { PreviousValueReview } from '../previous-value-review/previous-value-review.component';

export interface ObsGroupProps extends OHRIFormFieldProps {
deleteControl?: any;
}

export const OHRIObsGroup: React.FC<ObsGroupProps> = ({ question, onChange, deleteControl }) => {
const [previousValues, setPreviousValues] = useState<Array<Record<string, any>>>([]);
const [groupMembersControlMap, setGroupMembersControlMap] = useState([]);
const { formFieldHandlers } = useContext(OHRIFormContext);
const { encounterContext, fields: fieldsFromEncounter } = React.useContext(OHRIFormContext);

// console.log('obsgroup', encounterContext.previousEncounter);

useEffect(() => {
if (question.questions) {
Expand All @@ -39,6 +45,16 @@ export const OHRIObsGroup: React.FC<ObsGroupProps> = ({ question, onChange, dele
useField,
});

const prevValue = encounterContext.previousEncounter
? formFieldHandlers[field.type]?.getPreviousValue(
field,
encounterContext.previousEncounter,
fieldsFromEncounter,
)
: { value: 'no previous value' };

// console.log(field.id, prevValue);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove this


return (
<div className={`${styles.flexColumn} ${styles.obsGroupColumn} `}>
<div className={styles.parent}>
Expand All @@ -49,6 +65,18 @@ export const OHRIObsGroup: React.FC<ObsGroupProps> = ({ question, onChange, dele
)}
{field.questionInfo && <OHRITooltip field={field} />}
</div>
{encounterContext?.previousEncounter &&
prevValue &&
!isTrue(field.questionOptions.usePreviousValueDisabled) && (
<div className={styles.previousValue}>
<PreviousValueReview
value={prevValue?.value}
displayText={prevValue?.display}
setValue={setPreviousValues}
field={field.id}
/>
</div>
)}
</div>
</div>
);
Expand Down
25 changes: 18 additions & 7 deletions src/components/inputs/date/ohri-date.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import { formatDate } from '@openmrs/esm-framework';
const locale = window.i18next.language == 'en' ? 'en-GB' : window.i18next.language;
const dateFormatter = new Intl.DateTimeFormat(locale);

const OHRIDate: React.FC<OHRIFormFieldProps> = ({ question, onChange, handler }) => {
const OHRIDate: React.FC<OHRIFormFieldProps> = ({ question, onChange, handler, previousValue }) => {
const [field, meta] = useField(question.id);
const { setFieldValue, encounterContext, layoutType, workspaceLayout, fields } = React.useContext(OHRIFormContext);
const [errors, setErrors] = useState([]);
Expand Down Expand Up @@ -47,6 +47,17 @@ const OHRIDate: React.FC<OHRIFormFieldProps> = ({ question, onChange, handler })
question.value = handler?.handleFieldSubmission(question, refinedDate, encounterContext);
};

useEffect(() => {
if (previousValue) {
const { value: date } = previousValue;
const refinedDate = date instanceof Date ? new Date(date.getTime() - date.getTimezoneOffset() * 60000) : date;
setFieldValue(question.id, refinedDate);
onChange(question.id, refinedDate, setErrors, setWarnings);
onTimeChange(false, true);
question.value = handler?.handleFieldSubmission(question, refinedDate, encounterContext);
}
}, [previousValue]);

const onTimeChange = (event, useValue = false) => {
if (useValue) {
const prevValue =
Expand All @@ -67,7 +78,7 @@ const OHRIDate: React.FC<OHRIFormFieldProps> = ({ question, onChange, handler })
const { placeholder, carbonDateformat } = useMemo(() => {
const formatObj = dateFormatter.formatToParts(new Date());
const placeholder = formatObj
.map(obj => {
.map((obj) => {
switch (obj.type) {
case 'day':
return 'dd';
Expand All @@ -81,7 +92,7 @@ const OHRIDate: React.FC<OHRIFormFieldProps> = ({ question, onChange, handler })
})
.join('');
const carbonDateformat = formatObj
.map(obj => {
.map((obj) => {
switch (obj.type) {
case 'day':
return 'd';
Expand Down Expand Up @@ -119,7 +130,7 @@ const OHRIDate: React.FC<OHRIFormFieldProps> = ({ question, onChange, handler })
}, [encounterContext?.previousEncounter]);

useEffect(() => {
getConceptNameAndUUID(question.questionOptions.concept).then(conceptTooltip => {
getConceptNameAndUUID(question.questionOptions.concept).then((conceptTooltip) => {
setConceptName(conceptTooltip);
});
}, [conceptName]);
Expand Down Expand Up @@ -164,7 +175,7 @@ const OHRIDate: React.FC<OHRIFormFieldProps> = ({ question, onChange, handler })
// Something strange is happening with the way events are propagated and handled by Carbon.
// When we manually trigger an onchange event using the 'fireEvent' lib, the handler below will
// be triggered as opposed to the former handler that only gets triggered at runtime.
onChange={e => onDateChange([dayjs(e.target.value, placeholder.toUpperCase()).toDate()])}
onChange={(e) => onDateChange([dayjs(e.target.value, placeholder.toUpperCase()).toDate()])}
disabled={question.disabled}
invalid={!isFieldRequiredError && errors.length > 0}
invalidText={errors[0]?.message}
Expand Down Expand Up @@ -196,15 +207,15 @@ const OHRIDate: React.FC<OHRIFormFieldProps> = ({ question, onChange, handler })
) : (
''
)}
{previousValueForReview && (
{/* {previousValueForReview && (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove this

<div className={`${styles.formField}`}>
<PreviousValueReview
value={previousValueForReview.value}
displayText={previousValueForReview.display}
setValue={onDateChange}
/>
</div>
)}
)} */}
</div>
</>
)
Expand Down
38 changes: 23 additions & 15 deletions src/components/inputs/number/ohri-number.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,15 @@ import { OHRIFormContext } from '../../../ohri-form-context';
import { PreviousValueReview } from '../../previous-value-review/previous-value-review.component';
import styles from './ohri-number.scss';

const OHRINumber: React.FC<OHRIFormFieldProps> = ({ question, onChange, handler }) => {
const OHRINumber: React.FC<OHRIFormFieldProps> = ({ question, onChange, handler, previousValue }) => {
const [field, meta] = useField(question.id);
const { setFieldValue, encounterContext, layoutType, workspaceLayout, fields } = React.useContext(OHRIFormContext);
const [previousValue, setPreviousValue] = useState();
// const [previousValue, setPreviousValue] = useState();
const [conceptName, setConceptName] = useState('Loading...');
const [errors, setErrors] = useState([]);
const isFieldRequiredError = useMemo(() => errors[0]?.errCode == fieldRequiredErrCode, [errors]);
const [warnings, setWarnings] = useState([]);
const [previousValueForReview, setPreviousValueForReview] = useState(null);
// const [previousValueForReview, setPreviousValueForReview] = useState(null);

useEffect(() => {
if (question['submission']) {
Expand All @@ -27,7 +27,7 @@ const OHRINumber: React.FC<OHRIFormFieldProps> = ({ question, onChange, handler
}
}, [question['submission']]);

field.onBlur = event => {
field.onBlur = (event) => {
if (event && event.target.value != field.value) {
// testing purposes only
field.value = event.target.value;
Expand All @@ -49,16 +49,24 @@ const OHRINumber: React.FC<OHRIFormFieldProps> = ({ question, onChange, handler
};

useEffect(() => {
if (encounterContext?.previousEncounter && !isTrue(question.questionOptions.usePreviousValueDisabled)) {
const prevValue = handler?.getPreviousValue(question, encounterContext?.previousEncounter, fields);
if (!isEmpty(prevValue?.value)) {
setPreviousValueForReview(prevValue);
}
if (previousValue) {
setFieldValue(question.id, previousValue.value);
field['value'] = previousValue.value;
field.onBlur(null);
}
}, [encounterContext?.previousEncounter]);
}, [previousValue]);

// useEffect(() => {
// if (encounterContext?.previousEncounter && !isTrue(question.questionOptions.usePreviousValueDisabled)) {
// const prevValue = handler?.getPreviousValue(question, encounterContext?.previousEncounter, fields);
// if (!isEmpty(prevValue?.value)) {
// setPreviousValueForReview(prevValue);
// }
// }
// }, [encounterContext?.previousEncounter]);

useEffect(() => {
getConceptNameAndUUID(question.questionOptions.concept).then(conceptTooltip => {
getConceptNameAndUUID(question.questionOptions.concept).then((conceptTooltip) => {
setConceptName(conceptTooltip);
});
}, [conceptName]);
Expand Down Expand Up @@ -93,11 +101,11 @@ const OHRINumber: React.FC<OHRIFormFieldProps> = ({ question, onChange, handler
min={question.questionOptions.min || undefined}
name={question.id}
value={field.value || ''}
onFocus={() => setPreviousValue(field.value)}
// onFocus={() => setPreviousValue(field.value)}
allowEmpty={true}
size="lg"
hideSteppers={true}
onWheel={e => e.target.blur()}
onWheel={(e) => e.target.blur()}
disabled={question.disabled}
readOnly={question.readonly}
className={isFieldRequiredError ? styles.errorLabel : ''}
Expand All @@ -106,15 +114,15 @@ const OHRINumber: React.FC<OHRIFormFieldProps> = ({ question, onChange, handler
step="0.01"
/>
</div>
{previousValueForReview && (
{/* {previousValueForReview && (
<div>
<PreviousValueReview
value={previousValueForReview.value}
displayText={previousValueForReview.display}
setValue={setPrevValue}
/>
</div>
)}
)} */}
</div>
)
);
Expand Down
20 changes: 14 additions & 6 deletions src/components/inputs/radio/ohri-radio.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { OHRIFieldValueView } from '../../value/view/ohri-field-value-view.compo
import { PreviousValueReview } from '../../previous-value-review/previous-value-review.component';
import styles from './ohri-radio.scss';

const OHRIRadio: React.FC<OHRIFormFieldProps> = ({ question, onChange, handler }) => {
const OHRIRadio: React.FC<OHRIFormFieldProps> = ({ question, onChange, handler, previousValue }) => {
const [field, meta] = useField(question.id);
const { setFieldValue, encounterContext, layoutType, workspaceLayout, fields } = React.useContext(OHRIFormContext);
const [errors, setErrors] = useState([]);
Expand All @@ -27,14 +27,14 @@ const OHRIRadio: React.FC<OHRIFormFieldProps> = ({ question, onChange, handler }
}
}, [question['submission']]);

const handleChange = value => {
const handleChange = (value) => {
setFieldValue(question.id, value);
onChange(question.id, value, setErrors, setWarnings);
question.value = handler?.handleFieldSubmission(question, value, encounterContext);
};

useEffect(() => {
getConceptNameAndUUID(question.questionOptions.concept).then(conceptTooltip => {
getConceptNameAndUUID(question.questionOptions.concept).then((conceptTooltip) => {
setConceptName(conceptTooltip);
});
}, [conceptName]);
Expand All @@ -49,6 +49,14 @@ const OHRIRadio: React.FC<OHRIFormFieldProps> = ({ question, onChange, handler }
}
}, [encounterContext?.previousEncounter]);

useEffect(() => {
if (previousValue) {
setFieldValue(question.id, previousValue.value);
onChange(question.id, previousValue.value, setErrors, setWarnings);
question.value = handler?.handleFieldSubmission(question, previousValue.value, encounterContext);
}
}, [previousValue]);

const isInline = useMemo(() => {
if (encounterContext.sessionMode == 'view' || isTrue(question.readonly)) {
return isInlineView(question.inlineRendering, layoutType, workspaceLayout);
Expand Down Expand Up @@ -80,7 +88,7 @@ const OHRIRadio: React.FC<OHRIFormFieldProps> = ({ question, onChange, handler }
onChange={handleChange}
orientation="vertical">
{question.questionOptions.answers
.filter(answer => !answer.isHidden)
.filter((answer) => !answer.isHidden)
.map((answer, index) => {
return (
<RadioButton
Expand All @@ -101,15 +109,15 @@ const OHRIRadio: React.FC<OHRIFormFieldProps> = ({ question, onChange, handler }
</div>
))}
</FormGroup>
{previousValueForReview ? (
{/* {previousValueForReview ? (
<FormGroup legendText={null}>
<PreviousValueReview
value={previousValueForReview.value}
displayText={previousValueForReview.display}
setValue={handleChange}
/>
</FormGroup>
) : null}
) : null} */}
</div>
)
);
Expand Down
32 changes: 20 additions & 12 deletions src/components/inputs/text/ohri-text.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,15 @@ import { OHRIFieldValueView } from '../../value/view/ohri-field-value-view.compo
import { PreviousValueReview } from '../../previous-value-review/previous-value-review.component';
import styles from './ohri-text.scss';

const OHRIText: React.FC<OHRIFormFieldProps> = ({ question, onChange, handler }) => {
const OHRIText: React.FC<OHRIFormFieldProps> = ({ question, onChange, handler, previousValue }) => {
const [field, meta] = useField(question.id);
const { setFieldValue, encounterContext, layoutType, workspaceLayout, fields } = React.useContext(OHRIFormContext);
const [previousValue, setPreviousValue] = useState();
// const [previousValue, setPreviousValue] = useState();
const [errors, setErrors] = useState([]);
const [warnings, setWarnings] = useState([]);
const [conceptName, setConceptName] = useState('Loading...');
const isFieldRequiredError = useMemo(() => errors[0]?.errCode == fieldRequiredErrCode, [errors]);
const [previousValueForReview, setPreviousValueForReview] = useState(null);
// const [previousValueForReview, setPreviousValueForReview] = useState(null);

useEffect(() => {
if (question['submission']) {
Expand All @@ -28,14 +28,22 @@ const OHRIText: React.FC<OHRIFormFieldProps> = ({ question, onChange, handler })
}
}, [question['submission']]);

// useEffect(() => {
// if (encounterContext?.previousEncounter && !isTrue(question.questionOptions.usePreviousValueDisabled)) {
// const prevValue = handler?.getPreviousValue(question, encounterContext?.previousEncounter, fields);
// if (!isEmpty(prevValue?.value)) {
// setPreviousValueForReview(prevValue);
// }
// }
// }, [encounterContext?.previousEncounter]);

useEffect(() => {
if (encounterContext?.previousEncounter && !isTrue(question.questionOptions.usePreviousValueDisabled)) {
const prevValue = handler?.getPreviousValue(question, encounterContext?.previousEncounter, fields);
if (!isEmpty(prevValue?.value)) {
setPreviousValueForReview(prevValue);
}
if (previousValue) {
setFieldValue(question.id, previousValue.value);
field['value'] = previousValue.value;
field.onBlur(null);
}
}, [encounterContext?.previousEncounter]);
}, [previousValue]);

field.onBlur = () => {
if (field.value && question.unspecified) {
Expand Down Expand Up @@ -84,7 +92,7 @@ const OHRIText: React.FC<OHRIFormFieldProps> = ({ question, onChange, handler })
labelText={question.label}
name={question.id}
value={field.value || ''}
onFocus={() => setPreviousValue(field.value)}
// onFocus={() => setPreviousValue(field.value)}
disabled={question.disabled}
readOnly={question.readonly}
invalid={!isFieldRequiredError && errors.length > 0}
Expand All @@ -95,15 +103,15 @@ const OHRIText: React.FC<OHRIFormFieldProps> = ({ question, onChange, handler })
maxLength={question.questionOptions.max || TextInput.maxLength}
/>
</div>
{previousValueForReview && (
{/* {previousValueForReview && (
<div>
<PreviousValueReview
value={previousValueForReview.value}
displayText={previousValueForReview.display}
setValue={setPrevValue}
/>
</div>
)}
)} */}
</div>
</>
)
Expand Down
Loading
Loading