From 1036918285bcd52b202525f529f443e640c48bd4 Mon Sep 17 00:00:00 2001 From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com> Date: Fri, 19 Jul 2024 18:36:47 +0530 Subject: [PATCH] sponsers api --- src/Components/SwitchButton.jsx | 29 ++ .../Master/InvestmentType/InvestmentType.jsx | 324 ++++++++---------- src/Pages/Master/Sponser/AddSponser.jsx | 283 ++++++--------- src/Pages/Master/Sponser/Sponsers.jsx | 64 ++-- src/Pages/Master/Sponser/ViewSponser.jsx | 101 +----- src/Routes/Routes.js | 2 +- src/Services/sponser.service.js | 53 ++- 7 files changed, 373 insertions(+), 483 deletions(-) create mode 100644 src/Components/SwitchButton.jsx diff --git a/src/Components/SwitchButton.jsx b/src/Components/SwitchButton.jsx new file mode 100644 index 0000000..6ec1401 --- /dev/null +++ b/src/Components/SwitchButton.jsx @@ -0,0 +1,29 @@ +// SwitchButton.js +import { Box, Switch, Text } from '@chakra-ui/react'; +import React from 'react'; + +const SwitchButton = ({ isSwitchOn, setIsSwitchOn }) => { + const switch_onChange_handle = () => { + setIsSwitchOn(!isSwitchOn); + }; + + return ( + + + + {isSwitchOn ? 'Active' : 'Inactive'} + + + ); +}; + +export default SwitchButton; diff --git a/src/Pages/Master/InvestmentType/InvestmentType.jsx b/src/Pages/Master/InvestmentType/InvestmentType.jsx index 578124b..1d123b3 100644 --- a/src/Pages/Master/InvestmentType/InvestmentType.jsx +++ b/src/Pages/Master/InvestmentType/InvestmentType.jsx @@ -36,6 +36,7 @@ import CustomAlertDialog from "../../../Components/CustomAlertDialog"; import ToastBox from "../../../Components/ToastBox"; import { debounce } from "./AddInvestmentType"; import DataTable from "../../../Components/DataTable/DataTable"; +import SwitchButton from "../../../Components/SwitchButton"; const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter @@ -50,11 +51,12 @@ const InvestmentType = () => { const [actionId, setActionId] = useState(false); const [mouseEntered, setMouseEntered] = useState(false); const [mouseEnteredId, setMouseEnteredId] = useState(""); + const [isSwitchOn, setIsSwitchOn] = useState(false); useEffect(() => { // Simulate loading const timer = setTimeout(() => { - setIsLoading(false); + setIsLoading(false); }, 1500); // Cleanup the timer on component unmount @@ -102,183 +104,161 @@ const InvestmentType = () => { return nameMatches; }); - const [ extractedArray, setExtractedArray ] = useState(filteredData?.map((item, index) => ({ - // id: item?.id, - "Sr.no": ( - - {index + 1} - - ), - "Investment Type": ( - - {item.investmentName} - - ), - Description: ( - - - {item.description} + const [extractedArray, setExtractedArray] = useState( + filteredData?.map((item, index) => ({ + // id: item?.id, + "Sr.no": ( + + {index + 1} - - ), - Status: ( - handleUpdateStatus(item.id)} - isChecked={item.status} - /> - ), - - // item?.status ? ( - // - // Passed - // - // ) : ( - // - // Not passes - // - // ), - - // "Created At": ( - // - // - // {formatDate(item.createdAt)} - // - // - // - // - // - // - // - // - // Edit - // - // - // View - // - // { - // setActionId(item?.id); - // setDeleteAlert(true); - // }} - // className="web-text-medium" - // > - // Delete - // - // - // - // - // - // ), - Action: ( - - - - + {item.investmentName} + + ), + Description: ( + + + {item.description} + + + ), + Status: ( + // handleUpdateStatus(item.id)} + // isChecked={item.status} + // /> + + ), - - - + // item?.status ? ( + // + // Passed + // + // ) : ( + // + // Not passes + // + // ), - - - - - ), + + - // "Created At": - // mouseEntered && mouseEnteredId === item?.id ? ( - // // false ? ( - // - // - // - // - // - // - // - // - // - // - // - // ) : ( - // - // - // {formatDate(item.createdAt)} - // - // - // ), - }))); + + + + + + + + + ), + })) + ); const handleDelete = () => { const IOtype = investmentType.filter( @@ -294,7 +274,7 @@ const InvestmentType = () => { }; return ( - + { + const params = useParams(); const navigate = useNavigate(); const [bannerImageData, setBannerImageData] = useState(null); const [selectedBannerImageData, setSelectedBannerImageData] = useState(null); @@ -60,184 +48,108 @@ const AddSponser = () => { const [selectedOtherImageData, setSelectedOtherImageData] = useState(null); const { sponser, setSponser } = useContext(GlobalStateContext); + + const [createSponser] = useCreateSponserMutation(); + + const [updateSponser] = useUpdateSponserMutation(); + console.log(params?.id); + const { data, error, isLoading } = useGetSponserByIdQuery(params?.id); + console.log(data?.data); + + const { control, handleSubmit, formState: { errors }, + reset, } = useForm({ resolver: yupResolver(addSponser), }); console.log(errors); - 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); + useEffect(() => { + if (data) { + reset({ + sponsorName: data?.data?.sponsorName, + mobileNo: data?.data?.mobileNo, + sponsorNameArabic: data?.data?.sponsorNameArabic, + }); } - }; - - // 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); - }; + }, [data, reset]); + if (isLoading) { + return ; + } + // console.log(selectedBannerImageData); const formFields = [ { label: "Sponser name (English)", - placeHolder:" ", - name: "sponserName", + placeHolder: " ", + name: "sponsorName", type: "text", isRequired: true, section: "Add Details", }, { - label: "Sponser Name (Arabic)", - name: "sponserNameArabic", - placeHolder:" ", - type: "text", - isRequired: true, - arabic: true, - section: "Add Details", - }, - { - label: "Description (English)", - name: "description", - placeHolder:" ", - type: "textarea", - isRequired: true, - section: "Add Details", - }, - { - label: "Description (Arabic)", - name: "descriptionArabic", - placeHolder:" ", - type: "textarea", - isRequired: true, - arabic: true, - section: "Add Details", - }, - { - label: "Address (English)", - name: "sponserAddress", - placeHolder:" ", + label: "Sponser name (Arabic)", + name: "sponsorNameArabic", + placeHolder: " ", type: "text", isRequired: true, section: "Add Details", + isArabic:true }, { - label: "Address (Arabic)", - name: "sponserAddressArabic", - placeHolder:" ", - type: "text", - isRequired: true, - arabic: true, - section: "Add Details", - }, - { - label: "Bank Name (English)", - name: "bankName", - placeHolder:" ", - type: "text", - isRequired: true, - section: "Add Details", - }, - { - label: "Bank Name (Arabic)", - name: "bankNameArabic", - placeHolder:" ", - type: "text", - isRequired: true, - arabic: true, - section: "Add Details", - }, - { - label: "Account Name (English)", - name: "accountHolderName", - placeHolder:" ", - type: "text", - isRequired: true, - section: "Add Details", - }, - { - label: "Account Name (Arabic)", - name: "accountHolderNameArabic", - placeHolder:" ", - type: "text", - isRequired: true, - arabic: true, - section: "Add Details", - }, - { - label: "Mobile Number (English)", + label: "Mobile Number", name: "mobileNo", - placeHolder:" ", + placeHolder: " ", type: "number", isRequired: true, section: "Add Details", }, + ]; + + const formEditFields = [ { - label: "Account Number (English)", - name: "accountNumber", - placeHolder:" ", + label: "Sponser name", + placeHolder: " ", + name: "sponsorName", type: "text", isRequired: true, section: "Add Details", }, { - label: "IFSC Code (English)", - placeHolder:" ", - name: "swiftCode", + label: "Sponser name (Arabic)", + name: "sponsorNameArabic", + placeHolder: " ", type: "text", isRequired: true, section: "Add Details", + isArabic:true + }, + { + label: "Mobile Number", + name: "mobileNo", + placeHolder: " ", + type: "number", + isRequired: 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]) { @@ -247,24 +159,43 @@ const AddSponser = () => { return groups; }, {}); - const onSubmit = (data) => { + const onSubmit = async (data) => { console.log(data); - setSponser([ - { - ...data, - status: true, - id: uuidv4(), - createdAt: new Date().toISOString(), - }, - ...sponser, - ]); + // setSponser([ + // { + // ...data, + // status: true, + // id: uuidv4(), + // createdAt: new Date().toISOString(), + // }, + // ...sponser, + // ]); navigate("/sponser"); + const id = params?.id + try { + await createSponser(data).then((response) => { + console.log(response); + if (response?.data?.statusCode) { + toast({ + render: () => , + }); + } else { + toast({ + render: () => ( + + ), + }); + } + }); + } catch (error) { + console.log(error); + } }; return ( new Date(date).toLocaleDateString(); // Simple date formatter const Sponser = () => { + const navigate = useNavigate(); const toast = useToast(); const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size); @@ -57,6 +62,7 @@ const Sponser = () => { const [actionId, setActionId] = useState(false); const [mouseEntered, setMouseEntered] = useState(false); const [mouseEnteredId, setMouseEnteredId] = useState(""); + const [toggleStatus] = useToggleStatusMutation(); // useEffect(() => { // setSponser(sponsors) // }, []) @@ -74,25 +80,37 @@ const Sponser = () => { // ====================================================[Table Setup]================================================================ const tableHeadRow = [ "Sponsor name", - "Address", "Mobile no", "Status", "Created At", "Action", ]; - const handleUpdateStatus = debounce((id) => { - setSponser((prevSponser) => - prevSponser.map((sponsor) => - sponsor.id === id ? { ...sponsor, status: !sponsor.status } : sponsor - ) - ); - toast({ - render: () => , - }); + const handleUpdateStatus = debounce(async (id) => { + // setSponser((prevSponser) => + // prevSponser.map((sponsor) => + // sponsor.id === id ? { ...sponsor, status: !sponsor.status } : sponsor + // ) + // ); + + try { + await toggleStatus({ id }).then((response) => { + console.log(response); + if (response?.data?.statusCode) { + toast({ + render: () => , + }); + } else { + toast({ + render: () => ( + + ), + }); + } + }); + } catch (error) {} }, 300); - console.log(sponsors?.data?.rows); // // ====================================================[Table Filter]================================================================ // const filteredData = sponsors?.data?.rows?.filter((item) => { // // Filter by name (case insensitive) @@ -117,12 +135,10 @@ const Sponser = () => { const name = item.sponsorName; const searchLower = searchTerm?.toLowerCase(); const nameMatches = name?.toLowerCase().includes(searchLower); - + return nameMatches; }); - console.log(filteredData); - const extractedArray = filteredData?.map((item) => ({ // id: item?.id, "Sponsor name": ( @@ -136,13 +152,6 @@ const Sponser = () => { {item.sponsorName} ), - Address: ( - - - {item.address} - - - ), "Mobile no": ( @@ -155,7 +164,7 @@ const Sponser = () => { handleUpdateStatus(item.id)} + onChange={() => handleUpdateStatus(item.id)} isChecked={item.isActive} /> @@ -189,6 +198,10 @@ const Sponser = () => { placement="top" > diff --git a/src/Pages/Master/Sponser/ViewSponser.jsx b/src/Pages/Master/Sponser/ViewSponser.jsx index bae0f13..6c0059f 100644 --- a/src/Pages/Master/Sponser/ViewSponser.jsx +++ b/src/Pages/Master/Sponser/ViewSponser.jsx @@ -10,112 +10,25 @@ const ViewSponser = () => { const params = useParams(); const { sponser } = useContext(GlobalStateContext); const { reset } = useForm(); // assuming react-hook-form + const { data, error, isLoading } = useGetSponserByIdQuery(params?.id); - const id = params?.id; - const foundObject = sponser.find( - (item) => item?.id.toString() === id.toString() - ); - if (!foundObject) { + if (!data) { return Loading...; } const formFields = [ { - label: "Sponsorer name", - value: foundObject.sponserName, - type: "text", - isRequired: true, - section: "Add Details", + label: "Sponser name", + value:data?.sponsorName }, { - label: "Sponsorer Name (Arabic)", - value: foundObject.sponserName, - type: "text", - isRequired: true, - arabic: true, - section: "Add Details", - }, - { - label: "Description", - value: foundObject.description, - type: "textarea", - isRequired: true, - section: "Add Details", - }, - { - label: "Description (Arabic)", - value: foundObject.descriptionArabic, - type: "textarea", - isRequired: true, - arabic: true, - section: "Add Details", - }, - { - label: "Address", - value: foundObject.sponserAddress, - type: "text", - isRequired: true, - section: "Add Details", - }, - { - label: "Address (Arabic)", - value: foundObject.sponserAddressArabic, - type: "text", - isRequired: true, - arabic: true, - section: "Add Details", - }, - { - label: "Bank Name", - value: foundObject.bankName, - type: "text", - isRequired: true, - section: "Add Details", - }, - { - label: "Bank Name (Arabic)", - value: foundObject.bankNameArabic, - type: "text", - isRequired: true, - arabic: true, - section: "Add Details", - }, - { - label: "Account Name", - value: foundObject.accountNumber, - type: "text", - isRequired: true, - section: "Add Details", - }, - { - label: "Account Name (Arabic)", - value: foundObject.accountNumberArabic, - type: "text", - isRequired: true, - arabic: true, - section: "Add Details", + label: "Sponser name (Arabic)", + value:data?.sponsorNameArabic }, { label: "Mobile Number", - value: foundObject.mobileNo, - type: "number", - isRequired: true, - section: "Add Details", - }, - { - label: "Account Number", - value: foundObject.accountNumber, - type: "text", - isRequired: true, - section: "Add Details", - }, - { - label: "IFSC Code", - value: foundObject.swiftCode, - type: "text", - isRequired: true, - section: "Add Details", + value:data?.mobileNo }, ]; diff --git a/src/Routes/Routes.js b/src/Routes/Routes.js index 9628aa8..7f03347 100644 --- a/src/Routes/Routes.js +++ b/src/Routes/Routes.js @@ -41,7 +41,7 @@ export const RouteLink = [ // ===============[ Management]=============== { path: "/", Component: Sponser }, { path: "/sponser", Component: Sponser }, - { path: "/sponser/add-sponser", Component: AddSponser }, + { path: "/sponser/:id", Component: AddSponser }, { path: "/sponser/view-sponser/:id", Component: ViewSponser }, { path: "/sponser/edit-sponser/:id", Component: EditSponser }, diff --git a/src/Services/sponser.service.js b/src/Services/sponser.service.js index 6c44a60..ecf6299 100644 --- a/src/Services/sponser.service.js +++ b/src/Services/sponser.service.js @@ -6,36 +6,61 @@ import { api } from "./api.service"; const baseUrl = api?.defaults.baseURL; console.log(baseUrl); - // const baseUrl = `${import.meta.env.VITE_API_BASE_URL}/${import.meta.env.VITE_API_VERSION}` // Define a service using a base URL and expected endpoints export const sponserMaster = createApi({ reducerPath: "sponserMaster", - baseQuery: fetchBaseQuery({ baseUrl: baseUrl }), - tagTypes: [], + baseQuery: fetchBaseQuery({ baseUrl: baseUrl }), + tagTypes: ["getSponser"], endpoints: (builder) => ({ - - getSponserMaster: builder.query({ query: ({ page, size }) => `/sponsor/admin?page=${page}&size=${size}`, + providesTags: ["getSponser"], }), - - - getSponserMasterActive: builder.query({ - query: () => '/sponsor/admin/active', + query: () => "/sponsor/admin/active", + }), + getSponserById: builder.query({ + query: (id) => ({ url: `/sponsor/admin/${id}` }), + providesTags: ["getSponser"], }), + toggleStatus: builder.mutation({ + query: ({ id }) => ({ + url: `/sponsor/admin/toggle-status/${id}`, + method: "PATCH", + }), + invalidatesTags: ["getSponser"], + }), + createSponser: builder.mutation({ + query: (data) => ({ + url: `/sponsor/admin`, + method: "POST", + body: data, + }), + invalidatesTags: ["getSponser"], + }), - - - + updateSponser: builder.mutation({ + query: ({ data, id }) => ({ + url: `/sponsor/admin/${id}`, + method: "PATCH", + body: data, + }), + invalidatesTags: ["getSponser"], + }), }), }); // Export hooks for usage in functional components -export const { useGetSponserMasterQuery, useGetSponserMasterActiveQuery } = sponserMaster; - +export const { + useGetSponserMasterQuery, + useGetSponserMasterActiveQuery, + useToggleStatusMutation, + useCreateSponserMutation, + useUpdateSponserMutation, + useGetSponserByIdQuery, +} = sponserMaster;