From a5e7766a2f9b1bb2b1e86e3d3f1b4e89c7b246eb Mon Sep 17 00:00:00 2001
From: "ashutosh.nehete" <ashutosh.nehete@marcoaiot.com>
Date: Fri, 27 Jun 2025 17:53:44 +0530
Subject: [PATCH] Do not close the modal after creating an activity.

---
 src/components/master/CreateActivity.jsx | 336 ++++++++++++-----------
 1 file changed, 175 insertions(+), 161 deletions(-)

diff --git a/src/components/master/CreateActivity.jsx b/src/components/master/CreateActivity.jsx
index 4d581e6e..d64bf361 100644
--- a/src/components/master/CreateActivity.jsx
+++ b/src/components/master/CreateActivity.jsx
@@ -80,7 +80,15 @@ const CreateActivity = ({ onClose }) => {
         cacheData("Activity", updatedData);
         showToast("Activity Successfully Added.", "success");
         setIsLoading(false);
-        handleClose();
+        reset({
+          activityName: "",
+          unitOfMeasurement: "",
+          checkList: [],
+          serviceId: "",
+          actitvityGroupId: "",
+        });
+        setSelectedService(null)
+        // handleClose();
       })
       .catch((error) => {
         showToast(error.message, "error");
@@ -168,34 +176,6 @@ const CreateActivity = ({ onClose }) => {
     <form onSubmit={handleSubmit(onSubmit)}>
       {/* <h6>Create Activity</h6> */}
       <div className="row">
-        <div className="col-6">
-          <label className="form-label">Activity</label>
-          <input
-            type="text"
-            {...register("activityName")}
-            className={`form-control form-control-sm ${
-              errors.activityName ? "is-invalid" : ""
-            }`}
-          />
-          {errors.activityName && (
-            <p className="danger-text">{errors.activityName.message}</p>
-          )}
-        </div>
-
-        <div className="col-6">
-          <label className="form-label">Measurement</label>
-          <input
-            type="text"
-            {...register("unitOfMeasurement")}
-            className={`form-control form-control-sm ${
-              errors.unitOfMeasurement ? "is-invalid" : ""
-            }`}
-          />
-          {errors.unitOfMeasurement && (
-            <p className="danger-text">{errors.unitOfMeasurement.message}</p>
-          )}
-        </div>
-
         {/* Services */}
         <div className="col-12 col-md-12">
           <label className="form-label" htmlFor="serviceId">
@@ -228,141 +208,175 @@ const CreateActivity = ({ onClose }) => {
           )}
         </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>
+          <>
+            {/* Actitvity Name */}
+            <div className="col-6">
+              <label className="form-label">Activity</label>
+              <input
+                type="text"
+                {...register("activityName")}
+                className={`form-control form-control-sm ${
+                  errors.activityName ? "is-invalid" : ""
+                }`}
+              />
+              {errors.activityName && (
+                <p className="danger-text">{errors.activityName.message}</p>
               )}
-            </select>
-            {errors.actitvityGroupId && (
-              <p className="danger-text">{errors.actitvityGroupId.message}</p>
-            )}
-          </div>
+            </div>
+            {/* Unit of Mesurement */}
+            <div className="col-6">
+              <label className="form-label">Unit of Measurement</label>
+              <input
+                type="text"
+                {...register("unitOfMeasurement")}
+                className={`form-control form-control-sm ${
+                  errors.unitOfMeasurement ? "is-invalid" : ""
+                }`}
+              />
+              {errors.unitOfMeasurement && (
+                <p className="danger-text">
+                  {errors.unitOfMeasurement.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}
+              >
+                <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"
+                  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"
+                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>
+            </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"
-              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"
-            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>
-        </div>
       </div>
     </form>
   );