From f46722cd926078e43acf2f7cd8ca6967d91e9f2f Mon Sep 17 00:00:00 2001 From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com> Date: Tue, 23 Jul 2024 16:31:45 +0530 Subject: [PATCH] investment table --- .../InvestmentType/AddInvestmentType.jsx | 264 ++++++++++++------ .../Master/InvestmentType/InvestmentType.jsx | 18 +- .../InvestmentType/ViewInvestmentType.jsx | 90 +++--- src/Pages/Master/Sponser/AddSponser.jsx | 5 +- src/Pages/Master/Sponser/Sponsers.jsx | 87 +----- src/Pages/Master/Sponser/ViewSponser.jsx | 2 +- src/Routes/Routes.js | 8 +- src/Services/investment.type.service.js | 35 ++- src/Services/sponser.service.js | 20 +- 9 files changed, 285 insertions(+), 244 deletions(-) diff --git a/src/Pages/Master/InvestmentType/AddInvestmentType.jsx b/src/Pages/Master/InvestmentType/AddInvestmentType.jsx index 4bbe497..3d172ce 100644 --- a/src/Pages/Master/InvestmentType/AddInvestmentType.jsx +++ b/src/Pages/Master/InvestmentType/AddInvestmentType.jsx @@ -1,23 +1,26 @@ -import React, { useContext, useState } from "react"; +import React, { useContext, useEffect, useState } from "react"; import { OPACITY_ON_LOAD } from "../../../Layout/animations"; -import { Box } from "@chakra-ui/react"; +import { Box, useToast } from "@chakra-ui/react"; import { useForm, Controller } from "react-hook-form"; import { yupResolver } from "@hookform/resolvers/yup"; import * as yup from "yup"; -import { WarningTwoIcon } from "@chakra-ui/icons"; -import { TiWarning } from "react-icons/ti"; -import GlobalStateContext from "../../../Contexts/GlobalStateContext"; -import { useNavigate } from "react-router-dom"; -import FormField from "../../../Components/FormField"; -import { v4 as uuidv4 } from "uuid"; +import { useNavigate, useParams } from "react-router-dom"; import FormInputMain from "../../../Components/FormInputMain"; import SwitchButton from "../../../Components/SwitchButton"; +import { + useCreateInvestmentTypeMutation, + useGetInvestmentTypeByIdQuery, + useUpdateInvestmentTypeMutation, +} from "../../../Services/investment.type.service"; +import ToastBox from "../../../Components/ToastBox"; export const addInvestmentType = yup.object().shape({ - investmentName: yup.string().required("Investment name is required"), - description: yup.string().required("Description is required"), - investmentNameArabic: yup.string().required("Investment name is required"), - descriptionArabic: yup.string().required("Description is required"), + investmentTypeName: yup.string().required("Investment name is required"), + note: yup.string().required("Description is required"), + investmentTypeNameArabic: yup + .string() + .required("Investment name is required"), + noteArabic: yup.string().required("Description is required"), }); export function debounce(func, delay) { @@ -29,109 +32,142 @@ export function debounce(func, delay) { } const AddInvestmentType = () => { + const navigate = useNavigate(); - const [bannerImageData, setBannerImageData] = useState(null); - const { investmentType, setInvestmentType } = useContext(GlobalStateContext); - const [selectedBannerImageData, setSelectedBannerImageData] = useState(null); + const toast = useToast(); + const params = useParams(); const [isSwitchOn, setIsSwitchOn] = useState(false); - + const [isLoadingBtn, setIsLoadingBtn] = useState(false); + const [otherImageData, setOtherImageData] = useState(null); const [selectedOtherImageData, setSelectedOtherImageData] = useState(null); + const [createInvestmentType] = useCreateInvestmentTypeMutation(); + const [updateInvestmentType] = useUpdateInvestmentTypeMutation(); + const { control, handleSubmit, formState: { errors }, + + reset, } = useForm({ resolver: yupResolver(addInvestmentType), }); - const handleBannerImageChange = (e) => { - const file = e.target.files[0]; - setBannerImageData(file); - if (file) { - const reader = new FileReader(); - reader.onloadend = () => { - setSelectedBannerImageData(reader.result); - }; - reader.readAsDataURL(file); + const id = params?.id; + + + const { + data: investmentTypeByIdData, + error, + isLoading, + } = useGetInvestmentTypeByIdQuery(id, { + skip: !id, + }); + console.log(investmentTypeByIdData); + console.log(id); + + useEffect(() => { + if (investmentTypeByIdData?.data) { + reset({ + investmentTypeName: investmentTypeByIdData?.data?.investmentTypeName, + investmentTypeNameArabic: investmentTypeByIdData?.data?.investmentTypeNameArabic, + note: investmentTypeByIdData?.data?.note, + noteArabic: investmentTypeByIdData?.data?.noteArabic, + // email: investmentTypeByIdData?.data?.email, + }); } - }; - - // Handler for file input - const handleOtherImageChange = (e) => { - const files = Array.from(e.target.files); - const newImageData = [...(otherImageData || []), ...files]; // Ensure otherImageData is an array - - setOtherImageData(newImageData); - - const readers = files.map((file) => { - return new Promise((resolve, reject) => { - const reader = new FileReader(); - reader.onloadend = () => { - resolve(reader.result); - }; - reader.onerror = reject; - reader.readAsDataURL(file); - }); - }); - - Promise.all(readers) - .then((results) => { - setSelectedOtherImageData([ - ...(selectedOtherImageData || []), - ...results, - ]); // Ensure selectedOtherImageData is an array - }) - .catch((error) => { - console.error("Error reading files:", error); - }); - }; - - // Function to remove a specific image - const removeOtherImage = (index) => { - const newImageData = otherImageData.filter((_, i) => i !== index); - const newSelectedImageData = selectedOtherImageData.filter( - (_, i) => i !== index - ); - - setOtherImageData(newImageData); - setSelectedOtherImageData(newSelectedImageData); - }; + }, [investmentTypeByIdData, reset]); + + if (false) { + return ; + } + console.log("hit"); const formFields = [ { - label: "Investment name", - name: "investmentName", + label: "Investment Type (English)", + placeHolder: " ", + name: "investmentTypeName", type: "text", isRequired: true, section: "Add Details", }, { - label: "Investment Name (Arabic)", - name: "investmentNameArabic", + label: "Investment Type (Arabic) ", + name: "investmentTypeNameArabic", + placeHolder: " ", type: "text", isRequired: true, - arabic: true, section: "Add Details", + isArabic: true, }, { - label: "Description Name", - name: "description", + label: "Description (English)", + placeHolder: " ", + name: "note", type: "text", isRequired: true, section: "Add Details", }, { - label: "Description Name (Arabic)", - name: "descriptionArabic", + label: "Description (Arabic)", + placeHolder: " ", + name: "noteArabic", type: "text", isRequired: true, - arabic: true, + isArabic: true, section: "Add Details", }, ]; + const formEditFields = [ + { + label: "Investment Type (English) *", + placeHolder: " ", + name: "investmentTypeName", + type: "text", + isRequired: true, + section: "Add Details", + }, + { + label: "Investment Type (Arabic) *", + name: "investmentTypeNameArabic", + placeHolder: " ", + type: "text", + isRequired: true, + section: "Add Details", + isArabic: true, + }, + { + label: "Description (English)", + placeHolder: " ", + name: "note", + type: "text", + isRequired: true, + section: "Add Details", + }, + { + label: "Description (Arabic)", + placeHolder: " ", + name: "noteArabic", + type: "text", + isRequired: true, + isArabic: true, + section: "Add Details", + }, + ]; + + const groupedEditFields = formEditFields.reduce((groups, field) => { + const { section } = field; + if (!groups[section]) { + groups[section] = []; + } + groups[section].push(field); + return groups; + }, {}); + const groupedFields = formFields.reduce((groups, field) => { const { section } = field; if (!groups[section]) { @@ -141,30 +177,78 @@ const AddInvestmentType = () => { return groups; }, {}); - const onSubmit = (data) => { - setInvestmentType([ - { - ...data, - status: true, - id: uuidv4(), - createdAt: new Date().toISOString(), - }, - ...investmentType, - ]); - navigate("/investment-type"); + const onSubmit = async (data) => { + setIsLoadingBtn(true); + console.log(data); + const id = params?.id; + if (id) { + try { + await updateInvestmentType({ data, id }).then((response) => { + if (response?.data?.statusCode === 200) { + toast({ + render: () => , + }); + setIsLoadingBtn(false); + navigate("/investment-type"); + } else { + toast({ + render: () => ( + + ), + }); + + setIsLoadingBtn(false); + navigate("/investment-type"); + } + }); + } catch (error) { + console.log(error); + setIsLoadingBtn(false); + navigate("/investment-type"); + } + } else { + try { + await createInvestmentType(data).then((response) => { + if (response?.data?.statusCode === 201) { + toast({ + render: () => , + }); + + setIsLoadingBtn(false); + navigate("/investment-type"); + } else { + toast({ + render: () => ( + + ), + }); + + setIsLoadingBtn(false); + navigate("/investment-type"); + } + }); + } catch (error) { + console.log(error); + + setIsLoadingBtn(false); + navigate("/investment-type"); + } + } }; return ( - + ); diff --git a/src/Pages/Master/InvestmentType/InvestmentType.jsx b/src/Pages/Master/InvestmentType/InvestmentType.jsx index b905b86..0f7bdac 100644 --- a/src/Pages/Master/InvestmentType/InvestmentType.jsx +++ b/src/Pages/Master/InvestmentType/InvestmentType.jsx @@ -106,8 +106,8 @@ const InvestmentType = () => { return nameMatches; }); - const [extractedArray, setExtractedArray] = useState( - filteredData?.map((item, index) => ({ + + const extractedArray=filteredData?.map((item, index) => ({ // id: item?.id, "Sr.no": ( { > - */} { console.log(data?.data); - if (!data) { + if (!data) { return Loading...; } diff --git a/src/Routes/Routes.js b/src/Routes/Routes.js index 15b02b9..133ad99 100644 --- a/src/Routes/Routes.js +++ b/src/Routes/Routes.js @@ -40,6 +40,7 @@ import InvestmentType from "../Pages/Master/InvestmentType/InvestmentType"; export const RouteLink = [ // =============[ Tanami ]================ // ===============[ Management]=============== + { path: "/", Component: Sponser }, { path: "/sponser", Component: Sponser }, { path: "/sponser/add-sponser/:id", Component: AddSponser }, @@ -52,13 +53,8 @@ export const RouteLink = [ { path: "/exchange-rate", Component: ExchangeRate }, { path: "/investment-type", Component: InvestmentType }, + { path: "/investment-type/add-investment/:id", Component: AddInvestmentType }, { path: "/investment-type/add-investment", Component: AddInvestmentType }, - - - - - - { path: "/investment-type/view-investment/:id", Component: ViewInvestmentType }, { path: "/investment-type/edit-investment/:id", Component: EditInvestmentType }, diff --git a/src/Services/investment.type.service.js b/src/Services/investment.type.service.js index dcd3db9..908a848 100644 --- a/src/Services/investment.type.service.js +++ b/src/Services/investment.type.service.js @@ -8,16 +8,45 @@ const baseUrl = api?.defaults.baseURL; export const investmentType = createApi({ reducerPath: "investmentType", baseQuery: fetchBaseQuery({ baseUrl }), - tagTypes: [], + tagTypes: ["getInvestmentType"], endpoints: (builder) => ({ getInvestmentTypes: builder.query({ - query: ({ page, size }) => `/investmentType/admin?page=${page}&size=${size}`, + query: ({ page, size }) => + `/investmentType/admin?page=${page}&size=${size}`, + providesTags: ["getInvestmentType"], }), + getInvestmentTypeById: builder.query({ query: (id) => `/investmentType/admin/${id}`, + providesTags: ["getInvestmentType"], }), + + createInvestmentType: builder.mutation({ + query: (data) => ({ + url: `/investmentType/admin/`, + method: "POST", + body: data, + }), + invalidatesTags: ["getInvestmentType"], + }), + + + updateInvestmentType: builder.mutation({ + query: ({ data, id }) => ({ + url: `/investmentType/admin/${id}`, + method: "PATCH", + body: data, + }), + invalidatesTags: ["getInvestmentType"], + }), + }), }); // Export hooks for usage in functional components -export const { useGetInvestmentTypesQuery, useGetInvestmentTypeByIdQuery } = investmentType; +export const { + useGetInvestmentTypesQuery, + useGetInvestmentTypeByIdQuery, + useCreateInvestmentTypeMutation, + useUpdateInvestmentTypeMutation, +} = investmentType; diff --git a/src/Services/sponser.service.js b/src/Services/sponser.service.js index d8d7b7e..180c727 100644 --- a/src/Services/sponser.service.js +++ b/src/Services/sponser.service.js @@ -25,18 +25,10 @@ export const sponserMaster = createApi({ providesTags: ["getSponser"], }), - - - getSponserMasterActive: builder.query({ query: () => "/sponsor/admin/active", - }) + }), - - , - - - getSponserById: builder.query({ query: (id) => `/sponsor/admin/${id}`, providesTags: ["getSponser"], @@ -45,16 +37,6 @@ export const sponserMaster = createApi({ - - - - - - - - - - toggleStatus: builder.mutation({ query: ({ id }) => ({ url: `/sponsor/admin/toggle-status/${id}`,