Enhance EditActivity Component to Select Service and Activity Group

src/components/master/EditActivity.jsx

@@ -2,28 +2,38 @@ import React, { useEffect, useState } from "react";
 import { useForm, useFieldArray } from "react-hook-form";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
-import {MasterRespository} from "../../repositories/MastersRepository";
+import { MasterRespository } from "../../repositories/MastersRepository";
 import showToast from "../../services/toastService";
-import {getCachedData,cacheData} from "../../slices/apiDataManager";
+import { getCachedData, cacheData } from "../../slices/apiDataManager";
-
 
 const schema = z.object({
   activityName: z.string().min(1, { message: "Activity name is required" }),
   unitOfMeasurement: z.string().min(1, { message: "Measurement is required" }),
+  serviceId: z.string().min(1, { message: "A service selection is required." }),
+  actitvityGroupId: z
+    .string()
+    .min(1, { message: "A activity group selection is required." }),
   checkList: z
     .array(
       z.object({
         id: z.any().default(null),
-        description: z.string().min(1, { message: "Checklist item cannot be empty" }),
+        description: z
+          .string()
+          .min(1, { message: "Checklist item cannot be empty" }),
         isMandatory: z.boolean().default(false),
       })
     )
     .optional(),
 });
 
-
 const UpdateActivity = ({ activityData, onClose }) => {
   const [isLoading, setIsLoading] = useState(false);
+  const [services, setServices] = useState(getCachedData("Services"));
+  const [selectedService, setSelectedService] = useState(null);
+  const [activityGroups, setActivityGroups] = useState(
+    getCachedData("Activity Group")
+  );
+  const [activityGroupList, setActivityGroupList] = useState(null);
 
   const {
     register,
@@ -35,26 +45,80 @@ const UpdateActivity = ({ activityData, onClose }) => {
     clearErrors,
     getValues,
     formState: { errors },
+    watch,
   } = useForm({
     resolver: zodResolver(schema),
     defaultValues: {
-        id:activityData.id,
+      id: activityData.id,
+      serviceId: activityData.serviceId || "",
+      actitvityGroupId: activityData.actitvityGroupId || "",
       activityName: activityData.activityName,
       unitOfMeasurement: activityData.unitOfMeasurement,
       checkLists: activityData.checkLists || [],
     },
   });
 
-  const { fields: checkListItems, append, remove } = useFieldArray({
+  const selectedServiceId = watch("serviceId");
+  const [selectedActitvityGroupId, setSelectedActitvityGroupId] = useState(
+    watch("actitvityGroupId")
+  );
+
+  const {
+    fields: checkListItems,
+    append,
+    remove,
+  } = useFieldArray({
     control,
     name: "checkList",
   });
 
   // Load initial data
   useEffect(() => {
+    if (!services) {
+      MasterRespository.getServices().then((res) => {
+        setServices(res?.data);
+        cacheData("Services", res?.data);
+      });
+    }
+    if (!activityGroups) {
+      MasterRespository.getActivityGroups().then((res) => {
+        setActivityGroups(res?.data);
+        const selectedActivityGroups = res?.data.filter(
+          (item) => item.serviceId == selectedServiceId
+        );
+        setActivityGroupList(selectedActivityGroups);
+        cacheData("Activity Group", res?.data);
+        const isExist = selectedActivityGroups.some(
+          (item) => item.id === String(watch("actitvityGroupId"))
+        );
+
+        if (!isExist) {
+          reset((prev) => ({
+            ...prev,
+            actitvityGroupId: "",
+          }));
+        }
+      });
+    } else {
+      const selectedActivityGroups = activityGroups.filter(
+        (item) => item.serviceId == selectedServiceId
+      );
+      setActivityGroupList(selectedActivityGroups);
+      const isExist = selectedActivityGroups.some(
+        (item) => item.id === String(watch("actitvityGroupId"))
+      );
+      if (!isExist) {
+        reset((prev) => ({
+          ...prev,
+          actitvityGroupId: "",
+        }));
+      }
+    }
     if (activityData) {
-      reset( {
+      reset({
-        id:activityData.id,
+        id: activityData.id,
+        serviceId: activityData.serviceId || "",
+        actitvityGroupId: activityData.actitvityGroupId || "",
         activityName: activityData.activityName,
         unitOfMeasurement: activityData.unitOfMeasurement,
         checkList: activityData.checkLists || [],
@@ -62,42 +126,66 @@ const UpdateActivity = ({ activityData, onClose }) => {
     }
   }, [activityData]);
 
+  const handleServicesChange = (e) => {
+    const { value } = e.target;
+    const service = services.find((b) => b.id === String(value));
+    const selectedActivityGroups = activityGroups.filter(
+      (ag) => ag.serviceId == service.id
+    );
+    setSelectedService(service.id);
+    setActivityGroupList(selectedActivityGroups);
+    reset((prev) => ({
+      ...prev,
+      serviceId: String(value),
+    }));
+  };
+
+  const handleActivityGroupsChange = (e) => {
+    const { value } = e.target;
+    setValue("actitvityGroupId", String(value));
+    // reset((prev) => ({
+    //   ...prev,
+    //   actitvityGroupId: String(value),
+    // }));
+    setSelectedActitvityGroupId(String(value));
+  };
 
   const handleChecklistChange = (index, value) => {
     setValue(`checkList.${index}`, value);
   };
 
   // Submit handler
-  const onSubmit = async(data) => {
+  const onSubmit = async (data) => {
     setIsLoading(true);
 
-    const Activity = {...data, id:activityData.id}
+    const Activity = { ...data, id: activityData.id };
-    try
+    try {
-    {
+      const response = await MasterRespository.updateActivity(
-      const response = await MasterRespository.updateActivity( activityData?.id, Activity );
+        activityData?.id,
+        Activity
+      );
       const updatedActivity = response.data;
-      const cachedData = getCachedData("Activity")
+      const cachedData = getCachedData("Activity");
 
       if (cachedData) {
         const updatedActivities = cachedData.map((activity) =>
-          activity.id === updatedActivity.id ? { ...activity, ...updatedActivity } : activity
+          activity.id === updatedActivity.id
+            ? { ...activity, ...updatedActivity }
+            : activity
         );
 
-        cacheData( "Activity", updatedActivities );
+        cacheData("Activity", updatedActivities);
-        onClose()
+        onClose();
       }
-      setIsLoading( false )
+      setIsLoading(false);
       showToast("Activity Successfully Updated", "success");
-    } catch ( err )
+    } catch (err) {
-    {
+      setIsLoading(false);
-      setIsLoading( false )
 
       showToast("error.message", "error");
     }
   };
 
-
-
   // Add new checklist item
   const addChecklistItem = () => {
     const values = getValues("checkList");
@@ -122,10 +210,11 @@ const UpdateActivity = ({ activityData, onClose }) => {
     remove(index);
   };
 
-
   // for tooltip
   useEffect(() => {
-        const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+    const tooltipTriggerList = Array.from(
+      document.querySelectorAll('[data-bs-toggle="tooltip"]')
+    );
     tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
   }, []);
 
@@ -139,7 +228,9 @@ const UpdateActivity = ({ activityData, onClose }) => {
           <input
             type="text"
             {...register("activityName")}
-            className={`form-control form-control-sm ${errors.activityName ? "is-invalid" : ""}`}
+            className={`form-control form-control-sm ${
+              errors.activityName ? "is-invalid" : ""
+            }`}
           />
           {errors.activityName && (
             <div className="text-danger">{errors.activityName.message}</div>
@@ -152,16 +243,107 @@ const UpdateActivity = ({ activityData, onClose }) => {
           <input
             type="text"
             {...register("unitOfMeasurement")}
-            className={`form-control form-control-sm ${errors.unitOfMeasurement ? "is-invalid" : ""}`}
+            className={`form-control form-control-sm ${
+              errors.unitOfMeasurement ? "is-invalid" : ""
+            }`}
           />
           {errors.unitOfMeasurement && (
-            <div className="text-danger">{errors.unitOfMeasurement.message}</div>
+            <div className="text-danger">
+              {errors.unitOfMeasurement.message}
+            </div>
+          )}
+        </div>
+
+        {/* Services */}
+        <div className="col-12 col-md-12">
+          <label className="form-label" htmlFor="serviceId">
+            Select Service
+          </label>
+          {activityData.serviceId != null ? (
+            <select
+              id="serviceId"
+              className="form-select form-select-sm"
+              {...register("serviceId")}
+              onChange={handleServicesChange}
+              disabled
+            >
+              <option value="">Select Service</option>
+
+              <option value={selectedServiceId}>
+                {activityData.servicesName}
+              </option>
+
+              {services?.filter((service) => service?.name).length === 0 && (
+                <option disabled>No service found</option>
+              )}
+            </select>
+          ) : (
+            <select
+              id="serviceId"
+              className="form-select form-select-sm"
+              {...register("serviceId")}
+              onChange={handleServicesChange}
+            >
+              <option value="">Select Service</option>
+
+              {services
+                ?.filter((service) => service?.name)
+                ?.sort((a, b) => a.name?.localeCompare(b.name))
+                ?.map((service) => (
+                  <option key={service.id} value={service.id}>
+                    {service.name}
+                  </option>
+                ))}
+
+              {services?.filter((service) => service?.name).length === 0 && (
+                <option disabled>No service found</option>
+              )}
+            </select>
+          )}
+          {errors.serviceId && (
+            <p className="danger-text">{errors.serviceId.message}</p>
+          )}
+        </div>
+
+        {/* Actitvity Group */}
+        <div className="col-12 col-md-12">
+          <label className="form-label" htmlFor="actitvityGroupId">
+            Select Activity Group
+          </label>
+          <select
+            id="actitvityGroupId"
+            className="form-select form-select-sm"
+            {...register("actitvityGroupId")}
+            onChange={handleActivityGroupsChange}
+            value={selectedActitvityGroupId}
+          >
+            <option value="">
+              Select Activty Group
+            </option>
+            {activityGroupList
+              ?.filter((activityGroup) => activityGroup?.name)
+              ?.sort((a, b) => a.name?.localeCompare(b.name))
+              ?.map((activityGroup) => (
+                <option key={activityGroup.id} value={activityGroup.id}>
+                  {activityGroup.name}
+                </option>
+              ))}
+
+            {activityGroupList?.filter((activityGroup) => activityGroup?.name)
+              .length === 0 && (
+              <option disabled>No activity group found</option>
+            )}
+          </select>
+          {errors.actitvityGroupId && (
+            <p className="danger-text">{errors.actitvityGroupId.message}</p>
           )}
         </div>
 
         {/* Checklist */}
         <div className="col-md-12 text-start mt-1">
-          <p className="py-1 my-0">{checkListItems.length > 0 ? "Check List" : "Add Check List"}</p>
+          <p className="py-1 my-0">
+            {checkListItems.length > 0 ? "Check List" : "Add Check List"}
+          </p>
           {checkListItems.length > 0 && (
             <table className="table mt-1  border-0">
               <thead className="py-0 my-0 table-border-top-0">
@@ -213,11 +395,13 @@ const UpdateActivity = ({ activityData, onClose }) => {
                         type="button"
                         onClick={() => removeChecklistItem(index)}
                         className="btn btn-xs btn-icon btn-text-secondary"
-                       
                       >
-                         <i className="bx bxs-minus-circle text-danger"data-bs-toggle="tooltip"
+                        <i
+                          className="bx bxs-minus-circle text-danger"
+                          data-bs-toggle="tooltip"
                           title="Add Check"
-                data-bs-original-title="Add check"  ></i>
+                          data-bs-original-title="Add check"
+                        ></i>
                       </button>
                     </td>
                   </tr>
@@ -226,15 +410,17 @@ const UpdateActivity = ({ activityData, onClose }) => {
             </table>
           )}
 
-
           <button
             type="button"
             className="btn btn-xs btn-primary mt-2"
             onClick={addChecklistItem}
           >
-         <i class="bx bx-plus-circle" data-bs-toggle="tooltip"
+            <i
+              className="bx bx-plus-circle"
+              data-bs-toggle="tooltip"
               title="Add Check"
-                data-bs-original-title="Add check" ></i>
+              data-bs-original-title="Add check"
+            ></i>
           </button>
         </div>