328 lines
10 KiB
JavaScript
328 lines
10 KiB
JavaScript
"use client";
|
|
import AppHeader from "@comp/AppHeader/page";
|
|
import ActivityCard from "@comp/TaskPage/ActivityCard/page";
|
|
import ActivityCardCloseShift from "@comp/TaskPage/ActivityCardCloseShift/page";
|
|
import AppContext from "@ctx/AppContext";
|
|
import moment from "jalali-moment";
|
|
import Buttonbriz from "plugins/Buttonbriz/page";
|
|
import GoBack from "plugins/GoBack/page";
|
|
import PersianNumber from "plugins/PersianNumber";
|
|
import Slider from "rc-slider";
|
|
import React, { useContext, useEffect, useState } from "react";
|
|
import InfiniteScroll from "react-infinite-scroll-component";
|
|
import { toast } from "react-toastify";
|
|
|
|
const CompleteShift = () => {
|
|
const CTX = useContext(AppContext);
|
|
|
|
const [closeShiftScore, setCloseShiftScore] = useState(50);
|
|
const [activeShifPlan, setActiveShifPlan] = useState(-1);
|
|
const [selectDayForShift, setSelectDayForShift] = useState(-1);
|
|
const currentDate = new Date();
|
|
|
|
const siftsData = CTX.state.shiftsData;
|
|
const activitiesData = CTX.state.activitiesData;
|
|
const stopGetActivities = CTX.state.stopGetActivities;
|
|
const pageGetActivity = CTX.state.pageGetActivity;
|
|
|
|
const circularHandleStyle = {
|
|
backgroundColor: "green",
|
|
border: "2px solid #ffffff",
|
|
boxShadow: "0 0 5px #333",
|
|
cursor: "pointer",
|
|
height: 30, // Adjust the height in pixels
|
|
width: 30, // Adjust the width to maintain a circular shape
|
|
marginTop: -10, // Adjust the margin to center the handle
|
|
borderRadius: "50%", // Make the handle circular
|
|
};
|
|
|
|
const railStyle = {
|
|
backgroundColor: "rgba(255, 0, 37, 0.54)", // Overall track color
|
|
height: 10,
|
|
};
|
|
|
|
const trackStyle = {
|
|
backgroundColor: "rgba(0, 165, 0, 0.7)", // Color between handles
|
|
height: 10,
|
|
};
|
|
|
|
const body = {
|
|
completeDescription: "",
|
|
completeActivities: CTX.state.completeActivities,
|
|
completePercent: closeShiftScore,
|
|
};
|
|
|
|
const getTodayPersianDate = () => {
|
|
return moment().locale("fa").format("D MMMM YYYY");
|
|
};
|
|
|
|
const getYesterdayPersianDate = () => {
|
|
const yesterday = moment().locale("fa").subtract(1, "day");
|
|
return yesterday.format("D MMMM YYYY");
|
|
};
|
|
|
|
const getTomorrowPersianDate = () => {
|
|
const tomorrow = moment().locale("fa").add(1, "day");
|
|
return tomorrow.format("D MMMM YYYY");
|
|
};
|
|
|
|
const handleOpenShift = (isCompleted, id, index, hasCurrentShiftPlan) => {
|
|
if (isCompleted) {
|
|
toast.warning(`شیفت بسته شده است `, {
|
|
position: "bottom-right",
|
|
closeOnClick: true,
|
|
});
|
|
} else if (!hasCurrentShiftPlan) {
|
|
toast.warning(`شیفت نا مشخص است `, {
|
|
position: "bottom-right",
|
|
closeOnClick: true,
|
|
});
|
|
} else {
|
|
handleActivityCloseShift(id, index);
|
|
}
|
|
};
|
|
const handleActivityCloseShift = (id, index) => {
|
|
CTX.setCompleteActivities([]);
|
|
setCloseShiftScore(50);
|
|
if (activeShifPlan == index) {
|
|
setActiveShifPlan(-1);
|
|
} else {
|
|
setActiveShifPlan(index);
|
|
|
|
if (selectDayForShift == 0) {
|
|
CTX.GetActivity(
|
|
moment().locale("fa").subtract(1, "day").unix() * 1000,
|
|
id,
|
|
0
|
|
);
|
|
} else if (selectDayForShift == 1) {
|
|
CTX.GetActivity(
|
|
moment().locale("fa").startOf("day").unix() * 1000,
|
|
id,
|
|
0
|
|
);
|
|
} else if (selectDayForShift == 2) {
|
|
CTX.GetActivity(
|
|
moment().locale("fa").add(1, "day").unix() * 1000,
|
|
id,
|
|
0
|
|
);
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleDayCloseShift = (index) => {
|
|
setSelectDayForShift(index);
|
|
setActiveShifPlan(-1);
|
|
|
|
if (index == 0) {
|
|
CTX.GetShifts(moment().locale("fa").subtract(1, "day").unix() * 1000);
|
|
} else if (index == 1) {
|
|
CTX.GetShifts(moment().locale("fa").startOf("day").unix() * 1000);
|
|
} else if (index == 2) {
|
|
CTX.GetShifts(moment().locale("fa").add(1, "day").unix() * 1000);
|
|
}
|
|
};
|
|
|
|
const handleCloseShift = () => {
|
|
CTX.CloseShift(body, siftsData[activeShifPlan]?.currentShiftPlanId);
|
|
setActiveShifPlan(-1);
|
|
handleDayCloseShift(1);
|
|
};
|
|
|
|
const handleGoToReport = (title, shiftId) => {
|
|
CTX.setReportDetail({
|
|
title: title,
|
|
shiftId: shiftId,
|
|
typeReport: "SHIFTPLAN",
|
|
});
|
|
CTX.setBottomSheetReportOpen(true);
|
|
};
|
|
|
|
useEffect(() => {
|
|
handleDayCloseShift(1);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (activitiesData.length > 0) {
|
|
CTX.setCompleteActivities(
|
|
activitiesData.map((activity) => ({
|
|
activityId: activity?.id,
|
|
isCompleted: activity?.isDone,
|
|
performanceDescription: activity?.performanceDescription,
|
|
}))
|
|
);
|
|
}
|
|
}, [activitiesData]);
|
|
|
|
const handleInfiniteNextFetchActivity = () => {
|
|
CTX.setPageGetActivity((e) => e + 1);
|
|
CTX.GetActivity(
|
|
moment().locale("fa").startOf("day").unix() * 1000,
|
|
null,
|
|
pageGetActivity + 1
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="pb-20">
|
|
<AppHeader
|
|
title=" عملیات بستن شیفت"
|
|
sub="عملیات بستن شیفت برای بررسی تکمیل وظایف"
|
|
icon2={true}
|
|
iconName2="ARROW"
|
|
iconHref2="#"
|
|
iconEvent2={() => {
|
|
GoBack();
|
|
}}
|
|
/>
|
|
|
|
<div className="bg-body-100 relative top-[-30px] rounded-t-3xl overflow-hidden p-4 rtl">
|
|
<div className="flex overflow-auto whitespace-nowrap mb-7">
|
|
<div
|
|
className={`mx-1 rtl py-1 px-2 rounded-full font-medium inline-block tr03 ${
|
|
selectDayForShift == 0
|
|
? "bg-primary-200 text-white"
|
|
: " opacity-60 font-normal"
|
|
}`}
|
|
onClick={() => handleDayCloseShift(0)}
|
|
>
|
|
<PersianNumber number={getYesterdayPersianDate()} />
|
|
</div>
|
|
<div
|
|
className={`mx-1 rtl py-1 px-2 rounded-full font-medium inline-block tr03 ${
|
|
selectDayForShift == 1
|
|
? "bg-primary-200 text-white"
|
|
: " opacity-60 font-normal"
|
|
}`}
|
|
onClick={() => handleDayCloseShift(1)}
|
|
>
|
|
<p className="mb-0">
|
|
<PersianNumber number={getTodayPersianDate()} />
|
|
<small className="text-sm mx-2"> ( امروز )</small>
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
className={`mx-1 rtl py-1 px-2 rounded-full font-medium inline-block tr03 ${
|
|
selectDayForShift == 2
|
|
? "bg-primary-200 text-white"
|
|
: " opacity-60 font-normal"
|
|
}`}
|
|
onClick={() => handleDayCloseShift(2)}
|
|
>
|
|
<PersianNumber number={getTomorrowPersianDate()} />
|
|
</div>
|
|
</div>
|
|
|
|
{siftsData?.map((e, index) => (
|
|
<div className="mt-3">
|
|
<div
|
|
className={`bg-gray-200 p-2 rounded-full flex justify-between ${
|
|
activeShifPlan == index ? "bg-gray-300 " : "bg-gray-200 "
|
|
} `}
|
|
>
|
|
<div
|
|
className="flex w-full justify-between"
|
|
onClick={() =>
|
|
handleOpenShift(
|
|
e?.isCompleted,
|
|
e?.id,
|
|
index,
|
|
e?.hasCurrentShiftPlan
|
|
)
|
|
}
|
|
>
|
|
<p className="mb-0">{e?.title} </p>
|
|
<div className="flex">
|
|
<div
|
|
className={`bg-gray-400 rounded-full mr-1 ${
|
|
e?.isCompleted
|
|
? "w-[30px] h-[30px] text-center pt-[2px]"
|
|
: ""
|
|
}`}
|
|
>
|
|
<p className="mb-0 text-sm p-1 text-white ">
|
|
{" "}
|
|
<PersianNumber
|
|
number={e?.totalActivitiesCount}
|
|
style="mx-1 text-base"
|
|
/>
|
|
{!e?.isCompleted && "فعالیت"}
|
|
</p>
|
|
</div>
|
|
|
|
{e?.undoneActivitiesCount != 0 && (
|
|
<div className="bg-red-700 w-[30px] h-[30px] rounded-full mr-1">
|
|
<p className="mb-0 text-sm p-1 text-white text-center mt-[2px]">
|
|
{" "}
|
|
<PersianNumber
|
|
number={e?.undoneActivitiesCount}
|
|
style="mx-1 text-base"
|
|
/>
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className={` ${e?.isCompleted ? "w-[170px]" : ""}`}>
|
|
{e?.isCompleted && (
|
|
<div
|
|
className="bg-sky-600 w-fit px-2 h-[30px] rounded-full mr-1 !z-50 relative"
|
|
onClick={() =>
|
|
handleGoToReport(e.title, e.currentShiftPlanId)
|
|
}
|
|
>
|
|
<p className="mb-0 text-sm p-1 text-white text-center mt-[2px]">
|
|
{" "}
|
|
گزارش شیفت{" "}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{activeShifPlan == index && (
|
|
<>
|
|
<InfiniteScroll
|
|
dataLength={activitiesData.length}
|
|
next={handleInfiniteNextFetchActivity}
|
|
hasMore={!stopGetActivities}
|
|
>
|
|
{activitiesData?.map((e) => (
|
|
<ActivityCardCloseShift data={e} />
|
|
))}
|
|
</InfiniteScroll>
|
|
|
|
<div className=" mt-5">
|
|
<div className=" p-3 relative top-[20px] ">
|
|
<Slider
|
|
min={0}
|
|
max={100}
|
|
defaultValue={[50]}
|
|
step={10}
|
|
handleStyle={[circularHandleStyle, circularHandleStyle]}
|
|
railStyle={railStyle}
|
|
trackStyle={[trackStyle, trackStyle]}
|
|
onChange={(e) => setCloseShiftScore(e)}
|
|
/>
|
|
</div>
|
|
|
|
<Buttonbriz
|
|
title={` بستن شیفت با امتیاز ${closeShiftScore}`}
|
|
color="PRIMARY"
|
|
icon="CHECK"
|
|
buttonEvent={() => handleCloseShift()}
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CompleteShift;
|