fix(location): added duty staff section

src/Components/Facility/AddLocationForm.tsx

@@ -6,13 +6,15 @@ import {
   createFacilityAssetLocation,
   getAnyFacility,
   getFacilityAssetLocation,
+  getFacilityUsers,
   updateFacilityAssetLocation,
 } from "../../Redux/actions";
 import * as Notification from "../../Utils/Notifications.js";
 import { navigate } from "raviger";
 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";
 const Loading = loadable(() => import("../Common/Loading"));
 const PageTitle = loadable(() => import("../Common/PageTitle"));
 
@@ -29,6 +31,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 [errors, setErrors] = useState<any>({
     name: "",
     description: "",
@@ -40,9 +46,21 @@ export const AddLocationForm = (props: LocationFormProps) => {
     async function fetchFacilityName() {
       setIsLoading(true);
       if (facilityId) {
-        const res = await dispatchAction(getAnyFacility(facilityId));
-
-        setFacilityName(res?.data?.name || "");
+        const facility = await dispatchAction(getAnyFacility(facilityId));
+        const doctor = await dispatchAction(
+          getFacilityUsers(facilityId, {
+            user_type: "Doctor",
+            home_facility: facilityId,
+          })
+        );
+        const staff = await dispatchAction(
+          getFacilityUsers(facilityId, {
+            user_type: "Staff",
+          })
+        );
+        setFacilityName(facility?.data?.name || "");
+        setDoctorList(doctor?.data?.results || []);
+        setStaffList(staff?.data?.results || []);
       }
       if (locationId) {
         const res = await dispatchAction(
@@ -52,6 +70,8 @@ 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 || []);
       }
       setIsLoading(false);
     }
@@ -68,6 +88,8 @@ export const AddLocationForm = (props: LocationFormProps) => {
     const data = {
       name,
       description,
+      doctors,
+      staff,
     };
 
     const res = await dispatchAction(
@@ -89,6 +111,7 @@ export const AddLocationForm = (props: LocationFormProps) => {
           msg: notificationMessage,
         });
       } else if (res.status === 400) {
+        console.log(res.data);
         Object.keys(res.data).forEach((key) => {
           setErrors((prevState: any) => ({
             ...prevState,
@@ -123,6 +146,12 @@ export const AddLocationForm = (props: LocationFormProps) => {
           <form onSubmit={handleSubmit}>
             <CardContent>
               <div className="mt-2 grid gap-4 grid-cols-1">
+                <div className="flex flex-row items-center">
+                  <label className="font-bold text-lg text-gray-900">
+                    General Details
+                  </label>
+                  <hr className="ml-6 flex-1 border-gray-400 border" />
+                </div>
                 <div>
                   <TextFormField
                     name="name"
@@ -144,6 +173,38 @@ export const AddLocationForm = (props: LocationFormProps) => {
                     error={errors.description}
                   />
                 </div>
+                <div className="flex flex-row items-center">
+                  <label className="font-bold text-lg text-gray-900">
+                    Duty Staff
+                  </label>
+                  <hr className="ml-6 flex-1 border-gray-400 border" />
+                </div>
+                <div>
+                  <MultiSelectFormField
+                    name="doctors"
+                    label="Doctors"
+                    onChange={(e) => setDoctors(e.value)}
+                    options={doctorList}
+                    value={doctors}
+                    optionLabel={(option: any) =>
+                      `${option.first_name} ${option.last_name}`
+                    }
+                    optionValue={(option: any) => option.id}
+                  />
+                </div>
+                <div>
+                  <MultiSelectFormField
+                    name="staff"
+                    label="Staff"
+                    onChange={(e) => setStaff(e.value)}
+                    options={staffList}
+                    value={staff}
+                    optionLabel={(option: any) =>
+                      `${option.first_name} ${option.last_name}`
+                    }
+                    optionValue={(option: any) => option.id}
+                  />
+                </div>
               </div>
               <div className="flex flex-col gap-3 sm:flex-row sm:justify-between mt-4">
                 <Cancel

src/Components/Facility/LocationManagement.tsx

@@ -8,6 +8,7 @@ import Pagination from "../Common/Pagination";
 import { RoleButton } from "../Common/RoleButton";
 import { LocationModel } from "./models";
 import { ReactElement } from "react";
+import { UserAssignedModel } from "../Users/models";
 const PageTitle = loadable(() => import("../Common/PageTitle"));
 const Loading = loadable(() => import("../Common/Loading"));
 
@@ -20,10 +21,12 @@ interface LocationRowProps {
   facilityId: string;
   name: string;
   description: string;
+  doctors: UserAssignedModel[];
+  staff: UserAssignedModel[];
 }
 
 const LocationRow = (props: LocationRowProps) => {
-  const { id, facilityId, name, description } = props;
+  const { id, facilityId, name, description, doctors, staff } = props;
 
   return (
     <div
@@ -34,6 +37,14 @@ const LocationRow = (props: LocationRowProps) => {
         <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}`
+            )}
+          </p>
+          <p className="">
+            {staff.map((s) => `${s.first_name} ${s.last_name}`)}
+          </p>
         </div>
       </div>
       <div className="sm:flex">
@@ -125,6 +136,8 @@ export const LocationManagement = (props: LocationManagementProps) => {
         facilityId={facilityId || ""}
         name={locationItem.name || ""}
         description={locationItem.description || ""}
+        doctors={locationItem.doctor_objects || []}
+        staff={locationItem.staff_objects || []}
       />
     ));
   } else if (locations && locations.length === 0) {

src/Components/Facility/models.tsx

@@ -1,6 +1,7 @@
 import { PRNPrescriptionType } from "../Common/prescription-builder/PRNPrescriptionBuilder";
 import { ProcedureType } from "../Common/prescription-builder/ProcedureBuilder";
 import { AssignedToObjectModel } from "../Patient/models";
+import { UserAssignedModel } from "../Users/models";
 
 export interface LocalBodyModel {
   name: string;
@@ -184,6 +185,8 @@ export interface LocationModel {
   facility?: {
     name: string;
   };
+  doctor_objects?: UserAssignedModel[];
+  staff_objects?: UserAssignedModel[];
 }
 
 export interface BedModel {