156 lines
4.6 KiB
JavaScript
156 lines
4.6 KiB
JavaScript
import {
|
|
Button,
|
|
Drawer,
|
|
DrawerBody,
|
|
DrawerCloseButton,
|
|
DrawerContent,
|
|
DrawerFooter,
|
|
DrawerHeader,
|
|
FormControl,
|
|
FormLabel,
|
|
Input,
|
|
Box,
|
|
Text,
|
|
} from "@chakra-ui/react";
|
|
import React, { useContext, useEffect, useState } from "react";
|
|
import { bytesToMB, getFileIcon, investmentDocSchema } from "../InvestmentDocuments";
|
|
import { yupResolver } from "@hookform/resolvers/yup";
|
|
import { useForm } from "react-hook-form";
|
|
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
|
|
|
|
const InvestmentEdit = ({ isOpen, onClose, thirdField, id }) => {
|
|
const { create, setCreate } = useContext(GlobalStateContext);
|
|
const [file, setFile] = useState(null);
|
|
const filteredObject = create?.find((item) => item?.id === id)
|
|
console.log(filteredObject?.Type);
|
|
const {
|
|
control,
|
|
watch,
|
|
setValue,
|
|
handleSubmit,
|
|
reset,
|
|
register,
|
|
formState: { errors },
|
|
} = useForm({
|
|
resolver: yupResolver(investmentDocSchema),
|
|
});
|
|
|
|
console.log(filteredObject);
|
|
|
|
useEffect(() => {
|
|
if (filteredObject) {
|
|
reset({
|
|
fileName:filteredObject?.fileName,
|
|
document: filteredObject?.document,
|
|
Type: filteredObject?.Type
|
|
});
|
|
|
|
}
|
|
}, [id, create, reset]);
|
|
|
|
|
|
const onSubmit = (data) => {
|
|
// setValue('Type',data.Type[0]?.type)
|
|
console.log(data);
|
|
const updatedCreate = create.map((item) =>
|
|
item.id === id ? { ...item, ...data } : item
|
|
);
|
|
setCreate(updatedCreate);
|
|
onClose();
|
|
};
|
|
|
|
|
|
const handleFileChange = (event) => {
|
|
const selectedFile = event.target.files[0];
|
|
setFile(selectedFile);
|
|
};
|
|
|
|
|
|
return (
|
|
<Drawer isOpen={isOpen} placement="right" onClose={onClose} initialFocusRef={thirdField}>
|
|
<DrawerContent>
|
|
<DrawerCloseButton />
|
|
<DrawerHeader fontSize={"md"}>Edit Document</DrawerHeader>
|
|
<Box as="form" onSubmit={handleSubmit(onSubmit)}>
|
|
<DrawerBody>
|
|
<FormControl mb={4} isInvalid={errors.fileName}>
|
|
<FormLabel fontSize="sm">File Name</FormLabel>
|
|
<Input
|
|
fontSize="sm"
|
|
type="text"
|
|
size="sm"
|
|
{...register("fileName")}
|
|
/>
|
|
{errors.fileName && (
|
|
<Text color="red.500" fontSize="sm">
|
|
{errors.fileName.message}
|
|
</Text>
|
|
)}
|
|
</FormControl>
|
|
<FormControl mb={4} isInvalid={errors.document}>
|
|
<FormLabel fontSize="sm">Document</FormLabel>
|
|
<Input
|
|
fontSize="sm"
|
|
type="text"
|
|
size="sm"
|
|
{...register("document")}
|
|
/>
|
|
{errors.document && (
|
|
<Text color="red.500" fontSize="sm">
|
|
{errors.document.message}
|
|
</Text>
|
|
)}
|
|
</FormControl>
|
|
<FormControl mb={4} isInvalid={errors.Type}>
|
|
<FormLabel fontSize="sm">Type</FormLabel>
|
|
<Input
|
|
name="Type"
|
|
{...register("Type")}
|
|
fontSize="sm"
|
|
className="form-control"
|
|
type="file"
|
|
size="sm"
|
|
onChange={handleFileChange}
|
|
/>
|
|
{errors.type && (
|
|
<Text color="red.500" fontSize="sm">
|
|
{errors.type.message}
|
|
</Text>
|
|
)}
|
|
</FormControl>
|
|
{file === null ?
|
|
<Text>{filteredObject?.Type}</Text>: (
|
|
<Box mt={4}>
|
|
<Box display="flex" mb={2}>
|
|
<Text>{getFileIcon(file.type)}</Text>
|
|
<Text fontSize="sm" ml={2} mb={0 }>
|
|
{file.name}
|
|
</Text>
|
|
</Box>
|
|
<Text fontSize="sm">{bytesToMB(file.size)}</Text>
|
|
</Box>
|
|
)}
|
|
</DrawerBody>
|
|
<DrawerFooter>
|
|
<Button
|
|
variant="outline"
|
|
colorScheme="green"
|
|
rounded="sm"
|
|
size="sm"
|
|
mr={3}
|
|
onClick={onClose}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button colorScheme="green" rounded="sm" size="sm" type="submit">
|
|
Save
|
|
</Button>
|
|
</DrawerFooter>
|
|
</Box>
|
|
</DrawerContent>
|
|
</Drawer>
|
|
);
|
|
};
|
|
|
|
export default InvestmentEdit;
|
|
|