From 25df0d6160d0573af6b885fb19c8c7f7e8f625d6 Mon Sep 17 00:00:00 2001 From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com> Date: Tue, 31 Dec 2024 15:47:48 +0530 Subject: [PATCH] [fixed] - io Deatils --- .../IO_Management/CreateIO/IODetails.jsx | 264 +++++++++--------- 1 file changed, 139 insertions(+), 125 deletions(-) diff --git a/src/Pages/IO_Management/CreateIO/IODetails.jsx b/src/Pages/IO_Management/CreateIO/IODetails.jsx index 06f528d..ee1bf09 100644 --- a/src/Pages/IO_Management/CreateIO/IODetails.jsx +++ b/src/Pages/IO_Management/CreateIO/IODetails.jsx @@ -12,11 +12,12 @@ import { useUpdateIOMutation, } from "../../../Services/io.service"; import ToastBox from "../../../Components/ToastBox"; -import { - useToast, -} from "@chakra-ui/react"; +import { useToast } from "@chakra-ui/react"; import { formatDatee } from "../../../Components/FormField"; -import { formatDateToYYYYMMDD, removeTrailingZeros } from "../../../Constants/Constants"; +import { + formatDateToYYYYMMDD, + removeTrailingZeros, +} from "../../../Constants/Constants"; const schema = yup.object().shape({ investmentNameEnglish: yup @@ -25,7 +26,7 @@ const schema = yup.object().shape({ .min(3, "IO name in English must be at least 3 characters long") .max(150, "IO name in English must be at most 150 characters long"), - investmentNameArabic: yup + investmentNameArabic: yup .string() .required("IO name in Arabic is required") .min(3, "IO name in Arabic must be at least 3 characters long") @@ -42,15 +43,15 @@ const schema = yup.object().shape({ .required("Description in Arabic is required") .min(10, "Description in Arabic must be at least 10 characters long") .max(2000, "Description in Arabic must be at most 500 characters long"), - expectedReturnArabic: yup - .string() - .required("Expected return in Arabic is required"), + expectedReturnArabic: yup + .string() + .required("Expected return in Arabic is required"), - goalAmount: yup - .number() - .typeError("Goal Amount is must be number") - .required('Goal amount is required') - .positive('Goal amount must be a positive number'), + goalAmount: yup + .number() + .typeError("Goal Amount is must be number") + .required("Goal amount is required") + .positive("Goal amount must be a positive number"), closingDate: yup .date() .notRequired("Closing date is required") @@ -69,28 +70,25 @@ const schema = yup.object().shape({ InvestmentDetails: yup.string().notRequired(), - comment: yup.string().notRequired() - // .min(10, "Comment must be at least 10 characters long") - .max(100, "Comment must be at most 100 characters long"), - - expectedReturn: yup + comment: yup .string() - .required("Expected return is required"), + .notRequired() + // .min(10, "Comment must be at least 10 characters long") + .max(100, "Comment must be at most 100 characters long"), + + expectedReturn: yup.string().required("Expected return is required"), }); const IODetails = ({ enableNextTab, index, data }) => { - const params = useParams(); const navigate = useNavigate(); const toast = useToast(); - const handleInputChangeCreate = (index, newValue) => { - const updatedValues = [...values]; updatedValues[index].value = newValue; setValues(updatedValues); - console.log(values); + console.log(values); }; const handleInputChangeEdit = (index, newValue) => { @@ -143,9 +141,12 @@ const IODetails = ({ enableNextTab, index, data }) => { }); const miniValue = data?.country?.map( - ({ countryName, flagIcon, minInvestmentAmt, countryCode, id, currency }, index) => { + ( + { countryName, flagIcon, minInvestmentAmt, countryCode, id, currency }, + index + ) => { return { - id:id, + id: id, country: countryName, value: minInvestmentAmt, logo: flagIcon, @@ -154,18 +155,19 @@ const IODetails = ({ enableNextTab, index, data }) => { } ); - const minInvestmentById = IObyID?.data?.minInvestmentAmt?.map(({minInvestmentAmt, country, currencyCode, country_xid,id })=>{ - console.log(currencyCode); - return{ - _id:id, - id:country_xid, - country: country?.countryName, - value: removeTrailingZeros(minInvestmentAmt), - logo: country?.flagIcon, - curr: currencyCode, + const minInvestmentById = IObyID?.data?.minInvestmentAmt?.map( + ({ minInvestmentAmt, country, currencyCode, country_xid, id }) => { + console.log(currencyCode); + return { + _id: id, + id: country_xid, + country: country?.countryName, + value: removeTrailingZeros(minInvestmentAmt), + logo: country?.flagIcon, + curr: currencyCode, + }; } - }) - + ); const schemaEdit = yup.object().shape({ investmentNameEnglish: yup @@ -173,73 +175,67 @@ const IODetails = ({ enableNextTab, index, data }) => { .required("IO name in English is required") .min(3, "IO name in English must be at least 3 characters long") .max(150, "IO name in English must be at most 150 characters long"), - + investmentNameArabic: yup .string() .required("IO name in Arabic is required") .min(3, "IO name in Arabic must be at least 3 characters long") .max(50, "IO name in Arabic must be at most 50 characters long"), - + descriptionEnglish: yup .string() .required("Description in English is required") .min(10, "Description in English must be at least 10 characters long") .max(1000, "Description in English must be at most 1000 characters long"), - + descriptionArabic: yup .string() .required("Description in Arabic is required") .min(10, "Description in Arabic must be at least 10 characters long") .max(2000, "Description in Arabic must be at most 500 characters long"), - expectedReturnArabic: yup - .string() - .required("Expected return in Arabic is required"), - - goalAmount: yup - .number() - .typeError("Goal Amount is must be number") - .required('Goal amount is required') - .positive('Goal amount must be a positive number') - .min(IObyID?.data?.totalAmtInvestmentInUSD, `Goal amount should not be lesser then amount raised ${IObyID?.data?.totalAmtInvestmentInUSD}`), - closingDate: yup - .date() - .notRequired("Closing date is required") - .min(new Date(), "Closing date cannot be in the past"), - + expectedReturnArabic: yup + .string() + .required("Expected return in Arabic is required"), + + goalAmount: yup + .number() + .typeError("Goal Amount is must be number") + .required("Goal amount is required") + .positive("Goal amount must be a positive number") + .min( + IObyID?.data?.totalAmtInvestmentInUSD, + `Goal amount should not be lesser then amount raised ${IObyID?.data?.totalAmtInvestmentInUSD}` + ), + closingDate: yup.date().notRequired("Closing date is required"), + holdingPeriod: yup.string().required("Holding period is required"), holdingPeriodArabic: yup.string().required("Holding period is required"), isShariah: yup.string().required("CheckBox is required"), - // minInvestmentAmount: yup // .number() // .required("Minimum investment is required") // .positive("Minimum investment must be a positive number") // .min(1, "Minimum investment must be at least 1"), - + ISIN: yup.string().notRequired(), - + InvestmentDetails: yup.string().notRequired(), - - comment: yup.string().notRequired() - .min(10, "Comment must be at least 10 characters long") - .max(100, "Comment must be at most 100 characters long"), - - expectedReturn: yup + + comment: yup .string() - .required("Expected return is required"), + .notRequired() + .min(10, "Comment must be at least 10 characters long") + .max(100, "Comment must be at most 100 characters long"), + + expectedReturn: yup.string().required("Expected return is required"), }); - - - - const [values, setValues] = useState(id?minInvestmentById:miniValue); + const [values, setValues] = useState(id ? minInvestmentById : miniValue); - const formatNumber = (num) => { // Remove non-numeric characters and format with commas - return num.replace(/\D/g, '') - .replace(/\B(?=(\d{3})+(?!\d))/g, ','); + return num.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ","); }; // console.log(values); @@ -253,10 +249,11 @@ const IODetails = ({ enableNextTab, index, data }) => { formState: { errors }, } = useForm({ resolver: yupResolver(id ? schemaEdit : schema), + mode: "all", }); useEffect(() => { - setIOloading(IObyIDisLoading) + setIOloading(IObyIDisLoading); setIODetails({ ...IObyID?.data, }); @@ -277,10 +274,9 @@ const IODetails = ({ enableNextTab, index, data }) => { minInvestmentAmount: IObyID?.data?.minInvestmentAmount, holdingPeriodArabic: IObyID?.data?.minInvestmentAmount, expectedReturnArabic: IObyID?.data?.minInvestmentAmount, - isShariah: IObyID?.data?.isShariah + isShariah: IObyID?.data?.isShariah, }); } - }, [id, IObyID]); //=======================[ Creator ] @@ -293,8 +289,10 @@ const IODetails = ({ enableNextTab, index, data }) => { isRequired: true, section: " ", width: "49%", - maxLength:150, - helperText:`Maximum length should be 150 characters. You have entered ${watch()?.investmentNameEnglish?.length || 0} characters.` + maxLength: 150, + helperText: `Maximum length should be 150 characters. You have entered ${ + watch()?.investmentNameEnglish?.length || 0 + } characters.`, }, { label: "IO Name (Arabic)", @@ -305,8 +303,10 @@ const IODetails = ({ enableNextTab, index, data }) => { arabic: true, section: " ", width: "49%", - maxLength:150, - helperText:`Maximum length should be 150 characters. You have entered ${watch()?.investmentNameArabic?.length || 0} characters.` + maxLength: 150, + helperText: `Maximum length should be 150 characters. You have entered ${ + watch()?.investmentNameArabic?.length || 0 + } characters.`, }, { label: "Description", @@ -316,8 +316,10 @@ const IODetails = ({ enableNextTab, index, data }) => { isRequired: true, section: " ", width: "49%", - maxLength:1000, - helperText:`Maximum length should be 1000 characters. You have entered ${watch()?.descriptionEnglish?.length || 0} characters.` + maxLength: 1000, + helperText: `Maximum length should be 1000 characters. You have entered ${ + watch()?.descriptionEnglish?.length || 0 + } characters.`, }, { label: "Description (Arabic)", @@ -328,9 +330,10 @@ const IODetails = ({ enableNextTab, index, data }) => { arabic: true, section: " ", width: "49%", - maxLength:1000, - helperText:`Maximum length should be 1000 characters. You have entered ${watch()?.descriptionArabic?.length || 0} characters.` - + maxLength: 1000, + helperText: `Maximum length should be 1000 characters. You have entered ${ + watch()?.descriptionArabic?.length || 0 + } characters.`, }, { label: "Holding Period", @@ -341,8 +344,10 @@ const IODetails = ({ enableNextTab, index, data }) => { section: " ", width: "49%", value: IObyID?.data?.holdingPeriod, - maxLength:20, - helperText:`Maximum length should be 20 characters. You have entered ${watch()?.holdingPeriod?.length || 0} characters.` + maxLength: 20, + helperText: `Maximum length should be 20 characters. You have entered ${ + watch()?.holdingPeriod?.length || 0 + } characters.`, }, { label: "Holding Period (Arabic)", @@ -354,11 +359,12 @@ const IODetails = ({ enableNextTab, index, data }) => { section: " ", width: "49%", value: IObyID?.data?.holdingPeriodArabic, - maxLength:20, - helperText:`Maximum length should be 20 characters. You have entered ${watch()?.holdingPeriodArabic?.length || 0} characters.` + maxLength: 20, + helperText: `Maximum length should be 20 characters. You have entered ${ + watch()?.holdingPeriodArabic?.length || 0 + } characters.`, }, - { label: "Expected Return", name: "expectedReturn", @@ -371,7 +377,7 @@ const IODetails = ({ enableNextTab, index, data }) => { { label: "Expected Return (Arabic)", - name: "expectedReturnArabic", + name: "expectedReturnArabic", type: "text", isRequired: true, arabic: true, @@ -381,16 +387,15 @@ const IODetails = ({ enableNextTab, index, data }) => { }, { label: "Shariah", - name: "isShariah", + name: "isShariah", type: "checkBox", - value:IObyID?.data?.isShariah, + value: IObyID?.data?.isShariah, // isRequired: true, section: " ", width: "32.3%", value: IObyID?.data?.isShariah, }, - { label: "Investment Type", placeHolder: "Select option", @@ -428,19 +433,19 @@ const IODetails = ({ enableNextTab, index, data }) => { name: "closingDate", // value: "IObyID?.data?.closingDate", type: "date", - isRequired: true, + // isRequired: true, section: " ", width: "32.3%", - dateValue:formatDatee(IObyID?.data?.closingDate), + dateValue: formatDatee(IObyID?.data?.closingDate), // helperText: IObyID && `Current closing date is : ${formatDate(IObyID?.data?.closingDate)}` - closingDate:true + // closingDate:true }, { label: "ISIN", placeHolder: "", name: "ISIN", type: "text", - align:"right", + align: "right", section: " ", width: "32.3%", }, @@ -452,8 +457,10 @@ const IODetails = ({ enableNextTab, index, data }) => { section: " ", width: "32.3%", value: IObyID?.data?.InvestmentDetails, - maxLength:20, - helperText:`Maximum length should be 20 characters. You have entered ${watch()?.InvestmentDetails?.length || 0} characters.` + maxLength: 20, + helperText: `Maximum length should be 20 characters. You have entered ${ + watch()?.InvestmentDetails?.length || 0 + } characters.`, }, { @@ -462,10 +469,10 @@ const IODetails = ({ enableNextTab, index, data }) => { name: "table", type: "table", section: " ", - width: "100%", + width: "100%", isRequired: true, options: investmentTypeOptions, - handleInputChange:id ? handleInputChangeEdit : handleInputChangeCreate, + handleInputChange: id ? handleInputChangeEdit : handleInputChangeCreate, value: values, }, @@ -478,8 +485,10 @@ const IODetails = ({ enableNextTab, index, data }) => { width: "100%", options: investmentTypeOptions, value: IObyID?.data?.comment, - maxLength:100, - helperText:`Maximum length should be 100 characters. You have entered ${watch()?.comment?.length || 0} characters.` + maxLength: 100, + helperText: `Maximum length should be 100 characters. You have entered ${ + watch()?.comment?.length || 0 + } characters.`, }, ]; const groupedFields = formFields.reduce((groups, field) => { @@ -492,30 +501,29 @@ const IODetails = ({ enableNextTab, index, data }) => { }, {}); const onSubmit = async (data) => { - delete data.table; setIsLoading(true); - const updatedMinAmount = values?.map(({id, value, _id})=>{ + const updatedMinAmount = values?.map(({ id, value, _id }) => { return { - id:_id, - country_xid:id, - minInvestmentAmt: Number(value) - } - }) + id: _id, + country_xid: id, + minInvestmentAmt: Number(value), + }; + }); // console.log(formatDateToYYYYMMDD(data.closingDate)); const formData = { ...data, investmentType_xid: Number(data.investmentType), sponsor_xid: Number(data.sponserName), - minInvestmentAmt:updatedMinAmount, - closingDate: formatDateToYYYYMMDD(data.closingDate) + minInvestmentAmt: updatedMinAmount, + closingDate: formatDateToYYYYMMDD(data.closingDate), }; // console.log(formData); if (id) { - console.log("========================",formData); + console.log("========================", formData); const res = await updateIO({ data: formData, id }); console.log(res); if (res?.data?.statusCode === 200) { @@ -525,20 +533,24 @@ const IODetails = ({ enableNextTab, index, data }) => { }); navigate(`/view-io/${id}`); enableNextTab(index); - } else if(res?.error?.status === 400){ + } else if (res?.error?.status === 400) { setIsLoading(false); toast({ - render: () => , - }); - } else if(res?.error?.status === 500){ + render: () => ( + + ), + }); + } else if (res?.error?.status === 500) { setIsLoading(false); toast({ - render: () => , + render: () => ( + + ), }); } } else { try { - console.log("========================",formData); + console.log("========================", formData); const res = await creatIO(formData); console.log(res?.error?.status); if (res?.data?.statusCode === 200) { @@ -548,15 +560,19 @@ const IODetails = ({ enableNextTab, index, data }) => { }); navigate(`/view-io/${res?.data?.data}`); enableNextTab(index); - } else if(res?.error?.status === 400){ + } else if (res?.error?.status === 400) { setIsLoading(false); toast({ - render: () => , + render: () => ( + + ), }); - }else if(res?.error?.status === 500){ + } else if (res?.error?.status === 500) { setIsLoading(false); toast({ - render: () => , + render: () => ( + + ), }); } } catch (error) { @@ -565,7 +581,6 @@ const IODetails = ({ enableNextTab, index, data }) => { } } - // ========================== // if (params?.id) { // return enableNextTab(index); @@ -583,9 +598,8 @@ const IODetails = ({ enableNextTab, index, data }) => { }; return IObyIDisLoading ? ( - + ) : ( -