WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

pending assign value changed

Browse Source
This commit was merged in pull request #369.
This commit is contained in:
victorAnumudu
2023-08-01 15:42:28 +01:00
parent 711226f913
commit a0c3437eae
4 changed files with 112 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MyPendingJobs/MyPendingJobTable.jsx
+1
View File
@@ -6,6 +6,7 @@ import PendingJobsPopout from "../jobPopout/PendingJobsPopout";
import { PriceFormatter } from "../Helpers/PriceFormatter";
import localImgLoad from "../../lib/localImgLoad";
export default function MyPendingJobTable({ MyJobList, className }) {
let [jobPopout, setJobPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
src/components/MyPendingJobs/index.jsx
+8 -1
View File
@@ -3,6 +3,7 @@ import { Link } from "react-router-dom";
import Layout from "../Partials/Layout";
import CommonHead from "../UserHeader/CommonHead";
import MyPendingJobTable from "./MyPendingJobTable";
import LoadingSpinner from "../Spinners/LoadingSpinner";
export default function MyPendingJobs(props) {
const [selectTab, setValue] = useState("today");
@@ -35,7 +36,13 @@ export default function MyPendingJobs(props) {
></div>
</div>
</div>
<MyPendingJobTable MyJobList={props.MyJobList} />
{props.MyJobList.loading ?
<div className="bg-white">
<LoadingSpinner size='16' color='sky-blue' height='min-h-[300px]' />
</div>
:
<MyPendingJobTable MyJobList={props.MyJobList.data} />
}
</div>
</div>
</Layout>
src/components/jobPopout/PendingJobsPopout.jsx
+94 -41
View File
@@ -1,10 +1,14 @@
import React, { useCallback, useMemo, useState } from "react";
import Detail from "./popoutcomponent/Detail";
import ModalCom from "../Helpers/ModalCom";
import usersService from "../../services/UsersService";
import React, { useMemo, useState } from "react";
import { toast } from "react-toastify";
import LoadingSpinner from "../Spinners/LoadingSpinner";
import usersService from "../../services/UsersService";
import ModalCom from "../Helpers/ModalCom";
import { PriceFormatter } from "../Helpers/PriceFormatter";
import LoadingSpinner from "../Spinners/LoadingSpinner";
import Detail from "./popoutcomponent/Detail";
import { useNavigate } from "react-router-dom";
import { useDispatch } from "react-redux";
import { tableReload } from "../../store/TableReloads";
const showSuccessToast = (message) => {
toast.success(message, {
@@ -14,48 +18,85 @@ const showSuccessToast = (message) => {
};
function PendingJobsPopout({ details, onClose, situation }) {
const dispatch = useDispatch()
const navigate = useNavigate()
const [pendingJobLoader, setPendingJobLoader] = useState({
extend: false,
offer: false,
});
const apiCall = useMemo(() => new usersService(), []);
const handlePendingJobsBtn = useCallback(
async ({ target: { name } }) => {
let [requestMessage, setRequestMessage] = useState({status: false, message: ''})
const apiCall = new usersService();
const handlePendingJobsBtn = ({ target: { name } }) => {
let { job_uid, offer_code } = details;
let reqData;
let pendingData = { job_uid, offer_code };
if(name=='extend'){ // RUNS THIS TO EXTEND JOB EXPIRY BY ONE WEEK
reqData = { ...pendingData };
setPendingJobLoader({ extend: true });
apiCall.pendingJobExtend(reqData).then(res => {
setRequestMessage({status: true, message: res.data.result})
dispatch(tableReload({ type: "PENDINGTABLE" }));
setTimeout(() => {
setPendingJobLoader({ extend: false, offer: false });
setRequestMessage({status: false, message: ''})
onClose();
}, 2700);
}).catch(error => {
setRequestMessage({status: false, message:'Try Again'})
setTimeout(() => {
setPendingJobLoader({ extend: false, offer: false });
setRequestMessage({status: false, message: ''})
}, 2700);
})
}else if(name=='offer'){ // RUNS THIS IF JOB IS SENT TO USER
reqData = { ...pendingData };
setPendingJobLoader({ offer: true });
apiCall.pendingJobSendTome(reqData).then(res => {
setRequestMessage({status: true, message: res.data.result})
setTimeout(() => {
setPendingJobLoader({ extend: false, offer: false });
setRequestMessage({status: false, message: ''})
}, 2700);
}).catch(error => {
setRequestMessage('Try Again')
setTimeout(() => {
setPendingJobLoader({ extend: false, offer: false });
setRequestMessage({status: false, message: ''})
}, 2700);
})
} else return
// try {
// if (name === "extend") {
// setPendingJobLoader({ extend: true });
// reqData = { ...pendingData };
// // let { data } =
// await apiCall.pendingJobExtend(reqData);
// showSuccessToast("Job has been extended by a week!");
// dispatch(tableReload({ type: "PENDINGTABLE" }));
// } else if (name === "offer") {
// setPendingJobLoader({ offer: true });
// reqData = { ...pendingData };
// // let { data } =
// await apiCall.pendingJobSendTome(reqData);
// showSuccessToast("Offer sent, check your email");
// } else return;
try {
if (name === "extend") {
setPendingJobLoader({ extend: true });
reqData = { ...pendingData };
// let { data } =
await apiCall.pendingJobExtend(reqData);
// console.log("This is for extend", data);
showSuccessToast("Job has been extended by a week!");
} else if (name === "offer") {
setPendingJobLoader({ offer: true });
reqData = { ...pendingData };
// let { data } =
await apiCall.pendingJobSendTome(reqData);
// console.log("This is for offer", data);
showSuccessToast("Offer sent, check your email");
} else return;
setTimeout(() => {
setPendingJobLoader({ extend: false, offer: false });
onClose();
}, 2700);
} catch (error) {
setPendingJobLoader({ extend: false, offer: false });
throw new Error(error);
}
},
[onClose, apiCall, details]
);
// setTimeout(() => {
// setPendingJobLoader({ extend: false, offer: false });
// onClose();
// }, 2700);
// } catch (error) {
// setPendingJobLoader({ extend: false, offer: false });
// throw new Error(error);
// }
}
return (
<ModalCom action={onClose} situation={situation} className="edit-popup">
@@ -101,7 +142,8 @@ function PendingJobsPopout({ details, onClose, situation }) {
</span>
<div className="">
<p className="text-sm">
This Job have been sent to public view
{/* This Job have been sent to public view */}
This Job have been sent to {details.job_to}
</p>
<p className="text-sm text-slate-600">This Job will expire</p>
</div>
@@ -153,13 +195,13 @@ function PendingJobsPopout({ details, onClose, situation }) {
/>
</div>
<div className="my-2 md:flex">
{/* <div className="my-2 md:flex">
<Detail
label="Public Link"
value="https://work.wrenchboard.com/plb/viewjob/218B4BWB83"
bg="bg-slate-200"
/>
</div>
</div> */}
</div>
{/* ACTION SECTION */}
@@ -168,11 +210,11 @@ function PendingJobsPopout({ details, onClose, situation }) {
<div className="mb-3">
<p className="px-2 py-1 text-sm bg-slate-100">
Job sent to public view
Job sent to {details.job_to}
</p>
</div>
<div className="my-3">
<div className="mt-3 mb-8">
<button
className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
onClick={handlePendingJobsBtn}
@@ -187,6 +229,11 @@ function PendingJobsPopout({ details, onClose, situation }) {
)}
</button>
</div>
{pendingJobLoader.extend && requestMessage.message &&
<div className={`p-1 ${requestMessage.status ? 'bg-green-500':'bg-red-500'} text-white rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}>
<p>{requestMessage.message}</p>
</div>
}
<div className="my-3">
<button
@@ -204,6 +251,12 @@ function PendingJobsPopout({ details, onClose, situation }) {
</button>
</div>
{pendingJobLoader.offer && requestMessage.message &&
<div className={`p-1 ${requestMessage.status ? 'bg-green-500':'bg-red-500'} text-white rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}>
<p>{requestMessage.message}</p>
</div>
}
<div className="mt-10 md:mt-32 md:flex md:justify-center">
<button
className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
src/views/MyPendingJobsPage.jsx
+9 -3
View File
@@ -5,20 +5,26 @@ import { useSelector } from "react-redux";
export default function MyPendingJobsPage() {
let { commonHeadBanner } = useSelector((state) => state.commonHeadBanner);
const [MyJobList, setMyJobList] = useState([]);
let { pendingListTable } = useSelector((state) => state.tableReload);
console.log('TESTING', pendingListTable)
const [MyJobList, setMyJobList] = useState({loading: true, data: []});
const api = new usersService();
const getMyJobList = async () => {
try {
const res = await api.getMyPendingJobList();
setMyJobList(res.data);
setMyJobList({loading: false, data: res.data});
} catch (error) {
setMyJobList({loading: false, data: []});
console.log("Error getting mode");
}
};
useEffect(() => {
getMyJobList();
}, []);
}, [pendingListTable]);
// debugger;
return (