Adding dropdown in Edit Task.

src/components/Project/Infrastructure/EditActivityModal.jsx

@@ -12,6 +12,8 @@ import { useManageTask } from "../../../hooks/useProjects";
 import { cacheData, getCachedData } from "../../../slices/apiDataManager";
 import { refreshData } from "../../../slices/localVariablesSlice";
 import showToast from "../../../services/toastService";
+import { AppFormController, AppFormProvider } from "../../../hooks/appHooks/useAppForm";
+import SelectField from "../../common/Forms/SelectField";
 
 const taskSchema = z
   .object({
@@ -37,17 +39,7 @@ const EditActivityModal = ({
   const { activities, loading: loadingActivities } = useActivitiesMaster();
   const { categories, loading: loadingCategories } = useWorkCategoriesMaster();
   const [selectedActivity, setSelectedActivity] = useState(null);
-
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-    reset,
-    setValue,
-    getValues,
-    watch,
-  } = useForm({
-    resolver: zodResolver(taskSchema),
+  const methods = useForm({
     defaultValues: {
       activityID: "",
       workCategoryId: "",
@@ -55,7 +47,11 @@ const EditActivityModal = ({
       completedWork: 0,
       comment: "",
     },
+    resolver: zodResolver(taskSchema),
   });
+
+  const { register, control, watch, handleSubmit, reset, setValue, getValues, formState: { errors } } = methods;
+
   const { mutate: UpdateTask, isPending } = useManageTask({
     onSuccessCallback: (response) => {
       showToast(response?.message, "success")
@@ -63,8 +59,6 @@ const EditActivityModal = ({
     }
   });
 
-
-
   const activityID = watch("activityID");
 
   const sortedActivities = useMemo(
@@ -125,156 +119,168 @@ const EditActivityModal = ({
     });
   }
   return (
-    <form className="row g-2 p-2 p-md-1" onSubmit={handleSubmit(onSubmitForm)}>
-      <div className="text-center mb-1">
-        <h5 className="mb-1">Manage Task</h5>
-      </div>
+    <AppFormProvider {...methods}>
+      <form className="row g-2 p-2 p-md-1" onSubmit={handleSubmit(onSubmitForm)}>
+        <div className="text-center mb-1">
+          <h5 className="mb-1">Manage Task</h5>
+        </div>
 
-      <div className="row g-2 text-start">
-        <div className="col-12 col-md-6">
-          <label className="form-label">Select Building</label>
+        <div className="row g-2 text-start">
+          <div className="col-12 col-md-6">
+            <label className="form-label">Select Building</label>
+            <input
+              className="form-control"
+              value={building?.buildingName}
+              disabled
+            />
+          </div>
+
+          <div className="col-12 col-md-6">
+            <label className="form-label">Select Floor</label>
+            <input
+              className="form-control"
+              value={floor?.floorName}
+              disabled
+            />
+          </div>
+        </div>
+
+        <div className="col-12 text-start">
+          <label className="form-label">Select Work Area</label>
           <input
-            className="form-control form-control-sm"
-            value={building?.buildingName}
+            className="form-control"
+            value={workArea?.areaName}
+            disabled
+          />
+        </div>
+        <div className="col-12 text-start">
+          <label className="form-label">Select Service</label>
+          <input
+            className="form-control"
+            value={
+              workItem?.activityMaster?.activityGroupMaster?.service?.name || ""
+            }
             disabled
           />
         </div>
 
-        <div className="col-12 col-md-6">
-          <label className="form-label">Select Floor</label>
-          <input
-            className="form-control form-control-sm"
-            value={floor?.floorName}
+
+        <div className="col-12 text-start">
+          <label className="form-label">Select Activity</label>
+          <select
+            {...register("activityID")}
+            className="form-select"
             disabled
+          >
+            <option >Select Activity</option>
+            {loadingActivities ? (
+              <option>Loading...</option>
+            ) : (
+              sortedActivities.map((a) => (
+                <option key={a.id} value={a.id}>
+                  {a.activityName}
+                </option>
+              ))
+            )}
+          </select>
+          {errors.activityID && (
+            <p className="danger-text">{errors.activityID.message}</p>
+          )}
+        </div>
+
+        <div className="col-12 text-start">
+          <AppFormController
+            name="workCategoryId"
+            control={control}
+            render={({ field }) => (
+              <SelectField
+                label="Select Work Category"
+                placeholder="Select Category"
+                options={
+                  loadingCategories
+                    ? []
+                    : sortedCategories?.map((c) => ({
+                      id: String(c.id),
+                      name: c.name,
+                    })) ?? []
+                }
+                isLoading={loadingCategories}
+                labelKey="name"
+                valueKey="id"
+                value={field.value}
+                onChange={field.onChange}
+                className="m-0"
+              />
+            )}
+          />
+
+          {errors.workCategoryId && (
+            <small className="danger-text">{errors.workCategoryId.message}</small>
+          )}
+        </div>
+
+
+        <div className="col-5 text-start">
+          <label className="form-label">Planned Work</label>
+          <input
+            {...register("plannedWork", { valueAsNumber: true })}
+            type="number"
+            className="form-control"
+          />
+          {errors.plannedWork && (
+            <p className="danger-text">{errors.plannedWork.message}</p>
+          )}
+        </div>
+
+        <div className="col-5 text-start">
+          <label className="form-label">Completed Work</label>
+          <input
+            {...register("completedWork", { valueAsNumber: true })}
+            type="number"
+            disabled={getValues("completedWork") > 0}
+            className="form-control"
+          />
+          {errors.completedWork && (
+            <p className="danger-text">{errors.completedWork.message}</p>
+          )}
+        </div>
+
+        <div className="col-2 text-start">
+          <label className="form-label">Unit</label>
+          <input
+            className="form-control"
+            disabled
+            value={selectedActivity?.unitOfMeasurement || ""}
           />
         </div>
-      </div>
 
-      <div className="col-12 text-start">
-        <label className="form-label">Select Work Area</label>
-        <input
-          className="form-control form-control-sm"
-          value={workArea?.areaName}
-          disabled
-        />
-      </div>
-      <div className="col-12 text-start">
-        <label className="form-label">Select Service</label>
-        <input
-          className="form-control form-control-sm"
-          value={
-            workItem?.activityMaster?.activityGroupMaster?.service?.name || ""
-          }
-          disabled
-        />
-      </div>
-
-
-      <div className="col-12 text-start">
-        <label className="form-label">Select Activity</label>
-        <select
-          {...register("activityID")}
-          className="form-select form-select-sm"
-          disabled
-        >
-          <option >Select Activity</option>
-          {loadingActivities ? (
-            <option>Loading...</option>
-          ) : (
-            sortedActivities.map((a) => (
-              <option key={a.id} value={a.id}>
-                {a.activityName}
-              </option>
-            ))
+        <div className="col-12 text-start">
+          <label className="form-label">Comment</label>
+          <textarea {...register("comment")} rows="2" className="form-control" />
+          {errors.comment && (
+            <div className="danger-text">{errors.comment.message}</div>
           )}
-        </select>
-        {errors.activityID && (
-          <p className="danger-text">{errors.activityID.message}</p>
-        )}
-      </div>
+        </div>
 
-      <div className="col-12 text-start">
-        <label className="form-label">Select Work Category</label>
-        <select
-          {...register("workCategoryId")}
-          className="form-select form-select-sm"
-        >
-          <option disabled>Select Category</option>
-          {loadingCategories ? (
-            <option>Loading...</option>
-          ) : (
-            sortedCategories.map((c) => (
-              <option key={c.id} value={c.id}>
-                {c.name}
-              </option>
-            ))
-          )}
-        </select>
-        {errors.workCategoryId && (
-          <p className="danger-text">{errors.workCategoryId.message}</p>
-        )}
-      </div>
-
-      <div className="col-5 text-start">
-        <label className="form-label">Planned Work</label>
-        <input
-          {...register("plannedWork", { valueAsNumber: true })}
-          type="number"
-          className="form-control form-control-sm"
-        />
-        {errors.plannedWork && (
-          <p className="danger-text">{errors.plannedWork.message}</p>
-        )}
-      </div>
-
-      <div className="col-5 text-start">
-        <label className="form-label">Completed Work</label>
-        <input
-          {...register("completedWork", { valueAsNumber: true })}
-          type="number"
-          disabled={getValues("completedWork") > 0}
-          className="form-control form-control-sm"
-        />
-        {errors.completedWork && (
-          <p className="danger-text">{errors.completedWork.message}</p>
-        )}
-      </div>
-
-      <div className="col-2 text-start">
-        <label className="form-label">Unit</label>
-        <input
-          className="form-control form-control-sm"
-          disabled
-          value={selectedActivity?.unitOfMeasurement || ""}
-        />
-      </div>
-
-      <div className="col-12 text-start">
-        <label className="form-label">Comment</label>
-        <textarea {...register("comment")} rows="2" className="form-control" />
-        {errors.comment && (
-          <div className="danger-text">{errors.comment.message}</div>
-        )}
-      </div>
-
-      <div className="col-12 text-end mt-5">
-        <button
-          type="button"
-          className="btn btn-sm btn-label-secondary me-2"
-          onClick={onClose}
-          disabled={isPending}
-        >
-          Cancel
-        </button>
-        <button
-          type="submit"
-          className="btn btn-sm btn-primary"
-          disabled={isPending}
-        >
-          {isPending ? "Please Wait..." : "Edit Task"}
-        </button>
-      </div>
-    </form>
+        <div className="col-12 text-end mt-5">
+          <button
+            type="button"
+            className="btn btn-sm btn-label-secondary me-2"
+            onClick={onClose}
+            disabled={isPending}
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            className="btn btn-sm btn-primary"
+            disabled={isPending}
+          >
+            {isPending ? "Please Wait..." : "Edit Task"}
+          </button>
+        </div>
+      </form>
+    </AppFormProvider>
   );
 };