admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

added loading behaviour for submitting form

Browse Source
This commit is contained in:
Pramod Mahajan 2025-06-20 12:37:21 +05:30
parent 0fad5a0276
commit 0dc79f8dfa
1 changed files with 364 additions and 369 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/Project/AssignTask.jsx
View File

@ -33,7 +33,6 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
.int() .int()
.positive({ message: "Planned task must be a positive number" }) .positive({ message: "Planned task must be a positive number" })
.max(maxPlanned, { .max(maxPlanned, {
message: `Planned task cannot exceed ${maxPlanned}`, message: `Planned task cannot exceed ${maxPlanned}`,
}) })
), ),
@ -42,6 +41,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
const [isHelpVisibleTarget, setIsHelpVisibleTarget] = useState(false); const [isHelpVisibleTarget, setIsHelpVisibleTarget] = useState(false);
const helpPopupRefTarget = useRef(null); const helpPopupRefTarget = useRef(null);
const [isHelpVisible, setIsHelpVisible] = useState(false); const [isHelpVisible, setIsHelpVisible] = useState(false);
const [isSubmitting, setIsSubmitting] = useState(false);
// Refs for Bootstrap Popovers // Refs for Bootstrap Popovers
const infoRef = useRef(null); const infoRef = useRef(null);
@ -151,7 +151,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
// Form submission handler // Form submission handler
const onSubmit = async (data) => { const onSubmit = async (data) => {
const selectedEmployeeIds = data.selectedEmployees; const selectedEmployeeIds = data.selectedEmployees;
setIsSubmitting(true);
// Prepare taskTeam data (only IDs are needed for the backend based on previous context) // Prepare taskTeam data (only IDs are needed for the backend based on previous context)
const taskTeamWithDetails = selectedEmployeeIds const taskTeamWithDetails = selectedEmployeeIds
.map((empId) => { .map((empId) => {
@ -169,10 +169,11 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
}; };
try { try {
// Call API to assign task await TasksRepository.assignTask(formattedData);
// Close the modal setIsSubmitting(false);
closedModel();
} catch (error) { } catch (error) {
console.error("Error assigning task:", error); setIsSubmitting(false);
showToast("Something went wrong. Please try again.", "error"); showToast("Something went wrong. Please try again.", "error");
} }
}; };
@ -183,7 +184,6 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
onClose(); onClose();
}; };
return ( return (
<div className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap"> <div className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">
<p className="align-items-center flex-wrap m-0 ">Assign Task</p> <p className="align-items-center flex-wrap m-0 ">Assign Task</p>
<div className="container my-3"> <div className="container my-3">
@ -195,8 +195,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
assignData?.building?.name, assignData?.building?.name,
assignData?.floor?.floorName, assignData?.floor?.floorName,
assignData?.workArea?.areaName, assignData?.workArea?.areaName,
assignData?.workItem?.workItem?.activityMaster assignData?.workItem?.workItem?.activityMaster?.activityName,
?.activityName,
] ]
.filter(Boolean) // Filter out any undefined/null values .filter(Boolean) // Filter out any undefined/null values
.map((item, index, array) => ( .map((item, index, array) => (
@ -288,9 +287,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
type="checkbox" type="checkbox"
id={`employee-${emp?.id}`} id={`employee-${emp?.id}`}
value={emp.id} value={emp.id}
checked={field.value?.includes( checked={field.value?.includes(emp.id)}
emp.id
)}
onChange={(e) => { onChange={(e) => {
handleCheckboxChange(e, emp); handleCheckboxChange(e, emp);
}} }}
@ -341,9 +338,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
<div className="mt-1"> <div className="mt-1">
<div className="text-start px-2"> <div className="text-start px-2">
{watch("selectedEmployees")?.map((empId) => { {watch("selectedEmployees")?.map((empId) => {
const emp = employees.find( const emp = employees.find((emp) => emp.id === empId);
(emp) => emp.id === empId
);
return ( return (
emp && ( emp && (
<span <span
@ -407,9 +402,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
} }
</u> </u>
</label> </label>
<div <div style={{ display: "flex", alignItems: "center" }}>
style={{ display: "flex", alignItems: "center" }}
>
<div <div
ref={infoRef} ref={infoRef}
tabIndex="0" tabIndex="0"
@ -544,16 +537,18 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
)} )}
/> />
{errors.description && ( {errors.description && (
<div className="danger-text"> <div className="danger-text">{errors.description.message}</div>
{errors.description.message}
</div>
)} )}
</div> </div>
{/* Submit and Cancel buttons */} {/* Submit and Cancel buttons */}
<div className="col-12 d-flex justify-content-center align-items-center gap-sm-6 gap-8 text-center mt-1"> <div className="col-12 d-flex justify-content-center align-items-center gap-sm-6 gap-8 text-center mt-1">
<button type="submit" className="btn btn-sm btn-primary "> <button
Submit type="submit"
className="btn btn-sm btn-primary "
disabled={(isSubmitting, loading)}
>
{isSubmitting ? "Please Wait" : "Submit"}
</button> </button>
<button <button
type="reset" type="reset"
@ -561,6 +556,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
data-bs-dismiss="modal" data-bs-dismiss="modal"
aria-label="Close" aria-label="Close"
onClick={closedModel} onClick={closedModel}
disabled={isSubmitting || loading}
> >
Cancel Cancel
</button> </button>
@ -569,7 +565,6 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
</div> </div>
</div> </div>
</div> </div>
); );
}; };