Fetching rooms under different clinics

Author: Daphne210

package.json

@@ -55,7 +55,7 @@
         "*"
     ],
     "peerDependencies": {
-        "@carbon/react": "1.x",
+        "@carbon/react": "^1.83.0",
         "@openmrs/esm-framework": "*",
         "react": "18.x",
         "react-dom": "18.x",

src/change-location/change-location-modal.scss

@@ -2,6 +2,12 @@
 @use '@carbon/styles/scss/type';
 @use '@openmrs/esm-styleguide/src/vars' as *;
 
+.switch {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
 .container {
     display: flex;
     flex-direction: column;

src/change-location/change-location-modal.tsx

@@ -1,28 +1,33 @@
-import React, { useState } from "react";
+import React, { useCallback, useState } from "react";
 import {
   Button,
+  ContentSwitcher,
   Form,
+  Hospital,
   Layer,
   ModalHeader,
   ModalBody,
   ModalFooter,
   Select,
   SelectItem,
   Stack,
+  Switch,
+  TaskLocation,
   InlineNotification,
   InlineLoading,
 } from "@carbon/react";
 import {
   DefaultWorkspaceProps,
+  showSnackbar,
   useLayoutType,
   useSession,
 } from "@openmrs/esm-framework";
-import { Controller, useForm } from "react-hook-form";
+import { Controller, SubmitHandler, useForm } from "react-hook-form";
 import styles from "./change-location-link.scss";
 import { useTranslation } from "react-i18next";
 import { zodResolver } from "@hookform/resolvers/zod";
 import z from "zod";
-import { useRoomLocations } from "./change-location.resource";
+import { Provider, saveProvider, useClinicLocations, useRoomLocations } from "./change-location.resource";
 
 type ChangeLocationProps = DefaultWorkspaceProps;
 
@@ -31,14 +36,18 @@ const ChangeLocationModal: React.FC<ChangeLocationProps> = ({
 }) => {
   const { t } = useTranslation();
   const isTablet = useLayoutType() === "tablet";
+  const [tabType, setTabType] = useState("Change room");
   const session = useSession();
-  const currentLocation = session?.sessionLocation?.display;
+  const currentLocation = session?.sessionLocation?.uuid;
   const [isChangingRoom, setIsChangingRoom] = useState(false);
+  const [selectedClinicRoom, setselectedClinicRoom] = useState<string | undefined>();
+  const [selectedClinic, setSelectedClinic] = useState<string | undefined>();
+  const { roomLocations, error: errorFetchingRooms } = useRoomLocations(selectedClinic);
+  const {clinicsList, error: errorFetchingClinics} = useClinicLocations();
 
-  const { roomLocations, error: errorFetchingRooms } = useRoomLocations(
-    session?.sessionLocation?.uuid
-  );
-  const [selectedClinciRoom, setselectedClinciRoom] = useState();
+  const handleTabTypeChange = ({ name }) => {
+    setTabType(name);
+  };
 
   const changeLocationSchema = z.object({
     clinicRoom: z.string().optional(),
@@ -51,16 +60,105 @@ const ChangeLocationModal: React.FC<ChangeLocationProps> = ({
   } = useForm({
     resolver: zodResolver(changeLocationSchema),
   });
+
+const onSubmit: SubmitHandler<any> = useCallback(
+  (data) => {
+    setIsChangingRoom(true);
+
+    const newLocationUuid = data.clinicRoom ?? data.clinic;
+    const providerUuid = session?.currentProvider?.uuid;
+    const personUuid = session?.user?.person?.uuid;
+
+    const payload: Provider = {
+      uuid: providerUuid,
+      person: { uuid: personUuid },
+      attributes: [
+        {
+          attributeType: {
+            uuid: "13a721e4-68e5-4f7a-8aee-3cbcec127179",
+            display: "Default Location",
+          },
+          value: {
+            uuid: newLocationUuid,
+            display: roomLocations.find(loc => loc.uuid === newLocationUuid)?.display || "Selected Location"
+          }
+        }
+      ],
+    };
+
+    saveProvider(payload)
+      .then(() => {
+        closeWorkspace();
+        showSnackbar({
+          title: t("locationChanged", "Default location updated"),
+          kind: "success",
+        });
+      })
+      .catch((error) => {
+        const errorMessage =
+          error?.responseBody?.message || error?.message || "An unexpected error occurred";
+        console.error("Provider update failed:", errorMessage);
+      })
+      .finally(() => {
+        setIsChangingRoom(false);
+      });
+  },
+  [session, closeWorkspace, t, roomLocations]
+);
+
+
   return (
-    <Form>
+    <Form onSubmit={handleSubmit(onSubmit)}>
       <ModalHeader
         closeModal={close}
         title={t("changeLocation", "Change location")}
       />
       <ModalBody>
+        
+        <ContentSwitcher onChange={handleTabTypeChange}>
+  <Switch name="Change room" text={t("changeRoom", "Switch room")} />
+  <Switch name="Change clinic" text={t("changeClinic", "Switch only clinic")} />
+</ContentSwitcher>
+
         <Stack gap={5} className={styles.languageOptionsContainer}>
           <ResponsiveWrapper isTablet={isTablet}>
-            <Controller
+            {tabType === "Change room" && (
+              <><Controller
+              name="clinicLocation"
+              control={control}
+              defaultValue=""
+              render={({ field }) => (
+                <Select
+                  {...field}
+                  id="clinicLocation"
+                  name="clinicLocation"
+                  labelText="Select clinic"
+                  disabled={errorFetchingClinics}
+                  invalidText={errors.root?.message}
+                  value={field.value}
+                  onChange={(e) => {
+                    const selectedValue = e.target.value;
+                    field.onChange(selectedValue);
+                    setSelectedClinic(selectedValue);
+                  }}
+                >
+                  {!field.value && (
+                    <SelectItem
+                      value=""
+                      text={t(
+                        "selectClinic",
+                        "Choose clinic"
+                      )}
+                    />
+                  )}
+
+                  {clinicsList.map(({ uuid, display }) => (
+                    <SelectItem key={uuid} value={uuid} text={display} />
+                  ))}
+                </Select>
+              )}
+            />
+              <Controller
               name="clinicRoom"
               control={control}
               defaultValue={currentLocation}
@@ -70,22 +168,21 @@ const ChangeLocationModal: React.FC<ChangeLocationProps> = ({
                   id="clinicRoom"
                   name="clinicRoom"
                   labelText="Select room to change to"
-                  disabled={errorFetchingRooms}
-                  invalid={!!errors.locationTo}
+                  disabled={!selectedClinic || errorFetchingRooms}
                   invalidText={errors.locationTo?.message}
                   value={field.value}
                   onChange={(e) => {
                     const selectedValue = e.target.value;
                     field.onChange(selectedValue);
-                    setselectedClinciRoom(selectedValue);
+                    setselectedClinicRoom(selectedValue);
                   }}
                 >
                   {!field.value && (
                     <SelectItem
                       value=""
                       text={t(
-                        "selectNextServicePoint",
-                        "Choose next service point"
+                        "selectRoom",
+                        "Choose room"
                       )}
                     />
                   )}
@@ -95,7 +192,44 @@ const ChangeLocationModal: React.FC<ChangeLocationProps> = ({
                   ))}
                 </Select>
               )}
-            />
+            /></>
+            )}
+            {tabType === "Change clinic" && (
+            <Controller
+              name="clinic"
+              control={control}
+              defaultValue={currentLocation}
+              render={({ field }) => (
+                <Select
+                  {...field}
+                  id="clinic"
+                  name="clinic"
+                  labelText="Select clinic to change to"
+                  disabled={errorFetchingClinics}
+                  invalidText={errors.root?.message}
+                  value={field.value}
+                  onChange={(e) => {
+                    const selectedValue = e.target.value;
+                    field.onChange(selectedValue);
+                    setSelectedClinic(selectedValue);
+                  }}
+                >
+                  {!field.value && (
+                    <SelectItem
+                      value=""
+                      text={t(
+                        "selectClinic",
+                        "Choose clinic"
+                      )}
+                    />
+                  )}
+
+                  {clinicsList.map(({ uuid, display }) => (
+                    <SelectItem key={uuid} value={uuid} text={display} />
+                  ))}
+                </Select>
+              )}
+            />)}
 
             {errorFetchingRooms && (
               <InlineNotification
@@ -123,7 +257,7 @@ const ChangeLocationModal: React.FC<ChangeLocationProps> = ({
         >
           {isChangingRoom ? (
             <InlineLoading
-              description={t("changingPassword", "Changing password") + "..."}
+              description={t("changingLocation", "Changing location") + "..."}
             />
           ) : (
             <span>{t("change", "Change")}</span>

src/change-location/change-location.resource.ts

@@ -2,9 +2,36 @@ import { restBaseUrl, openmrsFetch } from "@openmrs/esm-framework";
 import { useMemo } from "react";
 import useSWR from "swr";
 import { RoomsResponse } from "../types";
+import { FACILITY_LOCATION_UUID } from "../constants";
 
-export function useRoomLocations(currentLocation: string) {
-  const apiUrl = `${restBaseUrl}/location/${currentLocation}?v=full`;
+export interface Provider {
+  uuid?: string;
+  person: {
+    uuid: string;
+  };
+  identifier?: string;
+  attributes?: Attributes[];
+}
+
+export interface Attributes {
+  display?: string;
+    uuid?: string;
+    attributeType: AttributeType;
+    value: Value;
+}
+
+export interface AttributeType {
+  uuid: string;
+  display: string;
+}
+
+export interface Value {
+  uuid: string;
+  display: string;
+}
+
+export function useRoomLocations(clinicUuid?: string) {
+  const apiUrl = clinicUuid ? `${restBaseUrl}/location/${clinicUuid}?v=full` : null;
   const { data, error, isLoading, mutate } = useSWR<{ data: RoomsResponse }>(
     apiUrl,
     openmrsFetch
@@ -25,3 +52,50 @@ export function useRoomLocations(currentLocation: string) {
     mutate,
   };
 }
+
+export function useClinicLocations() {
+  const apiUrl = `${restBaseUrl}/location/${FACILITY_LOCATION_UUID}?v=full`;
+  const { data, error, isLoading, mutate } = useSWR<{ data: RoomsResponse }>(
+    apiUrl,
+    openmrsFetch
+  );
+
+  const clinicLocations = useMemo(
+    () => data?.data?.childLocations?.map((response) => response) ?? [],
+    [data?.data?.childLocations]
+  );
+  return {
+    clinicsList: clinicLocations.filter(
+      (location) => location?.uuid != null
+    )
+      ? clinicLocations
+      : [],
+    isLoading,
+    error,
+    mutate,
+  };
+}
+
+export async function saveProvider(payload: Provider) {
+  const abortController = new AbortController();
+  const isUpdating = !!payload.uuid;
+
+  const url = isUpdating
+    ? `${restBaseUrl}/provider/${payload.uuid}`
+    : `${restBaseUrl}/provider`;
+
+  return await openmrsFetch(url, {
+    method: "POST",
+    signal: abortController.signal,
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: {
+      person: payload.person.uuid,
+      attributes: payload.attributes?.map(attr => ({
+  attributeType: typeof attr.attributeType === 'string' ? attr.attributeType : attr.attributeType.uuid,
+  value: typeof attr.value === 'string' ? attr.value : attr.value.uuid
+}))
+    },
+  });
+}

src/constants.ts

@@ -0,0 +1 @@
+export const FACILITY_LOCATION_UUID = '629d78e9-93e5-43b0-ad8a-48313fd99117';

src/types.ts

@@ -223,4 +223,4 @@ export interface Person {
 
 export interface UserProperties {
   loginAttempts: string;
-}
+}