Skip to content

Commit

Permalink
Medicine Administrations: Adds administered_date input (ohcnetwork#…
Browse files Browse the repository at this point in the history 
…6206)

* Add input: `administered_date` to Administer Dialog

* add administered_date for bulk administer too

* fix cypress
  • Loading branch information
@rithviknishad
rithviknishad authored Sep 6, 2023
1 parent 539beec commit 55c0ae0
Show file tree
Hide file tree
Showing 6 changed files with 125 additions and 31 deletions.
2 changes: 1 addition & 1 deletion cypress/e2e/patient_spec/patient_crud.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ describe("Patient Creation with consultation", () => {
cy.get("#add-patient-details").should("be.visible");
cy.get("#add-patient-details").click();
cy.get("input[name='facilities']")
.type("cypress facility")
.type("dummy facility")
.then(() => {
cy.get("[role='option']").first().click();
});
Expand Down
1 change: 1 addition & 0 deletions src/Components/Form/FormFields/CheckBoxFormField.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export default function CheckBoxFormField(props: FormFieldBaseProps<boolean>) {
name={field.name}
checked={field.value}
onChange={(e) => field.handleChange(e.target.checked)}
disabled={field.disabled}
/>
<FieldLabel
htmlFor={field.id}
Expand Down
61 changes: 50 additions & 11 deletions src/Components/Medicine/AdministerMedicine.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@ import PrescriptionDetailCard from "./PrescriptionDetailCard";
import CareIcon from "../../CAREUI/icons/CareIcon";
import { formatDateTime } from "../../Utils/utils";
import { useTranslation } from "react-i18next";
import CheckBoxFormField from "../Form/FormFields/CheckBoxFormField";
import TextFormField from "../Form/FormFields/TextFormField";
import dayjs from "../../Utils/dayjs";

interface Props {
prescription: Prescription;
Expand All @@ -21,6 +24,10 @@ export default function AdministerMedicine({ prescription, ...props }: Props) {
const dispatch = useDispatch<any>();
const [isLoading, setIsLoading] = useState(false);
const [notes, setNotes] = useState<string>("");
const [isCustomTime, setIsCustomTime] = useState(false);
const [customTime, setCustomTime] = useState<string>(
dayjs().format("YYYY-MM-DDTHH:mm")
);

return (
<ConfirmDialog
Expand All @@ -43,10 +50,14 @@ export default function AdministerMedicine({ prescription, ...props }: Props) {
}
show
onClose={() => props.onClose(false)}
// variant="primary"
onConfirm={async () => {
setIsLoading(true);
const res = await dispatch(props.actions.administer({ notes }));
const res = await dispatch(
props.actions.administer({
notes,
administered_date: isCustomTime ? customTime : undefined,
})
);
if (res.status === 201) {
Success({ msg: t("medicines_administered") });
}
Expand All @@ -61,15 +72,43 @@ export default function AdministerMedicine({ prescription, ...props }: Props) {
readonly
actions={props.actions}
/>
<TextAreaFormField
label={t("administration_notes")}
name="administration_notes"
placeholder={t("add_notes")}
value={notes}
onChange={({ value }) => setNotes(value)}
errorClassName="hidden"
disabled={isLoading}
/>

<div className="flex flex-col gap-4 lg:flex-row lg:gap-6">
<TextAreaFormField
label={t("administration_notes")}
className="w-full"
name="administration_notes"
placeholder={t("add_notes")}
value={notes}
onChange={({ value }) => setNotes(value)}
errorClassName="hidden"
disabled={isLoading}
/>
<div className="flex flex-col gap-2 lg:max-w-min">
<CheckBoxFormField
label="Administer for a time in the past"
labelClassName="whitespace-nowrap"
name="is_custom_time"
value={isCustomTime}
onChange={({ value }) => {
setIsCustomTime(value);
if (!value) {
setCustomTime(dayjs().format("YYYY-MM-DDTHH:mm"));
}
}}
errorClassName="hidden"
/>
<TextFormField
name="administered_date"
type="datetime-local"
value={customTime}
onChange={({ value }) => setCustomTime(value)}
disabled={!isCustomTime}
min={dayjs(prescription.created_date).format("YYYY-MM-DDTHH:mm")}
max={dayjs().format("YYYY-MM-DDTHH:mm")}
/>
</div>
</div>
</div>
</ConfirmDialog>
);
Expand Down
88 changes: 71 additions & 17 deletions src/Components/Medicine/MedicineAdministration.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import { useDispatch } from "react-redux";
import { Error, Success } from "../../Utils/Notifications";
import { formatDateTime } from "../../Utils/utils";
import { useTranslation } from "react-i18next";
import dayjs from "../../Utils/dayjs";
import TextFormField from "../Form/FormFields/TextFormField";

interface Props {
prescriptions: Prescription[];
Expand All @@ -24,6 +26,8 @@ export default function MedicineAdministration(props: Props) {
const [notes, setNotes] = useState<MedicineAdministrationRecord["notes"][]>(
[]
);
const [isCustomTime, setIsCustomTime] = useState<boolean[]>([]);
const [customTime, setCustomTime] = useState<string[]>([]);

const prescriptions = useMemo(
() =>
Expand All @@ -36,13 +40,21 @@ export default function MedicineAdministration(props: Props) {
useEffect(() => {
setShouldAdminister(Array(prescriptions.length).fill(false));
setNotes(Array(prescriptions.length).fill(""));
setIsCustomTime(Array(prescriptions.length).fill(false));
setCustomTime(
Array(prescriptions.length).fill(dayjs().format("YYYY-MM-DDTHH:mm"))
);
}, [props.prescriptions]);

const handleSubmit = () => {
const records: MedicineAdministrationRecord[] = [];
prescriptions.forEach((prescription, i) => {
if (shouldAdminister[i]) {
records.push({ prescription, notes: notes[i] });
records.push({
prescription,
notes: notes[i],
administered_date: isCustomTime[i] ? customTime[i] : undefined,
});
}
});

Expand Down Expand Up @@ -73,7 +85,7 @@ export default function MedicineAdministration(props: Props) {
actions={props.action(obj?.id ?? "")}
selected={shouldAdminister[index]}
>
<div className="mt-4 flex w-full max-w-[400px] flex-col gap-2 border-t-2 border-dashed border-gray-500 py-2 pt-4 md:ml-4 md:mt-0 md:border-l-2 md:border-t-0 md:pl-4 md:pt-0">
<div className="mt-4 flex w-full max-w-[600px] flex-col gap-2 border-t-2 border-dashed border-gray-500 py-2 pt-4 md:ml-4 md:mt-0 md:border-l-2 md:border-t-0 md:pl-4 md:pt-0">
<CheckBoxFormField
name="should_administer"
label={t("select_for_administration")}
Expand All @@ -96,21 +108,63 @@ export default function MedicineAdministration(props: Props) {
: t("never")}
</span>
</div>
<TextAreaFormField
label={t("administration_notes")}
disabled={!shouldAdminister[index]}
name="administration_notes"
placeholder={t("add_notes")}
value={notes[index]}
onChange={(event) =>
setNotes((notes) => {
const newNotes = [...notes];
newNotes[index] = event.value;
return newNotes;
})
}
errorClassName="hidden"
/>
<div className="flex flex-col gap-4 lg:flex-row lg:gap-6">
<TextAreaFormField
label={t("administration_notes")}
className="w-full"
disabled={!shouldAdminister[index]}
name="administration_notes"
placeholder={t("add_notes")}
value={notes[index]}
onChange={(event) =>
setNotes((notes) => {
const newNotes = [...notes];
newNotes[index] = event.value;
return newNotes;
})
}
errorClassName="hidden"
/>
<div className="flex flex-col gap-2 lg:max-w-min">
<CheckBoxFormField
label="Administer for a time in the past"
labelClassName="whitespace-nowrap"
disabled={!shouldAdminister[index]}
name="is_custom_time"
value={isCustomTime[index]}
onChange={({ value }) => {
setIsCustomTime((arr) => {
const newArr = [...arr];
newArr[index] = value;
return newArr;
});
if (!value) {
setCustomTime((arr) => {
const newArr = [...arr];
newArr[index] = dayjs().format("YYYY-MM-DDTHH:mm");
return newArr;
});
}
}}
errorClassName="hidden"
/>
<TextFormField
name="administered_date"
type="datetime-local"
value={customTime[index]}
onChange={({ value }) => {
setCustomTime((arr) => {
const newArr = [...arr];
newArr[index] = value;
return newArr;
});
}}
disabled={!shouldAdminister[index] || !isCustomTime[index]}
min={dayjs(obj.created_date).format("YYYY-MM-DDTHH:mm")}
max={dayjs().format("YYYY-MM-DDTHH:mm")}
/>
</div>
</div>
</div>
</PrescriptionDetailCard>
))}
Expand Down
2 changes: 1 addition & 1 deletion src/Components/Medicine/PrescriptionAdministrationsTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ export default function PrescriptionAdministrationsTable({
{state?.prescriptions && (
<SlideOver
title={t("administer_medicines")}
dialogClass="w-full max-w-sm sm:max-w-md md:max-w-[1200px]"
dialogClass="w-full max-w-sm sm:max-w-md md:max-w-[1300px]"
open={showBulkAdminister}
setOpen={setShowBulkAdminister}
>
Expand Down
2 changes: 1 addition & 1 deletion src/Components/Medicine/models.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,8 +53,8 @@ export type MedicineAdministrationRecord = {
readonly id?: string;
readonly prescription?: Prescription;
notes: string;
administered_date?: string;
readonly administered_by?: PerformedByModel;
readonly administered_date?: string;
readonly created_date?: string;
readonly modified_date?: string;
};
Expand Down

0 comments on commit 55c0ae0

Please sign in to comment.