Edit feature for facilities in organization | pincode, geo_organization info auto populates

public/locale/en.json

@@ -1758,6 +1758,7 @@
   "select_investigation_groups": "Select Investigation Groups",
   "select_investigations": "Select Investigations",
   "select_local_body": "Select Local Body",
+  "select_location_from": "Select location from",
   "select_new_role": "Select New Role",
   "select_patient": "Select Patient",
   "select_policy": "Select an Insurance Policy",
@@ -2056,6 +2057,7 @@
   "view_users": "View Users",
   "village": "Village",
   "virtual_nursing_assistant": "Virtual Nursing Assistant",
+  "visibility_settings": "Visibility Settings",
   "vitals": "Vitals",
   "vitals_monitor": "Vitals Monitor",
   "vitals_present": "Vitals Monitor present",

src/components/Facility/FacilityCreate.tsx

@@ -1,3 +1,4 @@
+import careConfig from "@careConfig";
 import {
   Popover,
   PopoverButton,
@@ -59,8 +60,10 @@ import {
 import routes from "@/Utils/request/api";
 import query from "@/Utils/request/query";
 import request from "@/Utils/request/request";
-import { parsePhoneNumber } from "@/Utils/utils";
+import { getPincodeDetails, parsePhoneNumber } from "@/Utils/utils";
 import OrganizationSelector from "@/pages/Organization/components/OrganizationSelector";
+import { Organization } from "@/types/organization/organization";
+import { useFetchOrganizationByName } from "@/types/organization/organizationApi";
 
 interface FacilityProps {
   facilityId?: string;
@@ -69,6 +72,9 @@ export const FacilityCreate = (props: FacilityProps) => {
   const { t } = useTranslation();
   const { facilityId } = props;
   const [isLoading, setIsLoading] = useState(false);
+  const [selectedLevels, setSelectedLevels] = useState<Organization[]>([]);
+  const [pincode, setPincode] = useState("");
+
   const { goBack } = useAppHistory();
 
   const facilityFormSchema = z.object({
@@ -215,9 +221,42 @@ export const FacilityCreate = (props: FacilityProps) => {
     }
   };
 
+  const { data: pincodeData, isError: isPincodeError } = useQuery({
+    queryKey: ["pincodeDetails", pincode],
+    queryFn: () => getPincodeDetails(pincode, careConfig.govDataApiKey),
+    enabled: validatePincode(pincode) && pincode != facilityData?.pincode,
+  });
+
+  if (isPincodeError) {
+    toast.error("Invalid pincode");
+  }
+
+  const stateName = pincodeData?.statename;
+
+  const districtName = pincodeData?.districtname;
+
+  const { data: stateOrg } = useFetchOrganizationByName(stateName);
+  const { data: districtOrg } = useFetchOrganizationByName(
+    districtName,
+    stateOrg?.id,
+  );
+
+  useEffect(() => {
+    if (stateOrg && districtOrg) {
+      setSelectedLevels([stateOrg, districtOrg]);
+    } else {
+      setSelectedLevels([]);
+    }
+  }, [stateOrg, districtOrg]);
+
+  const handlePincodeChange = (value: string) => {
+    setPincode(value);
+    setSelectedLevels([]);
+  };
+
   return (
     <Page
-      title={facilityId ? "Update Facility" : "Create Facility"}
+      title={facilityId ? t("update_facility") : t("create_facility")}
       crumbsReplacements={{
         [facilityId || "????"]: { name: form.watch("name") },
       }}
@@ -321,6 +360,7 @@ export const FacilityCreate = (props: FacilityProps) => {
                           required
                           onChange={(value) => {
                             field.onChange(value.value);
+                            handlePincodeChange(value.value);
                           }}
                           error={form.formState.errors.pincode?.message}
                         />
@@ -332,7 +372,11 @@ export const FacilityCreate = (props: FacilityProps) => {
               <div className="col-span-2 grid grid-cols-2 gap-5">
                 <OrganizationSelector
                   required={true}
-                  onChange={(value) => form.setValue("geo_organization", value)}
+                  value={facilityData?.geo_organization}
+                  parentSelectedLevels={selectedLevels}
+                  onChange={(value) => {
+                    form.setValue("geo_organization", value);
+                  }}
                 />
               </div>
 
@@ -414,7 +458,7 @@ export const FacilityCreate = (props: FacilityProps) => {
                         >
                           <CareIcon icon="l-map-marker" className="text-xl" />
                           <span className="tooltip-text tooltip-bottom">
-                            Select location from map
+                            {t("select_location_from")}
                           </span>
                         </Button>
                       </PopoverButton>
@@ -466,7 +510,9 @@ export const FacilityCreate = (props: FacilityProps) => {
 
               {/* Visibility Settings */}
               <div className="space-y-4 rounded-lg border p-4">
-                <h3 className="text-lg font-medium">Visibility Settings</h3>
+                <h3 className="text-lg font-medium">
+                  {t("visibility_settings")}
+                </h3>
                 <FormField
                   control={form.control}
                   name="is_public"

src/components/Facility/CreateFacilityForm.tsx → src/components/Facility/FacilityForm.tsx

@@ -1,6 +1,7 @@
+import careConfig from "@careConfig";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
@@ -39,16 +40,22 @@ import {
 
 import routes from "@/Utils/request/api";
 import mutate from "@/Utils/request/mutate";
-import { parsePhoneNumber } from "@/Utils/utils";
+import query from "@/Utils/request/query";
+import { getPincodeDetails, parsePhoneNumber } from "@/Utils/utils";
 import OrganizationSelector from "@/pages/Organization/components/OrganizationSelector";
 import { BaseFacility } from "@/types/facility/facility";
+import { Organization } from "@/types/organization/organization";
+import { useFetchOrganizationByName } from "@/types/organization/organizationApi";
+
+import { FacilityModel } from "./models";
 
 const facilityFormSchema = z.object({
   facility_type: z.string().min(1, "Facility type is required"),
   name: z.string().min(1, "Name is required"),
   description: z.string().optional(),
   features: z.array(z.number()).default([]),
   pincode: z.string().refine(validatePincode, "Invalid pincode"),
+  geo_organization: z.string().min(1, { message: "required" }),
   address: z.string().min(1, "Address is required"),
   phone_number: z
     .string()
@@ -69,18 +76,19 @@ const facilityFormSchema = z.object({
 
 type FacilityFormValues = z.infer<typeof facilityFormSchema>;
 
-interface Props {
+interface FacilityProps {
   organizationId: string;
+  facilityId?: string;
   onSubmitSuccess?: () => void;
 }
 
-export default function CreateFacilityForm({
-  organizationId,
-  onSubmitSuccess,
-}: Props) {
+export default function CreateFacilityForm(props: FacilityProps) {
   const { t } = useTranslation();
   const queryClient = useQueryClient();
   const [isGettingLocation, setIsGettingLocation] = useState(false);
+  const { organizationId, facilityId, onSubmitSuccess } = props;
+  const [selectedLevels, setSelectedLevels] = useState<Organization[]>([]);
+  const [pincode, setPincode] = useState("");
 
   const form = useForm<FacilityFormValues>({
     resolver: zodResolver(facilityFormSchema),
@@ -90,6 +98,7 @@ export default function CreateFacilityForm({
       description: "",
       features: [],
       pincode: "",
+      geo_organization: "",
       address: "",
       phone_number: "+91",
       latitude: "",
@@ -118,19 +127,76 @@ export default function CreateFacilityForm({
     },
   });
 
-  const onSubmit = (data: FacilityFormValues) => {
-    createFacility({
+  const { mutate: updateFacility, isPending: isUpdatePending } = useMutation({
+    mutationFn: mutate(routes.updateFacility, {
+      pathParams: { id: facilityId || "" },
+    }),
+    onSuccess: (_data: FacilityModel) => {
+      toast.success(t("facility_updated_successfully"));
+      queryClient.invalidateQueries({ queryKey: ["organizationFacilities"] });
+      form.reset();
+      onSubmitSuccess?.();
+    },
+    onError: (error: Error) => {
+      const errorData = error.cause as { errors: { msg: string[] } };
+      if (errorData?.errors?.msg) {
+        errorData.errors.msg.forEach((msg) => {
+          toast.error(msg);
+        });
+      } else {
+        toast.error(t("facility_update_error"));
+      }
+    },
+  });
+
+  const { data: facilityData } = useQuery({
+    queryKey: ["facility", facilityId],
+    queryFn: query(routes.getPermittedFacility, {
+      pathParams: { id: facilityId || "" },
+    }),
+    enabled: !!facilityId,
+  });
+
+  const onSubmit: (data: FacilityFormValues) => void = (
+    data: FacilityFormValues,
+  ) => {
+    const requestData = {
       ...data,
       phone_number: parsePhoneNumber(data.phone_number),
-      geo_organization: organizationId,
-    });
+    };
+
+    if (facilityId) {
+      updateFacility(requestData);
+    } else {
+      createFacility(requestData);
+    }
   };
 
   const handleFeatureChange = (value: any) => {
     const { value: features }: { value: Array<number> } = value;
     form.setValue("features", features);
   };
 
+  // Update form when facility data is loaded
+  useEffect(() => {
+    if (facilityData) {
+      console.log(facilityData);
+      form.reset({
+        facility_type: facilityData.facility_type,
+        name: facilityData.name,
+        description: facilityData.description || "",
+        features: facilityData.features || [],
+        pincode: facilityData.pincode?.toString() || "",
+        geo_organization: facilityData.geo_organization,
+        address: facilityData.address,
+        phone_number: facilityData.phone_number,
+        latitude: facilityData.latitude?.toString() || "",
+        longitude: facilityData.longitude?.toString() || "",
+        is_public: facilityData.is_public,
+      });
+    }
+  }, [facilityData, form]);
+
   const handleGetCurrentLocation = () => {
     if (navigator.geolocation) {
       setIsGettingLocation(true);
@@ -145,13 +211,46 @@ export default function CreateFacilityForm({
           setIsGettingLocation(false);
           toast.error(t("unable_to_get_location") + error.message);
         },
-        { timeout: 10000 }, // 10 second timeout
+        { timeout: 10000 },
       );
     } else {
       toast.error(t("geolocation_is_not_supported_by_this_browser"));
     }
   };
 
+  const { data: pincodeData, isError: isPincodeError } = useQuery({
+    queryKey: ["pincodeDetails", pincode],
+    queryFn: () => getPincodeDetails(pincode, careConfig.govDataApiKey),
+    enabled: validatePincode(pincode) && pincode != facilityData?.pincode,
+  });
+
+  if (isPincodeError) {
+    toast.error("Invalid pincode");
+  }
+
+  const stateName = pincodeData?.statename;
+
+  const districtName = pincodeData?.districtname;
+
+  const { data: stateOrg } = useFetchOrganizationByName(stateName);
+  const { data: districtOrg } = useFetchOrganizationByName(
+    districtName,
+    stateOrg?.id,
+  );
+
+  useEffect(() => {
+    if (stateOrg && districtOrg) {
+      setSelectedLevels([stateOrg, districtOrg]);
+    } else {
+      setSelectedLevels([]);
+    }
+  }, [stateOrg, districtOrg]);
+
+  const handlePincodeChange = (value: string) => {
+    setPincode(value);
+    setSelectedLevels([]);
+  };
+
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
@@ -284,12 +383,26 @@ export default function CreateFacilityForm({
                       data-cy="facility-pincode"
                       placeholder="Enter pincode"
                       {...field}
+                      onChange={(e) => {
+                        field.onChange(e);
+                        handlePincodeChange(e.target.value);
+                      }}
                     />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
               )}
             />
+            <div className="col-span-2 grid grid-cols-2 gap-5">
+              <OrganizationSelector
+                required={true}
+                value={facilityData?.geo_organization}
+                parentSelectedLevels={selectedLevels}
+                onChange={(value) => {
+                  form.setValue("geo_organization", value);
+                }}
+              />
+            </div>
           </div>
 
           <FormField
@@ -434,10 +547,22 @@ export default function CreateFacilityForm({
         <Button
           type="submit"
           className="w-full"
-          disabled={isPending}
-          data-cy="submit-facility"
+          disabled={facilityId ? isUpdatePending : isPending}
+          data-cy={facilityId ? "update-facility" : "submit-facility"}
         >
-          {isPending ? (
+          {facilityId ? (
+            isUpdatePending ? (
+              <>
+                <CareIcon
+                  icon="l-spinner"
+                  className="mr-2 h-4 w-4 animate-spin"
+                />
+                Updating Facility...
+              </>
+            ) : (
+              "Update Facility"
+            )
+          ) : isPending ? (
             <>
               <CareIcon
                 icon="l-spinner"