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 ];
+        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,89 +196,169 @@ const CreateActivity = ({ onClose }) => {
           )}
         </div>
 
-        <div className="col-md-12 text-start mt-1">
+        {/* Services */}
-          <p className="py-1 my-0">{checkListItems.length > 0 ? "Check List" : "Add Check List" }</p>
+        <div className="col-12 col-md-12">
-          {checkListItems.length > 0 && (
+          <label className="form-label" htmlFor="serviceId">
-          <table className="table mt-1  border-0">
+            Select Service
-            <thead className="py-0 my-0 table-border-top-0">
+          </label>
-              <tr className="py-1">
+          <select
-                <th colSpan={2} className="py-1">
+            id="serviceId"
-                  <small>Name</small>
+            className="form-select form-select-sm"
-                </th>
+            {...register("serviceId")}
-                <th colSpan={2} className="py-1 text-center">
+            onChange={handleServicesChange}
-                  <small>Is Mandatory</small>
+          >
-                </th>
+            <option value="" disabled>
-                <th className="text-center py-1">Action</th>
+              Select Service
-              </tr>
+            </option>
-            </thead>
+            {services
-            <tbody className="table-border-bottom-0 ">
+              ?.filter((service) => service?.name)
-              {checkListItems.map((item, index) => (
+              ?.sort((a, b) => a.name?.localeCompare(b.name))
-                <tr key={index} className="border-top-0">
+              ?.map((service) => (
-                  <td colSpan={2} className="border-top-0 border-0">
+                <option key={service.id} value={service.id}>
-                    <input
+                  {service.name}
-                      className="d-none"
+                </option>
-                      {...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="Remove Check"
-                data-bs-original-title="Remove check"></i>
-                    </button>
-                  </td>
-                </tr>
               ))}
-            </tbody>
+
-          </table>
+            {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>
+          {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 className="table-border-bottom-0 ">
+                {checkListItems.map((item, index) => (
+                  <tr key={index} className="border-top-0">
+                    <td colSpan={2} className="border-top-0 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="Remove Check"
+                          data-bs-original-title="Remove check"
+                        ></i>
+                      </button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
           )}
           <button
             type="button"
             className="btn btn-xs btn-primary mt-2"
             onClick={addChecklistItem}
           >
-            <i className="bx bx-plus-circle" data-bs-toggle="tooltip"
+            <i
-                title="Add Check"
+              className="bx bx-plus-circle"
-                data-bs-original-title="Add check" ></i>
+              data-bs-toggle="tooltip"
+              title="Add Check"
+              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>