add required validation for plannedTask using Zod schema

This commit is contained in:
Pramod Mahajan 2025-04-30 17:20:59 +05:30
parent 852b95d7ee
commit 101565e4ae

View File

@ -17,6 +17,16 @@ const schema = z.object({
.array(z.number())
.min(1, { message: "At least one employee must be selected" }),
description: z.string().min(1, { message: "description required" }),
plannedTask: z.preprocess(
(val) => parseInt(val, 10),
z
.number({
required_error: "Planned task is required",
invalid_type_error: "Planned task must be a number",
})
.int()
.positive({ message: "Planned task must be a positive number" })
),
});
const AssignRoleModel = ({ assignData, onClose }) => {
@ -45,6 +55,7 @@ const AssignRoleModel = ({ assignData, onClose }) => {
defaultValues: {
selectedEmployees: [],
description: "",
plannedTask: "",
},
resolver: (data) => {
const validation = schema.safeParse(data);
@ -53,20 +64,16 @@ const AssignRoleModel = ({ assignData, onClose }) => {
},
});
const handleRoleChange = ( event ) =>
{
reset()
setSelectedEmployees( [] )
const handleRoleChange = (event) => {
reset();
setSelectedEmployees([]);
setSelectedRole(event.target.value);
};
const filteredEmployees =
selectedRole === "all"
? employees
: employees.filter((emp) =>
String(emp.jobRoleId || "") === selectedRole
);
: employees.filter((emp) => String(emp.jobRoleId || "") === selectedRole);
const handleEmployeeSelection = (employeeId, field) => {
setSelectedEmployees((prevSelected) => {
@ -92,15 +99,16 @@ const AssignRoleModel = ({ assignData, onClose }) => {
const onSubmit = async (data) => {
const formattedData = {
taskTeam: data.selectedEmployees,
plannedTask: parseInt(plannedTask, 10),
plannedTask: data.plannedTask,
description: data.description,
assignmentDate: new Date().toISOString(),
workItemId: assignData?.workItem?.workItem.id,
};
try {
let response = await TasksRepository.assignTask(formattedData);
showToast( "Task Successfully Assigend", "success" );
setSelectedEmployees([])
showToast("Task Successfully Assigend", "success");
setSelectedEmployees([]);
reset();
onClose();
} catch (error) {
@ -176,7 +184,9 @@ const AssignRoleModel = ({ assignData, onClose }) => {
<div className="divider text-start">
<div className="divider-text">Employee</div>
</div>
{( filteredEmployees?.length === 0 && employees ) && <div>No employees found</div>}
{filteredEmployees?.length === 0 && employees && (
<div>No employees found</div>
)}
<div className="row">
<div className="col-12 col-md-8 h-sm-25 overflow-auto">
@ -206,9 +216,14 @@ const AssignRoleModel = ({ assignData, onClose }) => {
type="checkbox"
id={`employee-${emp?.id}`}
value={emp.id}
checked={field.value.includes(emp.id)}
checked={field.value.includes(
emp.id
)}
onChange={() => {
handleEmployeeSelection(emp.id, field);
handleEmployeeSelection(
emp.id,
field
);
}}
/>
)}
@ -235,7 +250,9 @@ const AssignRoleModel = ({ assignData, onClose }) => {
)}
{data &&
!loading &&
(jobRole ? jobRole.name : "Unknown Role")}
(jobRole
? jobRole.name
: "Unknown Role")}
</small>
</div>
</div>
@ -248,13 +265,17 @@ const AssignRoleModel = ({ assignData, onClose }) => {
</div>
)}
</div>
<div className="col-12 col-md-4 h-25 overflow-auto" style={{maxHeight:"200px"}}>
<div
className="col-12 col-md-4 h-25 overflow-auto"
style={{ maxHeight: "200px" }}
>
{selectedEmployees.length > 0 && (
<div className="mt-1">
<div className="text-start px-2">
{selectedEmployees.map((empId) => {
const emp = employees.find((emp) => emp.id === empId);
const emp = employees.find(
(emp) => emp.id === empId
);
return (
<span
key={empId}
@ -269,7 +290,9 @@ const AssignRoleModel = ({ assignData, onClose }) => {
removeEmployee(empId);
setValue(
"selectedEmployees",
selectedEmployees.filter((id) => id !== empId)
selectedEmployees.filter(
(id) => id !== empId
)
);
}}
>
@ -284,14 +307,15 @@ const AssignRoleModel = ({ assignData, onClose }) => {
</div>
</div>
<div className="col-md text-start mx-0 px-0">
<div className="form-check form-check-inline mt-4 px-1">
<label className="form-text fs-6" for="inlineCheckbox1">
Pending Work
</label>
<label className="form-check-label ms-2" for="inlineCheckbox1">
<label
className="form-check-label ms-2"
for="inlineCheckbox1"
>
{assignData?.workItem?.workItem?.plannedWork -
assignData?.workItem?.workItem?.completedWork}
</label>
@ -300,16 +324,25 @@ const AssignRoleModel = ({ assignData, onClose }) => {
<label for="defaultFormControlInput" className="form-label">
Target
</label>
<Controller
name="plannedTask"
control={control}
render={({ field }) => (
<input
type="text"
className="form-control form-control-xs"
value={plannedTask}
onChange={(e) => setPlannedTask(e.target.value)}
{...field}
id="defaultFormControlInput"
aria-describedby="defaultFormControlHelp"
/>
)}
/>
</div>
{errors.plannedTask && (
<div className="danger-text mt-1">{errors.plannedTask}</div>
)}
</div>
{errors.selectedEmployees && (
<div className="danger-text mt-1">
<p>{errors.selectedEmployees[0]}</p>