fix(location): updated UI of location view table

ohcnetwork · Aug 4, 2023 · 6a5f527 · 6a5f527
1 parent d1db85f
commit 6a5f527
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 22 deletions.
diff --git a/src/Components/Facility/AddLocationForm.tsx b/src/Components/Facility/AddLocationForm.tsx
@@ -16,6 +16,7 @@ import TextAreaFormField from "../Form/FormFields/TextAreaFormField";
 import TextFormField from "../Form/FormFields/TextFormField";
 
 import { MultiSelectFormField } from "../Form/FormFields/SelectFormField";
+import { UserAssignedModel } from "../Users/models";
 const Loading = loadable(() => import("../Common/Loading"));
 
 interface LocationFormProps {
@@ -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
@@ -34,16 +34,24 @@ const LocationRow = (props: LocationRowProps) => {
       className="w-full items-center justify-between border-b py-4 lg:flex"
     >
       <div className="px-4 lg:w-3/4">
-        <div className="w-full items-baseline lg:flex">
-          <p className="break-words text-xl lg:mr-4 lg:w-1/4">{ name }</p>
-          <p className="break-all text-sm lg:w-3/4">{ description }</p>
-          <p className="">
-            { doctors.map(
-              (doctor) => `${doctor.first_name} ${doctor.last_name}`
-            ) }
+        <div className="w-full items-baseline space-y-2 lg:flex lg:space-x-2">
+          <p className="break-words text-sm lg:mr-4 lg:w-1/6">{ name }</p>
+          <p className="break-all text-sm lg:w-1/2">{ description }</p>
+          <p className="flex flex-col gap-y-2 text-sm lg:w-1/6">
+            { doctors.map((doctor) => (
+              <div className="flex w-full rounded-lg border border-primary-600 bg-primary-100 px-3 py-1 text-primary-900">
+                <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="flex flex-col gap-y-2 text-sm lg:w-1/6">
+            { staff.map((s) => (
+              <div className="flex w-full rounded-lg border border-primary-600 bg-primary-100 px-3 py-1 text-primary-900">
+                <CareIcon className="care-l-user-nurse" />
+                <div className="ml-3">{ `${s.first_name} ${s.last_name}` }</div>
+              </div>
+            )) }
           </p>
         </div>
       </div>
@@ -125,13 +133,20 @@ export const LocationManagement = (props: LocationManagementProps) => {
   if (locations?.length) {
     locationsList = locations.map((locationItem: LocationModel) => (
       <LocationRow
-        key={ locationItem.id }
         id={ locationItem.id || "" }
         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
@@ -183,8 +183,7 @@ export interface LocationModel {
   facility?: {
     name: string;
   };
-  doctor_objects?: UserAssignedModel[];
-  staff_objects?: UserAssignedModel[];
+  duty_staff_objects?: UserAssignedModel[];
 }
 
 export interface BedModel {