Added facility hubs

src/Components/Facility/FacilityCreate.tsx

@@ -156,6 +156,7 @@ export const FacilityCreate = (props: FacilityProps) => {
   const [stateId, setStateId] = useState<number>();
   const [districtId, setDistrictId] = useState<number>();
   const [localBodyId, setLocalBodyId] = useState<number>();
+  const [hubFacilities, setHubFacilities] = useState<string[]>([]);
   const { goBack } = useAppHistory();
   const headerText = !facilityId ? "Create Facility" : "Update Facility";
   const buttonText = !facilityId ? "Save Facility" : "Update Facility";
@@ -243,6 +244,34 @@ export const FacilityCreate = (props: FacilityProps) => {
     },
   );
 
+  const facilitiesQuery = useQuery(routes.getAllFacilities);
+  const hubsQuery = useQuery(routes.getFacilityHubs, {
+    pathParams: {
+      id: facilityId!,
+    },
+    prefetch: !!facilityId,
+    onResponse: (res) => {
+      setHubFacilities(res.data?.results.map((d) => d.hub.id) as string[]);
+    },
+  });
+  const createHub = async (hubFacilityId: string) =>
+    await request(routes.createFacilityHub, {
+      body: {
+        hub_id: hubFacilityId,
+      },
+      pathParams: {
+        id: facilityId || "",
+      },
+    });
+  const deleteHub = async (hubFacilityId: string) =>
+    await request(routes.deleteFacilityHub, {
+      pathParams: {
+        id: facilityId || "",
+        hub_id: hubFacilityId,
+      },
+    });
+  const { data: facilities } = facilitiesQuery;
+
   useQuery(routes.getPermittedFacility, {
     pathParams: {
       id: facilityId!,
@@ -844,6 +873,43 @@ export const FacilityCreate = (props: FacilityProps) => {
                     required
                     types={["mobile", "landline"]}
                   />
+                  {facilityId && (
+                    <MultiSelectFormField
+                      {...field("hubs")}
+                      placeholder={t("hubs")}
+                      className={facilitiesQuery.loading ? "animate-pulse" : ""}
+                      disabled={facilitiesQuery.loading || hubsQuery.loading}
+                      options={
+                        facilities?.results.filter(
+                          (f) => f.id !== facilityId,
+                        ) || []
+                      }
+                      optionLabel={(o) => o.name}
+                      optionValue={(o) => o.id}
+                      value={hubFacilities}
+                      onChange={async (event) => {
+                        if (event.value.length > hubFacilities.length) {
+                          await createHub(
+                            event.value[event.value.length - 1] || "",
+                          );
+                        } else if (event.value.length < hubFacilities.length) {
+                          console.log(
+                            hubFacilities.find((x) => !event.value.includes(x)),
+                          );
+                          await deleteHub(
+                            hubsQuery.data?.results.find(
+                              (r) =>
+                                r.hub.id ===
+                                (hubFacilities.find(
+                                  (x) => !event.value.includes(x),
+                                ) || ""),
+                            )?.external_id || "",
+                          );
+                        }
+                        setHubFacilities(event.value as string[]);
+                      }}
+                    />
+                  )}
                   <div className="grid grid-cols-1 gap-4 py-4 sm:grid-cols-2 md:col-span-2 xl:grid-cols-4">
                     <TextFormField
                       {...field("oxygen_capacity")}

src/Components/Facility/models.tsx

@@ -9,7 +9,11 @@ import { InvestigationType } from "../Common/prescription-builder/InvestigationB
 import { ProcedureType } from "../Common/prescription-builder/ProcedureBuilder";
 import { ConsultationDiagnosis, CreateDiagnosis } from "../Diagnosis/types";
 import { NormalPrescription, PRNPrescription } from "../Medicine/models";
-import { AssignedToObjectModel, DailyRoundsModel } from "../Patient/models";
+import {
+  AssignedToObjectModel,
+  DailyRoundsModel,
+  FacilityNameModel,
+} from "../Patient/models";
 import { UserBareMinimum } from "../Users/models";
 import { ConsentRecord } from "./ConsultationForm";
 
@@ -74,6 +78,12 @@ export interface FacilityModel {
   pincode?: string;
 }
 
+export interface FacilityHubModel {
+  external_id: string;
+  hub: FacilityNameModel;
+  spoke: FacilityNameModel;
+  relationship: unknown;
+}
 export interface CapacityModal {
   id?: number;
   room_type?: number;

src/Locale/en/Common.json

@@ -163,5 +163,6 @@
   "clear_all_filters": "Clear All Filters",
   "summary": "Summary",
   "report": "Report",
-  "treating_doctor":"Treating Doctor"
-}
+  "treating_doctor": "Treating Doctor",
+  "hubs": "Hub Facilities"
+}

src/Redux/api.tsx

@@ -50,6 +50,7 @@ import {
   DistrictModel,
   DoctorModal,
   DupPatientModel,
+  FacilityHubModel,
   FacilityModel,
   FacilityRequest,
   IFacilityNotificationRequest,
@@ -379,6 +380,40 @@ const routes = {
     TBody: Type<Partial<FacilityModel>>(),
   },
 
+  getFacilityHubs: {
+    path: "/api/v1/facility/{id}/hubs/",
+    method: "GET",
+    TRes: Type<PaginatedResponse<FacilityHubModel>>(),
+  },
+
+  updateFacilityHubs: {
+    path: "/api/v1/facility/{id}/hubs/{hub_id}/",
+    method: "PATCH",
+    TRes: Type<FacilityHubModel>(),
+    TBody: Type<FacilityHubModel>(),
+  },
+
+  getFacilityHub: {
+    path: "/api/v1/facility/{id}/hubs/{hub_id}/",
+    method: "GET",
+    TRes: Type<FacilityHubModel>(),
+  },
+
+  createFacilityHub: {
+    path: "/api/v1/facility/{id}/hubs/",
+    method: "POST",
+    TRes: Type<FacilityHubModel>(),
+    TBody: Type<
+      Partial<Omit<FacilityHubModel, "hub" | "spoke">> & { hub_id: string }
+    >(),
+  },
+
+  deleteFacilityHub: {
+    path: "/api/v1/facility/{id}/hubs/{hub_id}/",
+    method: "DELETE",
+    TRes: Type<Record<string, never>>(),
+  },
+
   deleteFacilityCoverImage: {
     path: "/api/v1/facility/{id}/cover_image/",
     method: "DELETE",