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

Merge branch 'suggested-task-page' of WrenchBoard/Users-Wrench into master

Browse Source
This commit is contained in:
Olusesan Ameye
2023-07-08 22:38:35 +00:00
committed by Gogs
parent 0cc70d66b3 3eb6960cc7
commit e80c3528db
4 changed files with 160 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx
+82 -73
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,29 @@ 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({ // let currencyErrMsg = field == "country" && "currency"
loading: false, setRequestStatus({
status: false, loading: false,
message: `${emptyField} Empty`, status: false,
}); message: `${field} is empty`,
});
setTimeout(() => { return setTimeout(() => {
setRequestStatus({ loading: false, status: false, message: "" }); setRequestStatus({ loading: false, status: false, message: "" });
}, 3000); }, 3000);
}
return;
} }
reqData = { reqData = {
@@ -117,7 +116,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,
}; };
} }
@@ -180,14 +179,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"
@@ -362,55 +364,62 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
</div> </div>
{/* BTN */} {/* BTN */}
<div className="p-2 border-t-2 flex justify-end items-center gap-3"> <div className="py-2 px-4 border-t-2 flex justify-between items-center">
{/* error or success display */} {/* error or success display */}
{requestStatus.message != "" && <div className="w-auto h-auto flex items-center">
(!requestStatus.status ? ( {requestStatus.message != "" &&
<div (!requestStatus.status ? (
className={`relative p-2 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
>
{requestStatus.message}
</div>
) : (
requestStatus.status && (
<div <div
className={`relative p-2 text-green-700 bg-slate-200 border-slate-800 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>
) ) : (
))} requestStatus.status && (
<div
className={`relative p-2 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
>
{requestStatus.message}
</div>
)
))}
</div>
{/* End of error or success display */} {/* End of error or success display */}
<button <div className="w-auto h-auto flex items-center gap-3">
disabled={requestStatus.loading} <button
onClick={action} disabled={requestStatus.loading}
type="button" onClick={action}
className="w-20 h-11 flex justify-center items-center border-gradient text-base rounded-full text-white cursor-pointer" type="button"
> className="w-20 h-11 flex justify-center items-center border-gradient text-base rounded-full text-white cursor-pointer"
<span className="text-gradient">Close</span> >
</button> <span className="text-gradient">Close</span>
<div className=""> </button>
{requestStatus.loading ? ( <div className="">
<LoadingSpinner color="sky-blue" size="8" /> {requestStatus.loading ? (
) : taskType == "select" ? ( <LoadingSpinner color="sky-blue" size="8" />
<button ) : taskType == "select" ? (
type="button" <button
disabled={requestStatus.loading} type="button"
onClick={assignFamilyTask} disabled={requestStatus.loading}
className="px-1 w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white cursor-pointer" onClick={assignFamilyTask}
> className="px-1 w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white cursor-pointer"
Assign >
</button> Assign
) : ( </button>
<button ) : (
type="button" <button
disabled={requestStatus.loading} type="button"
onClick={assignFamilyTask} disabled={requestStatus.loading}
className="px-1 w-40 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white cursor-pointer" onClick={assignFamilyTask}
> 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}`} >
</button> {`Assign to ${
)} familyDetails?.firstname || details?.firstName
}`}
</button>
)}
</div>
</div> </div>
</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
+53 -35
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,
@@ -16,7 +16,7 @@ const SuggestTask = ({ details, onClose, situation }) => {
}); });
const [suggestedNextStep, setSuggestedNextStep] = useState("Send Task"); const [suggestedNextStep, setSuggestedNextStep] = useState("Send Task");
const switchNextStep = (value) => { const switchNextStep = ({ target: value }) => {
setSuggestedNextStep(value); setSuggestedNextStep(value);
}; };
@@ -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 (
@@ -164,7 +176,7 @@ const SuggestTask = ({ details, onClose, situation }) => {
</div> </div>
{/* Radio buttons for family */} {/* Radio buttons for family */}
{pathname === "/manage-family" && ( {pathname === "/manage-family" ? (
<div className="h-[20px] w-full border-t dark:border-[#5356fb29] border-light-purple relative"> <div className="h-[20px] w-full border-t dark:border-[#5356fb29] border-light-purple relative">
<div id="my-radio-group" className="sr-only"> <div id="my-radio-group" className="sr-only">
Parent suggested next step Parent suggested next step
@@ -182,18 +194,21 @@ const SuggestTask = ({ details, onClose, situation }) => {
<label <label
role="group" role="group"
key={idx} key={idx}
htmlFor="parent-suggested" htmlFor={`parent-suggested-${idx}`}
className={`transition duration-150 ease-in-out parent-suggest`}
> >
<input <input
type="radio" type="radio"
name="parent-suggested" name="parent-suggested"
value={title} value={title}
checked={title == suggestedNextStep} checked={suggestedNextStep === title}
onChange={switchNextStep} onChange={switchNextStep}
className={`transition duration-150 ease-in-out parent-suggest`} className={`transition duration-150 ease-in-out parent-suggest`}
/> />
<span <span
onClick={switchNextStep} onClick={() => setSuggestedNextStep(title)}
id={`parent-suggested-${idx}`}
name="parent-suggested"
className={`ml-1 ${ className={`ml-1 ${
title == "Not Now" title == "Not Now"
? "text-red-500" ? "text-red-500"
@@ -208,9 +223,10 @@ const SuggestTask = ({ details, onClose, situation }) => {
))} ))}
</div> </div>
</div> </div>
)} ) : null}
</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 +236,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>