296 lines
15 KiB
JavaScript
296 lines
15 KiB
JavaScript
"use client";
|
|
import AppContext from "@ctx/AppContext";
|
|
import Avatar from "boring-avatars";
|
|
import BottomFilterActivities from "plugins/BottomSheet/BottomFilterActivities";
|
|
import Buttonbriz from "plugins/Buttonbriz/page";
|
|
import Input from "plugins/Input/page";
|
|
import React, { useContext, useRef, useState } from "react";
|
|
import SimpleReactValidator from "simple-react-validator";
|
|
import PersianNumber from "plugins/PersianNumber";
|
|
import moment from "jalali-moment";
|
|
|
|
const ActivityCardFake = ({ data }) => {
|
|
const CTX = useContext(AppContext);
|
|
|
|
const [conditionTask, setConditionTask] = useState(0);
|
|
const [undoneResone, setUndoneResone] = useState("");
|
|
|
|
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 handleConditionTaskCircle = () => {
|
|
if (data.status != 2 && data.status != 3 && data.status != 4) {
|
|
if (conditionTask == 3 || conditionTask == 4) {
|
|
return;
|
|
} else {
|
|
setConditionTask(1);
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleUndoneResone = () => {
|
|
setConditionTask(4);
|
|
// CTX.UnDoneActivity(data.id, undoneResone);
|
|
};
|
|
|
|
const handleDone = () => {
|
|
setConditionTask(3);
|
|
// CTX.DoneActivity(data.id);
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={` p-3 overflow-hidden bg-[#11211e] rounded-2xl w-full realtive ${
|
|
conditionTask == 3 ||
|
|
conditionTask == 4 ||
|
|
data?.status == 4 ||
|
|
data?.status == 2 ||
|
|
data?.status == 3
|
|
? "fuck-click "
|
|
: ""
|
|
}`}
|
|
>
|
|
<div className="flex pl-3">
|
|
<div className="flex">
|
|
<div className="flex w-fit ">
|
|
<div className="relative text-[11px] text-primary-500">
|
|
{data?.scheduleType == 0
|
|
? "daily"
|
|
: data?.scheduleType == 1
|
|
? "weekly"
|
|
: data?.scheduleType == 2
|
|
? "special"
|
|
: ""}
|
|
</div>
|
|
<div className="w-[2px] h-3 mx-1 bg-primary-200 opacity-30 mt-[1px]"></div>
|
|
<div className=" w-fit relative text-[11px] text-secondary-400">
|
|
{data?.shiftTitle}
|
|
</div>
|
|
<div className="w-[2px] h-3 mx-1 bg-primary-200 opacity-30 mt-[1px]"></div>
|
|
<div className=" w-fit relative text-[11px] text-secondary-400 h-fit">
|
|
{data?.userFullName}
|
|
</div>
|
|
</div>{" "}
|
|
{data?.doneAt !== "0001-01-01T00:00:00" && (
|
|
<>
|
|
<div className="w-[2px] h-3 mx-1 bg-primary-200 opacity-75 mt-[2px]"></div>
|
|
|
|
<div className=" w-fit relative text-[11px] text-primary-600 h-fit ">
|
|
<PersianNumber
|
|
number={moment(data?.doneAt).locale("fa").format("HH:mm")}
|
|
style={"!text-[11px]"}
|
|
/>{" "}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex mt-3">
|
|
<div
|
|
className={`w-[40px] h-[35px] border-[2px] rounded-full ml-3 tr03 ${
|
|
conditionTask == 1
|
|
? " border-gray-400 border-dashed animate-spin-slow duration-700"
|
|
: conditionTask == 2 || conditionTask == 4 || data?.status == 4
|
|
? "border-red-600"
|
|
: conditionTask == 3 || data?.status == 2 || data?.status == 3
|
|
? "border-primary-200"
|
|
: "border-gray-500 border-dashed animate-spin-slow duration-700"
|
|
}`}
|
|
onClick={() => handleConditionTaskCircle()}
|
|
>
|
|
{conditionTask == 2 || conditionTask == 4 || data?.status == 4 ? (
|
|
<svg
|
|
width="11"
|
|
height="11"
|
|
viewBox="0 0 167 168"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="mx-auto mt-[9px] "
|
|
>
|
|
<path
|
|
d="M95.7504 84.0002L164.834 14.9169C166.199 13.3227 166.912 11.2721 166.831 9.1748C166.75 7.0775 165.881 5.08801 164.397 3.60389C162.913 2.11976 160.923 1.25032 158.826 1.16931C156.729 1.0883 154.678 1.80169 153.084 3.16691L84.0004 72.2502L14.9171 3.08358C13.3479 1.51438 11.2196 0.632812 9.00043 0.632812C6.78125 0.632812 4.65296 1.51438 3.08376 3.08358C1.51456 4.65277 0.632996 6.78106 0.632996 9.00024C0.632996 11.2194 1.51456 13.3477 3.08376 14.9169L72.2504 84.0002L3.08376 153.084C2.21141 153.831 1.50291 154.75 1.00272 155.784C0.502522 156.818 0.221437 157.944 0.177108 159.091C0.132779 160.239 0.326158 161.384 0.745113 162.453C1.16407 163.522 1.79955 164.494 2.61168 165.306C3.4238 166.118 4.39503 166.753 5.4644 167.172C6.53378 167.591 7.67821 167.785 8.82587 167.74C9.97353 167.696 11.0996 167.415 12.1335 166.915C13.1674 166.414 14.0867 165.706 14.8338 164.834L84.0004 95.7502L153.084 164.834C154.678 166.199 156.729 166.912 158.826 166.831C160.923 166.75 162.913 165.881 164.397 164.397C165.881 162.912 166.75 160.923 166.831 158.826C166.912 156.728 166.199 154.678 164.834 153.084L95.7504 84.0002Z"
|
|
fill="red"
|
|
/>
|
|
</svg>
|
|
) : conditionTask == 3 || data?.status == 2 || data?.status == 3 ? (
|
|
<svg
|
|
width="25"
|
|
height="25"
|
|
viewBox="0 0 300 300"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="mx-auto mt-[3px] "
|
|
>
|
|
<path
|
|
d="M57.062 155.087C56.2612 154.132 55.2777 153.345 54.1692 152.774C53.0607 152.203 51.8494 151.859 50.6062 151.762C49.363 151.665 48.113 151.817 46.9292 152.209C45.7455 152.6 44.6518 153.225 43.7122 154.044C42.7727 154.864 42.0061 155.863 41.4574 156.983C40.9087 158.103 40.5889 159.321 40.5167 160.566C40.4445 161.811 40.6214 163.057 41.037 164.233C41.4526 165.409 42.0985 166.49 42.937 167.412L57.062 155.087ZM89.287 206.25L82.2245 212.412C83.1045 213.421 84.19 214.228 85.4082 214.782C86.6264 215.336 87.949 215.622 89.287 215.622C90.6251 215.622 91.9477 215.336 93.1658 214.782C94.384 214.228 95.4696 213.421 96.3495 212.412L89.287 206.25ZM194.562 99.9125C195.401 98.9896 196.046 97.9086 196.462 96.7329C196.878 95.5573 197.055 94.3105 196.982 93.0657C196.91 91.8208 196.59 90.6028 196.042 89.4831C195.493 88.3633 194.726 87.3643 193.787 86.5445C192.847 85.7247 191.754 85.1005 190.57 84.7086C189.386 84.3166 188.136 84.1648 186.893 84.2619C185.65 84.359 184.438 84.7032 183.33 85.2742C182.221 85.8452 181.238 86.6317 180.437 87.5875L194.562 99.9125ZM131.325 143.837C129.749 145.718 128.973 148.142 129.164 150.589C129.355 153.035 130.498 155.309 132.347 156.922C134.196 158.536 136.604 159.36 139.053 159.218C141.503 159.076 143.799 157.979 145.45 156.162L131.325 143.837ZM120.9 184.287C121.738 183.365 122.384 182.284 122.8 181.108C123.215 179.932 123.392 178.686 123.32 177.441C123.248 176.196 122.928 174.978 122.379 173.858C121.83 172.738 121.064 171.739 120.124 170.919C119.185 170.1 118.091 169.475 116.907 169.084C115.724 168.692 114.474 168.54 113.23 168.637C111.987 168.734 110.776 169.078 109.667 169.649C108.559 170.22 107.575 171.007 106.775 171.962L120.9 184.287ZM42.937 167.412L82.2245 212.412L96.3495 200.087L57.062 155.087L42.937 167.412ZM96.3495 212.412L120.9 184.287L106.775 171.962L82.2245 200.087L96.3495 212.412ZM145.45 156.162L170.012 128.037L155.887 115.712L131.325 143.837L145.45 156.162ZM170.012 128.037L194.562 99.9125L180.437 87.5875L155.887 115.712L170.012 128.037Z"
|
|
fill="green"
|
|
/>
|
|
<path
|
|
d="M250 94.5371L196.425 150.787M137.5 200L142.862 207.037L169.65 178.912"
|
|
stroke="green"
|
|
stroke-width="18.75"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
) : (
|
|
""
|
|
)}
|
|
</div>
|
|
<div className="w-full">
|
|
<h3
|
|
className={`text-base font-medium tr03 mx-1 mb-0 ${
|
|
conditionTask == 2 || conditionTask == 4 || data?.status == 4
|
|
? "text-red-600"
|
|
: "text-secondary-300 "
|
|
} `}
|
|
>
|
|
{data?.title}{" "}
|
|
</h3>
|
|
<p
|
|
className={`mb-0 text-[12px] tr03 mx-1 ${
|
|
conditionTask == 2 || conditionTask == 4 || data?.status == 4
|
|
? "text-red-600"
|
|
: "text-secondary-800"
|
|
}`}
|
|
>
|
|
{data?.description}{" "}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className={`flex justify-between rtl mt-3 tr03 ${
|
|
conditionTask == 1
|
|
? "relative top-0 h-fit "
|
|
: " relative top-[300px] h-0 "
|
|
}`}
|
|
>
|
|
<div
|
|
className="w-[35px] h-[35px] rounded-full bg-secondary-950 pt-4"
|
|
onClick={() => setConditionTask(0)}
|
|
>
|
|
<svg
|
|
width="14"
|
|
height="14"
|
|
viewBox="0 0 150 88"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="mx-auto mt-[-5px]"
|
|
>
|
|
<path
|
|
d="M137.5 75L75 12.5L12.5 75"
|
|
stroke="white"
|
|
stroke-width="25"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div className="flex ">
|
|
{" "}
|
|
<div
|
|
className="w-[35px] h-[35px] rounded-full bg-primary-400 pt-1 mx-2"
|
|
onClick={() => handleDone()}
|
|
>
|
|
<svg
|
|
width="25"
|
|
height="25"
|
|
viewBox="0 0 300 300"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="mx-auto "
|
|
>
|
|
<path
|
|
d="M57.062 155.087C56.2612 154.132 55.2777 153.345 54.1692 152.774C53.0607 152.203 51.8494 151.859 50.6062 151.762C49.363 151.665 48.113 151.817 46.9292 152.209C45.7455 152.6 44.6518 153.225 43.7122 154.044C42.7727 154.864 42.0061 155.863 41.4574 156.983C40.9087 158.103 40.5889 159.321 40.5167 160.566C40.4445 161.811 40.6214 163.057 41.037 164.233C41.4526 165.409 42.0985 166.49 42.937 167.412L57.062 155.087ZM89.287 206.25L82.2245 212.412C83.1045 213.421 84.19 214.228 85.4082 214.782C86.6264 215.336 87.949 215.622 89.287 215.622C90.6251 215.622 91.9477 215.336 93.1658 214.782C94.384 214.228 95.4696 213.421 96.3495 212.412L89.287 206.25ZM194.562 99.9125C195.401 98.9896 196.046 97.9086 196.462 96.7329C196.878 95.5573 197.055 94.3105 196.982 93.0657C196.91 91.8208 196.59 90.6028 196.042 89.4831C195.493 88.3633 194.726 87.3643 193.787 86.5445C192.847 85.7247 191.754 85.1005 190.57 84.7086C189.386 84.3166 188.136 84.1648 186.893 84.2619C185.65 84.359 184.438 84.7032 183.33 85.2742C182.221 85.8452 181.238 86.6317 180.437 87.5875L194.562 99.9125ZM131.325 143.837C129.749 145.718 128.973 148.142 129.164 150.589C129.355 153.035 130.498 155.309 132.347 156.922C134.196 158.536 136.604 159.36 139.053 159.218C141.503 159.076 143.799 157.979 145.45 156.162L131.325 143.837ZM120.9 184.287C121.738 183.365 122.384 182.284 122.8 181.108C123.215 179.932 123.392 178.686 123.32 177.441C123.248 176.196 122.928 174.978 122.379 173.858C121.83 172.738 121.064 171.739 120.124 170.919C119.185 170.1 118.091 169.475 116.907 169.084C115.724 168.692 114.474 168.54 113.23 168.637C111.987 168.734 110.776 169.078 109.667 169.649C108.559 170.22 107.575 171.007 106.775 171.962L120.9 184.287ZM42.937 167.412L82.2245 212.412L96.3495 200.087L57.062 155.087L42.937 167.412ZM96.3495 212.412L120.9 184.287L106.775 171.962L82.2245 200.087L96.3495 212.412ZM145.45 156.162L170.012 128.037L155.887 115.712L131.325 143.837L145.45 156.162ZM170.012 128.037L194.562 99.9125L180.437 87.5875L155.887 115.712L170.012 128.037Z"
|
|
fill="#ffffff"
|
|
/>
|
|
<path
|
|
d="M250 94.5371L196.425 150.787M137.5 200L142.862 207.037L169.65 178.912"
|
|
stroke="#ffffff"
|
|
stroke-width="18.75"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div
|
|
className="w-[35px] h-[35px] rounded-full bg-red-600 pt-4"
|
|
onClick={() => setConditionTask(2)}
|
|
>
|
|
<svg
|
|
width="12"
|
|
height="12"
|
|
viewBox="0 0 166 168"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="mx-auto mt-[-4px] "
|
|
>
|
|
<path
|
|
d="M95.7504 84.0002L164.834 14.9169C166.199 13.3227 166.912 11.2721 166.831 9.1748C166.75 7.0775 165.881 5.08801 164.397 3.60389C162.913 2.11976 160.923 1.25032 158.826 1.16931C156.729 1.0883 154.678 1.80169 153.084 3.16691L84.0004 72.2502L14.9171 3.08358C13.3479 1.51438 11.2196 0.632812 9.00043 0.632812C6.78125 0.632812 4.65296 1.51438 3.08376 3.08358C1.51456 4.65277 0.632996 6.78106 0.632996 9.00024C0.632996 11.2194 1.51456 13.3477 3.08376 14.9169L72.2504 84.0002L3.08376 153.084C2.21141 153.831 1.50291 154.75 1.00272 155.784C0.502522 156.818 0.221437 157.944 0.177108 159.091C0.132779 160.239 0.326158 161.384 0.745113 162.453C1.16407 163.522 1.79955 164.494 2.61168 165.306C3.4238 166.118 4.39503 166.753 5.4644 167.172C6.53378 167.591 7.67821 167.785 8.82587 167.74C9.97353 167.696 11.0996 167.415 12.1335 166.915C13.1674 166.414 14.0867 165.706 14.8338 164.834L84.0004 95.7502L153.084 164.834C154.678 166.199 156.729 166.912 158.826 166.831C160.923 166.75 162.913 165.881 164.397 164.397C165.881 162.912 166.75 160.923 166.831 158.826C166.912 156.728 166.199 154.678 164.834 153.084L95.7504 84.0002Z"
|
|
fill="white"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={``}>
|
|
<div
|
|
className={`tr03 ${
|
|
conditionTask == 2
|
|
? "relative h-fit "
|
|
: "relative h-0 overflow-hidden "
|
|
}`}
|
|
>
|
|
<div className="">
|
|
<Input
|
|
lable=" Why??????? "
|
|
id="undoneResone-id"
|
|
name="undoneResone"
|
|
type={"text"}
|
|
value={undoneResone}
|
|
inputEvent={(e) => {
|
|
setUndoneResone(e.target.value);
|
|
validator.current.showMessageFor("undoneResone");
|
|
}}
|
|
style="text-right"
|
|
validator={true}
|
|
validatorData={validator.current.message(
|
|
"undoneResone",
|
|
undoneResone,
|
|
"required"
|
|
)}
|
|
textarea={true}
|
|
theme={1}
|
|
mt={"2"}
|
|
/>
|
|
</div>
|
|
|
|
<Buttonbriz
|
|
title="Activity registration"
|
|
color="INFO"
|
|
icon="CHECK"
|
|
buttonEvent={() => handleUndoneResone()}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ActivityCardFake;
|