tododashboard text code

import React, { useEffect, useState } from "react";

import { Button, Col, Container, Dropdown, Modal, Row } from "react-bootstrap";

import "./TodoDashboard.css";

import UpdateHeader from "../Components/UpdateHeader/UpdateHeader";

import checkAll from "../Assets/Check.svg";

import flagRed from "../Assets/emoji_flags.svg";

import UpdateProgress from "../Components/ProgressBar/UpdateProgress";

import UpdateWork from "../Components/UpdateWork/UpdateWork";

import CheckList from "../Components/CheckList/CheckList";

import FacingIssue from "../Components/Facing Issue/FacingIssue";

import UpdateDetails from "../Components/UpdateDetails/UpdateDetails";

import { ThreeDots } from "react-loader-spinner";

import LogScreen from "../Components/LogScreen/LogScreen";

import axios from "axios";

import { constants } from "../../../baseURL";

import { commonFunction } from "../Components/Function/function";

import AddIssueModalUser from "../Components/Addition Modal/Add Issue/AddIssueModalUser";

import HoldTask from "../Components/Hold Task/HoldTask";

import DeleteTask from "../Components/Addition Modal/Delete Task/DeleteTask";

import ResumeTask from "../Components/Addition Modal/Resume Task/ResumeTask";

import UpdateDetailSingle from "../Components/UpdateDetails/UpdateDetailSingle";

import DetailDependency from "../Components/UpdateDetails/DetailDependency";

import DotsThreeRight from "../../../assets/images/DotsThreeRight.svg";

import NewTaskModal from "../../../components/commonModal/NewTaskModal";

import { useDispatch, useSelector } from "react-redux";

import toast from "react-hot-toast";

import { getReq } from "../../../api";

import { useSearchParams } from "react-router-dom";

import { setAllUserList } from "../../../Redux/Slices/taskManagerSlice";

import useApiFetchCustomHookForEmailService from "../../../piservices/ApiFetchCustomHookForEmailService";

const TodoDashboard = ({

isClose,

isOpen,

projectId,

taskId,

setCheckTaskId,

}) => {

const updatedCheckList = useSelector(

(state) => state.taskManager.updatedCheckList

);

const profileDataData = useSelector(

(state) => state.timeline.profileDataData

);

//console.log('projectIddddd', projectId)

const [loading, setLoading] = useState(true);

const [teamMemberId, setTeamMemberId] = useState("");

const [teamMemberName, setTeamMemberName] = useState("");

const [specificTaskData, setSpecificTaskData] = useState({});

const [logs, setLogs] = useState("");

const [DetailCategory, setdetailCategory] = useState("Details");

const [updateBtn, setUpdateBtn] = useState(false);

const [isHold, setIsHold] = useState(false);

//UpdateWork Component

const [workStatusType, setWorkStatusType] = useState("percentage");

const [workDoneToday, setWorkDoneToday] = useState();

const [refresh, setRefresh] = useState(false);

const [searchInput, setSearchInput] = useState("");

useEffect(() => {

setWorkDoneToday(0);

}, []);

const [searchParams] = useSearchParams();

const [isUpdateFirst, setisUpdateFirst] = useState(false);

const isLead = searchParams.get("isLead");

const [totalWorkQuantity, setTotalWorkQuantity] = useState(100);

const [showDetails, setShowDetails] = useState(true);

//CheckList Component

const [storeChecklist, setStoreCheckList] = useState([]);

const [logFilter, setLogFilter] = useState(3);

const [isChecklistUpdate, setIsChecklistUpdate] = useState(false);

const [deleteTask, setDeleteTask] = useState(false);

const [holdTask, setHoldTask] = useState(false);

const dispatch = useDispatch();

const [show, setShow] = useState(false);

const [showModal, setShowModal] = useState(false);

const { sendEmailPushBellNotifications } = useApiFetchCustomHookForEmailService()

const allUserList = useSelector(

(state) => state.taskManager.allUserList

);

//console.log(specificTaskData);

//Api to get the data of specific task

const getSpecificTassk = async () => {

const res = await axios

.get(

`${constants.PMT_BASE}/api/timelines2/get-all-type-tasks-by-id?id=${taskId}`

)

.then((res) => {

setSpecificTaskData(res?.data);

getLogs()

setLoading(false);

setStoreCheckList(res?.data?.checkList);

});

};

useEffect(() => {

const fetchUserData = async () => {

const res = await getReq(`${constants.B2B_BASE}/api/enterprise/get-team-member?userId=${localStorage.getItem(

"userId"

)}&projectId=${specificTaskData?.projectId?._id}&type=2`

)

//console.log({ userResponse });

if (res) {

const changedTeamMemberList = res.data.data.map((item)=>{return {email:item.email, _id:item.memberId,fullName:item.memberName }})

dispatch(setAllUserList(changedTeamMemberList))

} else {

//console.log("Something went wrong");

}

};

// fetchPredData();

fetchUserData();

}, []);

useEffect(() => {

getSpecificTassk();

}, []);

//Api to get the logs

const getLogs = async (data) => {

const res = await axios

.get(

`${constants.PMT_BASE}/api/timelines2/get-task-logs?userId=${localStorage.getItem("userId")}&taskId=${taskId}&flag=${data}`

)

.then((res) => {

setLogs(res?.data?.reverse());

//console.log("@@@@@###", res?.data);

});

};

useEffect(() => {

getLogs(0);

}, [specificTaskData]);

//Api to edit cehcklist

const updateChecklist = async (_id) => {

let array = [];

if (isChecklistUpdate) {

await axios

.post(

`${

constants.PMT_BASE

}/api/timelines2/edit-checklist?userId=${localStorage.getItem(

"userId"

)}&taskId=${specificTaskData?._id}`,

updatedCheckList

)

.then(function (response) {

//console.log(response?.data);

setUpdateBtn(false);

})

.catch(function (error) {

//console.log(error);

});

}

};

// Api to edit task

const uomTpyeSubmit = async () => {

if( specificTaskData?.isUpdatedFirstTime === false){

let obj =

specificTaskData?.isUpdatedFirstTime === false

? totalWorkQuantity

: specificTaskData?.uomTotalWork;

let totalWorkDone =

specificTaskData?.uomType === "percentage"

? workDoneToday

: Number(specificTaskData?.totalWorkDone) + Number(workDoneToday);

let progress =

specificTaskData?.uomType === "percentage"

? workDoneToday

: (

((specificTaskData?.totalWorkDone + Number(workDoneToday)) /

Number(obj)) *

100

).toString();

const res = await axios

.post(

`${constants.PMT_BASE}/api/timelines2/edit-task?taskId=${

specificTaskData?._id

}&projectId=${

specificTaskData?.projectId?._id

}&userId=${localStorage.getItem("userId")}`,

{

uomType: workStatusType,

uomTotalWork: totalWorkQuantity.toString(),

isUpdatedFirstTime: true,

}

)

.then((res) => {

//console.log(res);

getSpecificTassk();

setUpdateBtn(false);

})

.catch((err) => {

//console.log(err);

});

}

};

console.log({updatedCheckList})

const editTask = async () => {

//console.log({ workDoneToday });

// let checkChecklist = "notFinist"

const filteringOtherReceivers = [];

const filteringReceivers = [];

filteringOtherReceivers.push(allUserList.find(item => item._id == localStorage.getItem('userId')));

filteringReceivers.push(allUserList.find(item => item._id == specificTaskData.assignedTo));

let hasEmptyTypeKey = updatedCheckList.some(obj => obj.type === '');

let uomType =

specificTaskData?.isUpdatedFirstTime === false

? workStatusType

: specificTaskData?.uomType;

let uomTotalWork =

specificTaskData?.isUpdatedFirstTime === false

? totalWorkQuantity.toString()

: specificTaskData?.uomTotalWork;

let obj =

specificTaskData?.isUpdatedFirstTime === false

? totalWorkQuantity

: specificTaskData?.uomTotalWork;

let totalWorkDone =

uomType === "percentage"

? workDoneToday

: Number(specificTaskData?.totalWorkDone) + Number(workDoneToday);

let progress =

uomType === "percentage"

? workDoneToday

: (

((specificTaskData?.totalWorkDone + Number(workDoneToday)) /

Number(obj)) *

100

).toString();

if(Math.ceil(progress)>100){

toast.error("Task progress can't be more than 100%")

}

else{

if(hasEmptyTypeKey && Math.ceil(progress) === 100){

toast.error("Please complete all the checklist before completing the task")

}

else{

let status = 0;

if (

(Math.ceil(progress) > 0 && Math.ceil(progress) < 100) ||

isChecklistUpdate

) {

status = 1;

} else if ((Math.ceil(progress) > 99 && hasEmptyTypeKey === false)) {

status = 2;

}

console.log("ncalncsn",parseInt(Math.ceil(progress)), typeof(progress))

console.log("ncalncsn1",parseInt(specificTaskData?.progress),typeof(parseInt(specificTaskData?.progress)))

if ((specificTaskData?.totalWorkDone <= specificTaskData?.uomTotalWork) && (parseInt(Math.ceil(progress)) !== parseInt(specificTaskData?.progress))) {

const res = await axios

.post(

`${constants.PMT_BASE}/api/timelines2/edit-task?taskId=${

specificTaskData?._id

}&projectId=${

specificTaskData?.projectId?._id

}&userId=${localStorage.getItem("userId")}`,

{

workDoneToday: workDoneToday,

totalWorkDone: totalWorkDone,

progress: Math.ceil(progress),

status: status,

uomTotalWork: uomTotalWork,

uomType: uomType,

typeTask:"to-do"

}

)

.then((res) => {

if(progress==100){

sendEmailPushBellNotifications('Task(Update)', {

'@taskName': specificTaskData.taskName,

'@username': profileDataData.fullName,

'@sender': profileDataData.fullName,

'@Sender': profileDataData.fullName,

"@senderFirstName": profileDataData.fullName.split(" ")[0],

'@projectName': specificTaskData.projectId.projectName,

'@project name': specificTaskData.projectId.projectName

}

, filteringReceivers,filteringOtherReceivers,[],[],

'Task Manager')

}else{

sendEmailPushBellNotifications('Update', {

'@taskName': specificTaskData.taskName,

'@username': profileDataData.fullName,

'@sender': profileDataData.fullName,

'@Sender': profileDataData.fullName,

"@senderFirstName": profileDataData.fullName.split(" ")[0],

'@projectName': specificTaskData.projectId.projectName,

'@project name': specificTaskData.projectId.projectName

}

, filteringReceivers,filteringOtherReceivers,[],[],

'Task Manager')

}

toast.success("Task updated successfully");

})

.catch((err) => {

//console.log(err);

});

}

}}

isClose(false);

setWorkDoneToday(0);

setTimeout(() => {

window.location.reload()

}, 1500);

getSpecificTassk();

setUpdateBtn(false);

};

const reAssignMember = async (item) => {

const reassignOtherReceivers = [];

const reassignReceivers = [];

reassignOtherReceivers.push(allUserList.find(item => item._id == specificTaskData.assignedTo));

reassignReceivers.push(allUserList.find(item => item._id == teamMemberId));

console.log({reassignReceivers})

const res = await axios

.post(

`${constants.PMT_BASE}/api/timelines2/edit-task?taskId=${

specificTaskData?._id

}&projectId=${

specificTaskData?.projectId?._id

}&userId=${localStorage.getItem("userId")}`,

{

assignedTo: teamMemberId,

}

)

.then((res) => {

//console.log(res);

getSpecificTassk();

setRefresh(true);

setUpdateBtn(false);

sendEmailPushBellNotifications('Re-Assign Task/RFI/MR/Issue', {

'@taskName': specificTaskData.taskName,

'@projectName': specificTaskData.projectId.projectName,

'@project name': specificTaskData.projectId.projectName,

'@newReceiver': reassignReceivers[0]?.fullName,

'@previousReceiver':reassignOtherReceivers[0].fullName

}

, reassignReceivers,reassignOtherReceivers,[],[],

'Task Manager')

})

.catch((err) => {

//console.log(err);

});

};

const reAssignMemberDependency = async (item) => {

const reassignOtherReceivers2 = [];

const reassignReceivers2 = [];

reassignOtherReceivers2.push(allUserList.find(item => item._id == specificTaskData.assignedTo));

reassignReceivers2.push(allUserList.find(item => item._id == teamMemberId));

const res = await axios

.post(

`${constants.PMT_BASE}/api/timelines2/edit-task-dependency?taskId=${

specificTaskData?._id

}&projectId=${

specificTaskData?.projectId?._id

}&userId=${localStorage.getItem("userId")}`,

{

assignedTo: teamMemberId,

}

)

.then((res) => {

//console.log(res);

getSpecificTassk();

setUpdateBtn(false);

sendEmailPushBellNotifications('Re-Assign Task/RFI/MR/Issue', {

'@taskName': specificTaskData.taskName,

'@projectName': specificTaskData.projectId.projectName,

'@project name': specificTaskData.projectId.projectName,

'@newReceiver': reassignReceivers2[0]?.fullName,

'@previousReceiver':reassignOtherReceivers2[0].fullName

}

, reassignReceivers2,reassignOtherReceivers2,profileDataData.admins,profileDataData.superAdmins,

'Task Manager')

})

.catch((err) => {

//console.log(err);

});

};

return (

<>

<Modal

show={isOpen}

centered

size="xl"

style={{

overflow: "hidden",

maxHeight: "95vh",

borderBottomLeftRadius: "0.5rem",

}}

>

<Modal.Header className="modalHeaderCont">

<Modal.Title style={{ width: "100%" }}>

{loading ? (

<></>

) : (

<>

{specificTaskData?.taskName

? specificTaskData?.taskName.charAt(0).toUpperCase() +

specificTaskData?.taskName.slice(1)

: ""}

</span>

of{" "}

{specificTaskData?.projectId?.name}

</span>{" "}

due on{" "}

{commonFunction.getTime(specificTaskData?.plannedEndDate)}

</span>

{((specificTaskData?.projectAdmin !== undefined &&

specificTaskData.projectAdmin ==

localStorage.getItem("userId")) ||

profileDataData.isAdmin || profileDataData.isSuperAdmin ||

specificTaskData.assignedBy ==

localStorage.getItem("userId")) && (

<Dropdown.Toggle className="to-do-headerProjectDropDownToggle">

</Dropdown.Toggle>

{Math.floor(specificTaskData?.progress) == 100 ? (

<Dropdown.Menu className="to-do-headerProjectDropDownMenu">

<Dropdown.Item disabled> Edit Task</Dropdown.Item>

<Dropdown.Item disabled> Hold Task</Dropdown.Item>

<Dropdown.Item disabled>

{" "}

Delete Task

</Dropdown.Item>

</Dropdown.Menu>

) : (

<Dropdown.Menu className="to-do-headerProjectDropDownMenu">

<Dropdown.Item onClick={() => setShowModal(true)}>

{" "}

Edit Task

</Dropdown.Item>

{specificTaskData?.holdTask === true ? (

<Dropdown.Item disabled>

{" "}

Hold Task

</Dropdown.Item>

) : (

<Dropdown.Item

onClick={() => setHoldTask(true)}

>

{" "}

Hold Task

</Dropdown.Item>

)}

<Dropdown.Item

onClick={() => setDeleteTask(true)}

>

{" "}

Delete Task

</Dropdown.Item>

</Dropdown.Menu>

)}

</Dropdown>

</span>

)}

</>

)}

</div>

<Button

className="to-do-cancelBtn"

onClick={() => (

localStorage.setItem("taskId", taskId),

isClose(false),

(refresh || isHold) && window.location.reload()

)}

>

Cancel

</Button>

{loading ? (

<ThreeDots

height="25"

width="50"

radius="9"

color="#0084EF"

ariaLabel="three-dots-loading"

wrapperStyle={{}}

wrapperClassName=""

visible={true}

/>

</Button>

) : (

<Button

variant="primary"

onClick={() => (

localStorage.setItem("taskId", taskId),

specificTaskData.assignedTo !== teamMemberId &&

specificTaskData?.taskType === "dependency"

? reAssignMemberDependency()

: specificTaskData.assignedTo !== teamMemberId &&

reAssignMember(),

updateChecklist(),

specificTaskData.isUpdatedFirstTime === false && uomTpyeSubmit(),

editTask()

// setCheckTaskId(false)

)}

disabled={

updateBtn === false &&

specificTaskData.holdTask === false &&

(specificTaskData.projectAdmin ===

localStorage.getItem("userId") ||

profileDataData.isAdmin || profileDataData.isSuperAdmin ||

specificTaskData?.assignedTo ===

localStorage.getItem("userId") ||

specificTaskData?.assignedBy ===

localStorage.getItem("userId")) &&

Math.ceil(specificTaskData?.progress) < 100

? false

: true

}

>

Update

</Button>

)}

</div>

</Modal.Title>

</Modal.Header>

{loading ? (

<div

style={{

width: "100%",

display: "flex",

justifyContent: "center",

marginTop: "18%",

}}

>

<ThreeDots

height="80"

width="80"

radius="9"

color="#0084EF"

ariaLabel="three-dots-loading"

wrapperStyle={{}}

wrapperClassName=""

visible={true}

/>

</div>

) : (

<Row>

<UpdateProgress

projectId={projectId}

reAssignMemberDependency={reAssignMemberDependency}

reAssignMember={reAssignMember}

setTeamMemberId={setTeamMemberId}

teamMemberName={teamMemberName}

setTeamMemberName={setTeamMemberName}

teamMemberId={teamMemberId}

setRefresh={setRefresh}

workStatusType={workStatusType}

setWorkStatusType={setWorkStatusType}

taskData={specificTaskData}

getSpecificTassk={getSpecificTassk}

totalWorkQuantity={totalWorkQuantity}

setWorkDoneToday={setWorkDoneToday}

setShow={setShow}

show={show}

updateChecklist={updateChecklist}

isUpdateFirst={isUpdateFirst}

setisUpdateFirst={setisUpdateFirst}

/>

<button onClick={()=>setShowDetails(!showDetails)}>df</button>

{showDetails === false &&

<UpdateWork

isUpdateFirst={isUpdateFirst}

setisUpdateFirst={setisUpdateFirst}

taskData={specificTaskData}

workStatusType={workStatusType}

setWorkStatusType={setWorkStatusType}

workDoneToday={workDoneToday}

setWorkDoneToday={setWorkDoneToday}

totalWorkQuantity={totalWorkQuantity}

setTotalWorkQuantity={setTotalWorkQuantity}

/>

</div>

}

{showDetails &&

<UpdateWork

isUpdateFirst={isUpdateFirst}

setisUpdateFirst={setisUpdateFirst}

taskData={specificTaskData}

workStatusType={workStatusType}

setWorkStatusType={setWorkStatusType}

workDoneToday={workDoneToday}

setWorkDoneToday={setWorkDoneToday}

totalWorkQuantity={totalWorkQuantity}

setTotalWorkQuantity={setTotalWorkQuantity}

/>

{specificTaskData?.checkList?.length > 0 && (

<CheckList

setIsChecklistUpdate={setIsChecklistUpdate}

isChecklistUpdate={isChecklistUpdate}

taskData={specificTaskData}

setStoreCheckList={setStoreCheckList}

/>

)}

</div>}

<FacingIssue

taskData={specificTaskData}

setdetailCategory={setdetailCategory}

getSpecificTassk={getSpecificTassk}

/>

{DetailCategory === "Details" ? (

<UpdateDetailSingle

taskData={specificTaskData}

DetailCategory={DetailCategory}

/>

) : DetailCategory === "Subtask" ? (

specificTaskData?.subTasks?.map((curElem, i) => {

return (

<UpdateDetails

taskData={curElem}

DetailCategory={DetailCategory}

/>

);

})

) : DetailCategory === "Dependency" ? (

specificTaskData?.dependencies?.length > 0 &&

specificTaskData?.dependencies?.map((cur, i) => {

return (

<DetailDependency

taskData={cur}

DetailCategory={DetailCategory}

/>

);

})

) : DetailCategory === "Observation" ? (

<UpdateDetails

taskData={specificTaskData}

DetailCategory={DetailCategory}

/>

) : DetailCategory === "Snag List" ? (

<UpdateDetails

taskData={specificTaskData}

DetailCategory={DetailCategory}

/>

) : DetailCategory === "RFI" ? (

<UpdateDetails

taskData={specificTaskData}

DetailCategory={DetailCategory}

/>

) : (

DetailCategory === "Predecessor" && (

<UpdateDetails

taskData={specificTaskData}

DetailCategory={DetailCategory}

/>

)

)}

{/* <UpdateDetails taskData={specificTaskData} /> */}

</div>

</Col>

<LogScreen

logsData={logs}

taskData={specificTaskData}

getLogs={getLogs}

logFilter={logFilter}

setLogFilter={setLogFilter}

projectId={projectId}

/>

</Col>

</Row>

)}

</Container>

</Modal>

{holdTask && (

<HoldTask

setIsHold={setIsHold}

taskData={specificTaskData}

holdTask={holdTask}

setHoldTask={setHoldTask}

getSpecificTassk={getSpecificTassk}

/>

)}

{deleteTask && (

<DeleteTask

taskData={specificTaskData}

setDeleteTask={setDeleteTask}

deleteTask={deleteTask}

isClose={isClose}

isOpen={isOpen}

/>

)}

{showModal && (

<NewTaskModal

showModal={showModal}

setShowModal={setShowModal}

isClose={isClose}

isOpen={isOpen}

isEdit={true}

taskId={taskId}

projectId={projectId}

getSpecificTassk={getSpecificTassk}

setSearchInput={setSearchInput}

/>

)}

</>

);

};

export default TodoDashboard;

[text] tododashboard

Viewer

Editor

Tools

[text] tododashboard

Viewer

Editor