Skip to content

Commit

Permalink
Merge branch 'main' into new-admitted-ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@its-kios09
its-kios09 authored Nov 11, 2024
2 parents ed11513 + 1af49cd commit 9e2d035
Show file tree
Hide file tree
Showing 5 changed files with 130 additions and 16 deletions.
8 changes: 6 additions & 2 deletions packages/esm-care-panel-app/src/regimen-editor/non-standard-regimen.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,10 @@ import { calculateAge, filterRegimenData } from './utils';
interface NonStandardRegimenProps {
category: string;
setNonStandardRegimens: (value: any) => void;
setStandardRegimenLine: (value: any) => void;
setStandardRegimenLine: (value: string) => void;
selectedRegimenType: string;
visitDate: Date;
errors: { [key: string]: string };
}

const NonStandardRegimen: React.FC<NonStandardRegimenProps> = ({
Expand All @@ -22,6 +23,7 @@ const NonStandardRegimen: React.FC<NonStandardRegimenProps> = ({
setNonStandardRegimens,
setStandardRegimenLine,
visitDate,
errors,
}) => {
const { t } = useTranslation();
const { standardRegimen } = useStandardRegimen();
Expand Down Expand Up @@ -76,7 +78,8 @@ const NonStandardRegimen: React.FC<NonStandardRegimenProps> = ({
{selectedRegimenType === 'nonStandardUuid' ? (
<Select
id="regimenLine"
invalidText="Required"
invalid={!!errors?.standardRegimenLine}
invalidText={errors?.standardRegimenLine}
labelText={t('selectRegimenLine', 'Select Regimen Line')}
className={styles.inputContainer}
value={selectedRegimenLine}
Expand All @@ -94,6 +97,7 @@ const NonStandardRegimen: React.FC<NonStandardRegimenProps> = ({

{selectedRegimenLine && (
<div>
{errors?.nonStandardRegimens && <div className={styles.errorText}>{errors.nonStandardRegimens}</div>}
{selectedRegimens?.map((selectedRegimen, index) => {
const availableRegimens = nonStandardRegimen.filter(
(regimen) => !selectedRegimens.includes(regimen.uuid) || regimen.uuid === selectedRegimen,
Expand Down
113 changes: 106 additions & 7 deletions packages/esm-care-panel-app/src/regimen-editor/regimen-form.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import { CarePanelConfig } from '../config-schema';
import { mutate } from 'swr';
import NonStandardRegimen from './non-standard-regimen.component';
import { addOrUpdateObsObject } from './utils';
import { z } from 'zod';

interface RegimenFormProps {
patientUuid: string;
Expand All @@ -44,6 +45,58 @@ interface RegimenFormProps {
};
closeWorkspace: () => void;
}
// Base schema with common fields
const baseSchema = z.object({
regimenEvent: z.string().min(1, { message: 'Please select a regimen event' }),
visitDate: z.date({ required_error: 'Please select a visit date' }),
});

// Schema for standard regimen fields
const standardRegimenSchema = z.object({
standardRegimenLine: z.string().min(1, { message: 'Please select a regimen line' }),
standardRegimen: z.string().min(1, { message: 'Please select a regimen' }),
});

// Schema for regimen type selection
const regimenTypeSchema = z.object({
selectedRegimenType: z.string().min(1, 'Please select a regimen type'),
});

// Schema for regimen reason
const regimenReasonSchema = z.object({
regimenReason: z.string().min(1, { message: 'Please provide a reason for regimen change/stop' }),
});

// Schema for non standard regimen fields
const nonStandardRegimenSchema = z.object({
standardRegimenLine: z.string().min(1, { message: 'Please select a regimen line' }),
nonStandardRegimens: z.array(z.string()).min(1, { message: 'Please select at least one drug regimen' }),
});

// Function to get dynamic schema based on regimen event and type
const getRegimenFormSchema = (regimenEvent: string, selectedRegimenType: string) => {
let schema = baseSchema;

if (regimenEvent === Regimen.stopRegimenConcept) {
schema = schema.merge(regimenReasonSchema);
} else if (regimenEvent === Regimen.changeRegimenConcept) {
schema = schema.merge(regimenReasonSchema).merge(regimenTypeSchema);
if (selectedRegimenType === 'standardUuid') {
schema = schema.merge(standardRegimenSchema);
} else if (selectedRegimenType === 'nonStandardUuid') {
schema = schema.merge(nonStandardRegimenSchema);
}
} else if (regimenEvent === Regimen.startOrRestartConcept) {
schema = schema.merge(regimenTypeSchema);
if (selectedRegimenType === 'standardUuid') {
schema = schema.merge(standardRegimenSchema);
} else if (selectedRegimenType === 'nonStandardUuid') {
schema = schema.merge(nonStandardRegimenSchema);
}
}

return schema;
};

const RegimenForm: React.FC<RegimenFormProps> = ({
patientUuid,
Expand All @@ -53,6 +106,7 @@ const RegimenForm: React.FC<RegimenFormProps> = ({
closeWorkspace,
}) => {
const { t } = useTranslation();
const [errors, setErrors] = useState<Record<string, string>>({});
const isTablet = useLayoutType() === 'tablet';
const sessionUser = useSession();
const config = useConfig() as CarePanelConfig;
Expand Down Expand Up @@ -149,9 +203,46 @@ const RegimenForm: React.FC<RegimenFormProps> = ({
}
}, [selectedRegimenType, nonStandardRegimens, regimenEvent]);

const validateForm = useCallback(() => {
const formData = {
regimenEvent,
selectedRegimenType,
standardRegimenLine,
standardRegimen,
regimenReason,
visitDate,
nonStandardRegimens: nonStandardRegimens.map((reg) => reg.value),
};

try {
const schema = getRegimenFormSchema(regimenEvent, selectedRegimenType);
schema.parse(formData);
setErrors({});
return true;
} catch (validationError) {
const errorMap = validationError.errors.reduce((acc: Record<string, string>, err) => {
acc[err.path[0]] = err.message;
return acc;
}, {});
setErrors(errorMap);
return false;
}
}, [
regimenEvent,
selectedRegimenType,
standardRegimenLine,
standardRegimen,
regimenReason,
visitDate,
nonStandardRegimens,
]);

const handleSubmit = useCallback(
(event) => {
event.preventDefault();
if (!validateForm()) {
return;
}
setIsSubmitting(true);

const encounterToSave: Encounter = {
Expand Down Expand Up @@ -215,16 +306,18 @@ const RegimenForm: React.FC<RegimenFormProps> = ({
}
},
[
patientUuid,
t,
category,
validateForm,
visitDate,
patientUuid,
sessionUser?.sessionLocation?.uuid,
sessionUser?.currentProvider?.uuid,
config.regimenObs.encounterProviderRoleUuid,
obsArray,
obsArrayForPrevEncounter,
sessionUser,
config,
regimenEncounter.uuid,
closeWorkspace,
t,
category,
],
);

Expand Down Expand Up @@ -253,10 +346,12 @@ const RegimenForm: React.FC<RegimenFormProps> = ({
labelText={t('date', 'Date')}
placeholder="dd/mm/yyyy"
style={{ width: '100%' }}
invalid={!!errors.visitDate}
invalidText={errors.visitDate}
/>
</DatePicker>
),
[visitDate, t],
[visitDate, t, errors.visitDate],
);

return (
Expand Down Expand Up @@ -302,6 +397,7 @@ const RegimenForm: React.FC<RegimenFormProps> = ({
onClick={launchDeleteRegimenDialog}
/>
</RadioButtonGroup>
{errors.regimenEvent && <div className={styles.errorText}>{errors.regimenEvent}</div>}
{regimenEvent ? (
<>
{regimenEvent !== 'undo' && regimenDatePicker}
Expand All @@ -319,13 +415,15 @@ const RegimenForm: React.FC<RegimenFormProps> = ({
disabled={category !== 'ARV'}
/>
</RadioButtonGroup>
{errors.selectedRegimenType && <div className={styles.errorText}>{errors.selectedRegimenType}</div>}
{selectedRegimenType === 'standardUuid' ? (
<StandardRegimen
category={category}
setStandardRegimen={setStandardRegimen}
setStandardRegimenLine={setStandardRegimenLine}
selectedRegimenType={selectedRegimenType}
visitDate={visitDate}
errors={errors}
/>
) : (
<NonStandardRegimen
Expand All @@ -334,13 +432,14 @@ const RegimenForm: React.FC<RegimenFormProps> = ({
setStandardRegimenLine={setStandardRegimenLine}
selectedRegimenType={selectedRegimenType}
visitDate={visitDate}
errors={errors}
/>
)}
</>
) : null}
{(regimenEvent === Regimen.stopRegimenConcept ||
(regimenEvent === Regimen.changeRegimenConcept && selectedRegimenType)) && (
<RegimenReason category={category} setRegimenReason={setRegimenReason} />
<RegimenReason category={category} setRegimenReason={setRegimenReason} errors={errors} />
)}
</>
) : null}
Expand Down
8 changes: 5 additions & 3 deletions packages/esm-care-panel-app/src/regimen-editor/regimen-reason.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,11 @@ import { useRegimenReason } from '../hooks/useRegimenReason';

interface RegimenReasonProps {
category: string;
setRegimenReason: (value: any) => void;
setRegimenReason: (value: string) => void;
errors: { [key: string]: string };
}

const RegimenReason: React.FC<RegimenReasonProps> = ({ category, setRegimenReason }) => {
const RegimenReason: React.FC<RegimenReasonProps> = ({ category, setRegimenReason, errors }) => {
const { t } = useTranslation();
const { regimenReason, isLoading, error } = useRegimenReason();

Expand All @@ -26,7 +27,8 @@ const RegimenReason: React.FC<RegimenReasonProps> = ({ category, setRegimenReaso
<>
<Select
id="regimenReason"
invalidText="Required"
invalid={!!errors?.regimenReason}
invalidText={errors?.regimenReason}
labelText={t('selectReason', 'Select Reason')}
className={styles.inputContainer}
value={selectedRegimenReason}
Expand Down
12 changes: 8 additions & 4 deletions packages/esm-care-panel-app/src/regimen-editor/standard-regimen.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,11 @@ import { calculateAge, filterRegimenData } from './utils';

interface StandardRegimenProps {
category: string;
setStandardRegimen: (value: any) => void;
setStandardRegimenLine: (value: any) => void;
setStandardRegimen: (value: string) => void;
setStandardRegimenLine: (value: string) => void;
selectedRegimenType: string;
visitDate: Date;
errors: { [key: string]: string };
}

const StandardRegimen: React.FC<StandardRegimenProps> = ({
Expand All @@ -20,6 +21,7 @@ const StandardRegimen: React.FC<StandardRegimenProps> = ({
setStandardRegimenLine,
selectedRegimenType,
visitDate,
errors,
}) => {
const { t } = useTranslation();
const { standardRegimen, isLoading, error } = useStandardRegimen();
Expand Down Expand Up @@ -60,7 +62,8 @@ const StandardRegimen: React.FC<StandardRegimenProps> = ({
{selectedRegimenType === 'standardUuid' ? (
<Select
id="regimenLine"
invalidText="Required"
invalid={!!errors?.standardRegimenLine}
invalidText={errors?.standardRegimenLine}
labelText={t('selectRegimenLine', 'Select Regimen Line')}
className={styles.inputContainer}
value={selectedRegimenLine}
Expand All @@ -79,7 +82,8 @@ const StandardRegimen: React.FC<StandardRegimenProps> = ({
{selectedRegimenLine && (
<Select
id="regimen"
invalidText="Required"
invalid={!!errors?.standardRegimen}
invalidText={errors?.standardRegimen}
labelText={t('selectRegimen', 'Select Regimen')}
className={styles.inputContainer}
value={selectedRegimen}
Expand Down
5 changes: 5 additions & 0 deletions packages/esm-care-panel-app/src/regimen-editor/standard-regimen.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,11 @@
padding: spacing.$spacing-06 spacing.$spacing-05;
background-color: $ui-02;
}
.errorText {
color: colors.$red-60;
font-size: 0.875rem;
margin-top: 0.313rem;
}

.desktop {
padding: 0rem;
Expand Down

0 comments on commit 9e2d035

Please sign in to comment.