Switch to using year of birth for patient transfer confirmation (#7575)

* Switch to using year of birth for patient transfer confirmation * add max validation * remove usages of any * update cypress tests
ohcnetwork · Apr 8, 2024 · 4293f1d · 4293f1d
1 parent 12d4187
commit 4293f1d
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 65 deletions.
diff --git a/cypress/e2e/patient_spec/patient_registration.cy.ts b/cypress/e2e/patient_spec/patient_registration.cy.ts
@@ -247,7 +247,7 @@ describe("Patient Creation with consultation", () => {
     patientTransfer.clickAdmitPatientRecordButton();
     patientTransfer.clickTransferPopupContinueButton();
     patientTransfer.clickTransferPatientNameList(patientTransferName);
-    patientTransfer.clickTransferPatientDob(patientDateOfBirth);
+    patientTransfer.clickTransferPatientYOB(yearOfBirth);
     patientTransfer.clickTransferSubmitButton();
     patientTransfer.verifyFacilitySuccessfullMessage();
     patientTransfer.clickConsultationCancelButton();
@@ -263,7 +263,7 @@ describe("Patient Creation with consultation", () => {
     patientTransfer.clickAdmitPatientRecordButton();
     patientTransfer.clickTransferPopupContinueButton();
     patientTransfer.clickTransferPatientNameList(patientTransferName);
-    patientTransfer.clickTransferPatientDob(patientDateOfBirth);
+    patientTransfer.clickTransferPatientYOB(yearOfBirth);
     patientTransfer.clickTransferSubmitButton();
     patientTransfer.verifyFacilityErrorMessage();
   });

diff --git a/cypress/pageobject/Patient/PatientTransfer.ts b/cypress/pageobject/Patient/PatientTransfer.ts
@@ -12,10 +12,9 @@ class PatientTransfer {
     cy.get("li[role=option]").contains(facilityName).click();
   }
 
-  clickTransferPatientDob(dateOfBirth: string) {
-    cy.get("#dateofbirth-transferform").scrollIntoView();
-    cy.get("#dateofbirth-transferform").should("be.visible").click();
-    cy.get("#date-input").click().type(dateOfBirth);
+  clickTransferPatientYOB(yearOfBirth: string) {
+    cy.get("#year_of_birth").scrollIntoView();
+    cy.get("#year_of_birth").should("be.visible").click().type(yearOfBirth);
   }
 
   clickTransferSubmitButton() {

diff --git a/src/Components/Facility/TransferPatientDialog.tsx b/src/Components/Facility/TransferPatientDialog.tsx
@@ -1,18 +1,14 @@
 import * as Notification from "../../Utils/Notifications.js";
-
 import { Cancel, Submit } from "../Common/components/ButtonV2";
 import { useReducer, useState } from "react";
-
-import DateFormField from "../Form/FormFields/DateFormField";
 import { DupPatientModel } from "./models";
-import { FieldLabel } from "../Form/FormFields/FormField";
 import { OptionsType } from "../../Common/constants";
 import { SelectFormField } from "../Form/FormFields/SelectFormField";
 import { navigate } from "raviger";
-import { dateQueryString } from "../../Utils/utils.js";
-import dayjs from "dayjs";
 import request from "../../Utils/request/request.js";
 import routes from "../../Redux/api.js";
+import TextFormField from "../Form/FormFields/TextFormField.js";
+import { FieldChangeEvent } from "../Form/FormFields/Utils.js";
 
 interface Props {
   patientList: Array<DupPatientModel>;
@@ -21,9 +17,9 @@ interface Props {
   facilityId: string;
 }
 
-const initForm: any = {
+const initForm = {
   patient: "",
-  date_of_birth: null,
+  year_of_birth: null,
 };
 
 const initError = Object.assign(
@@ -36,9 +32,6 @@ const initialState = {
   errors: { ...initError },
 };
 
-const getDate = (value: any) =>
-  value && dayjs(value).isValid() && dayjs(value).toDate();
-
 const patientFormReducer = (state = initialState, action: any) => {
   switch (action.type) {
     case "set_form": {
@@ -69,18 +62,26 @@ const TransferPatientDialog = (props: Props) => {
     };
   });
 
-  const handleChange = (e: any) => {
-    const form = { ...state.form };
-    form[e.name] = e.value;
-    dispatch({ type: "set_form", form });
-  };
-
-  const handleDateChange = (e: any) => {
-    if (dayjs(e.value).isValid()) {
-      const form = { ...state.form };
-      form[e.name] = dateQueryString(e.value);
-      dispatch({ type: "set_form", form });
+  const maxYear = new Date().getFullYear();
+
+  const handleChange = (e: FieldChangeEvent<unknown>) => {
+    if (
+      e.name === "year_of_birth" &&
+      parseInt((e.value as string) || "0") > maxYear
+    ) {
+      dispatch({
+        type: "set_error",
+        errors: {
+          ...state.errors,
+          [e.name]: `Cannot be greater than ${maxYear}`,
+        },
+      });
+      return;
     }
+    dispatch({
+      type: "set_form",
+      form: { ...state.form, [e.name]: e.value },
+    });
   };
 
   const validateForm = () => {
@@ -94,9 +95,14 @@ const TransferPatientDialog = (props: Props) => {
             invalidForm = true;
           }
           return;
-        case "date_of_birth":
+        case "year_of_birth":
           if (!state.form[field]) {
-            errors[field] = "Please enter date in YYYY/MM/DD format";
+            errors[field] = "This field is required";
+            invalidForm = true;
+          }
+
+          if (parseInt(state.form[field] || "0") > maxYear) {
+            errors[field] = `Cannot be greater than ${maxYear}`;
             invalidForm = true;
           }
           return;
@@ -108,15 +114,14 @@ const TransferPatientDialog = (props: Props) => {
     return !invalidForm;
   };
 
-  const handleSubmit = async (e: any) => {
-    e.preventDefault();
+  const handleSubmit = async () => {
     const validForm = validateForm();
     if (validForm) {
       setIsLoading(true);
       const { res, data } = await request(routes.transferPatient, {
         body: {
           facility: facilityId,
-          date_of_birth: dateQueryString(state.form.date_of_birth),
+          year_of_birth: state.form.year_of_birth,
         },
         pathParams: {
           id: state.form.patient,
@@ -156,37 +161,34 @@ const TransferPatientDialog = (props: Props) => {
             </p>
           </div>
           <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-            <div>
-              <FieldLabel required className="text-sm">
-                Patient
-              </FieldLabel>
-              <SelectFormField
-                id="patient"
-                name="patient"
-                required
-                placeholder="Select patient"
-                options={patientOptions}
-                optionLabel={(patient) => patient.text}
-                optionValue={(patient) => patient.id}
-                value={state.form.patient}
-                onChange={handleChange}
-                error={state.errors.patient}
-              />
-            </div>
-            <div>
-              <DateFormField
-                required
-                id="dateofbirth-transferform"
-                name="date_of_birth"
-                label="Date of birth"
-                value={getDate(state.form.date_of_birth)}
-                disableFuture
-                onChange={handleDateChange}
-                position="LEFT"
-                placeholder="Entry Date"
-                error={state.errors.date_of_birth}
-              />
-            </div>
+            <SelectFormField
+              id="patient"
+              name="patient"
+              required
+              label="Patient"
+              labelClassName="text-sm"
+              placeholder="Select patient"
+              options={patientOptions}
+              optionLabel={(patient) => patient.text}
+              optionValue={(patient) => patient.id}
+              value={state.form.patient}
+              onChange={handleChange}
+              error={state.errors.patient}
+            />
+            <TextFormField
+              required
+              type="number"
+              id="year_of_birth"
+              name="year_of_birth"
+              label="Year of birth"
+              labelClassName="text-sm"
+              value={state.form.year_of_birth}
+              min="1900"
+              max={maxYear}
+              onChange={handleChange}
+              placeholder="Enter year of birth"
+              error={state.errors.year_of_birth}
+            />
           </div>
         </div>
       </div>
@@ -195,7 +197,10 @@ const TransferPatientDialog = (props: Props) => {
         <Submit
           id="submit-transferpatient"
           disabled={isLoading}
-          onClick={handleSubmit}
+          onClick={(e) => {
+            e.preventDefault();
+            handleSubmit();
+          }}
           label="Transfer Suspect / Patient"
         />
       </div>

diff --git a/src/Components/Facility/models.tsx b/src/Components/Facility/models.tsx
@@ -593,6 +593,11 @@ export type InventoryLogResponse = InventorySummaryResponse & {
   created_by: number;
 };
 
+export type PatientTransferRequest = {
+  facility: string;
+  year_of_birth: string;
+};
+
 export type PatientTransferResponse = {
   id: string;
   patient: string;

diff --git a/src/Redux/api.tsx b/src/Redux/api.tsx
@@ -64,6 +64,7 @@ import {
   PatientNotesEditModel,
   PatientNotesModel,
   PatientStatsModel,
+  PatientTransferRequest,
   PatientTransferResponse,
   StateModel,
   WardModel,
@@ -700,6 +701,7 @@ const routes = {
   transferPatient: {
     path: "/api/v1/patient/{id}/transfer/",
     method: "POST",
+    TBody: Type<PatientTransferRequest>(),
     TRes: Type<PatientTransferResponse>(),
   },
   getPatientNotes: {