123 lines
3.9 KiB
JavaScript
123 lines
3.9 KiB
JavaScript
"use client";
|
|
|
|
import AppContext from "@ctx/AppContext";
|
|
import React, { useContext } from "react";
|
|
import Avatar from "boring-avatars";
|
|
import PersianNumber from "plugins/PersianNumber";
|
|
import HasPermission from "plugins/HasPermission/page";
|
|
import NothingFound from "plugins/NothingFound/page";
|
|
import InfiniteScroll from "react-infinite-scroll-component";
|
|
import TasksCard from "@comp/TaskPage/TasksCard/page";
|
|
import { useState } from "react";
|
|
|
|
const TasksEmployees = () => {
|
|
const CTX = useContext(AppContext);
|
|
const tasksData = CTX.state.tasksData;
|
|
const stopGetTasks = CTX.state.stopGetTasks;
|
|
const pageGetTasks = CTX.state.pageGetTasks;
|
|
const shiftsData = CTX.state.shiftsData;
|
|
const permissions = CTX.state.profile?.permissions;
|
|
|
|
const [listTaskActive, setListTaskActive] = useState(-1);
|
|
|
|
const handleInfiniteNextFetchTask = (id) => {
|
|
CTX.setPageGetTasks((e) => e + 1);
|
|
CTX.GetTasks(pageGetTasks + 1, id);
|
|
};
|
|
|
|
const handleListTaskActive = (id, index) => {
|
|
if (index == listTaskActive) {
|
|
setListTaskActive(-1);
|
|
} else {
|
|
CTX.setStopGetTasks(false);
|
|
CTX.setPageGetTasks(0);
|
|
setListTaskActive(-1);
|
|
setTimeout(() => {
|
|
setListTaskActive(index);
|
|
}, 100);
|
|
CTX.GetTasks(0, id);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{shiftsData.length > 0 ? (
|
|
<>
|
|
{shiftsData?.map((e, index) => (
|
|
<>
|
|
<div
|
|
className={`px-1 rounded-2xl ${
|
|
listTaskActive == index ? "pt-1" : "py-1"
|
|
}`}
|
|
key={index}
|
|
>
|
|
<div
|
|
className={`flex justify-between bg-white p-2 ${
|
|
listTaskActive == index
|
|
? " rounded-b-0 rounded-t-xl"
|
|
: "rounded-xl"
|
|
}`}
|
|
onClick={() => handleListTaskActive(e?.id, index)}
|
|
>
|
|
<p className="mb-0 text-[13px] mt-1">{e?.title}</p>
|
|
|
|
<div className="bg-gray-100 w-[30px] h-[30px] rounded-xl">
|
|
<svg
|
|
width="11"
|
|
height="11"
|
|
viewBox="0 0 151 89"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className={`opacity-80 mt-2 mx-auto tr03 ${
|
|
listTaskActive == index ? "rotate-180" : ""
|
|
}`}
|
|
>
|
|
<path
|
|
d="M13.0444 13.1674L75.3606 75.8506L138.044 13.5345"
|
|
stroke="#424242"
|
|
stroke-opacity="0.81"
|
|
stroke-width="25"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{listTaskActive == index && (
|
|
<div
|
|
className={`bg-white py-2 mx-1 ${
|
|
listTaskActive == index
|
|
? " rounded-t-0 rounded-b-xl mb-1"
|
|
: "rounded-xl"
|
|
}`}
|
|
>
|
|
{tasksData.length != 0 ? (
|
|
<InfiniteScroll
|
|
dataLength={tasksData.length}
|
|
next={() => handleInfiniteNextFetchTask(e.id)}
|
|
hasMore={!stopGetTasks}
|
|
>
|
|
<TasksCard
|
|
tasksData={tasksData}
|
|
permissions={permissions}
|
|
/>
|
|
</InfiniteScroll>
|
|
) : (
|
|
<NothingFound />
|
|
)}
|
|
</div>
|
|
)}
|
|
</>
|
|
))}
|
|
</>
|
|
) : (
|
|
<NothingFound />
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default TasksEmployees;
|