fix: Duty doctors and Staff for each Location in a Facility

src/Components/Facility/AddLocationForm.tsx

@@ -1,17 +1,20 @@
-import { useState, useEffect, lazy, SyntheticEvent } from "react";
+import { navigate } from "raviger";
+import { SyntheticEvent, lazy, useEffect, useState } from "react";
 import { useDispatch } from "react-redux";
 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 { Cancel, Submit } from "../Common/components/ButtonV2";
 import Page from "../Common/components/Page";
+import { MultiSelectFormField } from "../Form/FormFields/SelectFormField";
+import TextAreaFormField from "../Form/FormFields/TextAreaFormField";
+import TextFormField from "../Form/FormFields/TextFormField";
+import { UserAssignedModel } from "../Users/models";
 
 const Loading = lazy(() => import("../Common/Loading"));
 
@@ -29,7 +32,15 @@ export const AddLocationForm = (props: LocationFormProps) => {
   const [description, setDescription] = useState("");
   const [facilityName, setFacilityName] = useState("");
   const [locationName, setLocationName] = useState("");
-  const [errors, setErrors] = 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<{
+    name: string;
+    description: string;
+    middlewareAddress: string;
+  }>({
     name: "",
     description: "",
     middlewareAddress: "",
@@ -41,9 +52,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(
@@ -54,6 +77,16 @@ export const AddLocationForm = (props: LocationFormProps) => {
         setLocationName(res?.data?.name || "");
         setDescription(res?.data?.description || "");
         setMiddlewareAddress(res?.data?.middleware_address || "");
+        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);
     }
@@ -98,6 +131,7 @@ export const AddLocationForm = (props: LocationFormProps) => {
       name,
       description,
       middleware_address: middlewareAddress,
+      duty_staff: [...doctors, ...staff],
     };
 
     const res = await dispatchAction(
@@ -151,6 +185,12 @@ export const AddLocationForm = (props: LocationFormProps) => {
         <div className="cui-card">
           <form onSubmit={handleSubmit}>
             <div className="mt-2 grid grid-cols-1 gap-4">
+              <div className="flex flex-row items-center">
+                <label className="text-lg font-bold text-gray-900">
+                  General Details
+                </label>
+                <hr className="ml-6 flex-1 border border-gray-400" />
+              </div>
               <div>
                 <TextFormField
                   name="name"
@@ -182,6 +222,38 @@ export const AddLocationForm = (props: LocationFormProps) => {
                   error={errors.middlewareAddress}
                 />
               </div>
+              <div className="flex flex-row items-center">
+                <label className="text-lg font-bold text-gray-900">
+                  Duty Staff
+                </label>
+                <hr className="ml-6 flex-1 border border-gray-400" />
+              </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="cui-form-button-group mt-4">
               <Cancel

src/Components/Facility/LocationManagement.tsx

@@ -1,10 +1,10 @@
 import { lazy } from "react";
-import ButtonV2 from "../Common/components/ButtonV2";
-import { NonReadOnlyUsers } from "../../Utils/AuthorizeFor";
 import CareIcon from "../../CAREUI/icons/CareIcon";
-import Page from "../Common/components/Page";
-import routes from "../../Redux/api";
 import PaginatedList from "../../CAREUI/misc/PaginatedList";
+import routes from "../../Redux/api";
+import { NonReadOnlyUsers } from "../../Utils/AuthorizeFor";
+import ButtonV2 from "../Common/components/ButtonV2";
+import Page from "../Common/components/Page";
 import { LocationModel } from "./models";
 
 const Loading = lazy(() => import("../Common/Loading"));
@@ -70,42 +70,59 @@ const Location = ({
   description,
   middleware_address,
   id,
-}: LocationModel) => (
-  <div className="w-full items-center justify-between rounded border border-gray-300 bg-white p-6 shadow-sm transition-all duration-200 ease-in-out hover:border-primary-400 lg:flex">
-    <div className="lg:w-3/4">
-      <div className="w-full items-baseline gap-4 lg:flex lg:items-center">
-        <p className="break-words text-xl lg:mr-4 lg:w-3/4">
-          {name}
-          <p className="break-all text-sm text-gray-700">
-            {description || "-"}
+  duty_staff_objects,
+}: LocationModel) => {
+  const doctors =
+    duty_staff_objects?.filter((u) => u.user_type === "Doctor") || [];
+  const staffs =
+    duty_staff_objects?.filter((u) => u.user_type === "Staff") || [];
+  return (
+    <div className="w-full items-center justify-between rounded border border-gray-300 bg-white p-6 shadow-sm transition-all duration-200 ease-in-out hover:border-primary-400 lg:flex">
+      <div className="lg:w-3/4">
+        <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="break-all text-sm lg:w-1/2">{middleware_address}</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="flex flex-col gap-y-2 text-sm lg:w-1/6">
+            {staffs.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>
-        </p>
-        <p className="break-all text-sm lg:mr-4 lg:w-3/4">
-          {middleware_address}
-        </p>
+        </div>
       </div>
-    </div>
 
-    <div className="mt-4 flex flex-col gap-2 lg:mt-0 lg:flex-row">
-      <ButtonV2
-        variant="secondary"
-        border
-        className="w-full lg:w-auto"
-        href={`location/${id}/update`}
-        authorizeFor={NonReadOnlyUsers}
-      >
-        <CareIcon className="care-l-pen text-lg" />
-        Edit
-      </ButtonV2>
-      <ButtonV2
-        variant="secondary"
-        border
-        className="w-full lg:w-auto"
-        href={`location/${id}/beds`}
-      >
-        <CareIcon className="care-l-bed text-lg" />
-        Manage Beds
-      </ButtonV2>
+      <div className="mt-4 flex flex-col gap-2 lg:mt-0 lg:flex-row">
+        <ButtonV2
+          variant="secondary"
+          border
+          className="w-full lg:w-auto"
+          href={`location/${id}/update`}
+          authorizeFor={NonReadOnlyUsers}
+        >
+          <CareIcon className="care-l-pen text-lg" />
+          Edit
+        </ButtonV2>
+        <ButtonV2
+          variant="secondary"
+          border
+          className="w-full lg:w-auto"
+          href={`location/${id}/beds`}
+        >
+          <CareIcon className="care-l-bed text-lg" />
+          Manage Beds
+        </ButtonV2>
+      </div>
     </div>
-  </div>
-);
+  );
+};

src/Components/Facility/models.tsx

@@ -1,8 +1,8 @@
-import { AssignedToObjectModel } from "../Patient/models";
+import { AssetData } from "../Assets/AssetTypes";
 import { ProcedureType } from "../Common/prescription-builder/ProcedureBuilder";
 import { NormalPrescription, PRNPrescription } from "../Medicine/models";
-import { AssetData } from "../Assets/AssetTypes";
-import { UserBareMinimum } from "../Users/models";
+import { AssignedToObjectModel } from "../Patient/models";
+import { UserAssignedModel, UserBareMinimum } from "../Users/models";
 
 export interface LocalBodyModel {
   name: string;
@@ -193,6 +193,7 @@ export interface LocationModel {
   facility?: {
     name: string;
   };
+  duty_staff_objects?: UserAssignedModel[];
 }
 
 export interface BedModel {