Track occupation of patient (#7152)

* Add OCCUPATION_TYPES constant and update PatientHome and PatientRegister components * Add patient occupation field to patient registration cypress Test * convert existing code to use reusable component * Update grid layout in PatientHome component --------- Co-authored-by: Ashesh3 <3626859+Ashesh3@users.noreply.github.com>
coronasafe · Mar 19, 2024 · a7e139d · a7e139d
1 parent 2d7abfb
commit a7e139d
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 22 deletions.
diff --git a/cypress/e2e/patient_spec/patient_registration.cy.ts b/cypress/e2e/patient_spec/patient_registration.cy.ts
@@ -59,6 +59,7 @@ describe("Patient Creation with consultation", () => {
   const patientTransferFacility = "Dummy Shifting Center";
   const patientTransferName = "Dummy Patient 10";
   const patientExternalName = "Patient 20";
+  const patientOccupation = "Student";
 
   before(() => {
     loginPage.loginAsDisctrictAdmin();
@@ -88,6 +89,7 @@ describe("Patient Creation with consultation", () => {
     facilityPage.selectDistrictOnPincode(patientOneDistrict);
     facilityPage.selectLocalBody(patientOneLocalbody);
     facilityPage.selectWard(patientOneWard);
+    patientPage.selectPatientOccupation(patientOccupation);
     // Patient Medical History
     patientMedicalHistory.typePatientPresentHealth(patientOnePresentHealth);
     patientMedicalHistory.typePatientOngoingMedication(
@@ -115,7 +117,8 @@ describe("Patient Creation with consultation", () => {
       phone_number,
       emergency_phone_number,
       yearOfBirth,
-      patientOneBloodGroup
+      patientOneBloodGroup,
+      patientOccupation
     );
     patientMedicalHistory.verifyPatientMedicalDetails(
       patientOnePresentHealth,
@@ -202,7 +205,8 @@ describe("Patient Creation with consultation", () => {
       phone_number,
       emergency_phone_number,
       yearOfBirth,
-      patientOneUpdatedBloodGroup
+      patientOneUpdatedBloodGroup,
+      patientOccupation
     );
     // Verify No medical history
     patientMedicalHistory.verifyNoSymptosPresent("Diabetes");

diff --git a/cypress/pageobject/Patient/PatientCreation.ts b/cypress/pageobject/Patient/PatientCreation.ts
@@ -21,13 +21,8 @@ export class PatientPage {
   }
 
   selectFacility(facilityName: string) {
-    cy.get("input[name='facilities']")
-      .type(facilityName)
-      .then(() => {
-        cy.get("[role='option']").contains(facilityName).click();
-      });
-    cy.get("button").should("contain", "Select");
-    cy.get("button").get("#submit").click();
+    cy.searchAndSelectOption("input[name='facilities']", facilityName);
+    cy.submitButton("Select");
   }
 
   interceptCreatePatientAPI() {
@@ -85,19 +80,15 @@ export class PatientPage {
   }
 
   selectPatientGender(gender: string) {
-    cy.get("[data-testid=Gender] button")
-      .click()
-      .then(() => {
-        cy.get("[role='option']").contains(gender).click();
-      });
+    cy.clickAndSelectOption("[data-testid=Gender] button", gender);
   }
 
   selectPatientBloodGroup(bloodgroup: string) {
-    cy.get("#blood_group")
-      .click()
-      .then(() => {
-        cy.get("[role='option']").contains(bloodgroup).click();
-      });
+    cy.clickAndSelectOption("#blood_group", bloodgroup);
+  }
+
+  selectPatientOccupation(occupation: string) {
+    cy.clickAndSelectOption("#occupation", occupation);
   }
 
   clickCreatePatient() {
@@ -146,7 +137,8 @@ export class PatientPage {
     phoneNumber,
     emergencyPhoneNumber,
     yearOfBirth,
-    bloodGroup
+    bloodGroup,
+    occupation
   ) {
     cy.url().should("include", "/facility/");
     cy.get("[data-testid=patient-dashboard]").then(($dashboard) => {
@@ -157,6 +149,7 @@ export class PatientPage {
       expect($dashboard).to.contain(emergencyPhoneNumber);
       expect($dashboard).to.contain(yearOfBirth);
       expect($dashboard).to.contain(bloodGroup);
+      expect($dashboard).to.contain(occupation);
     });
   }
 

diff --git a/src/Common/constants.tsx b/src/Common/constants.tsx
@@ -1172,3 +1172,15 @@ export const IN_LANDLINE_AREA_CODES = [
   "891",
   "4822",
 ];
+export const OCCUPATION_TYPES = [
+  { id: 1, text: "Student", value: "STUDENT" },
+  {
+    id: 2,
+    text: "Businessman",
+    value: "BUSINESSMAN",
+  },
+  { id: 3, text: "Healthcare Worker", value: "HEALTH_CARE_WORKER" },
+  { id: 4, text: "Healthcare Lab Worker", value: "HEALTH_CARE_LAB_WORKER" },
+  { id: 5, text: "Animal Handler", value: "ANIMAL_HANDLER" },
+  { id: 6, text: "Others", value: "OTHERS" },
+];
diff --git a/src/Components/Patient/PatientHome.tsx b/src/Components/Patient/PatientHome.tsx
@@ -5,6 +5,7 @@ import {
   DISCHARGE_REASONS,
   GENDER_TYPES,
   SAMPLE_TEST_STATUS,
+  OCCUPATION_TYPES,
 } from "../../Common/constants";
 
 import * as Notification from "../../Utils/Notifications";
@@ -39,6 +40,10 @@ import PaginatedList from "../../CAREUI/misc/PaginatedList";
 
 const Loading = lazy(() => import("../Common/Loading"));
 
+export const parseOccupation = (occupation: string | undefined) => {
+  return OCCUPATION_TYPES.find((i) => i.value === occupation)?.text;
+};
+
 export const PatientHome = (props: any) => {
   const { facilityId, id } = props;
   const [showShifts, setShowShifts] = useState(false);
@@ -419,7 +424,7 @@ export const PatientHome = (props: any) => {
                   {patientGender} | {patientData.blood_group || "-"}
                 </p>
               </div>
-              <div className="mb-8 mt-2 grid grid-cols-1 items-center gap-x-4 gap-y-2 md:grid-cols-2 md:gap-y-8 lg:grid-cols-3">
+              <div className="mb-8 mt-2 grid grid-cols-1 gap-x-4 gap-y-2 md:grid-cols-2 md:gap-y-8 lg:grid-cols-4">
                 <div className="sm:col-span-1">
                   <div className="text-sm font-semibold leading-5 text-zinc-400">
                     Date of Birth
@@ -530,6 +535,14 @@ export const PatientHome = (props: any) => {
                       </div>
                     </div>
                   )}
+                <div className="sm:col-span-1">
+                  <div className="text-sm font-semibold leading-5 text-zinc-400">
+                    Occupation
+                  </div>
+                  <div className="mt-1  text-sm font-medium leading-5 ">
+                    {parseOccupation(patientData.meta_info?.occupation) || "-"}
+                  </div>
+                </div>
               </div>
             </div>
           </div>

diff --git a/src/Components/Patient/PatientRegister.tsx b/src/Components/Patient/PatientRegister.tsx
@@ -5,6 +5,7 @@ import {
   DISEASE_STATUS,
   GENDER_TYPES,
   MEDICAL_HISTORY_CHOICES,
+  OCCUPATION_TYPES,
   TEST_TYPE,
   VACCINES,
 } from "../../Common/constants";
@@ -41,7 +42,7 @@ import { HCXPolicyModel } from "../HCX/models";
 import HCXPolicyValidator from "../HCX/validators";
 import InsuranceDetailsBuilder from "../HCX/InsuranceDetailsBuilder";
 import LinkABHANumberModal from "../ABDM/LinkABHANumberModal";
-import { PatientModel } from "./models";
+import { PatientModel, Occupation } from "./models";
 import PhoneNumberFormField from "../Form/FormFields/PhoneNumberFormField";
 import RadioFormField from "../Form/FormFields/RadioFormField";
 import { SelectFormField } from "../Form/FormFields/SelectFormField";
@@ -84,6 +85,7 @@ const medicalHistoryChoices = MEDICAL_HISTORY_CHOICES.reduce(
 const genderTypes = GENDER_TYPES;
 const diseaseStatus = [...DISEASE_STATUS];
 const bloodGroups = [...BLOOD_GROUPS];
+const occupationTypes = OCCUPATION_TYPES;
 const testType = [...TEST_TYPE];
 const vaccines = ["Select", ...VACCINES];
 
@@ -168,6 +170,12 @@ const patientFormReducer = (state = initialState, action: any) => {
       return state;
   }
 };
+export const parseOccupationFromExt = (occupation: Occupation) => {
+  const occupationObject = OCCUPATION_TYPES.find(
+    (item) => item.value === occupation
+  );
+  return occupationObject?.id;
+};
 
 export const PatientRegister = (props: PatientRegisterProps) => {
   const authUser = useAuthUser();
@@ -304,6 +312,10 @@ export const PatientRegister = (props: PatientRegisterProps) => {
           ? parseGenderFromExt(data.gender, state.form.gender)
           : state.form.gender,
       });
+      field.onChange({
+        name: "occupation",
+        value: data.meta_info?.occupation ?? state.form.occupation,
+      });
       field.onChange({
         name: "test_id",
         value: data.test_id ? data.test_id : state.form.test_id,
@@ -421,6 +433,10 @@ export const PatientRegister = (props: PatientRegisterProps) => {
               data.instituion_of_health_care_worker
                 ? data.instituion_of_health_care_worker
                 : "",
+            meta_info: data.meta_info ?? {},
+            occupation: data.meta_info?.occupation
+              ? parseOccupationFromExt(data.meta_info.occupation)
+              : null,
 
             number_of_primary_contacts: data.number_of_primary_contacts
               ? data.number_of_primary_contacts
@@ -745,6 +761,10 @@ export const PatientRegister = (props: PatientRegisterProps) => {
       local_body:
         formData.nationality === "India" ? formData.local_body : undefined,
       ward: formData.ward,
+      meta_info: {
+        ...state.form?.meta_info,
+        occupation: formData.occupation ?? null,
+      },
       village: formData.village,
       address: formData.address ? formData.address : undefined,
       permanent_address: formData.sameAddress
@@ -1516,6 +1536,14 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                                   />
                                 )}
                               </div>
+                              <SelectFormField
+                                {...field("occupation")}
+                                label="Occupation"
+                                placeholder="Select Occupation"
+                                options={occupationTypes}
+                                optionLabel={(o) => o.text}
+                                optionValue={(o) => o.id}
+                              />
                             </>
                           ) : (
                             <div id="passport_no-div">

diff --git a/src/Components/Patient/models.tsx b/src/Components/Patient/models.tsx
@@ -1,5 +1,6 @@
 import { ConsultationModel, PatientCategory } from "../Facility/models";
 import { PerformedByModel } from "../HCX/misc";
+import { OCCUPATION_TYPES } from "../../Common/constants";
 
 export interface FlowModel {
   id?: number;
@@ -127,6 +128,11 @@ export interface PatientModel {
   created_by?: PerformedByModel;
   assigned_to?: { first_name?: string; username?: string; last_name?: string };
   assigned_to_object?: AssignedToObjectModel;
+  occupation?: Occupation;
+  meta_info?: {
+    id: number;
+    occupation: Occupation;
+  };
 
   // ABDM related
   abha_number?: string;
@@ -370,3 +376,5 @@ export interface FileUploadModel {
   archived_by?: PerformedByModel;
   archived_datetime?: string;
 }
+
+export type Occupation = (typeof OCCUPATION_TYPES)[number]["value"];