Skip to content

Commit

Permalink
fix: KHP3-7296-Make relationship person middle name optional and remo…
Browse files Browse the repository at this point in the history 
…ve notes from relationship payload (#547)

* fix: Update relationship form schemas to handle optional fields and remoed notes from relationship payload preventing error

* fix: Update translations and form validation messages for clarity; remove unnecessary notes from relationship payload

* update dependency array in useEffect to include form and showIPVRelated fields

* refactor: remove notes field from relationship forms and update error handling messages
  • Loading branch information
@Omoshlawi
Omoshlawi authored Jan 23, 2025
1 parent 2a96b0e commit 4fe7fd6
Show file tree
Hide file tree
Showing 5 changed files with 113 additions and 147 deletions.
86 changes: 46 additions & 40 deletions packages/esm-patient-clinical-view-app/src/contact-list/contact-list.workspace.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,14 @@ const ContactListForm: React.FC<ContactListFormProps> = ({
if (!showIPVRelatedFields) {
form.setValue('ipvOutCome', undefined);
}
}, [observablePhysicalAssault, observableThreatened, observableSexualAssault, observableRelationship]);
}, [
observablePhysicalAssault,
observableThreatened,
observableSexualAssault,
observableRelationship,
form,
showIPVRelatedFields,
]);

return (
<FormProvider {...form}>
Expand All @@ -131,18 +138,21 @@ const ContactListForm: React.FC<ContactListFormProps> = ({
<Controller
control={form.control}
name="startDate"
render={({ field }) => (
render={({ field, fieldState: { error } }) => (
<DatePicker
className={styles.datePickerInput}
dateFormat="d/m/Y"
id="startDate"
datePickerType="single"
{...field}
invalid={form.formState.errors[field.name]?.message}
invalidText={form.formState.errors[field.name]?.message}>
ref={undefined}
invalid={error?.message}
invalidText={error?.message}>
<DatePickerInput
invalid={form.formState.errors[field.name]?.message}
invalidText={form.formState.errors[field.name]?.message}
id={`startdate-input`}
name="startdate-input"
invalid={error?.message}
invalidText={error?.message}
placeholder="mm/dd/yyyy"
labelText={t('startDate', 'Start Date')}
size="xl"
Expand All @@ -155,18 +165,18 @@ const ContactListForm: React.FC<ContactListFormProps> = ({
<Controller
control={form.control}
name="endDate"
render={({ field }) => (
render={({ field, fieldState: { error } }) => (
<DatePicker
className={styles.datePickerInput}
dateFormat="d/m/Y"
id="endDate"
datePickerType="single"
{...field}
invalid={form.formState.errors[field.name]?.message}
invalidText={form.formState.errors[field.name]?.message}>
invalid={error?.message}
invalidText={error?.message}>
<DatePickerInput
invalid={form.formState.errors[field.name]?.message}
invalidText={form.formState.errors[field.name]?.message}
invalid={error?.message}
invalidText={error?.message}
placeholder="mm/dd/yyyy"
labelText={t('endDate', 'End Date')}
size="xl"
Expand All @@ -179,11 +189,11 @@ const ContactListForm: React.FC<ContactListFormProps> = ({
<Controller
control={form.control}
name="relationshipType"
render={({ field }) => (
render={({ field, fieldState: { error } }) => (
<Dropdown
ref={field.ref}
invalid={form.formState.errors[field.name]?.message}
invalidText={form.formState.errors[field.name]?.message}
invalid={error?.message}
invalidText={error?.message}
id="relationshipToPatient"
titleText={t('relationToPatient', 'Relation to patient')}
onChange={(e) => {
Expand All @@ -203,11 +213,11 @@ const ContactListForm: React.FC<ContactListFormProps> = ({
<Controller
control={form.control}
name="livingWithClient"
render={({ field }) => (
render={({ field, fieldState: { error } }) => (
<Dropdown
ref={field.ref}
invalid={form.formState.errors[field.name]?.message}
invalidText={form.formState.errors[field.name]?.message}
invalid={error?.message}
invalidText={error?.message}
id="livingWithClient"
titleText={t('livingWithClient', 'Living with client')}
onChange={(e) => {
Expand All @@ -228,16 +238,16 @@ const ContactListForm: React.FC<ContactListFormProps> = ({
<Controller
control={form.control}
name="physicalAssault"
render={({ field }) => (
render={({ field, fieldState: { error } }) => (
<RadioButtonGroup
id="physicalAssault"
legendText={t(
'physicalAssault',
'1. Has he/she ever hit, kicked, slapped, or otherwise physically hurt you?',
)}
{...field}
invalid={form.formState.errors[field.name]?.message}
invalidText={form.formState.errors[field.name]?.message}
invalid={error?.message}
invalidText={error?.message}
className={styles.billingItem}>
<RadioButton labelText={t('yes', 'Yes')} value={BOOLEAN_YES} id="physicalAssault_yes" />
<RadioButton labelText={t('no', 'No')} value={BOOLEAN_NO} id="physicalAssault_no" />
Expand All @@ -249,13 +259,13 @@ const ContactListForm: React.FC<ContactListFormProps> = ({
<Controller
control={form.control}
name="threatened"
render={({ field }) => (
render={({ field, fieldState: { error } }) => (
<RadioButtonGroup
id="threatened"
legendText={t('threatened', '2. Has he/she ever threatened to hurt you?')}
{...field}
invalid={form.formState.errors[field.name]?.message}
invalidText={form.formState.errors[field.name]?.message}
invalid={error?.message}
invalidText={error?.message}
className={styles.billingItem}>
<RadioButton labelText={t('yes', 'Yes')} value={BOOLEAN_YES} id="threatened_yes" />
<RadioButton labelText={t('no', 'No')} value={BOOLEAN_NO} id="threatened_no" />
Expand All @@ -267,16 +277,16 @@ const ContactListForm: React.FC<ContactListFormProps> = ({
<Controller
control={form.control}
name="sexualAssault"
render={({ field }) => (
render={({ field, fieldState: { error } }) => (
<RadioButtonGroup
id="sexualAssault"
legendText={t(
'sexualAssault',
'3.Has he/she ever forced you to do something sexually that made you feel uncomfortable?',
)}
{...field}
invalid={form.formState.errors[field.name]?.message}
invalidText={form.formState.errors[field.name]?.message}
invalid={error?.message}
invalidText={error?.message}
className={styles.billingItem}>
<RadioButton labelText={t('yes', 'Yes')} value={BOOLEAN_YES} id="sexualAssault_yes" />
<RadioButton labelText={t('no', 'No')} value={BOOLEAN_NO} id="sexualAssault_no" />
Expand All @@ -289,11 +299,11 @@ const ContactListForm: React.FC<ContactListFormProps> = ({
<Controller
control={form.control}
name="ipvOutCome"
render={({ field }) => (
render={({ field, fieldState: { error } }) => (
<Dropdown
ref={field.ref}
invalid={form.formState.errors[field.name]?.message}
invalidText={form.formState.errors[field.name]?.message}
invalid={error?.message}
invalidText={error?.message}
id="ipvOutCome"
titleText={t('ipvOutCome', 'IPV Outcome')}
onChange={(e) => {
Expand All @@ -316,11 +326,11 @@ const ContactListForm: React.FC<ContactListFormProps> = ({
<Controller
control={form.control}
name="baselineStatus"
render={({ field }) => (
render={({ field, fieldState: { error } }) => (
<Dropdown
ref={field.ref}
invalid={form.formState.errors[field.name]?.message}
invalidText={form.formState.errors[field.name]?.message}
invalid={error?.message}
invalidText={error?.message}
id="baselineStatus"
titleText={t('baselineStatus', 'HIV Status')}
onChange={(e) => {
Expand All @@ -338,11 +348,11 @@ const ContactListForm: React.FC<ContactListFormProps> = ({
<Controller
control={form.control}
name="preferedPNSAproach"
render={({ field }) => (
render={({ field, fieldState: { error } }) => (
<Dropdown
ref={field.ref}
invalid={form.formState.errors[field.name]?.message}
invalidText={form.formState.errors[field.name]?.message}
invalid={error?.message}
invalidText={error?.message}
id="preferedPNSAproach"
titleText={t('preferedPNSAproach', 'Prefered PNS Aproach')}
onChange={(e) => {
Expand All @@ -364,11 +374,7 @@ const ContactListForm: React.FC<ContactListFormProps> = ({
<Button className={styles.button} kind="secondary" onClick={closeWorkspace}>
{t('discard', 'Discard')}
</Button>
<Button
className={styles.button}
kind="primary"
type="submit"
disabled={form.formState.isSubmitting || !form.formState.isValid}>
<Button className={styles.button} kind="primary" type="submit" disabled={form.formState.isSubmitting}>
{t('submit', 'Submit')}
</Button>
</ButtonSet>
Expand Down
53 changes: 15 additions & 38 deletions ...sm-patient-clinical-view-app/src/family-partner-history/family-relationship.workspace.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,6 @@ import styles from './family-relationship.scss';
import { useMappedRelationshipTypes } from './relationships.resource';

const schema = relationshipFormSchema
.extend({
notes: z.string().optional(),
})
.refine(
(data) => {
return !(data.mode === 'search' && !data.personB);
Expand Down Expand Up @@ -58,15 +55,11 @@ const FamilyRelationshipForm: React.FC<RelationshipFormProps> = ({ closeWorkspac
resolver: zodResolver(schema),
});

const {
control,
handleSubmit,
formState: { isValid },
} = form;
const { control, handleSubmit } = form;

const onSubmit: SubmitHandler<FormData> = async (data) => {
try {
await saveRelationship(data, config, session, []);
await saveRelationship(data, config, session, []); /// Remove notes from payload since endpoint doesn't expect it to avoid 400 error
closeWorkspace();
} catch (error) {}
};
Expand Down Expand Up @@ -100,18 +93,19 @@ const FamilyRelationshipForm: React.FC<RelationshipFormProps> = ({ closeWorkspac
<Controller
control={form.control}
name="startDate"
render={({ field }) => (
render={({ field, fieldState: { error } }) => (
<DatePicker
className={styles.datePickerInput}
dateFormat="d/m/Y"
id="startDate"
datePickerType="single"
{...field}
invalid={form.formState.errors[field.name]?.message}
invalidText={form.formState.errors[field.name]?.message}>
ref={undefined}
invalid={error?.message}
invalidText={error?.message}>
<DatePickerInput
invalid={form.formState.errors[field.name]?.message}
invalidText={form.formState.errors[field.name]?.message}
invalid={error?.message}
invalidText={error?.message}
placeholder="mm/dd/yyyy"
labelText={t('startDate', 'Start Date')}
size="xl"
Expand All @@ -124,18 +118,19 @@ const FamilyRelationshipForm: React.FC<RelationshipFormProps> = ({ closeWorkspac
<Controller
control={form.control}
name="endDate"
render={({ field }) => (
render={({ field, fieldState: { error } }) => (
<DatePicker
className={styles.datePickerInput}
dateFormat="d/m/Y"
id="endDate"
datePickerType="single"
{...field}
invalid={form.formState.errors[field.name]?.message}
invalidText={form.formState.errors[field.name]?.message}>
ref={undefined}
invalid={error?.message}
invalidText={error?.message}>
<DatePickerInput
invalid={form.formState.errors[field.name]?.message}
invalidText={form.formState.errors[field.name]?.message}
invalid={error?.message}
invalidText={error?.message}
placeholder="mm/dd/yyyy"
labelText={t('endDate', 'End Date')}
size="xl"
Expand All @@ -144,31 +139,13 @@ const FamilyRelationshipForm: React.FC<RelationshipFormProps> = ({ closeWorkspac
)}
/>
</Column>
<Column className={styles.textbox}>
<Controller
name="notes"
control={control}
render={({ field }) => (
<TextArea
labelText={t('additionalNotes', 'Any additional notes')}
rows={4}
id="relationship-notes"
{...field}
/>
)}
/>
</Column>
</Stack>

<ButtonSet className={styles.buttonSet}>
<Button className={styles.button} kind="secondary" onClick={closeWorkspace}>
{t('discard', 'Discard')}
</Button>
<Button
className={styles.button}
kind="primary"
type="submit"
disabled={!isValid || form.formState.isLoading}>
<Button className={styles.button} kind="primary" type="submit" disabled={form.formState.isSubmitting}>
{t('save', 'Save')}
</Button>
</ButtonSet>
Expand Down
32 changes: 4 additions & 28 deletions ...s/esm-patient-clinical-view-app/src/other-relationships/other-relationships.workspace.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,6 @@ import { uppercaseText } from '../utils/expression-helper';
import styles from './other-relationships.scss';

const schema = relationshipFormSchema
.extend({
notes: z.string().optional(),
})
.refine(
(data) => {
return !(data.mode === 'search' && !data.personB);
Expand Down Expand Up @@ -57,11 +54,7 @@ export const OtherRelationshipsForm: React.FC<OtherRelationshipsFormProps> = ({
resolver: zodResolver(schema),
});

const {
control,
handleSubmit,
formState: { isValid },
} = form;
const { control, handleSubmit } = form;

const onSubmit: SubmitHandler<FormData> = async (data) => {
try {
Expand All @@ -87,6 +80,7 @@ export const OtherRelationshipsForm: React.FC<OtherRelationshipsFormProps> = ({
id="startDate"
datePickerType="single"
{...field}
ref={undefined}
invalid={form.formState.errors[field.name]?.message}
invalidText={form.formState.errors[field.name]?.message}>
<DatePickerInput
Expand All @@ -111,6 +105,7 @@ export const OtherRelationshipsForm: React.FC<OtherRelationshipsFormProps> = ({
id="endDate"
datePickerType="single"
{...field}
ref={undefined}
invalid={form.formState.errors[field.name]?.message}
invalidText={form.formState.errors[field.name]?.message}>
<DatePickerInput
Expand Down Expand Up @@ -142,31 +137,12 @@ export const OtherRelationshipsForm: React.FC<OtherRelationshipsFormProps> = ({
)}
/>
</Column>

<Column className={styles.textbox}>
<Controller
name="notes"
control={control}
render={({ field }) => (
<TextArea
labelText={t('additionalNotes', 'Any additional notes')}
rows={4}
id="relationship-notes"
{...field}
/>
)}
/>
</Column>
</Stack>
<ButtonSet className={styles.buttonSet}>
<Button className={styles.button} kind="secondary" onClick={closeWorkspace}>
{t('discard', 'Discard')}
</Button>
<Button
className={styles.button}
kind="primary"
type="submit"
disabled={!isValid || form.formState.isSubmitting}>
<Button className={styles.button} kind="primary" type="submit" disabled={form.formState.isSubmitting}>
{t('save', 'Save')}
</Button>
</ButtonSet>
Expand Down
Loading

0 comments on commit 4fe7fd6

Please sign in to comment.