From b46d0776d608090b01b939d69256367faeb323e8 Mon Sep 17 00:00:00 2001
From: "ashutosh.nehete" <ashutosh.nehete@marcoaiot.com>
Date: Fri, 27 Jun 2025 17:07:02 +0530
Subject: [PATCH] Enhance EditActivity Component to Select Service and Activity
 Group

---
 src/components/master/EditActivity.jsx | 404 ++++++++++++++++++-------
 1 file changed, 295 insertions(+), 109 deletions(-)

diff --git a/src/components/master/EditActivity.jsx b/src/components/master/EditActivity.jsx
index 503bf8c0..a601bf07 100644
--- a/src/components/master/EditActivity.jsx
+++ b/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,
-        activityName: activityData.activityName,
-        unitOfMeasurement: activityData.unitOfMeasurement,
-        checkLists: activityData.checkLists || [],
+      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( {
-        id:activityData.id,
+      reset({
+        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}
-    try
-    {
-      const response = await MasterRespository.updateActivity( activityData?.id, Activity );
+
+    const Activity = { ...data, id: activityData.id };
+    try {
+      const response = await MasterRespository.updateActivity(
+        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 );
-        onClose()
+
+        cacheData("Activity", updatedActivities);
+        onClose();
       }
-      setIsLoading( false )
+      setIsLoading(false);
       showToast("Activity Successfully Updated", "success");
-    } catch ( err )
-    {
-      setIsLoading( false )
+    } catch (err) {
+      setIsLoading(false);
 
       showToast("error.message", "error");
     }
   };
 
-
-
   // Add new checklist item
   const addChecklistItem = () => {
     const values = getValues("checkList");
@@ -122,12 +210,13 @@ const UpdateActivity = ({ activityData, onClose }) => {
     remove(index);
   };
 
-
-    // for tooltip
-      useEffect(() => {
-        const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
-        tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
-      }, []);
+  // for tooltip
+  useEffect(() => {
+    const tooltipTriggerList = Array.from(
+      document.querySelectorAll('[data-bs-toggle="tooltip"]')
+    );
+    tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
+  }, []);
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
@@ -135,11 +224,13 @@ const UpdateActivity = ({ activityData, onClose }) => {
       <div className="row">
         {/* Activity Name */}
         <div className="col-md-6">
-          <label  className="form-label">Activity Name</label>
+          <label className="form-label">Activity Name</label>
           <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>
@@ -148,93 +239,188 @@ const UpdateActivity = ({ activityData, onClose }) => {
 
         {/* Unit of Measurement */}
         <div className="col-md-6">
-          <label  className="form-label">Measurement</label>
+          <label className="form-label">Measurement</label>
           <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">
-                 <tr className="py-1">
-                   <th colSpan={2} className="py-1">
-                     <small>Name</small>
-                   </th>
-                   <th colSpan={2} className="py-1 text-center">
-                     <small>Is Mandatory</small>
-                   </th>
-                   <th className="text-center py-1">Action</th>
-                 </tr>
-               </thead>
-               <tbody>
-               {checkListItems.map((item, index) => (
-                   <tr key={item.id} className="border-top-0">
-                     <td colSpan={2} className=" border-0">
-                       <input
-                         className="d-none"
-                         {...register(`checkList.${index}.id`)}
-                       ></input>
-                       <input
-                         {...register(`checkList.${index}.description`)}
-                         className="form-control form-control-sm"
-                         placeholder={`Checklist item ${index + 1}`}
-                         onChange={(e) =>
-                           handleChecklistChange(index, e.target.value)
-                         }
-                       />
-                       {errors.checkList?.[index]?.description && (
-                         <small
-                           style={{ fontSize: "10px" }}
-                           className="danger-text"
-                         >
-                           {errors.checkList[index]?.description?.message}
-                         </small>
-                       )}
-                     </td>
-                     <td colSpan={2} className="text-center border-0">
-                       <input
-                         className="form-check-input"
-                         type="checkbox"
-                         {...register(`checkList.${index}.isMandatory`)}
-                         defaultChecked={item.isMandatory}
-                       />
-                     </td>
-                     <td className="text-center border-0">
-                       <button
-                         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"
-                title="Add Check"
-                data-bs-original-title="Add check"  ></i>
-                       </button>
-                     </td>
-                   </tr>
-                 ))}
-               </tbody>
-             </table>
+            <table className="table mt-1  border-0">
+              <thead className="py-0 my-0 table-border-top-0">
+                <tr className="py-1">
+                  <th colSpan={2} className="py-1">
+                    <small>Name</small>
+                  </th>
+                  <th colSpan={2} className="py-1 text-center">
+                    <small>Is Mandatory</small>
+                  </th>
+                  <th className="text-center py-1">Action</th>
+                </tr>
+              </thead>
+              <tbody>
+                {checkListItems.map((item, index) => (
+                  <tr key={item.id} className="border-top-0">
+                    <td colSpan={2} className=" border-0">
+                      <input
+                        className="d-none"
+                        {...register(`checkList.${index}.id`)}
+                      ></input>
+                      <input
+                        {...register(`checkList.${index}.description`)}
+                        className="form-control form-control-sm"
+                        placeholder={`Checklist item ${index + 1}`}
+                        onChange={(e) =>
+                          handleChecklistChange(index, e.target.value)
+                        }
+                      />
+                      {errors.checkList?.[index]?.description && (
+                        <small
+                          style={{ fontSize: "10px" }}
+                          className="danger-text"
+                        >
+                          {errors.checkList[index]?.description?.message}
+                        </small>
+                      )}
+                    </td>
+                    <td colSpan={2} className="text-center border-0">
+                      <input
+                        className="form-check-input"
+                        type="checkbox"
+                        {...register(`checkList.${index}.isMandatory`)}
+                        defaultChecked={item.isMandatory}
+                      />
+                    </td>
+                    <td className="text-center border-0">
+                      <button
+                        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"
+                          title="Add Check"
+                          data-bs-original-title="Add check"
+                        ></i>
+                      </button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
           )}
-         
 
           <button
-             type="button"
+            type="button"
             className="btn btn-xs btn-primary mt-2"
             onClick={addChecklistItem}
           >
-         <i class="bx bx-plus-circle" data-bs-toggle="tooltip"
-                title="Add Check"
-                data-bs-original-title="Add check" ></i>
+            <i
+              className="bx bx-plus-circle"
+              data-bs-toggle="tooltip"
+              title="Add Check"
+              data-bs-original-title="Add check"
+            ></i>
           </button>
         </div>