Enhanced CreateActivity Component to Select Service and Activity Group

src/components/master/CreateActivity.jsx

@@ -10,11 +10,19 @@ import showToast from "../../services/toastService";
 
 const schema = z.object({
   activityName: z.string().min(1, { message: "Activity Name is required" }),
-  unitOfMeasurement: z.string().min(1, { message: "Unit of Measurement is required" }),
+  unitOfMeasurement: z
+    .string()
+    .min(1, { message: "Unit of 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({
-        description: z.string().min(1, { message: "descriptionlist item cannot be empty" }),
+        description: z
+          .string()
+          .min(1, { message: "description list item cannot be empty" }),
         isMandatory: z.boolean().default(false),
         id: z.any().default(null),
       })
@@ -24,6 +32,12 @@ const schema = z.object({
 
 const CreateActivity = ({ 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,
@@ -41,10 +55,11 @@ const CreateActivity = ({ onClose }) => {
       activityName: "",
       unitOfMeasurement: "",
       checkList: [],
+      serviceId: "",
+      actitvityGroupId: "",
     },
   });
 
-
   const {
     fields: checkListItems,
     append,
@@ -59,15 +74,13 @@ const CreateActivity = ({ onClose }) => {
     setIsLoading(true);
 
     MasterRespository.createActivity(data)
-      .then( ( resp ) =>
+      .then((resp) => {
-      {
-        
         const cachedData = getCachedData("Activity");
         const updatedData = [...cachedData, resp?.data];
         cacheData("Activity", updatedData);
         showToast("Activity Successfully Added.", "success");
         setIsLoading(false);
-        handleClose()
+        handleClose();
       })
       .catch((error) => {
         showToast(error.message, "error");
@@ -75,7 +88,6 @@ const CreateActivity = ({ onClose }) => {
       });
   };
 
-
   const addChecklistItem = () => {
     const values = getValues("checkList");
     const lastIndex = checkListItems.length - 1;
@@ -97,11 +109,33 @@ const CreateActivity = ({ onClose }) => {
     });
   };
 
+  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;
+    const service = services.find((b) => b.id === String(value));
+    reset((prev) => ({
+      ...prev,
+      actitvityGroupId: String(value),
+    }));
+  };
+
   const removeChecklistItem = (index) => {
     remove(index);
   };
 
-
   const handleChecklistChange = (index, value) => {
     setValue(`checkList.${index}`, value);
   };
@@ -111,11 +145,23 @@ const CreateActivity = ({ onClose }) => {
     onClose();
   };
 
-
-
   // for tooltip
   useEffect(() => {
-    const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+    if (!services) {
+      MasterRespository.getServices().then((res) => {
+        setServices(res?.data);
+        cacheData("Services", res?.data);
+      });
+    }
+    if (!activityGroups) {
+      MasterRespository.getActivityGroups().then((res) => {
+        setActivityGroups(res?.data);
+        cacheData("Activity Group", res?.data);
+      });
+    }
+    const tooltipTriggerList = Array.from(
+      document.querySelectorAll('[data-bs-toggle="tooltip"]')
+    );
     tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
   }, []);
   return (
@@ -150,8 +196,77 @@ const CreateActivity = ({ onClose }) => {
           )}
         </div>
 
+        {/* Services */}
+        <div className="col-12 col-md-12">
+          <label className="form-label" htmlFor="serviceId">
+            Select Service
+          </label>
+          <select
+            id="serviceId"
+            className="form-select form-select-sm"
+            {...register("serviceId")}
+            onChange={handleServicesChange}
+          >
+            <option value="" disabled>
+              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 */}
+        {selectedService && (
+          <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}
+            >
+              <option value="" disabled>
+                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>
+        )}
+
         <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">
@@ -204,9 +319,12 @@ const CreateActivity = ({ onClose }) => {
                         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="Remove Check"
-                data-bs-original-title="Remove check"></i>
+                          data-bs-original-title="Remove check"
+                        ></i>
                       </button>
                     </td>
                   </tr>
@@ -219,20 +337,28 @@ const CreateActivity = ({ onClose }) => {
             className="btn btn-xs btn-primary mt-2"
             onClick={addChecklistItem}
           >
-            <i className="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>
 
         <div className="col-12 text-center mt-3">
-          <button type="submit" className="btn btn-sm btn-primary me-3">
+          <button
+            type="submit"
+            className="btn btn-sm btn-primary me-3"
+            disabled={isLoading || (selectedService == null)}
+          >
             {isLoading ? "Please Wait" : "Submit"}
           </button>
           <button
             type="reset"
             className="btn btn-sm btn-label-secondary"
             onClick={handleClose}
+            disabled={isLoading || (selectedService == null)}
           >
             Cancel
           </button>