378 lines
12 KiB
JavaScript
378 lines
12 KiB
JavaScript
"use client";
|
||
|
||
import React, { useContext, useEffect, useRef, useState } from "react";
|
||
import { BottomSheet } from "react-spring-bottom-sheet";
|
||
import Input from "plugins/Input/page";
|
||
import AppContext from "@ctx/AppContext";
|
||
import SimpleReactValidator from "simple-react-validator";
|
||
import { toast } from "react-toastify";
|
||
import Buttonbriz from "plugins/Buttonbriz/page";
|
||
import { useLocale, useTranslations } from "next-intl";
|
||
|
||
const BottomSheetCreateShifts = (props) => {
|
||
const CTX = useContext(AppContext);
|
||
const t = useTranslations("BottomSheet");
|
||
const locale = useLocale();
|
||
const isRTL = locale === "fa";
|
||
|
||
const [title, setTitle] = useState("");
|
||
const [description, setDescription] = useState("");
|
||
const [dayOfWeeksCurrent, setDayOfWeeksCurrent] = useState("");
|
||
const [routineId, setRoutineId] = useState([]);
|
||
const [routineIdSelectData, setRoutineIdSelectData] = useState("");
|
||
|
||
const [, forceUpdate] = useState();
|
||
|
||
const dayOfWeeksChoose = CTX.state.dayOfWeeksChoose;
|
||
const startAtTimeShift = CTX.state.startAtTimeShift;
|
||
const endAtTimeShift = CTX.state.endAtTimeShift;
|
||
const goToEditShift = CTX.state.goToEditShift;
|
||
const idEditShift = CTX.state.idEditShift;
|
||
const shiftData = CTX.state.shiftData;
|
||
const routinesData = CTX.state.routinesData;
|
||
|
||
const validator = useRef(
|
||
new SimpleReactValidator({
|
||
messages: {
|
||
required: "پر کردن این فیلد الزامی میباشد",
|
||
},
|
||
element: (message) => (
|
||
<>
|
||
<div className="text-right px-1 ">
|
||
<small className="text-red-600 t-ig-small ">{message}</small>
|
||
</div>
|
||
</>
|
||
),
|
||
})
|
||
);
|
||
|
||
const week = [
|
||
{ key: isRTL ? "شنبه" : "Saturday ", value: 6 },
|
||
{ key: isRTL ? "یکشنبه" : "Sunday ", value: 0 },
|
||
{ key: isRTL ? "دوشنبه" : "Monday ", value: 1 },
|
||
{ key: isRTL ? "سه شنبه" : "Tuesday ", value: 2 },
|
||
{ key: isRTL ? "چهار شنبه" : "Wednesday ", value: 3 },
|
||
{ key: isRTL ? "پنج شنبه" : "Thursday ", value: 4 },
|
||
{ key: isRTL ? "جمعه" : "Friday ", value: 5 },
|
||
];
|
||
|
||
const clear = () => {
|
||
setDayOfWeeksCurrent("");
|
||
setDescription("");
|
||
setTitle("");
|
||
setRoutineId([]);
|
||
CTX.setEndAtTimeShift(["00", "00"]);
|
||
CTX.setStartAtTimeShift(["00", "00"]);
|
||
CTX.setDayOfWeeksChoose([]);
|
||
};
|
||
|
||
const body = {
|
||
title,
|
||
description,
|
||
endAt: endAtTimeShift[0] + ":" + endAtTimeShift[1] + ":00",
|
||
startAt: startAtTimeShift[0] + ":" + startAtTimeShift[1] + ":00",
|
||
dayOfWeeks: dayOfWeeksChoose,
|
||
routines: routineId,
|
||
};
|
||
|
||
const bodyUpdate = {
|
||
title,
|
||
description,
|
||
endAt: endAtTimeShift[0] + ":" + endAtTimeShift[1] + ":00",
|
||
startAt: startAtTimeShift[0] + ":" + startAtTimeShift[1] + ":00",
|
||
dayOfWeeks: dayOfWeeksChoose,
|
||
id: shiftData.id,
|
||
routines: routineId,
|
||
};
|
||
const handleCreateShift = (update) => {
|
||
if (validator.current.allValid()) {
|
||
if (update == "UPDATE") {
|
||
CTX.UpdateShift(bodyUpdate);
|
||
} else {
|
||
CTX.CreateShift(body);
|
||
}
|
||
} else {
|
||
toast.error("پرکردن همه ی فیلد ها واجب است", {
|
||
position: "bottom-right",
|
||
autoClose: 2000,
|
||
hideProgressBar: false,
|
||
closeOnClick: true,
|
||
pauseOnHover: true,
|
||
draggable: true,
|
||
progress: undefined,
|
||
});
|
||
|
||
validator.current.showMessages();
|
||
forceUpdate(1);
|
||
}
|
||
};
|
||
|
||
const handleBottomSheetCreateShift = (e) => {
|
||
setRoutineIdSelectData(
|
||
routinesData.map((item) => ({
|
||
key: item.name,
|
||
value: item.id,
|
||
}))
|
||
);
|
||
|
||
if (e.type == "OPEN") {
|
||
if (goToEditShift) {
|
||
CTX.GetShift(idEditShift);
|
||
}
|
||
} else if (e.type == "CLOSE") {
|
||
CTX.setGoToEditShift(false);
|
||
CTX.setIdEditShift(null);
|
||
CTX.setShiftData([]);
|
||
// clear();
|
||
}
|
||
};
|
||
|
||
const deleteRole = (value) => {
|
||
CTX.setDayOfWeeksChoose(dayOfWeeksChoose.filter((el) => el !== value));
|
||
};
|
||
|
||
useEffect(() => {
|
||
if (goToEditShift) {
|
||
setTitle(shiftData.title);
|
||
setDescription(shiftData.description);
|
||
CTX.setStartAtTimeShift([
|
||
shiftData.startAt.split(":")[0],
|
||
shiftData.startAt.split(":")[1],
|
||
]);
|
||
CTX.setEndAtTimeShift([
|
||
shiftData.endAt.split(":")[0],
|
||
shiftData.endAt.split(":")[1],
|
||
]);
|
||
setRoutineId(shiftData.routines.map((item) => item.routineId));
|
||
|
||
CTX.setDayOfWeeksChoose(shiftData.days);
|
||
}
|
||
}, [shiftData]);
|
||
|
||
return (
|
||
<BottomSheet
|
||
onSpringStart={(e) => handleBottomSheetCreateShift(e)}
|
||
open={CTX.state.BottomSheetCreateShiftsOpen}
|
||
onDismiss={() => CTX.setBottomSheetCreateShiftsOpen(false)}
|
||
blocking={true}
|
||
>
|
||
<div className="text-center py-2 bg-secondary-950 ">
|
||
<p className="mb-0 text-primary-300 relative top-[-5px]">
|
||
{t("BottomSheetCreateShiftsTitle")}{" "}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="bg-body-100 p-4 ">
|
||
<div className="">
|
||
<Input
|
||
lable={t("BottomSheetCreateShiftsShiftNameInput")}
|
||
id="title-id"
|
||
name="title"
|
||
type={"text"}
|
||
value={title}
|
||
inputEvent={(e) => {
|
||
setTitle(e.target.value);
|
||
validator.current.showMessageFor("title");
|
||
}}
|
||
style="text-right"
|
||
validator={true}
|
||
validatorData={validator.current.message(
|
||
"title",
|
||
title,
|
||
"required"
|
||
)}
|
||
/>
|
||
</div>
|
||
|
||
<div className="">
|
||
<Input
|
||
lable={t("BottomSheetCreateShiftsStartTimeInput")}
|
||
id="startAtTimeShift-id"
|
||
name="startAtTimeShift"
|
||
type={"text"}
|
||
value={startAtTimeShift[0] + ":" + startAtTimeShift[1]}
|
||
inputEvent={(e) => {
|
||
validator.current.showMessageFor("startAt");
|
||
}}
|
||
inputFocus={(e) => {
|
||
if (goToEditShift) {
|
||
toast.error("ویرایش ساعت ممکن نیست", {
|
||
position: "bottom-right",
|
||
closeOnClick: true,
|
||
});
|
||
} else {
|
||
CTX.setOpenTimePicker(true);
|
||
CTX.setBottomSheetCreateShiftsOpen(false);
|
||
CTX.setTimePickerOrder("CREATE-SHIFT-START");
|
||
e.preventDefault();
|
||
}
|
||
}}
|
||
style="text-right"
|
||
validator={true}
|
||
validatorData={validator.current.message(
|
||
"startAtTimeShift",
|
||
startAtTimeShift,
|
||
"required"
|
||
)}
|
||
readOnly={true}
|
||
/>
|
||
</div>
|
||
|
||
<div className="">
|
||
<Input
|
||
lable={t("BottomSheetCreateShiftsEndTimeInput")}
|
||
id="endAtTimeShift-id"
|
||
name="endAtTimeShift"
|
||
type={"text"}
|
||
value={endAtTimeShift[0] + ":" + endAtTimeShift[1]}
|
||
inputEvent={(e) => {
|
||
validator.current.showMessageFor("startAt");
|
||
}}
|
||
inputFocus={(e) => {
|
||
if (goToEditShift) {
|
||
toast.error("ویرایش ساعت ممکن نیست", {
|
||
position: "bottom-right",
|
||
closeOnClick: true,
|
||
});
|
||
} else {
|
||
CTX.setOpenTimePicker(true);
|
||
CTX.setBottomSheetCreateShiftsOpen(false);
|
||
CTX.setTimePickerOrder("CREATE-SHIFT-END");
|
||
e.preventDefault();
|
||
}
|
||
}}
|
||
style="text-right"
|
||
validator={true}
|
||
validatorData={validator.current.message(
|
||
"endAtTimeShift",
|
||
endAtTimeShift,
|
||
"required"
|
||
)}
|
||
readOnly={true}
|
||
/>
|
||
</div>
|
||
|
||
<div className="">
|
||
<Input
|
||
lable={t("BottomSheetCreateShiftsShiftInWeekInput")}
|
||
id="dayOfWeeksCurrent-id"
|
||
name="dayOfWeeksCurrent"
|
||
type={"text"}
|
||
value={dayOfWeeksCurrent}
|
||
inputEvent={(e) => {
|
||
setDayOfWeeksCurrent(e.target.value);
|
||
|
||
if (!!dayOfWeeksChoose.find((b) => b == e.target.value)) {
|
||
toast.error("روز تکراری است", {
|
||
position: "bottom-right",
|
||
closeOnClick: true,
|
||
});
|
||
} else {
|
||
CTX.setDayOfWeeksChoose((current) => [
|
||
...current,
|
||
parseInt(e.target.value),
|
||
]);
|
||
}
|
||
}}
|
||
style="text-right"
|
||
select={true}
|
||
selectData={[
|
||
{ key: isRTL ? "شنبه" : "Saturday ", value: parseInt(6) },
|
||
{ key: isRTL ? "یکشنبه" : "Sunday", value: 0 },
|
||
{ key: isRTL ? "دوشنبه" : "Monday", value: 1 },
|
||
{ key: isRTL ? "سه شنبه" : "Tuesday", value: 2 },
|
||
{ key: isRTL ? "چهار شنبه" : "Wednesday", value: 3 },
|
||
{ key: isRTL ? "پنج شنبه" : "Thursday", value: 4 },
|
||
{ key: isRTL ? "جمعه" : "Friday", value: 5 },
|
||
]}
|
||
defaultValue={t("chooseText")}
|
||
/>
|
||
</div>
|
||
<div className="flex flex-wrap mt-3 rtl">
|
||
{dayOfWeeksChoose &&
|
||
dayOfWeeksChoose.map((e) => (
|
||
<div className="flex bg-gray-300 p-1 rounded-full m-1 justify-start">
|
||
<div
|
||
className="w-[30px] h-[30px] rounded-full bg-gray-400 "
|
||
onClick={() => deleteRole(e)}
|
||
></div>
|
||
|
||
<div>
|
||
<p className="mb-0 px-3 text-sm mt-1">
|
||
{week?.find((b) => b.value == e).key}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div className="">
|
||
<Input
|
||
lable={t("BottomSheetCreateShiftsRutineShiftInput")}
|
||
id="routineId-id"
|
||
name="routineId"
|
||
type={"text"}
|
||
inputEvent={(e) => {
|
||
setRoutineId([e.target.value]);
|
||
}}
|
||
style="text-right"
|
||
validatorData={validator.current.message(
|
||
"routineId",
|
||
routineId[0],
|
||
"required"
|
||
)}
|
||
select={true}
|
||
selectData={routineIdSelectData}
|
||
defaultValue={t("chooseText")}
|
||
/>
|
||
</div>
|
||
|
||
<div className="flex flex-wrap mt-3 rtl">
|
||
<div className="flex bg-gray-300 p-1 rounded-full m-1 justify-start">
|
||
<div>
|
||
<p className="mb-0 px-3 text-sm mt-1">
|
||
{routinesData?.find((b) => b.id == routineId[0])?.name}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="">
|
||
<Input
|
||
lable={t("BottomSheetCreateShiftsDescInput")}
|
||
id="description-id"
|
||
name="description"
|
||
type={"text"}
|
||
value={description}
|
||
inputEvent={(e) => {
|
||
setDescription(e.target.value);
|
||
validator.current.showMessageFor("description");
|
||
}}
|
||
textarea={true}
|
||
style="text-right"
|
||
/>
|
||
</div>
|
||
{goToEditShift ? (
|
||
<Buttonbriz
|
||
title={t("BottomSheetCreateShiftsEditButton")}
|
||
color="INFO"
|
||
icon="CHECK"
|
||
buttonEvent={() => handleCreateShift("UPDATE")}
|
||
subButton={true}
|
||
subButtonTitle={t("BottomSheetCreateShiftsDeleteButton")}
|
||
subButtonEvent={() => CTX.DeleteShift(idEditShift)}
|
||
/>
|
||
) : (
|
||
<Buttonbriz
|
||
title={t("BottomSheetCreateShiftsRegButton")}
|
||
color="PRIMARY"
|
||
icon="CHECK"
|
||
buttonEvent={() => handleCreateShift()}
|
||
/>
|
||
)}
|
||
</div>
|
||
</BottomSheet>
|
||
);
|
||
};
|
||
|
||
export default BottomSheetCreateShifts;
|