added Toast and modal open until not close using button

src/components/Project/Infrastructure/TaskModel.jsx

@@ -1,12 +1,11 @@
 import React, { useState, useEffect } from "react";
 import { useForm } from "react-hook-form";
-import { zodResolver } from '@hookform/resolvers/zod';
+import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
-import {useDispatch} from "react-redux";
+import { useDispatch } from "react-redux";
-import {changeMaster} from "../../../slices/localVariablesSlice";
+import { changeMaster } from "../../../slices/localVariablesSlice";
 import useMaster from "../../../hooks/masterHook/useMaster";
 
-// Define Zod validation schema
 const taskSchema = z.object({
   buildingID: z.string().min(1, "Building is required"),
   floorId: z.string().min(1, "Floor is required"),
@@ -18,6 +17,8 @@ const taskSchema = z.object({
 
 const defaultModel = {
   id: "0",
+  buildingID: "0",
+  floorId: "0",
   workAreaId: 0,
   activityID: 0,
   plannedWork: 0,
@@ -28,59 +29,39 @@ const TaskModel = ({
   project,
   onSubmit,
   clearTrigger,
-  onClearComplete,onClose
+  onClearComplete,
-} )=>{
+  onClose,
-  const dispatch = useDispatch()
+}) => {
-  const {data:activities,loading} = useMaster()
+  const dispatch = useDispatch();
+  const { data: activities } = useMaster();
   const [formData, setFormData] = useState(defaultModel);
   const [selectedBuilding, setSelectedBuilding] = useState(null);
   const [selectedFloor, setSelectedFloor] = useState(null);
   const [selectedWorkArea, setSelectedWorkArea] = useState(null);
   const [selectedActivity, setSelectedActivity] = useState(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
-  
+  const {
-  const { register, handleSubmit, formState: { errors },reset } = useForm({
+    register,
+    handleSubmit,
+    formState: { errors },
+    reset,
+  } = useForm({
     resolver: zodResolver(taskSchema),
-    defaultValues: formData,
+    defaultValues: defaultModel,
   });
 
   useEffect(() => {
     if (clearTrigger) {
-      setFormData(defaultModel);
+      resetForm();
       onClearComplete();
     }
   }, [clearTrigger, onClearComplete]);
 
-  // Handle input changes
+  useEffect(() => {
-  const handleChange = (e) => {
+    dispatch(changeMaster("Activity"));
-    const { name, value } = e.target;
+    resetForm();
-    const activity = activities.find((b) => b.id === Number(value));
+  }, []);
-    setFormData({ ...formData, [name]: value });
-  };
-
-  const handleActivityChange = (e) => {
-    const { value } = e.target;
-    const activity = activities.find((b) => b.id === Number(value));
-
-    setFormData({ ...formData, ["activityID"]: value });
-    setSelectedActivity(activity);
-  };
-
-  const handleWorkAreaChange = (e) => {
-    const { value } = e.target;
-    const workArea = selectedFloor.workAreas.find((b) => b.id === Number(value));
-    setSelectedWorkArea(workArea);
-    setFormData({ ...formData, ["workAreaId"]: value });
-  };
-
-  const handleFloorChange = (e) => {
-    const { value } = e.target;
-    const floor = selectedBuilding.floors.find((b) => b.id === Number(value));
-    setSelectedFloor(floor);
-    setSelectedWorkArea(null);
-    setSelectedActivity(null);
-    setFormData(defaultModel);
-  };
 
   const handleBuildingChange = (e) => {
     const { value } = e.target;
@@ -89,62 +70,97 @@ const TaskModel = ({
     setSelectedFloor(null);
     setSelectedWorkArea(null);
     setSelectedActivity(null);
+    reset({
+      ...defaultModel,
+      buildingID: value,
+    });
+  };
+
+  const handleFloorChange = (e) => {
+    const { value } = e.target;
+    const floor = selectedBuilding.floors.find((b) => b.id === Number(value));
+    setSelectedFloor(floor);
+    setSelectedWorkArea(null);
+    setSelectedActivity(null);
+    reset((prev) => ({
+      ...prev,
+      floorId: value,
+      workAreaId: 0,
+      activityID: 0,
+    }));
+  };
+
+  const handleWorkAreaChange = (e) => {
+    const { value } = e.target;
+    const workArea = selectedFloor.workAreas.find(
+      (b) => b.id === Number(value)
+    );
+    setSelectedWorkArea(workArea);
+    reset((prev) => ({
+      ...prev,
+      workAreaId: Number(value),
+    }));
+  };
+
+  const handleActivityChange = (e) => {
+    const { value } = e.target;
+    const activity = activities.find((b) => b.id === Number(value));
+    setSelectedActivity(activity);
+    reset((prev) => ({
+      ...prev,
+      activityID: Number(value),
+    }));
+  };
+
+  const onSubmitForm = async (data) => {
+    setIsSubmitting(true);
+    await onSubmit(data); 
+    reset({
+      buildingID: data.buildingID,
+      floorId: data.floorId,
+      workAreaId: data.workAreaId,
+      activityID: data.activityID,
+      plannedWork: 0,
+      completedWork: 0,
+    });
+    setIsSubmitting(false);
+  };
+  
+
+  const resetForm = () => {
     setFormData(defaultModel);
+    setSelectedBuilding(null);
+    setSelectedFloor(null);
+    setSelectedWorkArea(null);
+    setSelectedActivity(null);
+    reset(defaultModel);
   };
 
-  const onSubmitForm = ( data ) =>
-  {
-    onSubmit( data ); 
-    setSelectedActivity(null),
-   setSelectedWorkArea(null)
-    reset( {
-      plannedWork: 0,
-      completedWork:0
-      
-    })
-  };
-
-  useEffect( () =>
-  {
-
-    dispatch(changeMaster("Activity")),
-    () =>{
-      resetVlaue ()
-    }
-  },[])
-  const resetVlaue = () =>
-  {
-    setSelectedBuilding( null )
-    setSelectedFloor( null )
-    setSelectedWorkArea( null )
-    setSelectedActivity(null)
-    reset( {
-      plannedWork: 0,
-      completedWork:0
-    })
- }
   return (
     <div className="modal-dialog modal-lg modal-simple modal-edit-user">
       <div className="modal-content">
         <div className="modal-body">
           <div className="row">
-          <button type="button" className="btn-close" aria-label="Close" onClick={onClose}/>
+            <button
+              type="button"
+              className="btn-close"
+              aria-label="Close"
+              onClick={onClose}
+            />
             <div className="text-center mb-1">
               <h5 className="mb-1">Manage Task</h5>
             </div>
             <form className="row g-2" onSubmit={handleSubmit(onSubmitForm)}>
               {/* Select Building */}
               <div className="col-6 col-md-6">
-                <label className="form-label" htmlFor="name">
+                <label className="form-label" htmlFor="buildingID">
                   Select Building
                 </label>
                 <select
                   id="buildingID"
-                  name="buildingID"
+                  className="form-select form-select-sm"
-                  className="select2 form-select form-select-sm"
-                  aria-label="Default select example"
                   {...register("buildingID")}
-                  onChange={(e) => handleBuildingChange(e)}
+                  onChange={handleBuildingChange}
                 >
                   <option value="0">Select Building</option>
                   {project.buildings.map((building) => (
@@ -153,22 +169,22 @@ const TaskModel = ({
                     </option>
                   ))}
                 </select>
-                {errors.buildingID && <p className="danger-text">{errors.buildingID.message}</p>}
+                {errors.buildingID && (
+                  <p className="danger-text">{errors.buildingID.message}</p>
+                )}
               </div>
 
               {/* Select Floor */}
-              {selectedBuilding && selectedBuilding.id !== "0" && (
+              {selectedBuilding && (
                 <div className="col-6 col-md-6">
                   <label className="form-label" htmlFor="floorId">
                     Select Floor
                   </label>
                   <select
                     id="floorId"
-                    name="floorId"
+                    className="form-select form-select-sm"
-                    className="select2 form-select form-select-sm"
-                    aria-label="Default select example"
                     {...register("floorId")}
-                    onChange={(e) => handleFloorChange(e)}
+                    onChange={handleFloorChange}
                   >
                     <option value="0">Select Floor</option>
                     {selectedBuilding.floors.map((floor) => (
@@ -177,7 +193,9 @@ const TaskModel = ({
                       </option>
                     ))}
                   </select>
-                  {errors.floorId && <p  className="danger-text">{errors.floorId.message}</p>}
+                  {errors.floorId && (
+                    <p className="danger-text">{errors.floorId.message}</p>
+                  )}
                 </div>
               )}
 
@@ -189,11 +207,9 @@ const TaskModel = ({
                   </label>
                   <select
                     id="workAreaId"
-                    name="workAreaId"
+                    className="form-select form-select-sm"
-                    className="select2 form-select form-select-sm"
+                    {...register("workAreaId", { valueAsNumber: true })}
-                    aria-label="Default select example"
+                    onChange={handleWorkAreaChange}
-                    {...register("workAreaId",{valueAsNumber:true})}
-                    onChange={(e) => handleWorkAreaChange(e)}
                   >
                     <option value="0">Select Work Area</option>
                     {selectedFloor.workAreas.map((workArea) => (
@@ -202,7 +218,9 @@ const TaskModel = ({
                       </option>
                     ))}
                   </select>
-                  {errors.workAreaId && <p  className="danger-text">{errors.workAreaId.message}</p>}
+                  {errors.workAreaId && (
+                    <p className="danger-text">{errors.workAreaId.message}</p>
+                  )}
                 </div>
               )}
 
@@ -214,11 +232,9 @@ const TaskModel = ({
                   </label>
                   <select
                     id="activityID"
-                    name="activityID"
+                    className="form-select form-select-sm"
-                    className="select2 form-select form-select-sm"
+                    {...register("activityID", { valueAsNumber: true })}
-                    aria-label="Default select example"
+                    onChange={handleActivityChange}
-                    {...register("activityID",{valueAsNumber:true})}
-                    onChange={(e) => handleActivityChange(e)}
                   >
                     <option value="0">Select Activity</option>
                     {activities.map((activity) => (
@@ -227,7 +243,9 @@ const TaskModel = ({
                       </option>
                     ))}
                   </select>
-                  {errors.activityID && <p className="danger-text">{errors.activityID.message}</p>}
+                  {errors.activityID && (
+                    <p className="danger-text">{errors.activityID.message}</p>
+                  )}
                 </div>
               )}
 
@@ -240,12 +258,12 @@ const TaskModel = ({
                   <input
                     {...register("plannedWork", { valueAsNumber: true })}
                     type="number"
-                    id="plannedWork"
-                    name="plannedWork"
                     className="form-control form-control-sm me-2"
                     placeholder="Planned Work"
                   />
-                  {errors.plannedWork && <p className="danger-text">{errors.plannedWork.message}</p>}
+                  {errors.plannedWork && (
+                    <p className="danger-text">{errors.plannedWork.message}</p>
+                  )}
                 </div>
               )}
 
@@ -258,12 +276,14 @@ const TaskModel = ({
                   <input
                     {...register("completedWork", { valueAsNumber: true })}
                     type="number"
-                    id="completedWork"
-                    name="completedWork"
                     className="form-control form-control-sm me-2"
                     placeholder="Completed Work"
                   />
-                  {errors.completedWork && <p className="danger-text">{errors.completedWork.message}</p>}
+                  {errors.completedWork && (
+                    <p className="danger-text">
+                      {errors.completedWork.message}
+                    </p>
+                  )}
                 </div>
               )}
 
@@ -276,8 +296,6 @@ const TaskModel = ({
                   <input
                     type="text"
                     disabled
-                    id="unit"
-                    name="unit"
                     className="form-control form-control-sm me-2"
                     value={selectedActivity?.unitOfMeasurement || ""}
                   />
@@ -286,7 +304,11 @@ const TaskModel = ({
 
               <div className="col-12 text-center">
                 <button type="submit" className="btn btn-sm btn-primary me-3">
-                  {formData.id !== "0" && formData.id !== "" ? "Edit Task" : "Add Task"}
+                  {isSubmitting
+                    ? "Please Wait.."
+                    : formData.id !== "0" && formData.id !== ""
+                    ? "Edit Task"
+                    : "Add Task"}
                 </button>
                 <button
                   type="button"
@@ -295,7 +317,6 @@ const TaskModel = ({
                 >
                   Cancel
                 </button>
-               
               </div>
             </form>
           </div>