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

Continue Suggested Task

Browse Source
This commit is contained in:
Chukwumdiebube Ojinta
2023-07-08 22:52:36 +01:00
parent 0cc70d66b3
commit eb01e35c75
4 changed files with 107 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx
+38 -32
View File
@@ -6,7 +6,7 @@ import LoadingSpinner from "../../Spinners/LoadingSpinner";
import { PriceFormatter } from "../../Helpers/PriceFormatter"; import { PriceFormatter } from "../../Helpers/PriceFormatter";
import { NewTasks } from "./forms"; import { NewTasks } from "./forms";
function AssignTaskPopout({ action, situation, familyDetails }) { function AssignTaskPopout({ action, details, situation, familyDetails }) {
const apiCall = new usersService(); const apiCall = new usersService();
let [requestStatus, setRequestStatus] = useState({ let [requestStatus, setRequestStatus] = useState({
@@ -17,7 +17,7 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
let [familyTask, setFamilyTask] = useState({ loading: true, data: [] }); let [familyTask, setFamilyTask] = useState({ loading: true, data: [] });
let [taskType, setTaskType] = useState("select"); // SWITCHES BTW SELECT TASK AND NEW TASK let [taskType, setTaskType] = useState(details ? "new" : "select"); // SWITCHES BTW SELECT TASK AND NEW TASK
let [activeTask, setActiveTask] = useState({ id: 0, data: {} }); // HOLDS SELECTED TASK let [activeTask, setActiveTask] = useState({ id: 0, data: {} }); // HOLDS SELECTED TASK
@@ -34,14 +34,14 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
// New Task // New Task
const [formState, setFormState] = useState({ const [formState, setFormState] = useState({
// Initialize form state with desired fields // Initialize form state with desired fields
banner: "" || "default.jpg", banner: details?.banner || "default.jpg",
country: "" || "", country: details?.country || "",
price: "" || "", price: details?.price || "",
title: "" || "", title: details?.title || "",
description: "" || "", description: details?.description || "",
job_detail: "" || "", job_detail: details?.job_detail || "",
timeline_days: "" || "", timeline_days: details?.timeline_days || "",
category: [] || "", category: details?.category || "",
}); });
const assignFamilyTask = () => { const assignFamilyTask = () => {
@@ -81,30 +81,28 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
title, title,
} = formState; } = formState;
const requiredFields = [ const requiredFields = {
banner, banner,
category, // category,
country, country,
description, description,
job_detail, job_detail,
price, price,
timeline_days, timeline_days,
title, title,
]; };
if (requiredFields.some((field) => !field)) { for (let field in requiredFields) {
const emptyField = requiredFields.find((field) => !field); if (requiredFields[field] == "") {
setRequestStatus({ setRequestStatus({
loading: false, loading: false,
status: false, status: false,
message: `${emptyField} Empty`, message: `${field} is empty`,
}); });
return setTimeout(() => {
setTimeout(() => { setRequestStatus({ loading: false, status: false, message: "" });
setRequestStatus({ loading: false, status: false, message: "" }); }, 3000);
}, 3000); }
return;
} }
reqData = { reqData = {
@@ -117,7 +115,7 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
timeline_days, timeline_days,
title, title,
assign_mode: 110055, assign_mode: 110055,
family_uid: familyDetails.uid, family_uid: details?.family_uid || familyDetails?.uid,
}; };
} }
@@ -156,6 +154,8 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
}); });
}; };
console.log("state >>--<<", familyDetails);
useEffect(() => { useEffect(() => {
const reqData = { const reqData = {
limit: 30, limit: 30,
@@ -180,14 +180,17 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
}); });
}, []); }, []);
console.log("Trying to see form data >>", formState);
return ( return (
<> <>
<ModalCom action={action} situation={situation} className="assign-task-popup"> <ModalCom
action={action}
situation={situation}
className="assign-task-popup"
>
<div className="w-full h-full lg:w-[700px] lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl"> <div className="w-full h-full lg:w-[700px] lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
<div className="w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b dark:border-[#5356fb29] border-light-purple"> <div className="w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b dark:border-[#5356fb29] border-light-purple">
<h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide"> <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
Assign task to {familyDetails?.firstname} Assign task to {familyDetails?.firstname || details.firstName}
</h1> </h1>
<button <button
type="button" type="button"
@@ -367,7 +370,7 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
{requestStatus.message != "" && {requestStatus.message != "" &&
(!requestStatus.status ? ( (!requestStatus.status ? (
<div <div
className={`relative p-2 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`} className={`relative p-2 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px] self-start`}
> >
{requestStatus.message} {requestStatus.message}
</div> </div>
@@ -380,6 +383,7 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
</div> </div>
) )
))} ))}
{/* End of error or success display */} {/* End of error or success display */}
<button <button
disabled={requestStatus.loading} disabled={requestStatus.loading}
@@ -408,7 +412,9 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
onClick={assignFamilyTask} onClick={assignFamilyTask}
className="px-1 w-40 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white cursor-pointer" className="px-1 w-40 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white cursor-pointer"
> >
{`Assign to ${familyDetails?.firstname}`} {`Assign to ${
familyDetails?.firstname || details.firstName
}`}
</button> </button>
)} )}
</div> </div>
src/components/FamilyAcc/FamilyPopout/forms/NewTasks.jsx
+6 -4
View File
@@ -1,9 +1,8 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import usersService from "../../../../services/UsersService"; import usersService from "../../../../services/UsersService";
import InputCom from "../../../Helpers/Inputs/InputCom"; import InputCom from "../../../Helpers/Inputs/InputCom";
import debounce from "../../../../hooks/debounce";
const DEFAULT_IMAGE = require("../../../../assets/images/taskbanners/default.jpg"); // const DEFAULT_IMAGE =
export default function NewTasks({ formState, setFormState }) { export default function NewTasks({ formState, setFormState }) {
let [currency, setCurrency] = useState({ let [currency, setCurrency] = useState({
loading: true, loading: true,
@@ -11,6 +10,9 @@ export default function NewTasks({ formState, setFormState }) {
data: null, data: null,
}); });
const selectImage = require(`../../../../assets/images/taskbanners/${
formState.banner || "default.jpg"
}`);
const ApiCall = new usersService(); const ApiCall = new usersService();
// FUNCTION TO GET Currency // FUNCTION TO GET Currency
@@ -47,7 +49,7 @@ export default function NewTasks({ formState, setFormState }) {
}, []); }, []);
return ( return (
<form className="w-full flex justify-between items-center"> <form className="w-full flex justify-between items-start">
<div className="flex flex-col gap-3 max-w-[77%]"> <div className="flex flex-col gap-3 max-w-[77%]">
{/* inputs starts here */} {/* inputs starts here */}
<div className="grid md:grid-cols-3 grid-cols-1 gap-6 mb-[5px]"> <div className="grid md:grid-cols-3 grid-cols-1 gap-6 mb-[5px]">
@@ -207,7 +209,7 @@ export default function NewTasks({ formState, setFormState }) {
<div className="max-w-[20%] w-full"> <div className="max-w-[20%] w-full">
<div className="h-32 w-full"> <div className="h-32 w-full">
<img <img
src={DEFAULT_IMAGE} src={selectImage}
alt="task_banner_img" alt="task_banner_img"
className="w-full h-full object-contain" className="w-full h-full object-contain"
/> />
src/components/FamilyAcc/Tabs/FamilyWaitlist.jsx
+19
View File
@@ -2,9 +2,14 @@ import { useState } from "react";
import { handlePagingFunc, PaginatedList } from "../../Pagination"; import { handlePagingFunc, PaginatedList } from "../../Pagination";
import LoadingSpinner from "../../Spinners/LoadingSpinner"; import LoadingSpinner from "../../Spinners/LoadingSpinner";
import SuggestTask from "../../FamilyPopup/SuggestTask"; import SuggestTask from "../../FamilyPopup/SuggestTask";
import AssignTaskPopout from "../FamilyPopout/AssignTaskPopout";
const FamilyWaitlist = ({ familyData, className, accountDetails, loader }) => { const FamilyWaitlist = ({ familyData, className, accountDetails, loader }) => {
const [popUp, setPopUp] = useState({ show: false, data: {} }); const [popUp, setPopUp] = useState({ show: false, data: {} });
const [continueTaskPopup, setContinueTaskPopup] = useState({
show: false,
data: {},
});
let filteredFamilyData = familyData?.result_list?.filter( let filteredFamilyData = familyData?.result_list?.filter(
(data) => data?.family_uid === accountDetails?.family_uid (data) => data?.family_uid === accountDetails?.family_uid
@@ -112,9 +117,23 @@ const FamilyWaitlist = ({ familyData, className, accountDetails, loader }) => {
onClose={() => { onClose={() => {
setPopUp({ show: false, data: {} }); setPopUp({ show: false, data: {} });
}} }}
continuePopupData={(value) =>
setContinueTaskPopup({ show: true, data: { ...value } })
}
situation={popUp.show} situation={popUp.show}
/> />
)} )}
{/* Continue Task */}
{continueTaskPopup.show && (
<AssignTaskPopout
details={continueTaskPopup.data}
action={() => {
setContinueTaskPopup({ show: false, data: {} });
}}
situation={continueTaskPopup.show}
/>
)}
</div> </div>
); );
}; };
src/components/FamilyPopup/SuggestTask.jsx
+44 -29
View File
@@ -7,7 +7,7 @@ import usersService from "../../services/UsersService";
import Icons from "../Helpers/Icons"; import Icons from "../Helpers/Icons";
const DEFAULT_IMAGE = require("../../assets/images/family/default.jpg"); const DEFAULT_IMAGE = require("../../assets/images/family/default.jpg");
const SuggestTask = ({ details, onClose, situation }) => { const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
const { pathname, state } = useLocation(); const { pathname, state } = useLocation();
const [submitTask, setSubmitTask] = useState({ const [submitTask, setSubmitTask] = useState({
loading: false, loading: false,
@@ -29,7 +29,7 @@ const SuggestTask = ({ details, onClose, situation }) => {
const apiCall = new usersService(); const apiCall = new usersService();
const handleSubmit = async (values) => { const handleSuggestedTask = async (values) => {
if (!values.title && !values.description) return; if (!values.title && !values.description) return;
try { try {
setSubmitTask({ loading: true }); setSubmitTask({ loading: true });
@@ -49,7 +49,15 @@ const SuggestTask = ({ details, onClose, situation }) => {
} }
}; };
// console.log("state >-->>", state); const handleParentSuggestion = (values) => {
if (suggestedNextStep == "Send Task") {
let firstName = state?.firstname;
let family_uid = state?.family_uid
continuePopupData({ ...details, firstName, family_uid });
}
onClose();
};
return ( return (
<ModalCom action={onClose} situation={situation}> <ModalCom action={onClose} situation={situation}>
<div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto"> <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
@@ -87,7 +95,11 @@ const SuggestTask = ({ details, onClose, situation }) => {
</div> </div>
<Formik <Formik
initialValues={initialValues} initialValues={initialValues}
onSubmit={pathname !== "/manage-family" && handleSubmit} onSubmit={
pathname !== "/manage-family"
? handleSuggestedTask
: handleParentSuggestion
}
> >
{(props) => { {(props) => {
return ( return (
@@ -211,6 +223,7 @@ const SuggestTask = ({ details, onClose, situation }) => {
)} )}
</div> </div>
</div> </div>
<div className="w-full h-[70px] border-t border-light-purple dark:border-[#5356fb29] flex justify-end items-center"> <div className="w-full h-[70px] border-t border-light-purple dark:border-[#5356fb29] flex justify-end items-center">
<div className="flex items-center space-x-4 mr-9"> <div className="flex items-center space-x-4 mr-9">
<button <button
@@ -220,31 +233,33 @@ const SuggestTask = ({ details, onClose, situation }) => {
> >
<span className="text-gradient"> Cancel</span> <span className="text-gradient"> Cancel</span>
</button> </button>
{pathname !== "/manage-family" ? ( <button
<button type="submit"
type="submit" disabled={props.isSubmitting}
disabled={props.isSubmitting} className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full transition duration-150 ease-in-out flex items-center"
className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full transition duration-150 ease-in-out" >
> {pathname !== "/manage-family" ? (
{submitTask.loading <>
? "Submitting Task" {submitTask.loading
: submitTask.state == "success" ? "Submitting Task"
? "Task Submitted" : submitTask.state == "success"
: submitTask.state == "bad" ? "Task Submitted"
? "An Error Occurred" : submitTask.state == "bad"
: "Send to Parents"} ? "An Error Occurred"
</button> : "Send to Parents"}
) : ( </>
<button className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full flex items-center transition duration-150 ease-in-out"> ) : (
{suggestedNextStep == "Send Task" ? ( <>
<> {suggestedNextStep == "Send Task" ? (
Continue <Icons name="chevron-right" /> <>
</> Continue <Icons name="chevron-right" />
) : ( </>
"Complete" ) : (
)} "Complete"
</button> )}
)} </>
)}
</button>
</div> </div>
</div> </div>
</Form> </Form>