Merge branch 'suggested-task-page' of WrenchBoard/Users-Wrench into master
This commit is contained in:
Gogs
@@ -6,7 +6,7 @@ import LoadingSpinner from "../../Spinners/LoadingSpinner";
|
||||
import { PriceFormatter } from "../../Helpers/PriceFormatter";
|
||||
import { NewTasks } from "./forms";
|
||||
|
||||
function AssignTaskPopout({ action, situation, familyDetails }) {
|
||||
function AssignTaskPopout({ action, details, situation, familyDetails }) {
|
||||
const apiCall = new usersService();
|
||||
|
||||
let [requestStatus, setRequestStatus] = useState({
|
||||
@@ -17,7 +17,7 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
|
||||
|
||||
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
|
||||
|
||||
@@ -34,14 +34,14 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
|
||||
// New Task
|
||||
const [formState, setFormState] = useState({
|
||||
// Initialize form state with desired fields
|
||||
banner: "" || "default.jpg",
|
||||
country: "" || "",
|
||||
price: "" || "",
|
||||
title: "" || "",
|
||||
description: "" || "",
|
||||
job_detail: "" || "",
|
||||
timeline_days: "" || "",
|
||||
category: [] || "",
|
||||
banner: details?.banner || "default.jpg",
|
||||
country: details?.country || "",
|
||||
price: details?.price || "",
|
||||
title: details?.title || "",
|
||||
description: details?.description || "",
|
||||
job_detail: details?.job_detail || "",
|
||||
timeline_days: details?.timeline_days || "",
|
||||
category: details?.category || "",
|
||||
});
|
||||
|
||||
const assignFamilyTask = () => {
|
||||
@@ -81,30 +81,29 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
|
||||
title,
|
||||
} = formState;
|
||||
|
||||
const requiredFields = [
|
||||
const requiredFields = {
|
||||
banner,
|
||||
category,
|
||||
// category,
|
||||
country,
|
||||
description,
|
||||
job_detail,
|
||||
price,
|
||||
timeline_days,
|
||||
title,
|
||||
];
|
||||
};
|
||||
|
||||
if (requiredFields.some((field) => !field)) {
|
||||
const emptyField = requiredFields.find((field) => !field);
|
||||
setRequestStatus({
|
||||
loading: false,
|
||||
status: false,
|
||||
message: `${emptyField} Empty`,
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
setRequestStatus({ loading: false, status: false, message: "" });
|
||||
}, 3000);
|
||||
|
||||
return;
|
||||
for (let field in requiredFields) {
|
||||
if (requiredFields[field] == "") {
|
||||
// let currencyErrMsg = field == "country" && "currency"
|
||||
setRequestStatus({
|
||||
loading: false,
|
||||
status: false,
|
||||
message: `${field} is empty`,
|
||||
});
|
||||
return setTimeout(() => {
|
||||
setRequestStatus({ loading: false, status: false, message: "" });
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
|
||||
reqData = {
|
||||
@@ -117,7 +116,7 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
|
||||
timeline_days,
|
||||
title,
|
||||
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 (
|
||||
<>
|
||||
<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 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">
|
||||
Assign task to {familyDetails?.firstname}
|
||||
Assign task to {familyDetails?.firstname || details.firstName}
|
||||
</h1>
|
||||
<button
|
||||
type="button"
|
||||
@@ -362,55 +364,62 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
|
||||
</div>
|
||||
|
||||
{/* 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 */}
|
||||
{requestStatus.message != "" &&
|
||||
(!requestStatus.status ? (
|
||||
<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]`}
|
||||
>
|
||||
{requestStatus.message}
|
||||
</div>
|
||||
) : (
|
||||
requestStatus.status && (
|
||||
<div className="w-auto h-auto flex items-center">
|
||||
{requestStatus.message != "" &&
|
||||
(!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]`}
|
||||
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}
|
||||
</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 */}
|
||||
<button
|
||||
disabled={requestStatus.loading}
|
||||
onClick={action}
|
||||
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>
|
||||
<div className="">
|
||||
{requestStatus.loading ? (
|
||||
<LoadingSpinner color="sky-blue" size="8" />
|
||||
) : taskType == "select" ? (
|
||||
<button
|
||||
type="button"
|
||||
disabled={requestStatus.loading}
|
||||
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>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
disabled={requestStatus.loading}
|
||||
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>
|
||||
)}
|
||||
<div className="w-auto h-auto flex items-center gap-3">
|
||||
<button
|
||||
disabled={requestStatus.loading}
|
||||
onClick={action}
|
||||
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>
|
||||
<div className="">
|
||||
{requestStatus.loading ? (
|
||||
<LoadingSpinner color="sky-blue" size="8" />
|
||||
) : taskType == "select" ? (
|
||||
<button
|
||||
type="button"
|
||||
disabled={requestStatus.loading}
|
||||
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>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
disabled={requestStatus.loading}
|
||||
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 || details?.firstName
|
||||
}`}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import usersService from "../../../../services/UsersService";
|
||||
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 }) {
|
||||
let [currency, setCurrency] = useState({
|
||||
loading: true,
|
||||
@@ -11,6 +10,9 @@ export default function NewTasks({ formState, setFormState }) {
|
||||
data: null,
|
||||
});
|
||||
|
||||
const selectImage = require(`../../../../assets/images/taskbanners/${
|
||||
formState.banner || "default.jpg"
|
||||
}`);
|
||||
const ApiCall = new usersService();
|
||||
|
||||
// FUNCTION TO GET Currency
|
||||
@@ -47,7 +49,7 @@ export default function NewTasks({ formState, setFormState }) {
|
||||
}, []);
|
||||
|
||||
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%]">
|
||||
{/* inputs starts here */}
|
||||
<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="h-32 w-full">
|
||||
<img
|
||||
src={DEFAULT_IMAGE}
|
||||
src={selectImage}
|
||||
alt="task_banner_img"
|
||||
className="w-full h-full object-contain"
|
||||
/>
|
||||
|
||||
@@ -2,9 +2,14 @@ import { useState } from "react";
|
||||
import { handlePagingFunc, PaginatedList } from "../../Pagination";
|
||||
import LoadingSpinner from "../../Spinners/LoadingSpinner";
|
||||
import SuggestTask from "../../FamilyPopup/SuggestTask";
|
||||
import AssignTaskPopout from "../FamilyPopout/AssignTaskPopout";
|
||||
|
||||
const FamilyWaitlist = ({ familyData, className, accountDetails, loader }) => {
|
||||
const [popUp, setPopUp] = useState({ show: false, data: {} });
|
||||
const [continueTaskPopup, setContinueTaskPopup] = useState({
|
||||
show: false,
|
||||
data: {},
|
||||
});
|
||||
|
||||
let filteredFamilyData = familyData?.result_list?.filter(
|
||||
(data) => data?.family_uid === accountDetails?.family_uid
|
||||
@@ -112,9 +117,23 @@ const FamilyWaitlist = ({ familyData, className, accountDetails, loader }) => {
|
||||
onClose={() => {
|
||||
setPopUp({ show: false, data: {} });
|
||||
}}
|
||||
continuePopupData={(value) =>
|
||||
setContinueTaskPopup({ show: true, data: { ...value } })
|
||||
}
|
||||
situation={popUp.show}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Continue Task */}
|
||||
{continueTaskPopup.show && (
|
||||
<AssignTaskPopout
|
||||
details={continueTaskPopup.data}
|
||||
action={() => {
|
||||
setContinueTaskPopup({ show: false, data: {} });
|
||||
}}
|
||||
situation={continueTaskPopup.show}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -7,7 +7,7 @@ import usersService from "../../services/UsersService";
|
||||
import Icons from "../Helpers/Icons";
|
||||
|
||||
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 [submitTask, setSubmitTask] = useState({
|
||||
loading: false,
|
||||
@@ -16,7 +16,7 @@ const SuggestTask = ({ details, onClose, situation }) => {
|
||||
});
|
||||
const [suggestedNextStep, setSuggestedNextStep] = useState("Send Task");
|
||||
|
||||
const switchNextStep = (value) => {
|
||||
const switchNextStep = ({ target: value }) => {
|
||||
setSuggestedNextStep(value);
|
||||
};
|
||||
|
||||
@@ -29,7 +29,7 @@ const SuggestTask = ({ details, onClose, situation }) => {
|
||||
|
||||
const apiCall = new usersService();
|
||||
|
||||
const handleSubmit = async (values) => {
|
||||
const handleSuggestedTask = async (values) => {
|
||||
if (!values.title && !values.description) return;
|
||||
try {
|
||||
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 (
|
||||
<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">
|
||||
@@ -87,7 +95,11 @@ const SuggestTask = ({ details, onClose, situation }) => {
|
||||
</div>
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
onSubmit={pathname !== "/manage-family" && handleSubmit}
|
||||
onSubmit={
|
||||
pathname !== "/manage-family"
|
||||
? handleSuggestedTask
|
||||
: handleParentSuggestion
|
||||
}
|
||||
>
|
||||
{(props) => {
|
||||
return (
|
||||
@@ -164,7 +176,7 @@ const SuggestTask = ({ details, onClose, situation }) => {
|
||||
</div>
|
||||
|
||||
{/* 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 id="my-radio-group" className="sr-only">
|
||||
Parent suggested next step
|
||||
@@ -182,18 +194,21 @@ const SuggestTask = ({ details, onClose, situation }) => {
|
||||
<label
|
||||
role="group"
|
||||
key={idx}
|
||||
htmlFor="parent-suggested"
|
||||
htmlFor={`parent-suggested-${idx}`}
|
||||
className={`transition duration-150 ease-in-out parent-suggest`}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="parent-suggested"
|
||||
value={title}
|
||||
checked={title == suggestedNextStep}
|
||||
checked={suggestedNextStep === title}
|
||||
onChange={switchNextStep}
|
||||
className={`transition duration-150 ease-in-out parent-suggest`}
|
||||
/>
|
||||
<span
|
||||
onClick={switchNextStep}
|
||||
onClick={() => setSuggestedNextStep(title)}
|
||||
id={`parent-suggested-${idx}`}
|
||||
name="parent-suggested"
|
||||
className={`ml-1 ${
|
||||
title == "Not Now"
|
||||
? "text-red-500"
|
||||
@@ -208,9 +223,10 @@ const SuggestTask = ({ details, onClose, situation }) => {
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<button
|
||||
@@ -220,31 +236,33 @@ const SuggestTask = ({ details, onClose, situation }) => {
|
||||
>
|
||||
<span className="text-gradient"> Cancel</span>
|
||||
</button>
|
||||
{pathname !== "/manage-family" ? (
|
||||
<button
|
||||
type="submit"
|
||||
disabled={props.isSubmitting}
|
||||
className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full transition duration-150 ease-in-out"
|
||||
>
|
||||
{submitTask.loading
|
||||
? "Submitting Task"
|
||||
: submitTask.state == "success"
|
||||
? "Task Submitted"
|
||||
: submitTask.state == "bad"
|
||||
? "An Error Occurred"
|
||||
: "Send to Parents"}
|
||||
</button>
|
||||
) : (
|
||||
<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" ? (
|
||||
<>
|
||||
Continue <Icons name="chevron-right" />
|
||||
</>
|
||||
) : (
|
||||
"Complete"
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type="submit"
|
||||
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"
|
||||
>
|
||||
{pathname !== "/manage-family" ? (
|
||||
<>
|
||||
{submitTask.loading
|
||||
? "Submitting Task"
|
||||
: submitTask.state == "success"
|
||||
? "Task Submitted"
|
||||
: submitTask.state == "bad"
|
||||
? "An Error Occurred"
|
||||
: "Send to Parents"}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{suggestedNextStep == "Send Task" ? (
|
||||
<>
|
||||
Continue <Icons name="chevron-right" />
|
||||
</>
|
||||
) : (
|
||||
"Complete"
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
|
||||
Reference in New Issue
Block a user