fix(location): updated UI of location view table

ohcnetwork · Apr 22, 2023 · ba5bdc4 · ba5bdc4
1 parent a634c79
commit ba5bdc4
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 21 deletions.
diff --git a/src/Components/Facility/AddLocationForm.tsx b/src/Components/Facility/AddLocationForm.tsx
@@ -15,6 +15,7 @@ import { Submit, Cancel } from "../Common/components/ButtonV2";
 import TextFormField from "../Form/FormFields/TextFormField";
 import TextAreaFormField from "../Form/FormFields/TextAreaFormField";
 import { MultiSelectFormField } from "../Form/FormFields/SelectFormField";
+import { UserAssignedModel } from "../Users/models";
 const Loading = loadable(() => import("../Common/Loading"));
 const PageTitle = loadable(() => import("../Common/PageTitle"));
 
@@ -31,10 +32,10 @@ export const AddLocationForm = (props: LocationFormProps) => {
   const [description, setDescription] = useState("");
   const [facilityName, setFacilityName] = useState("");
   const [locationName, setLocationName] = useState("");
-  const [doctorList, setDoctorList] = useState<any[]>([]);
-  const [staffList, setStaffList] = useState<any[]>([]);
-  const [doctors, setDoctors] = useState<any[]>([]);
-  const [staff, setStaff] = useState<any[]>([]);
+  const [doctorList, setDoctorList] = useState<UserAssignedModel[]>([]);
+  const [staffList, setStaffList] = useState<UserAssignedModel[]>([]);
+  const [doctors, setDoctors] = useState<UserAssignedModel[]>([]);
+  const [staff, setStaff] = useState<UserAssignedModel[]>([]);
   const [errors, setErrors] = useState<any>({
     name: "",
     description: "",
@@ -70,8 +71,16 @@ export const AddLocationForm = (props: LocationFormProps) => {
         setName(res?.data?.name || "");
         setLocationName(res?.data?.name || "");
         setDescription(res?.data?.description || "");
-        setDoctors(res?.data?.doctors || []);
-        setStaff(res?.data?.staff || []);
+        setDoctors(
+          res?.data?.duty_staff_objects
+            .filter((doc: UserAssignedModel) => doc.user_type === "Doctor")
+            .map((doc: UserAssignedModel) => doc.id) || []
+        );
+        setStaff(
+          res?.data?.duty_staff_objects
+            .filter((s: UserAssignedModel) => s.user_type === "Staff")
+            .map((s: UserAssignedModel) => s.id) || []
+        );
       }
       setIsLoading(false);
     }
@@ -85,11 +94,11 @@ export const AddLocationForm = (props: LocationFormProps) => {
     });
     e.preventDefault();
     setIsLoading(true);
+    console.log(doctors, staff);
     const data = {
       name,
       description,
-      doctors,
-      staff,
+      duty_staff: [...doctors, ...staff],
     };
 
     const res = await dispatchAction(

diff --git a/src/Components/Facility/LocationManagement.tsx b/src/Components/Facility/LocationManagement.tsx
@@ -9,6 +9,7 @@ import { RoleButton } from "../Common/RoleButton";
 import { LocationModel } from "./models";
 import { ReactElement } from "react";
 import { UserAssignedModel } from "../Users/models";
+import CareIcon from "../../CAREUI/icons/CareIcon";
 const PageTitle = loadable(() => import("../Common/PageTitle"));
 const Loading = loadable(() => import("../Common/Loading"));
 
@@ -34,16 +35,24 @@ const LocationRow = (props: LocationRowProps) => {
       className="w-full border-b lg:flex justify-between items-center py-4"
     >
       <div className="px-4 lg:w-3/4">
-        <div className="lg:flex items-baseline w-full">
-          <p className="text-xl break-words lg:w-1/4 lg:mr-4">{name}</p>
-          <p className="text-sm break-all lg:w-3/4">{description}</p>
-          <p className="">
-            {doctors.map(
-              (doctor) => `${doctor.first_name} ${doctor.last_name}`
-            )}
+        <div className="lg:flex lg:space-x-2 space-y-2 items-baseline w-full">
+          <p className="text-sm break-words lg:w-1/6 lg:mr-4">{name}</p>
+          <p className="text-sm break-all lg:w-1/2">{description}</p>
+          <p className="text-sm flex flex-col lg:w-1/6 gap-y-2">
+            {doctors.map((doctor) => (
+              <div className="bg-primary-100 text-primary-900 border border-primary-600 py-1 px-3 rounded-lg flex w-full">
+                <CareIcon className="care-l-user-md" />
+                <div className="ml-3">{`${doctor.first_name} ${doctor.last_name}`}</div>
+              </div>
+            ))}
           </p>
-          <p className="">
-            {staff.map((s) => `${s.first_name} ${s.last_name}`)}
+          <p className="text-sm flex flex-col lg:w-1/6 gap-y-2">
+            {staff.map((s) => (
+              <div className="bg-primary-100 text-primary-900 border border-primary-600 py-1 px-3 rounded-lg flex w-full">
+                <CareIcon className="care-l-user-nurse" />
+                <div className="ml-3">{`${s.first_name} ${s.last_name}`}</div>
+              </div>
+            ))}
           </p>
         </div>
       </div>
@@ -136,8 +145,16 @@ export const LocationManagement = (props: LocationManagementProps) => {
         facilityId={facilityId || ""}
         name={locationItem.name || ""}
         description={locationItem.description || ""}
-        doctors={locationItem.doctor_objects || []}
-        staff={locationItem.staff_objects || []}
+        doctors={
+          locationItem.duty_staff_objects?.filter(
+            (doc: UserAssignedModel) => doc.user_type == "Doctor"
+          ) || []
+        }
+        staff={
+          locationItem.duty_staff_objects?.filter(
+            (s: UserAssignedModel) => s.user_type == "Staff"
+          ) || []
+        }
       />
     ));
   } else if (locations && locations.length === 0) {

diff --git a/src/Components/Facility/models.tsx b/src/Components/Facility/models.tsx
@@ -185,8 +185,7 @@ export interface LocationModel {
   facility?: {
     name: string;
   };
-  doctor_objects?: UserAssignedModel[];
-  staff_objects?: UserAssignedModel[];
+  duty_staff_objects?: UserAssignedModel[];
 }
 
 export interface BedModel {