import React, { useState } from “react”;
import {
Box,
Button,
Flex,
FormControl,
FormLabel,
Input,
Text,
useColorModeValue,
useBreakpointValue,
} from “@chakra-ui/react”;
import { MdUpload } from “react-icons/md”;
import axios from “axios”;
import { useHistory } from “react-router-dom”;
import { useAuth } from “AuthContext”;
const EmployeeForm = ({ isOpen, onClose }) => {
const { token } = useAuth();
const history = useHistory();
const brandColor = useColorModeValue(“brand.500”, “white”);
const isMobile = useBreakpointValue({ base: true, md: false });
const [employeeData, setEmployeeData] = useState({
employeePicture: null,
EmployeeName: “”,
PassportNumber: “”,
passportExpiry: “”,
iqamaNumber: “”,
iqamaExpiry: "",
iqamaPicture: null,
passportPicture: null,
});
const handleChange = (e) => {
const { name, value } = e.target;
setEmployeeData((prevData) => ({
…prevData,
[name]: value,
}));
};
const handleFileChange = (e, fieldName) => {
const file = e.target.files[0];
setEmployeeData((prevData) => ({
…prevData,
[fieldName]: file,
}));
};
const uploadImage = async (file, fieldName) => {
try {
const formData = new FormData();
formData.append(fieldName, file);
const response = await axios.post(
"http://localhost:1337/api/upload",
formData,
{
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "multipart/form-data",
},
}
);
const imageId = response.data[0].id;
return imageId;
} catch (error) {
console.error("Error uploading image:", error);
throw error;
}
};
const handleSubmit = async () => {
try {
const employeePictureId = await uploadImage(
employeeData.employeePicture,
“employeePicture”
);
const iqamaPictureId = await uploadImage(
employeeData.iqamaPicture,
“iqamaPicture”
);
const passportPictureId = await uploadImage(
employeeData.passportPicture,
“passportPicture”
);
const response = await fetch(“http://localhost:1337/api/employee-data”, {
method: “POST”,
headers: {
“Content-Type”: “application/json”,
},
body: JSON.stringify({
data: {
…employeeData,
employeePicture: employeePictureId,
iqamaPicture: iqamaPictureId,
passportPicture: passportPictureId,
},
}),
});
setEmployeeData({
employeePicture: null,
EmployeeName: "",
PassportNumber: "",
passportExpiry: "",
iqamaNumber: "",
iqamaExpiry: "",
iqamaPicture: null,
passportPicture: null,
});
alert("Form submitted successfully!");
history.push("/admin/emp-tables");
} catch (error) {
console.error("Error submitting form data:", error);
alert("Failed to submit form data. Please try again later.");
}
};
return (
Employee picture
<Input
name=“employeePicture”
type=“file”
accept=“image/*”
onChange={(e) => handleFileChange(e, “employeePicture”)}
/>
<Flex direction={isMobile ? “column” : “row”}>
<FormControl flex=“1” mr={!isMobile && 4} mb={isMobile ? 4 : 0}>
Employee name
<FormControl flex="1">
<FormLabel>passport Number</FormLabel>
<Input
name="PassportNumber"
value={employeeData.PassportNumber}
onChange={handleChange}
placeholder="Passport Number"
/>
</FormControl>
</Flex>
<Flex direction={isMobile ? "column" : "row"}>
<FormControl mr={!isMobile && 4} mb={isMobile ? 4 : 0}>
<FormLabel>Passport Expiry</FormLabel>
<Input
type="date"
placeholder="Passport Expiry"
name="passportExpiry"
value={employeeData.passportExpiry}
onChange={handleChange}
/>
</FormControl>
<FormControl mr={!isMobile && 4} mb={isMobile ? 4 : 0}>
<FormLabel>iqama number</FormLabel>
<Input
name="iqamaNumber"
value={employeeData.iqamaNumber}
onChange={handleChange}
placeholder="iqama Number"
/>
</FormControl>
</Flex>
<Flex direction={isMobile ? "column" : "row"}>
<FormControl>
<FormLabel>iqama Expiry</FormLabel>
<Input
type="date"
name="iqamaExpiry"
placeholder="Iqama Expiry"
value={employeeData.iqamaExpiry}
onChange={handleChange}
/>
</FormControl>
</Flex>
<Flex direction={isMobile ? "column" : "row"}>
<FormControl mr={!isMobile && 4} mb={isMobile ? 4 : 0}>
<FormLabel>iqama picture</FormLabel>
<Input
type="file"
accept="image/*"
onChange={(e) => handleFileChange(e, "iqamaPicture")}
/>
</FormControl>
<FormControl mr={!isMobile && 4} mb={isMobile ? 4 : 0}>
<FormLabel>Passport picture</FormLabel>
<Input
type="file"
accept="image/*"
onChange={(e) => handleFileChange(e, "passportPicture")}
/>
</FormControl>
</Flex>
<Button colorScheme="blue" onClick={onClose} mt={4}>
Close
</Button>
<Button
variant="brand"
fontWeight="500"
ml={4}
mt={4}
onClick={handleSubmit}
>
Submit
</Button>
</Box>
);
};
export default EmployeeForm;
