From 22dc21a79b3368d29e9de6510ef96f8f54b6cbeb Mon Sep 17 00:00:00 2001 From: Ebube Date: Fri, 7 Jul 2023 14:22:42 +0100 Subject: [PATCH] Added New Task Component --- src/components/AddJob/AddJob.jsx | 9 - .../FamilyPopout/AssignTaskPopout.jsx | 541 ++++++++++-------- .../FamilyAcc/FamilyPopout/forms/NewTasks.jsx | 228 ++++++++ .../FamilyAcc/FamilyPopout/forms/index.js | 3 + 4 files changed, 549 insertions(+), 232 deletions(-) create mode 100644 src/components/FamilyAcc/FamilyPopout/forms/NewTasks.jsx create mode 100644 src/components/FamilyAcc/FamilyPopout/forms/index.js diff --git a/src/components/AddJob/AddJob.jsx b/src/components/AddJob/AddJob.jsx index a85b91a..904f8ed 100644 --- a/src/components/AddJob/AddJob.jsx +++ b/src/components/AddJob/AddJob.jsx @@ -78,7 +78,6 @@ function AddJob({ popUpHandler, categories }) { setCurrency({ loading: false, status: true, data: [] }); return; } - console.log("Res for currency >> ", res); setCurrency({ loading: false, @@ -221,7 +220,6 @@ function AddJob({ popUpHandler, categories }) { {/* Title */} -
{ -// if (value && /\d+e/.test(value)) { -// return false; -// } -// return true; -// }) diff --git a/src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx b/src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx index 44573dc..39ef29f 100644 --- a/src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx +++ b/src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx @@ -1,246 +1,341 @@ -import React, {useState, useEffect} from 'react' -import ModalCom from '../../Helpers/ModalCom' -import Detail from '../../jobPopout/popoutcomponent/Detail' -import usersService from '../../../services/UsersService' -import LoadingSpinner from '../../Spinners/LoadingSpinner' -import { PriceFormatter } from '../../Helpers/PriceFormatter' +import React, { useState, useEffect } from "react"; +import ModalCom from "../../Helpers/ModalCom"; +import Detail from "../../jobPopout/popoutcomponent/Detail"; +import usersService from "../../../services/UsersService"; +import LoadingSpinner from "../../Spinners/LoadingSpinner"; +import { PriceFormatter } from "../../Helpers/PriceFormatter"; +import { NewTasks } from "./forms"; -function AssignTaskPopout({action, situation, familyDetails}) { - const apiCall = new usersService() +function AssignTaskPopout({ action, situation, familyDetails }) { + const apiCall = new usersService(); - let [requestStatus, setRequestStatus] = useState({loading: false, status: false, message: ''}) // HOLDS RESPONSE FOR SENDING API REQUEST - - let [familyTask, setFamilyTask] = useState({loading: true, data: []}) + let [requestStatus, setRequestStatus] = useState({ + loading: false, + status: false, + message: "", + }); // HOLDS RESPONSE FOR SENDING API REQUEST - let [taskType, setTaskType] = useState('select') // SWITCHES BTW SELECT TASK AND NEW TASK + let [familyTask, setFamilyTask] = useState({ loading: true, data: [] }); - let [activeTask, setActiveTask] = useState({id: 0, data: {}}) // HOLDS SELECTED TASK + let [taskType, setTaskType] = useState("select"); // SWITCHES BTW SELECT TASK AND NEW TASK - const switchTaskType = ({target:{value}}) => { // FUNCTION TO CHANGE SELECTED ACTIVE TASK - setTaskType(value) - } + let [activeTask, setActiveTask] = useState({ id: 0, data: {} }); // HOLDS SELECTED TASK - const handleActiveTask = (id=0, data={}) => { // FUNCTION TO CHANGE SELECTED ACTIVE TASK - setActiveTask({id, data}) - } + const switchTaskType = ({ target: { value } }) => { + // FUNCTION TO CHANGE SELECTED ACTIVE TASK + setTaskType(value); + }; - const assignFamilyTask = () => { - setRequestStatus({loading: true, status: false, message: ''}) - let reqData = {} - if(taskType == 'select'){ // RUNS HERE IF TASK TYPE IS SELECT - if(!Object.keys(activeTask.data).length){ - setRequestStatus({loading: false, status: false, message: 'No Task is seleted'}) - return setTimeout(()=>{ - setRequestStatus({loading: false, status: false, message: ''}) - }, 3000) - } - reqData = { // API PAYLOADS - job_id: activeTask.data?.job_id, - job_uid: activeTask.data?.job_uid, - family_uid: familyDetails.uid, - job_description: activeTask.data?.description, - assign_mode: 110011, - } - - apiCall.assignFamilyTask(reqData).then(res => { - if(res.status != 200 || res.data.internal_return < 0){ - setRequestStatus({loading: false, status: false, message: 'failed to assign task'}) - return setTimeout(()=>{ - setRequestStatus({loading: false, status: false, message: ''}) - }, 5000) + const handleActiveTask = (id = 0, data = {}) => { + // FUNCTION TO CHANGE SELECTED ACTIVE TASK + setActiveTask({ id, data }); + }; + + const assignFamilyTask = () => { + setRequestStatus({ loading: true, status: false, message: "" }); + let reqData = {}; + if (taskType == "select") { + // RUNS HERE IF TASK TYPE IS SELECT + if (!Object.keys(activeTask.data).length) { + setRequestStatus({ + loading: false, + status: false, + message: "No Task is seleted", + }); + return setTimeout(() => { + setRequestStatus({ loading: false, status: false, message: "" }); + }, 3000); + } + reqData = { + // API PAYLOADS + job_id: activeTask.data?.job_id, + job_uid: activeTask.data?.job_uid, + family_uid: familyDetails.uid, + job_description: activeTask.data?.description, + assign_mode: 110011, + }; + + apiCall + .assignFamilyTask(reqData) + .then((res) => { + if (res.status != 200 || res.data.internal_return < 0) { + setRequestStatus({ + loading: false, + status: false, + message: "failed to assign task", + }); + return setTimeout(() => { + setRequestStatus({ loading: false, status: false, message: "" }); + }, 5000); } - setRequestStatus({loading: false, status: true, message: 'action successful'}) - setTimeout(()=>{ - setRequestStatus({loading: false, status: false, message: ''}) - action() // FUNCTION THAT CLOSES THE MODAL BOX - }, 5000) - }).catch(err => { - setRequestStatus({loading: false, status: false, message: 'An Error occured, try again'}) - setTimeout(()=>{ - setRequestStatus({loading: false, status: false, message: ''}) - }, 5000) + setRequestStatus({ + loading: false, + status: true, + message: "action successful", + }); + setTimeout(() => { + setRequestStatus({ loading: false, status: false, message: "" }); + action(); // FUNCTION THAT CLOSES THE MODAL BOX + }, 5000); }) - } - - if(taskType == 'new'){ // RUNS HERE IF TASK TYPE IS NEW TASK - console.log('TESTING') - } + .catch((err) => { + setRequestStatus({ + loading: false, + status: false, + message: "An Error occured, try again", + }); + setTimeout(() => { + setRequestStatus({ loading: false, status: false, message: "" }); + }, 5000); + }); } - useEffect(()=>{ - const reqData = { - limit: 30, - offset: 0, - job_type: 'FAMILY', - action: 13005 + if (taskType == "new") { + // RUNS HERE IF TASK TYPE IS NEW TASK + console.log("TESTING"); + } + }; + + useEffect(() => { + const reqData = { + limit: 30, + offset: 0, + job_type: "FAMILY", + action: 13005, + }; + apiCall + .getMyJobList(reqData) + .then((res) => { + setFamilyTask({ loading: false, data: res?.data?.result_list }); + if (res?.data?.result_list?.length) { + setActiveTask((prev) => ({ + ...prev, + data: res?.data?.result_list[0], + })); } - apiCall.getMyJobList(reqData).then(res => { - setFamilyTask({loading: false, data: res?.data?.result_list}) - if(res?.data?.result_list?.length){ - setActiveTask(prev => ({...prev, data:res?.data?.result_list[0]})) - } - }).catch(err => { - setFamilyTask({loading: false, data: []}) - console.log('Error', err) - }) - },[]) + }) + .catch((err) => { + setFamilyTask({ loading: false, data: [] }); + console.log("Error", err); + }); + }, []); + + // New Task + const [newTaskData, setNewTaskData] = useState({}) + const handleNewTaskData = (data) => { + setNewTaskData(data) + } + + console.log("Trying to see form data >>", newTaskData) return ( <> - -
-
-

- Assign task to {familyDetails?.firstname} -

- -
- {familyTask.loading ? -
- -
- : - <> -
-
-
-
- - Select Task -
-
- - New Task -
+ +
+
+

+ Assign task to {familyDetails?.firstname} +

+ +
+ {familyTask.loading ? ( +
+ +
+ ) : ( + <> +
+
+
+
+ + Select Task
-
- { - taskType == 'select' ? - familyTask?.data?.length ? - familyTask?.data?.map((item, index)=>( -
handleActiveTask(item.job_uid, item)}> - handleActiveTask(item.job_uid, item)} - className="w-[15px] h-[15px] cursor-pointer" +
+ + New Task +
+
+ {/* Task Type === select */} + {taskType == "select" && ( +
+ {familyTask?.data?.length ? ( + familyTask?.data?.map((item, index) => ( +
handleActiveTask(item.job_uid, item)} + > + + handleActiveTask(item.job_uid, item) + } + className="w-[15px] h-[15px] cursor-pointer" /> -

{item?.title}

+

+ {item?.title} +

- )) - : -

No Task found!

- : -

SPACE FOR NEW TASK

- } + )) + ) : ( +

+ No Task found! +

+ )}
-
+ )} + {taskType !== "select" && ( +
+ +
+ )} +
- {familyTask?.data?.length > 0 ? -
-
-

{activeTask?.data?.title}

-
- -
-
-
- -

{PriceFormatter(activeTask?.data?.price*0.01, activeTask?.data?.currency, activeTask?.data?.curreny_code)}

-
+ {/*Right Hand Side for details && Task Type === select */} + {taskType == "select" && ( + <> + {familyTask?.data?.length > 0 ? ( +
+
+

+ {activeTask?.data?.title} +

+
+ +
+
+
+ +

+ {PriceFormatter( + activeTask?.data?.price * 0.01, + activeTask?.data?.currency, + activeTask?.data?.curreny_code + )} +

+
-
- -

{`${activeTask?.data?.timeline_days} day(s)`}

+
+ +

{`${activeTask?.data?.timeline_days} day(s)`}

+
+
+ +
+ +
+ +
+ +