219 lines
9.8 KiB
TypeScript
219 lines
9.8 KiB
TypeScript
import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
|
|
import { Field, Input, Stack, Text } from "@chakra-ui/react"
|
|
import { IoMdAdd } from "react-icons/io"
|
|
import { Button } from "../../../components/ui/button"
|
|
import { useEffect, useState } from "react";
|
|
import { PostCountry, useCreateCountryPostMutation } from "../../../Redux/Service/country.master";
|
|
import { Toaster, toaster } from "../../../components/ui/toaster";
|
|
|
|
function CountryAddModel({refetch}: { refetch: VoidFunction }) {
|
|
const [createCountryPost, { isLoading }] = useCreateCountryPostMutation()
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const [countryName, setCountryName] = useState<PostCountry>({
|
|
en_name: '',
|
|
country_code: '',
|
|
phonecode: '',
|
|
capital: '',
|
|
currency: '',
|
|
currency_name: '',
|
|
currency_symbol: '',
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (!isOpen) {
|
|
setCountryName({
|
|
en_name: '',
|
|
country_code: '',
|
|
phonecode: '',
|
|
capital: '',
|
|
currency: '',
|
|
currency_name: '',
|
|
currency_symbol: '',
|
|
});
|
|
}
|
|
}, [isOpen]);
|
|
|
|
const handleOpenModal = () => {
|
|
setIsOpen(true); // Open modal when clicking "Add"
|
|
};
|
|
|
|
const handleSubmit = async () => {
|
|
if (countryName.en_name === "" || countryName.country_code === "" || countryName.phonecode === "" || countryName.capital === "" || countryName.currency === "" || countryName.currency_name === "" || countryName.currency_symbol === "") {
|
|
toaster.create({
|
|
title: "Error",
|
|
description: "Input fields cannot be empty",
|
|
type: "error",
|
|
});
|
|
return;
|
|
}
|
|
|
|
const payload: PostCountry = {
|
|
en_name: countryName.en_name,
|
|
country_code: countryName.country_code,
|
|
phonecode: countryName.phonecode,
|
|
capital: countryName.capital,
|
|
currency: countryName.currency,
|
|
currency_name: countryName.currency_name,
|
|
currency_symbol: countryName.currency_symbol,
|
|
};
|
|
|
|
try {
|
|
const response = await createCountryPost(payload).unwrap();
|
|
if (response) {
|
|
toaster.create({
|
|
title: "Success",
|
|
description: "Country added successfully",
|
|
type: "success",
|
|
});
|
|
setIsOpen(false);
|
|
refetch();
|
|
} else {
|
|
toaster.create({
|
|
title: "Error",
|
|
description: "Failed to add Country",
|
|
type: "error",
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.error("Error updating template:", error);
|
|
// alert("Failed to update template");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<DialogRoot placement="center" open={isOpen} onOpenChange={({ open }) => setIsOpen(open)}>
|
|
<DialogTrigger asChild>
|
|
{/* <Button bg={"transparent"} size="sm">
|
|
<MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
|
|
</Button> */}
|
|
<Button px={5} size={"xs"} bg={"#02A0A0"} onClick={handleOpenModal}>
|
|
<IoMdAdd /> <Text>Add</Text>
|
|
</Button>
|
|
|
|
</DialogTrigger>
|
|
|
|
<DialogContent
|
|
bg={"#fff"}
|
|
// w={{ lg: "60%", md: "230px" }}
|
|
w={{ base: '90%', md: '400px' }}
|
|
height={'auto'}
|
|
|
|
overflowX="hidden"
|
|
p={3} // Reduced padding
|
|
bgSize={'md'}
|
|
>
|
|
<DialogHeader bg="white" >
|
|
<DialogTitle alignSelf="center" color="black" fontSize="14px">Add</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<DialogBody bg="white">
|
|
<Stack py={3}>
|
|
|
|
<Field.Root>
|
|
<Field.Label color="black" pt={1} fontSize="12px">Country</Field.Label>
|
|
<Input
|
|
placeholder="Enter Country Name"
|
|
bgColor="#EEEEEE"
|
|
color="black"
|
|
border="none"
|
|
pl={1}
|
|
fontSize="12px"
|
|
height="30px"
|
|
value={countryName.en_name}
|
|
onChange={(e) => setCountryName({ ...countryName, en_name: e.target.value })}
|
|
/>
|
|
|
|
<Field.Label color="black" pt={1} fontSize="12px">Country Code</Field.Label>
|
|
<Input
|
|
placeholder="Please enter country code ex: IN, US"
|
|
bgColor="#EEEEEE"
|
|
color="black"
|
|
border="none"
|
|
pl={1}
|
|
fontSize="12px"
|
|
height="30px"
|
|
value={countryName.country_code}
|
|
onChange={(e) => setCountryName({ ...countryName, country_code: e.target.value })}
|
|
/>
|
|
|
|
<Field.Label color="black" pt={1} fontSize="12px">Phone Code</Field.Label>
|
|
<Input
|
|
placeholder="Please enter phone code ex: +91, +1"
|
|
bgColor="#EEEEEE"
|
|
color="black"
|
|
border="none"
|
|
pl={1}
|
|
fontSize="12px"
|
|
height="30px"
|
|
value={countryName.phonecode}
|
|
onChange={(e) => setCountryName({ ...countryName, phonecode: e.target.value })}
|
|
/>
|
|
<Field.Label color="black" pt={1} fontSize="12px">Capital</Field.Label>
|
|
<Input
|
|
placeholder="Enter Capital City"
|
|
bgColor="#EEEEEE"
|
|
color="black"
|
|
border="none"
|
|
pl={1}
|
|
fontSize="12px"
|
|
height="30px"
|
|
value={countryName.capital}
|
|
onChange={(e) => setCountryName({ ...countryName, capital: e.target.value })}
|
|
/>
|
|
<Field.Label color="black" pt={1} fontSize="12px">Currency</Field.Label>
|
|
<Input
|
|
placeholder="Enter Currency"
|
|
bgColor="#EEEEEE"
|
|
color="black"
|
|
border="none"
|
|
pl={1}
|
|
fontSize="12px"
|
|
height="30px"
|
|
value={countryName.currency}
|
|
onChange={(e) => setCountryName({ ...countryName, currency: e.target.value })}
|
|
/>
|
|
<Field.Label color="black" pt={1} fontSize="12px">Currency name</Field.Label>
|
|
<Input
|
|
placeholder="Enter Currency Name"
|
|
bgColor="#EEEEEE"
|
|
color="black"
|
|
border="none"
|
|
pl={1}
|
|
fontSize="12px"
|
|
height="30px"
|
|
value={countryName.currency_name}
|
|
onChange={(e) => setCountryName({ ...countryName, currency_name: e.target.value })}
|
|
/>
|
|
<Field.Label color="black" pt={1} fontSize="12px">Currency Symbol</Field.Label>
|
|
<Input
|
|
placeholder="Enter Currency Symbol"
|
|
bgColor="#EEEEEE"
|
|
color="black"
|
|
border="none"
|
|
pl={1}
|
|
fontSize="12px"
|
|
height="30px"
|
|
value={countryName.currency_symbol}
|
|
onChange={(e) => setCountryName({ ...countryName, currency_symbol: e.target.value })}
|
|
/>
|
|
</Field.Root>
|
|
</Stack>
|
|
|
|
</DialogBody>
|
|
<DialogFooter display="flex" justifyContent="center" pt={"2"}>
|
|
<Button w="100%" bg="#02A0A0" color={"#fff"} onClick={handleSubmit} disabled={isLoading}>
|
|
Save
|
|
</Button>
|
|
</DialogFooter>
|
|
|
|
<DialogCloseTrigger color="black" />
|
|
</DialogContent>
|
|
</DialogRoot >
|
|
<Toaster />
|
|
</>
|
|
|
|
)
|
|
}
|
|
|
|
export default CountryAddModel |