web/src/app/tasks/page.jsx

268 lines
17 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

"use client";
import AppHeader from "@comp/AppHeader/page";
import AppContext from "@ctx/AppContext";
import BottomSheetCreateRoutine from "plugins/BottomSheet/BottomSheetCreateRoutine";
import PersianNumber from "plugins/PersianNumber";
import React, { useContext, useEffect, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import ActivityCard from "@comp/TaskPage/ActivityCard/page";
import TasksCard from "@comp/TaskPage/TasksCard/page";
import moment from "jalali-moment";
import HasPermission from "plugins/HasPermission/page";
import GoBack from "plugins/GoBack/page";
import InfiniteScroll from "react-infinite-scroll-component";
import Loading from "plugins/Loading/page";
import { useLongPress } from "@uidotdev/usehooks";
import BottomFilterActivities from "plugins/BottomSheet/BottomFilterActivities";
const page = () => {
const CTX = useContext(AppContext);
const router = useRouter();
const activities = CTX.state.activitiesData;
const tasksData = CTX.state.tasksData;
const permissions = CTX.state.profile?.permissions;
const pageGetTasks = CTX.state.pageGetTasks;
const pageGetActivity = CTX.state.pageGetActivity;
const stopGetTasks = CTX.state.stopGetTasks;
const stopGetActivities = CTX.state.stopGetActivities;
const typeTask = CTX.state.typeTask;
console.log("pageGetTasks", pageGetTasks);
useEffect(() => {
CTX.GetTasks(pageGetTasks);
CTX.GetActivity(
moment().locale("fa").startOf("day").unix() * 1000,
null,
pageGetActivity
);
}, []);
const handleInfiniteNextFetchTask = () => {
CTX.setPageGetTasks((e) => e + 1);
CTX.GetTasks(pageGetTasks + 1);
};
const handleInfiniteNextFetchActivity = () => {
CTX.setPageGetActivity((e) => e + 1);
CTX.GetActivity(
moment().locale("fa").startOf("day").unix() * 1000,
null,
pageGetActivity + 1
);
};
console.log(activities.length);
return (
<div className="pb-20">
<AppHeader
title=" مدیریت فعالیت مجموعه"
sub=" مدیریت فعالیت ها"
icon1={!!HasPermission("ManageTasks", permissions) ? true : false}
iconName1="PLUS"
iconHref1="/tasks/add-task?new=true"
iconEvent1={() => {
CTX.setTaskData([]);
CTX.setIdEditTask("");
CTX.setGoToEditTask(false);
}}
icon2={true}
iconName2="ARROW"
iconHref2="#"
iconEvent2={() => {
GoBack();
}}
/>
<div className="bg-body-100 relative top-[-30px] rounded-t-3xl overflow-hidden p-4 rtl ">
{!!HasPermission("ManageTasks", permissions) && (
<div className="flex bg-[#e066150e] rounded-full rtl ">
<div
className={` p-2 w-full rounded-3xl tr03 ${
CTX.state.typeTask == 0 ? "bg-secondary-100" : ""
} `}
onClick={() => CTX.setTypeTask(0)}
>
<p
className={`mb-0 text-center text-sm ${
CTX.state.typeTask == 0 ? "text-white " : "opacity-70"
}`}
>
تسک های روزانه
</p>
</div>
<div
className={` p-2 w-full rounded-3xl tr03 ${
CTX.state.typeTask == 1 ? "bg-secondary-100" : ""
} `}
onClick={() => CTX.setTypeTask(1)}
>
<p
className={`mb-0 text-center text-sm ${
CTX.state.typeTask == 1 ? "text-white " : "opacity-70"
}`}
>
اکتیویتی های روزانه
</p>
</div>
</div>
)}
<div
className="flex justify-start"
onClick={() => CTX.setBottomFilterActivitiesOpen(true)}
>
<div className="border-2 border-gray-300 px-2 py-1 w-fit rounded-full flex mt-2">
<div>
<svg
width="15"
height="15"
viewBox="0 0 200 226"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M62.5 25.5004C59.1848 25.5004 56.0054 26.8173 53.6612 29.1615C51.317 31.5057 50 34.6852 50 38.0004C50 41.3156 51.317 44.495 53.6612 46.8392C56.0054 49.1834 59.1848 50.5004 62.5 50.5004C65.8152 50.5004 68.9946 49.1834 71.3388 46.8392C73.683 44.495 75 41.3156 75 38.0004C75 34.6852 73.683 31.5057 71.3388 29.1615C68.9946 26.8173 65.8152 25.5004 62.5 25.5004ZM27.125 25.5004C29.7075 18.1812 34.4967 11.8433 40.8325 7.36023C47.1683 2.87717 54.7386 0.469727 62.5 0.469727C70.2614 0.469727 77.8317 2.87717 84.1675 7.36023C90.5033 11.8433 95.2925 18.1812 97.875 25.5004H187.5C190.815 25.5004 193.995 26.8173 196.339 29.1615C198.683 31.5057 200 34.6852 200 38.0004C200 41.3156 198.683 44.495 196.339 46.8392C193.995 49.1834 190.815 50.5004 187.5 50.5004H97.875C95.2925 57.8195 90.5033 64.1574 84.1675 68.6405C77.8317 73.1235 70.2614 75.531 62.5 75.531C54.7386 75.531 47.1683 73.1235 40.8325 68.6405C34.4967 64.1574 29.7075 57.8195 27.125 50.5004H12.5C9.18479 50.5004 6.00537 49.1834 3.66117 46.8392C1.31696 44.495 0 41.3156 0 38.0004C0 34.6852 1.31696 31.5057 3.66117 29.1615C6.00537 26.8173 9.18479 25.5004 12.5 25.5004H27.125ZM137.5 100.5C134.185 100.5 131.005 101.817 128.661 104.162C126.317 106.506 125 109.685 125 113C125 116.316 126.317 119.495 128.661 121.839C131.005 124.183 134.185 125.5 137.5 125.5C140.815 125.5 143.995 124.183 146.339 121.839C148.683 119.495 150 116.316 150 113C150 109.685 148.683 106.506 146.339 104.162C143.995 101.817 140.815 100.5 137.5 100.5ZM102.125 100.5C104.708 93.1812 109.497 86.8433 115.832 82.3602C122.168 77.8772 129.739 75.4697 137.5 75.4697C145.261 75.4697 152.832 77.8772 159.168 82.3602C165.503 86.8433 170.292 93.1812 172.875 100.5H187.5C190.815 100.5 193.995 101.817 196.339 104.162C198.683 106.506 200 109.685 200 113C200 116.316 198.683 119.495 196.339 121.839C193.995 124.183 190.815 125.5 187.5 125.5H172.875C170.292 132.82 165.503 139.157 159.168 143.64C152.832 148.124 145.261 150.531 137.5 150.531C129.739 150.531 122.168 148.124 115.832 143.64C109.497 139.157 104.708 132.82 102.125 125.5H12.5C9.18479 125.5 6.00537 124.183 3.66117 121.839C1.31696 119.495 0 116.316 0 113C0 109.685 1.31696 106.506 3.66117 104.162C6.00537 101.817 9.18479 100.5 12.5 100.5H102.125ZM62.5 175.5C59.1848 175.5 56.0054 176.817 53.6612 179.162C51.317 181.506 50 184.685 50 188C50 191.316 51.317 194.495 53.6612 196.839C56.0054 199.183 59.1848 200.5 62.5 200.5C65.8152 200.5 68.9946 199.183 71.3388 196.839C73.683 194.495 75 191.316 75 188C75 184.685 73.683 181.506 71.3388 179.162C68.9946 176.817 65.8152 175.5 62.5 175.5ZM27.125 175.5C29.7075 168.181 34.4967 161.843 40.8325 157.36C47.1683 152.877 54.7386 150.47 62.5 150.47C70.2614 150.47 77.8317 152.877 84.1675 157.36C90.5033 161.843 95.2925 168.181 97.875 175.5H187.5C190.815 175.5 193.995 176.817 196.339 179.162C198.683 181.506 200 184.685 200 188C200 191.316 198.683 194.495 196.339 196.839C193.995 199.183 190.815 200.5 187.5 200.5H97.875C95.2925 207.82 90.5033 214.157 84.1675 218.64C77.8317 223.124 70.2614 225.531 62.5 225.531C54.7386 225.531 47.1683 223.124 40.8325 218.64C34.4967 214.157 29.7075 207.82 27.125 200.5H12.5C9.18479 200.5 6.00537 199.183 3.66117 196.839C1.31696 194.495 0 191.316 0 188C0 184.685 1.31696 181.506 3.66117 179.162C6.00537 176.817 9.18479 175.5 12.5 175.5H27.125Z"
fill="#005E2B"
/>
</svg>
</div>
<div className="mr-1">
<p className="mb-0 text-[12px] text-primary-300 font-medium">
فیلــتر
</p>
</div>
</div>
<div className="border-2 border-gray-300 px-2 py-1 w-fit rounded-full flex mt-2 mr-2 opacity-50">
<div>
<svg
width="15"
height="15"
viewBox="0 0 226 227"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0.400391 113.7C0.400391 93.3004 5.50039 74.4004 15.6004 57.1004C25.7004 39.8004 39.4004 26.1004 56.7004 16.0004C74.0004 5.90039 92.8004 0.900391 113.1 0.900391C128.3 0.900391 142.9 3.90039 156.8 9.80039C170.7 15.7004 182.6 23.8004 192.7 33.8004C202.8 43.8004 210.8 55.8004 216.7 69.8004C222.6 83.8004 225.6 98.3004 225.6 113.7C225.6 128.9 222.6 143.5 216.7 157.4C210.8 171.3 202.7 183.3 192.7 193.3C182.7 203.3 170.7 211.3 156.8 217.2C142.9 223.1 128.4 226.1 113.1 226.1C97.8004 226.1 83.1004 223.1 69.2004 217.2C55.3004 211.3 43.3004 203.2 33.2004 193.2C23.1004 183.2 15.2004 171.2 9.20039 157.4C3.20039 143.6 0.400391 129 0.400391 113.7ZM25.2004 113.7C25.2004 137.4 33.8004 158 51.1004 175.5C68.4004 192.8 89.0004 201.4 113.1 201.4C128.9 201.4 143.6 197.5 157 189.6C170.4 181.7 181.2 171.1 189.1 157.6C197 144.1 201 129.5 201 113.7C201 97.9004 197 83.2004 189.1 69.7004C181.2 56.2004 170.5 45.5004 157 37.6004C143.5 29.7004 128.9 25.8004 113.1 25.8004C97.3004 25.8004 82.6004 29.7004 69.2004 37.6004C55.8004 45.5004 45.0004 56.2004 37.0004 69.7004C29.0004 83.2004 25.2004 97.9004 25.2004 113.7ZM104.4 113.7V47.1004C104.4 44.8004 105.2 42.8004 106.8 41.2004C108.4 39.6004 110.4 38.8004 112.7 38.8004C115 38.8004 117 39.6004 118.6 41.2004C120.2 42.8004 121 44.8004 121 47.1004V105.3H158.8C161.1 105.3 163.1 106.1 164.7 107.7C166.3 109.3 167.1 111.3 167.1 113.6C167.1 115.8 166.3 117.8 164.7 119.5C163.1 121.2 161.1 122 158.8 122H114.4C114.1 122.1 113.5 122.1 112.6 122.1C111.501 122.12 110.409 121.915 109.392 121.498C108.375 121.08 107.454 120.459 106.686 119.672C105.918 118.885 105.319 117.949 104.926 116.922C104.533 115.896 104.354 114.799 104.4 113.7Z"
fill="#005D2B"
/>
</svg>
</div>
<div className="mr-1">
<p className="mb-0 text-[12px] text-primary-300 font-medium">
روز خاص
<small className="text-red-500">(به زودی)</small>
</p>
</div>
</div>
<div className="border-2 border-gray-300 px-2 py-1 w-fit rounded-full flex mt-2 mr-2 opacity-50">
<div>
<svg
width="15"
height="15"
viewBox="0 0 200 176"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M26.4372 175.5C16.4372 175.5 9.04137 171.179 4.2497 162.538C-0.541964 153.896 -0.229467 145.404 5.1872 137.063L36.7497 88L5.1872 38.9375C-0.229467 30.6042 -0.541964 22.1125 4.2497 13.4625C9.04137 4.81251 16.4372 0.491679 26.4372 0.500012H130.5C134.666 0.500012 138.575 1.43751 142.225 3.31251C145.875 5.18751 148.841 7.79168 151.125 11.125L195.187 73.625C198.312 78 199.875 82.7917 199.875 88C199.875 93.2083 198.312 98 195.187 102.375L151.125 164.875C148.833 168.208 145.866 170.813 142.225 172.688C138.583 174.563 134.675 175.5 130.5 175.5H26.4372Z"
fill="#005D2B"
/>
</svg>
</div>
<div className="mr-1">
<p className="mb-0 text-[12px] text-primary-300 font-medium">
اولویت <small className="text-red-500">(به زودی)</small>
</p>
</div>
</div>
</div>
{/* <div className="flex justify-between ">
<div>
<h4 className="text-base font-bold ">تسک های هفتگی مجموعه</h4>
<p className="mb-0 text-sm">
امروز
<strong className="mx-1 text-primary-300">
<PersianNumber number={tasksData?.length} />
</strong>
تسک فعال دارید
</p>
</div>
<div className="w-[40px] h-[40px] bg-white shadow-sm rounded-xl">
<svg
width="23"
height="27"
viewBox="0 0 16 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="mx-auto mt-[6px]"
>
<path
d="M5 3.00001C4.73478 3.00001 4.48043 3.10537 4.29289 3.2929C4.10536 3.48044 4 3.73479 4 4.00001C4 4.26523 4.10536 4.51958 4.29289 4.70712C4.48043 4.89465 4.73478 5.00001 5 5.00001C5.26522 5.00001 5.51957 4.89465 5.70711 4.70712C5.89464 4.51958 6 4.26523 6 4.00001C6 3.73479 5.89464 3.48044 5.70711 3.2929C5.51957 3.10537 5.26522 3.00001 5 3.00001ZM2.17 3.00001C2.3766 2.41448 2.75974 1.90744 3.2666 1.5488C3.77346 1.19015 4.37909 0.997559 5 0.997559C5.62091 0.997559 6.22654 1.19015 6.7334 1.5488C7.24026 1.90744 7.6234 2.41448 7.83 3.00001H15C15.2652 3.00001 15.5196 3.10537 15.7071 3.2929C15.8946 3.48044 16 3.73479 16 4.00001C16 4.26523 15.8946 4.51958 15.7071 4.70712C15.5196 4.89465 15.2652 5.00001 15 5.00001H7.83C7.6234 5.58554 7.24026 6.09258 6.7334 6.45122C6.22654 6.80986 5.62091 7.00246 5 7.00246C4.37909 7.00246 3.77346 6.80986 3.2666 6.45122C2.75974 6.09258 2.3766 5.58554 2.17 5.00001H1C0.734784 5.00001 0.48043 4.89465 0.292893 4.70712C0.105357 4.51958 0 4.26523 0 4.00001C0 3.73479 0.105357 3.48044 0.292893 3.2929C0.48043 3.10537 0.734784 3.00001 1 3.00001H2.17ZM11 9.00001C10.7348 9.00001 10.4804 9.10537 10.2929 9.2929C10.1054 9.48044 10 9.73479 10 10C10 10.2652 10.1054 10.5196 10.2929 10.7071C10.4804 10.8947 10.7348 11 11 11C11.2652 11 11.5196 10.8947 11.7071 10.7071C11.8946 10.5196 12 10.2652 12 10C12 9.73479 11.8946 9.48044 11.7071 9.2929C11.5196 9.10537 11.2652 9.00001 11 9.00001ZM8.17 9.00001C8.3766 8.41448 8.75974 7.90744 9.2666 7.5488C9.77346 7.19015 10.3791 6.99756 11 6.99756C11.6209 6.99756 12.2265 7.19015 12.7334 7.5488C13.2403 7.90744 13.6234 8.41448 13.83 9.00001H15C15.2652 9.00001 15.5196 9.10537 15.7071 9.2929C15.8946 9.48044 16 9.73479 16 10C16 10.2652 15.8946 10.5196 15.7071 10.7071C15.5196 10.8947 15.2652 11 15 11H13.83C13.6234 11.5855 13.2403 12.0926 12.7334 12.4512C12.2265 12.8099 11.6209 13.0025 11 13.0025C10.3791 13.0025 9.77346 12.8099 9.2666 12.4512C8.75974 12.0926 8.3766 11.5855 8.17 11H1C0.734784 11 0.48043 10.8947 0.292893 10.7071C0.105357 10.5196 0 10.2652 0 10C0 9.73479 0.105357 9.48044 0.292893 9.2929C0.48043 9.10537 0.734784 9.00001 1 9.00001H8.17ZM5 15C4.73478 15 4.48043 15.1054 4.29289 15.2929C4.10536 15.4804 4 15.7348 4 16C4 16.2652 4.10536 16.5196 4.29289 16.7071C4.48043 16.8947 4.73478 17 5 17C5.26522 17 5.51957 16.8947 5.70711 16.7071C5.89464 16.5196 6 16.2652 6 16C6 15.7348 5.89464 15.4804 5.70711 15.2929C5.51957 15.1054 5.26522 15 5 15ZM2.17 15C2.3766 14.4145 2.75974 13.9074 3.2666 13.5488C3.77346 13.1902 4.37909 12.9976 5 12.9976C5.62091 12.9976 6.22654 13.1902 6.7334 13.5488C7.24026 13.9074 7.6234 14.4145 7.83 15H15C15.2652 15 15.5196 15.1054 15.7071 15.2929C15.8946 15.4804 16 15.7348 16 16C16 16.2652 15.8946 16.5196 15.7071 16.7071C15.5196 16.8947 15.2652 17 15 17H7.83C7.6234 17.5855 7.24026 18.0926 6.7334 18.4512C6.22654 18.8099 5.62091 19.0025 5 19.0025C4.37909 19.0025 3.77346 18.8099 3.2666 18.4512C2.75974 18.0926 2.3766 17.5855 2.17 17H1C0.734784 17 0.48043 16.8947 0.292893 16.7071C0.105357 16.5196 0 16.2652 0 16C0 15.7348 0.105357 15.4804 0.292893 15.2929C0.48043 15.1054 0.734784 15 1 15H2.17Z"
fill="#666666"
/>
</svg>
</div>
</div> */}
{typeTask == 0 ? (
<>
{tasksData.length != 0 ? (
<InfiniteScroll
dataLength={tasksData.length}
next={handleInfiniteNextFetchTask}
hasMore={!stopGetTasks}
>
<TasksCard
tasksData={tasksData}
permissions={permissions}
pageGetTasks={pageGetTasks}
/>
</InfiniteScroll>
) : (
<div className="flex justify-center py-5">
<div className="bg-white shadow mt-5 w-fit rounded-full text-sm p-4">
چیزی یافت نشد
</div>
</div>
)}
</>
) : (
<div className=" mt-3">
{activities.length != 0 ? (
<InfiniteScroll
dataLength={activities.length}
next={handleInfiniteNextFetchActivity}
hasMore={!stopGetActivities}
>
{activities?.map((e) => (
<ActivityCard data={e} />
))}
</InfiniteScroll>
) : (
<div className="flex justify-center py-5">
<div className="bg-white shadow mt-5 w-fit rounded-full text-sm p-4">
چیزی یافت نشد
</div>
</div>
)}
</div>
)}
</div>
<BottomSheetCreateRoutine />
<BottomFilterActivities />
</div>
);
};
export default page;