sponsers api
This commit is contained in:
YasinShaikh123
29
src/Components/SwitchButton.jsx
Normal file
29
src/Components/SwitchButton.jsx
Normal file
@@ -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 (
|
||||
<Box display="flex" alignItems="center">
|
||||
<Switch
|
||||
size="lg"
|
||||
isChecked={isSwitchOn}
|
||||
onChange={switch_onChange_handle}
|
||||
sx={{
|
||||
".chakra-switch__track": {
|
||||
backgroundColor: isSwitchOn ? "#707070" : "#4CCD8D",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Text ml={4} className={isSwitchOn ? 'mont' : 'year'}>
|
||||
{isSwitchOn ? 'Active' : 'Inactive'}
|
||||
</Text>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default SwitchButton;
|
||||
@@ -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": (
|
||||
<Text
|
||||
justifyContent={slideFromRight ? "right" : "left"}
|
||||
as={"span"}
|
||||
color={"teal.900"}
|
||||
fontWeight={"500"}
|
||||
className="d-flex align-items-center web-text-small"
|
||||
>
|
||||
{index + 1}
|
||||
</Text>
|
||||
),
|
||||
"Investment Type": (
|
||||
<Text
|
||||
justifyContent={slideFromRight ? "right" : "left"}
|
||||
as={"span"}
|
||||
color={"teal.900"}
|
||||
fontWeight={"500"}
|
||||
className="d-flex align-items-center web-text-small"
|
||||
>
|
||||
{item.investmentName}
|
||||
</Text>
|
||||
),
|
||||
Description: (
|
||||
<Box w={"200px"} isTruncated={true}>
|
||||
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
|
||||
{item.description}
|
||||
const [extractedArray, setExtractedArray] = useState(
|
||||
filteredData?.map((item, index) => ({
|
||||
// id: item?.id,
|
||||
"Sr.no": (
|
||||
<Text
|
||||
justifyContent={slideFromRight ? "right" : "left"}
|
||||
as={"span"}
|
||||
color={"teal.900"}
|
||||
fontWeight={"500"}
|
||||
className="d-flex align-items-center web-text-small"
|
||||
>
|
||||
{index + 1}
|
||||
</Text>
|
||||
</Box>
|
||||
),
|
||||
Status: (
|
||||
<Switch
|
||||
size={"sm"}
|
||||
colorScheme="green"
|
||||
onChange={() => handleUpdateStatus(item.id)}
|
||||
isChecked={item.status}
|
||||
/>
|
||||
),
|
||||
|
||||
// item?.status ? (
|
||||
// <Badge bg={'transparent'} color={"#05c46b"}>
|
||||
// Passed
|
||||
// </Badge>
|
||||
// ) : (
|
||||
// <Badge bg={'transparent'} color={"#f53b57"}>
|
||||
// Not passes
|
||||
// </Badge>
|
||||
// ),
|
||||
|
||||
// "Created At": (
|
||||
// <span className="d-flex justify-content-between align-items-center">
|
||||
// <Text as={"span"} color={"gray.600"} fontWeight={"500"}>
|
||||
// {formatDate(item.createdAt)}
|
||||
// </Text>
|
||||
// <Menu>
|
||||
// <MenuButton className="link p-1 rounded-1">
|
||||
// <HiDotsVertical className="rubix-text-dark fs-6" />
|
||||
// </MenuButton>
|
||||
// <Portal>
|
||||
// <MenuList minWidth="80px">
|
||||
// <RouterLink to={`edit-sponser/${item.id}`}>
|
||||
// <MenuItem className="web-text-medium">Edit</MenuItem>
|
||||
// </RouterLink>
|
||||
// <RouterLink to={`view-sponser/${item.id}`}>
|
||||
// <MenuItem className="web-text-medium">View</MenuItem>
|
||||
// </RouterLink>
|
||||
// <MenuItem
|
||||
// onClick={() => {
|
||||
// setActionId(item?.id);
|
||||
// setDeleteAlert(true);
|
||||
// }}
|
||||
// className="web-text-medium"
|
||||
// >
|
||||
// Delete
|
||||
// </MenuItem>
|
||||
// </MenuList>
|
||||
// </Portal>
|
||||
// </Menu>
|
||||
// </span>
|
||||
// ),
|
||||
Action: (
|
||||
<Box display={"flex"} justifyContent={"center"} gap={2} >
|
||||
<Tooltip
|
||||
rounded={"sm"}
|
||||
fontSize={"xs"}
|
||||
label="View"
|
||||
bg="#fff"
|
||||
color={"green.500"}
|
||||
placement="top"
|
||||
),
|
||||
"Investment Type": (
|
||||
<Text
|
||||
justifyContent={slideFromRight ? "right" : "left"}
|
||||
as={"span"}
|
||||
color={"teal.900"}
|
||||
fontWeight={"500"}
|
||||
className="d-flex align-items-center web-text-small"
|
||||
>
|
||||
<Button
|
||||
_hover={{ color: "green.500" }}
|
||||
// transition={"0.5s all"}
|
||||
onClick={() => {
|
||||
navigate(`view-investment/${item.id}`);
|
||||
}}
|
||||
color="green.300"
|
||||
rounded={"sm"}
|
||||
size={"xs"}
|
||||
>
|
||||
<ViewIcon />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
{item.investmentName}
|
||||
</Text>
|
||||
),
|
||||
Description: (
|
||||
<Box w={"200px"} isTruncated={true}>
|
||||
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
|
||||
{item.description}
|
||||
</Text>
|
||||
</Box>
|
||||
),
|
||||
Status: (
|
||||
// <Switch
|
||||
// size={"sm"}
|
||||
// colorScheme="green"
|
||||
// onChange={() => handleUpdateStatus(item.id)}
|
||||
// isChecked={item.status}
|
||||
// />
|
||||
<SwitchButton isSwitchOn={isSwitchOn} setIsSwitchOn={setIsSwitchOn} />
|
||||
),
|
||||
|
||||
<Tooltip
|
||||
rounded={"sm"}
|
||||
fontSize={"xs"}
|
||||
label="Edit"
|
||||
bg="#fff"
|
||||
color={"blue.500"}
|
||||
placement="top"
|
||||
>
|
||||
<Button
|
||||
onClick={() => {
|
||||
navigate(`edit-investment/${item.id}`);
|
||||
}}
|
||||
_hover={{ color: "blue.500" }}
|
||||
// transition={"0.5s all"}
|
||||
color="blue.400"
|
||||
rounded={"sm"}
|
||||
size={"xs"}
|
||||
>
|
||||
<EditIcon />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
// item?.status ? (
|
||||
// <Badge bg={'transparent'} color={"#05c46b"}>
|
||||
// Passed
|
||||
// </Badge>
|
||||
// ) : (
|
||||
// <Badge bg={'transparent'} color={"#f53b57"}>
|
||||
// Not passes
|
||||
// </Badge>
|
||||
// ),
|
||||
|
||||
<Tooltip
|
||||
rounded={"sm"}
|
||||
fontSize={"xs"}
|
||||
label="Delete"
|
||||
bg="#fff"
|
||||
color={"red.500"}
|
||||
placement="top"
|
||||
>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setActionId(item?.id);
|
||||
setDeleteAlert(true);
|
||||
}}
|
||||
_hover={{ color: "red.500" }}
|
||||
// transition={"0.5s all"}
|
||||
color="red.300"
|
||||
// "Created At": (
|
||||
// <span className="d-flex justify-content-between align-items-center">
|
||||
// <Text as={"span"} color={"gray.600"} fontWeight={"500"}>
|
||||
// {formatDate(item.createdAt)}
|
||||
// </Text>
|
||||
// <Menu>
|
||||
// <MenuButton className="link p-1 rounded-1">
|
||||
// <HiDotsVertical className="rubix-text-dark fs-6" />
|
||||
// </MenuButton>
|
||||
// <Portal>
|
||||
// <MenuList minWidth="80px">
|
||||
// <RouterLink to={`edit-sponser/${item.id}`}>
|
||||
// <MenuItem className="web-text-medium">Edit</MenuItem>
|
||||
// </RouterLink>
|
||||
// <RouterLink to={`view-sponser/${item.id}`}>
|
||||
// <MenuItem className="web-text-medium">View</MenuItem>
|
||||
// </RouterLink>
|
||||
// <MenuItem
|
||||
// onClick={() => {
|
||||
// setActionId(item?.id);
|
||||
// setDeleteAlert(true);
|
||||
// }}
|
||||
// className="web-text-medium"
|
||||
// >
|
||||
// Delete
|
||||
// </MenuItem>
|
||||
// </MenuList>
|
||||
// </Portal>
|
||||
// </Menu>
|
||||
// </span>
|
||||
// ),
|
||||
Action: (
|
||||
<Box display={"flex"} justifyContent={"center"} gap={2}>
|
||||
<Tooltip
|
||||
rounded={"sm"}
|
||||
size={"xs"}
|
||||
fontSize={"xs"}
|
||||
label="View"
|
||||
bg="#fff"
|
||||
color={"green.500"}
|
||||
placement="top"
|
||||
>
|
||||
<DeleteIcon />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
),
|
||||
<Button
|
||||
_hover={{ color: "green.500" }}
|
||||
// transition={"0.5s all"}
|
||||
onClick={() => {
|
||||
navigate(`view-investment/${item.id}`);
|
||||
}}
|
||||
color="green.300"
|
||||
rounded={"sm"}
|
||||
size={"xs"}
|
||||
>
|
||||
<ViewIcon />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
// "Created At":
|
||||
// mouseEntered && mouseEnteredId === item?.id ? (
|
||||
// // false ? (
|
||||
// <Box w={38} as="span" display={"flex"} justifyContent={"start"} gap={3}>
|
||||
// <Box as="span" p={1} className="link" rounded={'sm'} >
|
||||
// <EditIcon fontSize={'md'} />
|
||||
// </Box>
|
||||
// <Box as="span" p={1} className="link" rounded={'sm'} >
|
||||
// <ViewIcon fontSize={'md'} />
|
||||
// </Box>
|
||||
// <Box as="span" p={1} className="link" rounded={'sm'} >
|
||||
// <DeleteIcon fontSize={'md'} />
|
||||
// </Box>
|
||||
// </Box>
|
||||
// ) : (
|
||||
// <Box
|
||||
// as="span" display={"flex"} justifyContent={"start"}
|
||||
// p={1}
|
||||
// >
|
||||
// <Text as={"span"} color={"gray.600"} fontWeight={"500"}>
|
||||
// {formatDate(item.createdAt)}
|
||||
// </Text>
|
||||
// </Box>
|
||||
// ),
|
||||
})));
|
||||
<Tooltip
|
||||
rounded={"sm"}
|
||||
fontSize={"xs"}
|
||||
label="Edit"
|
||||
bg="#fff"
|
||||
color={"blue.500"}
|
||||
placement="top"
|
||||
>
|
||||
<Button
|
||||
onClick={() => {
|
||||
navigate(`edit-investment/${item.id}`);
|
||||
}}
|
||||
_hover={{ color: "blue.500" }}
|
||||
// transition={"0.5s all"}
|
||||
color="blue.400"
|
||||
rounded={"sm"}
|
||||
size={"xs"}
|
||||
>
|
||||
<EditIcon />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip
|
||||
rounded={"sm"}
|
||||
fontSize={"xs"}
|
||||
label="Delete"
|
||||
bg="#fff"
|
||||
color={"red.500"}
|
||||
placement="top"
|
||||
>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setActionId(item?.id);
|
||||
setDeleteAlert(true);
|
||||
}}
|
||||
_hover={{ color: "red.500" }}
|
||||
// transition={"0.5s all"}
|
||||
color="red.300"
|
||||
rounded={"sm"}
|
||||
size={"xs"}
|
||||
>
|
||||
<DeleteIcon />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
),
|
||||
}))
|
||||
);
|
||||
|
||||
const handleDelete = () => {
|
||||
const IOtype = investmentType.filter(
|
||||
@@ -294,7 +274,7 @@ const InvestmentType = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
|
||||
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
|
||||
<Box bg="white.500">
|
||||
<HStack
|
||||
display={"flex"}
|
||||
|
||||
@@ -1,46 +1,33 @@
|
||||
import React, { useContext, useState } from "react";
|
||||
import React, { useContext, useEffect, useState } from "react";
|
||||
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
|
||||
import {
|
||||
Box,
|
||||
Divider,
|
||||
FormControl,
|
||||
FormLabel,
|
||||
Heading,
|
||||
Input,
|
||||
Select,
|
||||
Textarea,
|
||||
Button,
|
||||
Text,
|
||||
} from "@chakra-ui/react";
|
||||
import { Box } 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 { useNavigate, useParams } from "react-router-dom";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import FormInputMain from "../../../Components/FormInputMain";
|
||||
import {
|
||||
useCreateSponserMutation,
|
||||
// useEditSponserMutation,
|
||||
useGetSponserByIdQuery,
|
||||
useUpdateSponserMutation,
|
||||
} from "../../../Services/sponser.service";
|
||||
import ToastBox from "../../../Components/ToastBox";
|
||||
import FullscreenLoaders from "../../../Components/Loaders/FullscreenLoaders";
|
||||
|
||||
export const addSponser = yup.object().shape({
|
||||
sponserName: yup.string().required("Sponser name is required"),
|
||||
sponserNameArabic: yup.string().required("Sponser name is required"),
|
||||
mobileNo: yup.string().required("Mobile no is required"),
|
||||
sponserAddress: yup.string().required("Sponser address is required"),
|
||||
|
||||
bankName: yup.string().required("Bank Name is required"),
|
||||
accountNumber: yup.string().required("Account Number is required"),
|
||||
swiftCode: yup.string().required("SWIFT/BIC Code is required"),
|
||||
bankEmail: yup.string().email("Invalid email format"),
|
||||
|
||||
// routingNumber: yup.string().required("Routing Number is required"),
|
||||
// iban: yup.string().required("IBAN is required"),
|
||||
// accountType: yup.string().required("Account Type is required"),
|
||||
// bankPhoneNumber: yup.string().required("Bank Phone Number is required"),
|
||||
// bankBranch: yup.string().required("Bank Branch is required"),
|
||||
// branchAddress: yup.string().required("Branch Address is required"),
|
||||
// ifscCode: yup.string().required("IFSC Code is required"),
|
||||
// accountHolderName: yup.string().required("Account Holder's Name is required"),
|
||||
sponsorName: yup.string().required("Sponser name is required"),
|
||||
sponsorNameArabic: yup.string().required("Sponser name is required"),
|
||||
mobileNo: yup
|
||||
.string()
|
||||
.required("Mobile no is required")
|
||||
.matches(/^[0-9]+$/, "Mobile no must be only digits")
|
||||
.min(10, "Mobile no must be at least 10 digits")
|
||||
.max(10, "Mobile no must be at most 15 digits"),
|
||||
});
|
||||
|
||||
export function debounce(func, delay) {
|
||||
@@ -52,6 +39,7 @@ export function debounce(func, delay) {
|
||||
}
|
||||
|
||||
const AddSponser = () => {
|
||||
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 <FullscreenLoaders />;
|
||||
}
|
||||
|
||||
// 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: () => <ToastBox message={response?.data?.message} />,
|
||||
});
|
||||
} else {
|
||||
toast({
|
||||
render: () => (
|
||||
<ToastBox message={"Something Went Wrong"} status={"error"} />
|
||||
),
|
||||
});
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
|
||||
<FormInputMain
|
||||
groupedFields={groupedFields}
|
||||
groupedFields={params?.id ? groupedEditFields : groupedFields}
|
||||
control={control}
|
||||
errors={errors}
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
|
||||
@@ -26,14 +26,19 @@ import {
|
||||
import Pagination from "../../../Components/Pagination";
|
||||
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
|
||||
import CustomAlertDialog from "../../../Components/CustomAlertDialog";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import ToastBox from "../../../Components/ToastBox";
|
||||
import { debounce } from "./AddSponser";
|
||||
import { TABLE_PAGINATION } from "../../../Constants/Paginations";
|
||||
import { useGetSponserMasterQuery } from "../../../Services/sponser.service";
|
||||
import {
|
||||
useGetSponserMasterQuery,
|
||||
useToggleStatusMutation,
|
||||
} from "../../../Services/sponser.service";
|
||||
|
||||
const formatDate = (date) => 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: () => <ToastBox message={"Status changed succesfully.!"} />,
|
||||
});
|
||||
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: () => <ToastBox message={response?.data?.message} />,
|
||||
});
|
||||
} else {
|
||||
toast({
|
||||
render: () => (
|
||||
<ToastBox message={"Something Went Wrong"} status={"error"} />
|
||||
),
|
||||
});
|
||||
}
|
||||
});
|
||||
} 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}
|
||||
</Text>
|
||||
),
|
||||
Address: (
|
||||
<Box w={200} isTruncated={true}>
|
||||
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
|
||||
{item.address}
|
||||
</Text>
|
||||
</Box>
|
||||
),
|
||||
"Mobile no": (
|
||||
<Box w={"auto"} isTruncated={true}>
|
||||
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
|
||||
@@ -155,7 +164,7 @@ const Sponser = () => {
|
||||
<Switch
|
||||
size={"sm"}
|
||||
colorScheme="green"
|
||||
// onChange={() => handleUpdateStatus(item.id)}
|
||||
onChange={() => handleUpdateStatus(item.id)}
|
||||
isChecked={item.isActive}
|
||||
/>
|
||||
</Box>
|
||||
@@ -189,6 +198,10 @@ const Sponser = () => {
|
||||
placement="top"
|
||||
>
|
||||
<Button
|
||||
// onClick={() => navigate(`/view-sponser/${item.id}`) }
|
||||
onClick={() => {
|
||||
navigate(`view-sponser/${item.id}`);
|
||||
}}
|
||||
_hover={{ color: "green.500" }}
|
||||
// transition={"0.5s all"}
|
||||
color="green.300"
|
||||
@@ -208,6 +221,7 @@ const Sponser = () => {
|
||||
placement="top"
|
||||
>
|
||||
<Button
|
||||
onClick={() => navigate(`/sponser/${item.id}`)}
|
||||
_hover={{ color: "blue.500" }}
|
||||
// transition={"0.5s all"}
|
||||
color="blue.400"
|
||||
@@ -269,8 +283,6 @@ const Sponser = () => {
|
||||
// ),
|
||||
}));
|
||||
|
||||
console.log(extractedArray);
|
||||
|
||||
const handleDelete = () => {
|
||||
const updatedSponsors = sponser.filter(
|
||||
(sponsor) => sponsor.id !== actionId
|
||||
@@ -317,7 +329,7 @@ const Sponser = () => {
|
||||
rounded={"sm"}
|
||||
size={"sm"}
|
||||
>
|
||||
Add sponsorer
|
||||
Add
|
||||
</Button>
|
||||
</Link>
|
||||
</HStack>
|
||||
|
||||
@@ -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 <Box>Loading...</Box>;
|
||||
}
|
||||
|
||||
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
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
@@ -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 },
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user