.
This commit is contained in:
@@ -1,7 +1,43 @@
|
||||
import React from "react";
|
||||
import React, { useMemo, useState } from "react";
|
||||
import ModalCom from "../Helpers/ModalCom";
|
||||
import { Form, Formik } from "formik";
|
||||
import InputCom from "../Helpers/Inputs/InputCom";
|
||||
import usersService from "../../services/UsersService";
|
||||
|
||||
const DEFAULT_IMAGE = require("../../assets/images/family/default.jpg");
|
||||
const SuggestTask = ({ details, onClose, situation }) => {
|
||||
const [submitTask, setSubmitTask] = useState({
|
||||
loading: false,
|
||||
msg: "",
|
||||
state: "",
|
||||
});
|
||||
// default image
|
||||
const selectedImage = details?.selectedImage || DEFAULT_IMAGE;
|
||||
const initialValues = {
|
||||
title: details?.title || "",
|
||||
description: details?.description || "",
|
||||
};
|
||||
|
||||
const apiCall = useMemo(() => new usersService(), []);
|
||||
|
||||
const handleSubmit = async (values) => {
|
||||
try {
|
||||
setSubmitTask({ loading: true });
|
||||
const reqData = { ...values };
|
||||
const res = await apiCall.sendFamilySuggestedTasks(reqData);
|
||||
if (res.internal_return < 0) {
|
||||
setSubmitTask({ loading: false, msg: res.status, state: "bad" });
|
||||
return;
|
||||
}
|
||||
setTimeout(() => {
|
||||
setSubmitTask({ loading: false, msg: res.status, state: "success" });
|
||||
onClose();
|
||||
}, 2000);
|
||||
} catch (error) {
|
||||
setSubmitTask({ loading: false, msg: error, state: "bad" });
|
||||
throw new Error("Error Occurred", error);
|
||||
}
|
||||
};
|
||||
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">
|
||||
@@ -35,40 +71,97 @@ const SuggestTask = ({ details, onClose, situation }) => {
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-5 w-full bg-white rounded-md flex flex-col justify-between">
|
||||
<div className="p-4 w-full md:w-2/4 md:border-r-2"></div>
|
||||
<Formik initialValues={initialValues} onSubmit={handleSubmit}>
|
||||
{(props) => {
|
||||
return (
|
||||
<Form>
|
||||
<div className="p-5 w-full bg-white rounded-md flex justify-between">
|
||||
<div className="p-4 w-full md:w-2/4 md:border-r-2">
|
||||
<div
|
||||
className="w-full h-[236px] p-6 bg-gray-400 rounded-xl overflow-hidden"
|
||||
style={{
|
||||
background: `url(${selectedImage}) 0% 0% / cover no-repeat`,
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
|
||||
{/* ACTION SECTION */}
|
||||
<div className="p-4 w-full md:w-2/4 h-full"></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
|
||||
type="button"
|
||||
className="text-18 text-light-red tracking-wide "
|
||||
>
|
||||
<span
|
||||
className="border-b dark:border-[#5356fb29] border-light-red"
|
||||
onClick={onClose}
|
||||
>
|
||||
{" "}
|
||||
Cancel
|
||||
</span>
|
||||
</button>
|
||||
{/* ACTION SECTION */}
|
||||
<div className="p-4 w-full md:w-2/4 h-full">
|
||||
{/* Title */}
|
||||
<div className="field w-full mb-[15px]">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="Title"
|
||||
labelClass="tracking-wide"
|
||||
inputBg="bg-slate-100"
|
||||
type="text"
|
||||
name="title"
|
||||
value={props.values.title}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
error={
|
||||
props.errors.title &&
|
||||
props.touched.title &&
|
||||
props.errors.title
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* {requestStatus.loading ? (
|
||||
{/* Description */}
|
||||
<div className="field w-full mb-[5px]">
|
||||
<label
|
||||
htmlFor="description"
|
||||
className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1'
|
||||
>
|
||||
Description
|
||||
{props.errors.description &&
|
||||
props.touched.description && (
|
||||
<span className="text-[12px] text-red-500">
|
||||
{props.errors.description}
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
<textarea
|
||||
id="description"
|
||||
rows="5"
|
||||
className={`input-field px-3 pt-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[130px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px]`}
|
||||
style={{ resize: "none" }}
|
||||
name="description"
|
||||
value={props.values.description}
|
||||
onChange={props.handleChange}
|
||||
onBlur={props.handleBlur}
|
||||
/>
|
||||
</div>
|
||||
</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
|
||||
type="button"
|
||||
className=" border-gradient text-18 tracking-wide px-4 py-3 rounded-full"
|
||||
onClick={onClose}
|
||||
>
|
||||
<span className="text-gradient"> Cancel</span>
|
||||
</button>
|
||||
|
||||
{/* {requestStatus.loading ? (
|
||||
<LoadingSpinner size="8" color="sky-blue" />
|
||||
) : ( */}
|
||||
<button
|
||||
type="submit"
|
||||
className="w-[152px] h-[46px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
// className='w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'
|
||||
>
|
||||
Send to Parent
|
||||
</button>
|
||||
{/* )} */}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={props.isSubmitting}
|
||||
className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full"
|
||||
// className='w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'
|
||||
>
|
||||
Send to Parents
|
||||
</button>
|
||||
{/* )} */}
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
);
|
||||
}}
|
||||
</Formik>
|
||||
</div>
|
||||
</ModalCom>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user