105 lines
2.9 KiB
JavaScript

import SelectField from "../../common/Forms/SelectField";
import Error from "../../common/Error";
import { z } from "zod";
import {
AppFormController,
AppFormProvider,
useAppForm,
} from "../../../hooks/appHooks/useAppForm";
import { zodResolver } from "@hookform/resolvers/zod";
import { useDispatch, useSelector } from "react-redux";
import { closePopup } from "../../../slices/localVariablesSlice";
import { useUpdateServiceProjectJob } from "../../../hooks/useServiceProject";
import { useJobStatus } from "../../../hooks/masterHook/useMaster";
export const ChangeStatusSchema = z.object({
statusId: z.string().min(1, { message: "Please select status" }),
});
const ChangeStatus = ({ statusId, projectId, jobId, popUpId }) => {
const { data, isLoading, isError, error } = useJobStatus(statusId, projectId);
const dispatch = useDispatch();
const methods = useAppForm({
resolver: zodResolver(ChangeStatusSchema),
defaultValues: { statusId: "" },
});
const {
control,
handleSubmit,
reset,
formState: { errors },
} = methods;
const { mutate: UpdateStatus, isPending } = useUpdateServiceProjectJob(() => {
handleClose();
});
const onSubmit = (formData) => {
const payload =
[
{
op: "replace",
path: "/statusId",
value: formData.statusId,
},
];
UpdateStatus({ id: jobId, payload });
};
const handleClose = () => {
dispatch(closePopup(popUpId));
};
return (
<AppFormProvider {...methods}>
<div className="d-flex mb-2">
<span className="fs-6 fw-medium">
Change Status
</span>
</div>
<form className="row text-start" onSubmit={handleSubmit(onSubmit)}>
<div className="mb-2">
<AppFormController
name="statusId"
control={control}
render={({ field }) => (
<SelectField
label="Select Status"
options={data ?? []}
placeholder="Choose a Status"
required
labelKey="name"
valueKeyKey="id"
value={field.value}
onChange={field.onChange}
isLoading={isLoading}
className="m-0"
/>
)}
/>
{errors.statusId && (
<small className="danger-text">{errors.statusId.message}</small>
)}
</div>
<div className="d-flex flex-row justify-content-end gap-3">
<button
type="button"
onClick={handleClose}
className="btn btn-label-secondary btn-sm"
>
Cancel
</button>
<button type="submit" className="btn btn-primary btn-sm">
{isPending ? "Please wait" : "Save"}
</button>
</div>
</form>
</AppFormProvider>
);
};
export default ChangeStatus;