334 lines
11 KiB
JavaScript
334 lines
11 KiB
JavaScript
"use client";
|
||
|
||
import React, { useContext, useEffect, useState } from "react";
|
||
import moment from "jalali-moment";
|
||
import "moment/locale/fa"; // Set the locale to Farsi (Persian)
|
||
import AppHeader from "@comp/AppHeader/page";
|
||
import { Swiper, SwiperSlide } from "swiper/react";
|
||
import PersianNumber from "plugins/PersianNumber";
|
||
import { PersianD, PersianDay, PersianM, holidays } from "datacalender";
|
||
import AppContext from "@ctx/AppContext";
|
||
import Input from "plugins/Input/page";
|
||
import { toast } from "react-toastify";
|
||
import Avatar from "boring-avatars";
|
||
import BottomManageShift from "plugins/BottomSheet/BottomManageShift";
|
||
|
||
const Calendar = () => {
|
||
const CTX = useContext(AppContext);
|
||
const shiftsData = CTX.state.shiftsData;
|
||
const searchUserChoose = CTX.state.searchUserChoose;
|
||
const usersData = CTX.state.usersData;
|
||
|
||
console.log("usersData", usersData);
|
||
|
||
const [searchUserCurrntData, setSearchUserCurrntData] = useState([]);
|
||
const [daysUntilEnd, setDaysUntilEnd] = useState([]);
|
||
const [selectDay, setSelectDay] = useState(null);
|
||
const [selectShift, setselectShift] = useState(0);
|
||
const [manageShiftEmployeesData, setManageShiftEmployeesData] = useState([]);
|
||
|
||
const today = moment().format("jYYYY/jM/jD"); // Get the current Jalali date
|
||
const todayJustDay = moment().format("jD"); // Get the current Jalali date
|
||
|
||
// Find the end of the current month
|
||
const endOfMonth = moment(today, "jYYYY/jM/jD").endOf("jMonth");
|
||
|
||
const daysInCurrentMonth = moment(today, "jYYYY/jM/jD")
|
||
.endOf("jMonth")
|
||
.jDate();
|
||
|
||
const daysEndOfMonth = () => {
|
||
const days = [];
|
||
for (let i = -1; i < daysInCurrentMonth - todayJustDay + 1; i++) {
|
||
const currentDate = moment(today, "jYYYY/jM/jD").add(i, "days");
|
||
const isToday = currentDate.isSame(moment(), "day");
|
||
days.push({
|
||
checkDay: currentDate.format("jYYYY/jM/jD"),
|
||
date: currentDate.format("jD / jM"),
|
||
dayOfWeek: currentDate.format("dddd"),
|
||
today: isToday, // Set today: true if it's the current date
|
||
});
|
||
}
|
||
|
||
return setDaysUntilEnd(days);
|
||
};
|
||
|
||
console.log("daysUntilEnd", daysUntilEnd[selectDay]);
|
||
|
||
const handleManageShiftEmployeesOpen = (e) => {
|
||
setManageShiftEmployeesData(
|
||
usersData.map((item) => ({
|
||
key:
|
||
item.firstName +
|
||
" " +
|
||
item.lastName +
|
||
"( " +
|
||
item.roleNames[0] +
|
||
" )",
|
||
|
||
value: item.userId,
|
||
}))
|
||
);
|
||
};
|
||
|
||
const deleteSearchUser = (id) => {
|
||
CTX.setSearchUserChoose(searchUserChoose.filter((el) => el !== id));
|
||
};
|
||
|
||
useEffect(() => {
|
||
daysEndOfMonth();
|
||
setSelectDay(1);
|
||
CTX.GetShifts();
|
||
CTX.GetUsers();
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
// if (!!CTX.GetUsers()) {
|
||
//
|
||
// }
|
||
handleManageShiftEmployeesOpen();
|
||
}, [usersData]);
|
||
|
||
console.log("searchUserChooseqqqqqqqqqqqqqqqqqqqqqqqqq", searchUserChoose);
|
||
|
||
console.log(daysUntilEnd);
|
||
|
||
return (
|
||
<div className="pb-20">
|
||
<AppHeader
|
||
title=" شیفت بندی های هفتگی"
|
||
sub={`شیفت بندی
|
||
تا
|
||
${daysInCurrentMonth}
|
||
${PersianM(moment().format("jM"))}
|
||
|
||
`}
|
||
icon2={true}
|
||
iconName2="ARROW"
|
||
iconHref2="/home"
|
||
/>
|
||
|
||
<div className="bg-body-100 relative top-[-30px] rounded-t-3xl overflow-hidden p-4 rtl">
|
||
<Swiper
|
||
spaceBetween={10}
|
||
slidesPerView={4.3}
|
||
onSlideChange={() => console.log("slide change")}
|
||
onSwiper={(swiper) => console.log(swiper)}
|
||
>
|
||
{daysUntilEnd?.map((e, index) => (
|
||
<SwiperSlide>
|
||
<div
|
||
className={`h-[70px] tr03 ${
|
||
selectDay == index ? "bg-white rounded-xl" : " opacity-70"
|
||
}`}
|
||
key={index}
|
||
onClick={() => {
|
||
setSelectDay(index);
|
||
console.log(index);
|
||
}}
|
||
>
|
||
<div className="py-2">
|
||
<p className="mb-0 text-center ">
|
||
<PersianNumber
|
||
number={e.date}
|
||
style={`text-[20px] ${
|
||
selectDay == index
|
||
? "font-bold"
|
||
: !!holidays.y1402?.find((b) => b.date == e.checkDay)
|
||
? "text-red-500"
|
||
: ""
|
||
} `}
|
||
/>
|
||
</p>
|
||
</div>
|
||
|
||
<div
|
||
className={`w-fit mx-auto sahdow px-1 rounded-full ${
|
||
selectDay == index
|
||
? "bg-secondary-100 text-gray-100"
|
||
: !!holidays.y1402?.find((b) => b.date == e.checkDay)
|
||
? "bg-transparent text-red-500"
|
||
: "bg-white text-gray-500"
|
||
}`}
|
||
>
|
||
<p className="mb-0 text-center text-sm ">
|
||
{/* {PersianD.find((i) => i == e.dayOfWeek)} */}
|
||
{PersianDay(e.dayOfWeek)}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</SwiperSlide>
|
||
))}
|
||
</Swiper>
|
||
</div>
|
||
|
||
<div className="bg-body-100 relative top-[-30px] rounded-t-3xl overflow-hidden rtl">
|
||
{shiftsData.length > 0 ? (
|
||
<div
|
||
className="flex overflow-auto whitespace-nowrap"
|
||
id="swich-shifts"
|
||
>
|
||
{shiftsData.map((e, index) => (
|
||
<div
|
||
className={` shadow-sm relative block max-w-max mx-2 rounded-full mt-2 px-4 py-2 ${
|
||
selectShift == index
|
||
? "bg-secondary-100 text-white"
|
||
: "bg-white opacity-60"
|
||
}`}
|
||
onClick={() => setselectShift(index)}
|
||
>
|
||
<p className="mb-0">{e?.title}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<div className="flex justify-center py-5">
|
||
<div className="bg-white shadow mt-5 w-fit rounded-full p-4">
|
||
چیزی یافت نشد
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="bg-white relative top-[15px] rounded-t-3xl p-4 rtl pt-6 h-screen sm:h-auto ">
|
||
<div className="mx-3 flex justify-center">
|
||
<div className=" bg-gray-100 rounded-xl w-fit mr-0 p-3">
|
||
<p className="mb-0 text-right text-sm rtl opacity-80">
|
||
ویرایش برای{" "}
|
||
<small className=" text-sm font-bold">
|
||
{shiftsData && shiftsData[selectShift]?.title}
|
||
</small>{" "}
|
||
تاریخ{" "}
|
||
<small className=" text-sm font-bold text-primary-300 bg-white px-2 rounded-full">
|
||
<PersianNumber
|
||
number={daysUntilEnd && daysUntilEnd[selectDay]?.checkDay}
|
||
/>
|
||
</small>{" "}
|
||
میباشد
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className=" m-1">
|
||
<Input
|
||
lable="جستجوی افراد"
|
||
id="SearchUser-id"
|
||
name="SearchUser"
|
||
type={"text"}
|
||
value={searchUserCurrntData}
|
||
inputEvent={(e) => {
|
||
setSearchUserCurrntData(e.target.value);
|
||
|
||
if (!!searchUserChoose.find((b) => b == e.target.value)) {
|
||
toast.error("نقش تکراری است", {
|
||
position: "bottom-right",
|
||
closeOnClick: true,
|
||
});
|
||
} else {
|
||
CTX.setSearchUserChoose((current) => [
|
||
...current,
|
||
e.target.value,
|
||
]);
|
||
}
|
||
}}
|
||
style="text-right"
|
||
select={true}
|
||
selectData={manageShiftEmployeesData}
|
||
theme={1}
|
||
defaultValue={"انتخاب کنید"}
|
||
/>
|
||
</div>
|
||
|
||
<div
|
||
className={`flex j flex-wrap mt-3 rtl ${
|
||
searchUserChoose.length > 0 ? "" : "justify-center"
|
||
}`}
|
||
>
|
||
{searchUserChoose.length > 0 ? (
|
||
searchUserChoose.map((e) => (
|
||
<div className="flex bg-gray-100 p-1 rounded-full m-1 justify-start">
|
||
<div
|
||
className="w-[30px] h-[30px] rounded-full bg-gray-400 "
|
||
onClick={() => deleteSearchUser(e)}
|
||
>
|
||
<Avatar
|
||
size={30}
|
||
name={usersData.find((b) => b.userId == e)?.firstName}
|
||
variant="beam"
|
||
colors={["#9d9f88", "#83af96", "#b2de93"]}
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<p className="mb-0 px-3 text-sm mt-1">
|
||
{usersData.find((b) => b.userId == e)?.firstName}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
))
|
||
) : (
|
||
<div className="flex justify-center py-5">
|
||
<div className="bg-white shadow mt-5 w-fit rounded-full p-4">
|
||
چیزی یافت نشد
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="flex jc mt-10">
|
||
<button className="btn btn-primary inline-block w-full">
|
||
{" "}
|
||
ثبت نهایی شیفت
|
||
</button>
|
||
<button
|
||
className="btn bg-transparent border-[2px] border-info-100 border-dashed text-info-100 text-[12px] mx-2 w-full"
|
||
onClick={() => CTX.setBottomManageShiftOpen(true)}
|
||
>
|
||
تغییر حالت تسک ها{" "}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<BottomManageShift />
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Calendar;
|
||
|
||
{
|
||
/* {shiftsData.map((e, index) => (
|
||
<div
|
||
className={`bg-gray-200 p-5 rounded-3xl relative w-full pb-20 border-[4px] border-white !z-[${index}] `}
|
||
style={{ top: `${27 * (shiftsData.length - 1 - index)}px` }}
|
||
>
|
||
<div className="flex rtl">
|
||
<div className="w-[40px] h-[40px] bg-primary-300 rounded-full">
|
||
<svg
|
||
width="15"
|
||
height="15"
|
||
viewBox="0 0 150 88"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
className="mx-auto mt-[10px]"
|
||
>
|
||
<path
|
||
d="M137.5 75L75 12.5L12.5 75"
|
||
stroke="white"
|
||
stroke-width="25"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
|
||
<div className="mx-3 ">
|
||
<p className="mb-0 font-bold text-xl text-right">{e?.title}</p>
|
||
<p className="mb-0 text-sm text-right">
|
||
{e?.title} {}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))} */
|
||
}
|