marco.pms.web/src/components/Activities/CheckCheckOutForm.jsx

244 lines
6.9 KiB
JavaScript

import React, { useState } from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import TimePicker from "../common/TimePicker";
import { usePositionTracker } from "../../hooks/usePositionTracker";
import { useDispatch, useSelector } from "react-redux";
import showToast from "../../services/toastService";
import { checkIfCurrentDate } from "../../utils/dateUtils";
import { useMarkAttendance } from "../../hooks/useAttendance";
import { useSelectedProject } from "../../slices/apiDataManager";
const createSchema = (modeldata) => {
return z
.object({
markTime: z.string().nonempty({ message: "Time is required" }),
description: z
.string()
.max(200, "Description should be less than 200 characters")
.optional(),
})
.refine((data) => {
if (modeldata?.checkInTime && !modeldata?.checkOutTime) {
const checkIn = new Date(modeldata.checkInTime);
const [time, modifier] = data.markTime.split(" ");
const [hourStr, minuteStr] = time.split(":");
let hour = parseInt(hourStr, 10);
const minute = parseInt(minuteStr, 10);
if (modifier === "PM" && hour !== 12) hour += 12;
if (modifier === "AM" && hour === 12) hour = 0;
const checkOut = new Date(checkIn);
checkOut.setHours(hour, minute, 0, 0);
return checkOut > checkIn;
}
return true;
}, {
message: "Checkout time must be later than check-in time",
path: ["markTime"],
});
};
const CheckInCheckOut = ({ modeldata, closeModal, handleSubmitForm }) => {
const projectId = useSelectedProject();
const { mutate: MarkAttendance } = useMarkAttendance();
const [isLoading, setIsLoading] = useState(false);
const coords = usePositionTracker();
const dispatch = useDispatch();
const today = new Date().toISOString().split("T")[0];
const formatDate = (dateString) => {
if (!dateString) {
return "";
}
const [year, month, day] = dateString.split("-");
return `${day}-${month}-${year}`;
};
const {
register,
handleSubmit,
formState: { errors },
reset,
setValue,
} = useForm({
resolver: zodResolver(createSchema(modeldata)),
mode: "onChange",
});
const onSubmit = (data) => {
let record = {
...data,
date: new Date().toLocaleDateString(),
latitude: coords.latitude,
longitude: coords.longitude,
employeeId: modeldata.employeeId,
action: modeldata.action,
id: modeldata?.id || null,
};
const payload = {
Id: modeldata?.id || null,
comment: data.description,
employeeID: modeldata.employeeId,
projectId: projectId,
date: new Date().toISOString(),
markTime: data.markTime,
latitude: coords.latitude.toString(),
longitude: coords.longitude.toString(),
action: modeldata.action,
image: null,
};
MarkAttendance({ payload, forWhichTab: modeldata.forWhichTab });
closeModal();
};
return (
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
<div className="col-12 d-flex justify-content-center">
<label className="fs-5 text-dark text-center">
{modeldata?.checkInTime && !modeldata?.checkOutTime
? "Check-out :"
: "Check-in :"}
</label>
</div>
<div className="col-6 col-md-6 text-start">
<label className="form-label" htmlFor="checkInDate">
{modeldata?.checkInTime && !modeldata?.checkOutTime
? "Check-out Date"
: "Check-in Date"}
</label>
<input
type="text"
id="checkInDate"
className="form-control"
value={
modeldata?.checkInTime && !modeldata?.checkOutTime
? formatDate(modeldata?.checkInTime?.split("T")[0]) || ""
: formatDate(today)
}
disabled
/>
</div>
<div className="col-6 col-md-6 text-start">
<TimePicker
label="Choose a time"
onChange={(e) => setValue("markTime", e)}
interval={10}
checkOutTime={modeldata?.checkOutTime}
checkInTime={modeldata?.checkInTime}
/>
{errors.markTime && (
<p className="text-danger">{errors.markTime.message}</p>
)}
</div>
<div className="col-12 col-md-12 text-start">
<label className="form-label" htmlFor="description">
Description
</label>
<textarea
rows="3"
name="description"
className="form-control"
{...register("description")}
maxLength={200}
/>
{errors.description && (
<p className="text-danger">{errors.description.message}</p>
)}
</div>
<div className="col-12 text-end mt-4">
<button
type="reset"
className="btn btn-sm btn-label-secondary me-2"
data-bs-dismiss="modal"
aria-label="Close"
onClick={() => closeModal()}
>
Cancel
</button>
<button type="submit" className="btn btn-sm btn-primary">
{isLoading ? "Please Wait..." : "Submit"}
</button>
</div>
</form>
);
};
export default CheckInCheckOut;
const schemaReg = z.object({
description: z.string().min(1, { message: "please give reason!" }),
});
export const Regularization = ({ modeldata, closeModal, handleSubmitForm }) => {
const [isLoading, setIsLoading] = useState(false);
const coords = usePositionTracker();
const {
register,
handleSubmit,
formState: { errors },
} = useForm({
resolver: zodResolver(schemaReg),
});
const getCurrentDate = () => {
const today = new Date();
return today.toLocaleDateString("en-CA");
};
const onSubmit = (data) => {
let record = {
...data,
date: new Date().toLocaleDateString(),
latitude: coords.latitude,
longitude: coords.longitude,
};
handleSubmitForm(record);
closeModal();
};
return (
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
<div className="col-12 col-md-12">
<p>Regularize Attendance</p>
<label className="form-label" htmlFor="description">
Description
</label>
<textarea
rows="3"
name="description"
className="form-control"
{...register("description")}
/>
{errors.description && (
<p className="danger-text">{errors.description.message}</p>
)}
</div>
<div className="col-12 text-center">
<button type="submit" className="btn btn-sm btn-primary me-3">
{isLoading ? "Please Wait..." : "Submit"}
</button>
<button
type="reset"
className="btn btn-sm btn-label-secondary"
data-bs-dismiss="modal"
aria-label="Close"
onClick={() => closeModal()}
>
Cancel
</button>
</div>
</form>
);
};