added ui to add and update health facility id (#6136)

src/Components/ABDM/ConfigureHealthFacility.tsx

@@ -0,0 +1,153 @@
+import { lazy, useCallback, useEffect, useReducer, useState } from "react";
+import { useDispatch } from "react-redux";
+
+import { healthFacilityActions } from "../../Redux/actions";
+import * as Notification from "../../Utils/Notifications.js";
+import { navigate } from "raviger";
+import { Cancel, Submit } from "../Common/components/ButtonV2";
+import TextFormField from "../Form/FormFields/TextFormField";
+import Page from "../Common/components/Page";
+const Loading = lazy(() => import("../Common/Loading"));
+
+const initForm = {
+  health_facility: null,
+  hf_id: "",
+};
+const initialState = {
+  form: { ...initForm },
+  errors: {},
+};
+
+const FormReducer = (state = initialState, action: any) => {
+  switch (action.type) {
+    case "set_form": {
+      return {
+        ...state,
+        form: action.form,
+      };
+    }
+    case "set_error": {
+      return {
+        ...state,
+        errors: action.errors,
+      };
+    }
+    default:
+      return state;
+  }
+};
+
+export const ConfigureHealthFacility = (props: any) => {
+  const [state, dispatch] = useReducer(FormReducer, initialState);
+  const { facilityId } = props;
+  const dispatchAction: any = useDispatch();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const fetchData = useCallback(async () => {
+    if (facilityId) {
+      setIsLoading(true);
+      const res = await dispatchAction(healthFacilityActions.read(facilityId));
+
+      if (res.status === 200 && res?.data) {
+        const formData = {
+          ...state.form,
+          hf_id: res.data.hf_id,
+          health_facility: res.data,
+        };
+        dispatch({ type: "set_form", form: formData });
+      }
+
+      setIsLoading(false);
+    }
+  }, [dispatchAction, facilityId]);
+
+  useEffect(() => {
+    fetchData();
+  }, [dispatch, fetchData]);
+
+  const handleSubmit = async (e: any) => {
+    e.preventDefault();
+    setIsLoading(true);
+
+    if (!state.form.hf_id) {
+      dispatch({
+        type: "set_error",
+        errors: { hf_id: ["Health Facility Id is required"] },
+      });
+      setIsLoading(false);
+      return;
+    }
+
+    let res = null;
+    if (state.form.health_facility) {
+      res = await dispatchAction(
+        healthFacilityActions.partialUpdate(facilityId, {
+          hf_id: state.form.hf_id,
+        })
+      );
+    } else {
+      res = await dispatchAction(
+        healthFacilityActions.create({
+          facility: facilityId,
+          hf_id: state.form.hf_id,
+        })
+      );
+    }
+
+    setIsLoading(false);
+    if (res && res.data) {
+      Notification.Success({
+        msg: "Health Facility config updated successfully",
+      });
+      navigate(`/facility/${facilityId}`);
+    } else {
+      if (res?.data)
+        Notification.Error({
+          msg: "Something went wrong: " + (res.data.detail || ""),
+        });
+    }
+    setIsLoading(false);
+  };
+
+  const handleChange = (e: any) => {
+    dispatch({
+      type: "set_form",
+      form: { ...state.form, [e.name]: e.value },
+    });
+  };
+
+  if (isLoading) {
+    return <Loading />;
+  }
+
+  return (
+    <Page
+      title="Configure Health Facility"
+      crumbsReplacements={{
+        [facilityId]: { name: state.form.name },
+      }}
+      className="mx-auto max-w-3xl"
+    >
+      <div className="cui-card mt-4">
+        <form onSubmit={(e) => handleSubmit(e)}>
+          <div className="mt-2 grid grid-cols-1 gap-4">
+            <div>
+              <TextFormField
+                name="hf_id"
+                label="Health Facility Id"
+                required
+                value={state.form.hf_id}
+                onChange={(e) => handleChange(e)}
+                error={state.errors?.hf_id}
+              />
+            </div>
+          </div>
+          <div className="flex flex-col gap-3 sm:flex-row sm:justify-between">
+            <Cancel onClick={() => navigate(`/facility/${facilityId}`)} />
+            <Submit onClick={handleSubmit} label="Update" />
+          </div>
+        </form>
+      </div>
+    </Page>
+  );
+};

src/Components/Facility/FacilityHome.tsx

@@ -549,6 +549,20 @@ export const FacilityHome = (props: any) => {
                 >
                   Configure Facility
                 </DropdownItem>
+                {config.enable_abdm ? (
+                  <DropdownItem
+                    id="configure-health-facility"
+                    onClick={() =>
+                      navigate(`/facility/${facilityId}/health_facility`)
+                    }
+                    authorizeFor={NonReadOnlyUsers}
+                    icon={<CareIcon className="care-l-setting text-lg" />}
+                  >
+                    Configure Health Facility
+                  </DropdownItem>
+                ) : (
+                  <></>
+                )}
                 <DropdownItem
                   id="inventory-management"
                   onClick={() => navigate(`/facility/${facilityId}/inventory`)}

src/Redux/actions.tsx

@@ -944,6 +944,39 @@ export const getAbhaCard = (patient: string, type: "pdf" | "png") => {
   });
 };
 
+export const healthFacilityActions = {
+  list: (params: object) => {
+    return fireRequest("listHealthFacilities", [], params);
+  },
+
+  create: (data: object) => {
+    return fireRequest("createHealthFacility", [], data);
+  },
+
+  read: (id: string) => {
+    return fireRequest(
+      "getHealthFacility",
+      [],
+      {},
+      { facility_id: id },
+      undefined,
+      true
+    );
+  },
+
+  update: (id: string, data: object) => {
+    return fireRequest("updateHealthFacility", [], data, {
+      facility_id: id,
+    });
+  },
+
+  partialUpdate: (id: string, data: object) => {
+    return fireRequest("partialUpdateHealthFacility", [], data, {
+      facility_id: id,
+    });
+  },
+};
+
 export const listAssetAvailability = (params: object) =>
   fireRequest("listAssetAvailability", [], params);
 export const getAssetAvailability = (id: string) =>

src/Redux/api.tsx

@@ -903,6 +903,34 @@ const routes: Routes = {
     path: "/api/v1/abdm/healthid/get_abha_card/",
     method: "POST",
   },
+
+  // ABDM Health Facility
+
+  listHealthFacility: {
+    path: "/api/v1/abdm/health_facility/",
+    method: "GET",
+  },
+
+  createHealthFacility: {
+    path: "/api/v1/abdm/health_facility/",
+    method: "POST",
+  },
+
+  getHealthFacility: {
+    path: "/api/v1/abdm/health_facility/{facility_id}/",
+    method: "GET",
+  },
+
+  updateHealthFacility: {
+    path: "/api/v1/abdm/health_facility/{facility_id}/",
+    method: "PUT",
+  },
+
+  partialUpdateHealthFacility: {
+    path: "/api/v1/abdm/health_facility/{facility_id}/",
+    method: "PATCH",
+  },
+
   // Asset Availability endpoints
 
   listAssetAvailability: {

src/Router/AppRouter.tsx

@@ -73,9 +73,10 @@ import { handleSignOut } from "../Utils/utils";
 import SessionExpired from "../Components/ErrorPages/SessionExpired";
 import ManagePrescriptions from "../Components/Medicine/ManagePrescriptions";
 import CentralNursingStation from "../Components/Facility/CentralNursingStation";
+import { ConfigureHealthFacility } from "../Components/ABDM/ConfigureHealthFacility";
 
 export default function AppRouter() {
-  const { main_logo, enable_hcx } = useConfig();
+  const { main_logo, enable_hcx, enable_abdm } = useConfig();
 
   const routes = {
     "/": () => <HospitalList />,
@@ -98,6 +99,15 @@ export default function AppRouter() {
     "/facility/:facilityId/update": ({ facilityId }: any) => (
       <FacilityCreate facilityId={facilityId} />
     ),
+    ...(enable_abdm
+      ? {
+          "/facility/:facilityId/health_facility": ({
+            facilityId,
+          }: {
+            facilityId: string;
+          }) => <ConfigureHealthFacility facilityId={facilityId} />,
+        }
+      : {}),
     "/facility/:facilityId/middleware/update": ({ facilityId }: any) => (
       <UpdateFacilityMiddleware facilityId={facilityId} />
     ),