web/plugins/BottomSheet/BottomFilterActivities.jsx

128 lines
4.0 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 CheckBoxBriz from "plugins/CheckBoxBriz/page";
import Buttonbriz from "plugins/Buttonbriz/page";
import { toast } from "react-toastify";
import moment from "jalali-moment";
import HasPermission from "plugins/HasPermission/page";
import PersianNumber from "plugins/PersianNumber";
const BottomFilterActivities = ({
dateQueryFilterValue,
setDateQueryFilterValue,
activeStaffId,
setActiveStaff,
}) => {
const CTX = useContext(AppContext);
const handleFilterActivity = (num) => {
setDateQueryFilterValue(num);
};
const handleChangeFilter = () => {
setActiveStaff(-1);
CTX.GetUserStaff(dateQueryFilterValue);
// CTX.GetActivity(null, null, 0, dateQueryFilterValue, activeStaffId);
CTX.setBottomFilterActivitiesOpen(false);
CTX.setStopGetActivities(false);
CTX.setPageGetActivity(0);
};
return (
<BottomSheet
// onSpringStart={(e) => handleBottomSheetCreateRole(e)}
open={CTX.state.BottomFilterActivitiesOpen}
onDismiss={() => CTX.setBottomFilterActivitiesOpen(false)}
blocking={true}
>
<div className="text-center py-2 bg-secondary-950 ">
<p className="mb-0 text-primary-300 relative top-[-5px]">
فیلتر اکتیویتی
</p>
</div>
<div className="bg-body-100 p-3 ">
<div
className={`rounded-xl border-[1px] border-gray-200 p-3 m-2 tr03 ${
dateQueryFilterValue == 2 ? " bg-primary-100" : "bg-gray-100 "
}`}
onClick={() => handleFilterActivity(2)}
>
<p className="mb-0 text-right">
اکتیویتی های دیروز
<small className="mr-2">
<PersianNumber
number={moment()
.locale("fa")
.subtract(1, "day")
.format("D MMMM YYYY")}
style="mx-1 text-sm !text-gray-600"
/>
</small>
</p>
</div>
<div
className={`rounded-xl border-[1px] border-gray-200 p-3 m-2 tr03 ${
dateQueryFilterValue == 1 ? " bg-primary-100" : "bg-gray-100 "
}`}
onClick={() => handleFilterActivity(1)}
>
<p className="mb-0 text-right">
اکتیویتی های امروز
<small className="mr-2">
<PersianNumber
number={moment().locale("fa").format("D MMMM YYYY")}
style="mx-1 text-sm !text-gray-600"
/>
</small>
</p>
</div>
<div
className={`rounded-xl border-[1px] border-gray-200 p-3 m-2 tr03 ${
dateQueryFilterValue == 3 ? " bg-primary-100" : "bg-gray-100 "
}`}
onClick={() => handleFilterActivity(3)}
>
<p className="mb-0 text-right">
اکتیویتی های فردا
<small className="mr-2">
<PersianNumber
number={moment()
.locale("fa")
.add(1, "day")
.format("D MMMM YYYY")}
style="mx-1 text-sm !text-gray-600"
/>
</small>
</p>
</div>
<div
className={`rounded-xl border-[1px] border-gray-200 p-3 m-2 tr03 ${
dateQueryFilterValue == 12 ? " bg-primary-100" : "bg-gray-100 "
}`}
onClick={() => handleFilterActivity(12)}
>
<p className="mb-0 text-right">اکتیویتی های هفته</p>
</div>
<Buttonbriz
title="اعمال فیلتر"
color="PRIMARY"
icon="CHECK"
buttonEvent={() => handleChangeFilter()}
/>
</div>
</BottomSheet>
);
};
export default BottomFilterActivities;