import { Button, ButtonGroup, Stack } from '@mui/material';
import Box from '@mui/material/Box';
import { useEffect, useState } from 'react';
import { AgGridReact } from 'ag-grid-react';
import useAxiosPrivate from '../../utils/useAxiosPrivate';
import EditNoteRoundedIcon from '@mui/icons-material/EditNoteRounded';
import DeleteSweepRoundedIcon from '@mui/icons-material/DeleteSweepRounded';
// import ImportExportRoundedIcon from '@mui/icons-material/ImportExportRounded';
import AddCircleOutlineRoundedIcon from '@mui/icons-material/AddCircleOutlineRounded';
// import Popup from './Popup';
// import AmbulanceForm from './AmbulanceForm';
//import { ambulanceForm } from './Validationform';
import { useFormik } from "formik";
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
import DownloadIcon from '@mui/icons-material/Download';
import ExcelJS from 'exceljs';
import jsPDF from 'jspdf';
import 'jspdf-autotable';
import PropTypes from "prop-types";
// import * as Yup from 'yup';
import { controllers } from 'chart.js';
// import { Label } from '@mui/icons-material';
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
// import DialogContentText from "@mui/material/DialogContentText";
import DialogTitle from "@mui/material/DialogTitle";
// import Typography from "@mui/material";
import Typography from '@mui/material/Typography';
import CancelRoundedIcon from "@mui/icons-material/CancelRounded";
import Input from "../common/Input";
import SingleSelect from '../common/SingleSelect';
import DeleteIcon from '@mui/icons-material/Delete';
// const ambulanceForm = Yup.object({
// ambulancenumber: Yup.string().required("Please enter ambulance Number"),
// ambulanceform: Yup.string().required("Please enter ambulance Form "),
// ambulances:Yup.string().required("Please enter ambulances "),
// cardiacs: Yup.string().required("Please enter cardiacs "),
// });
const AmbulanceList = () => {
const [rowData, setRowData] = useState([]);
const [colDefs, setColDefs] = useState([]);
const [openPopup, setOpenPopup] = useState(false);
const axiosClientPrivate = useAxiosPrivate();
const [id,setId] = useState(1);
const [showupdate,setShowupdate] = useState(false);
const [fetchTrigger, setFetchTrigger] = useState(0);
const [categoryData,setCategoryDate] = useState([]);
const [categoryNameId,setCategoryNameId] = useState();
const [categoryIdName,setCategoryIdName] = useState();
const [ohcs,setOhcs] = useState([]);
const [ohcNameId,setOhcNameId] = useState();
const [ohcIdName,setOhcIdName] = useState();
const initialValues = {
category : [
{
ambulanceName: "",
ambulanceNumber: "",
ohcTypeId:"",
ambulanceCategoryId: ""
}
]
};
// const ohcs = [
// { label: "ohc1", id: 1 },
// { label: "ohc2", id: 2 }
// ]
const {
values,
touched,
errors,
handleBlur,
handleChange,
setFieldValue,
handleSubmit,
getFieldProps,
resetForm,
} = useFormik({
initialValues: initialValues,
// validationSchema: ambulanceForm,
// onSubmit: (values, action) => {
// // values.category[]
// const changeData = values.category.map((item)=>({
// ...item,
// ohcTypeId : item.ohcTypeId.id,
// ambulanceCategoryId : item.ambulanceCategoryId.id
// }))
// console.log("changes data",changeData);
// action.resetForm();
// },
onSubmit: async (values, {resetForm}) => {
// console.log("values",values);
try {
const changeData = values.category.map((item)=>({
...item,
ohcTypeId : ohcNameId[item.ohcTypeId],
ambulanceCategoryId : categoryNameId[item.ambulanceCategoryId]
}))
// console.log("changes data",changeData);
const response = await axiosClientPrivate.post('/ambulance-details', changeData);
toast.success("Saved Successfully!",{
position:"top-center",
autoClose : 500
});
// getting id(key,value) of last index
setFetchTrigger(prev => prev+1);
console.log('Response:', response.data);
resetForm();
} catch (error) {
// console.log(values.category);
console.error('Error:', error);
}
},
});
const handleEdit = async (id) => {
// alert(id);
try {
// const response1 = await axiosClientPrivate.get('/ambulance-categories');
// const items1 = response1.data.content;
// // console.log("item1",items1);
// const ambulancePair = {};
// const ambuNameIdPair = {}
// const ambulanceData = items1.map((item)=>{
// ambuNameIdPair[item.ambulanceCategory] = item.id
// ambulancePair[item.id] = item.ambulanceCategory
// })
// setCategoryPair(ambuNameIdPair)
// const response2 = await axiosClientPrivate.get('/ohcs');
// const items2 = response2.data.content;
// const ohcsPair = {}
// const ohcNameIdPair = {}
// const ohcData = items2.map((item)=>{
// ohcNameIdPair[item.ohcName] = item.id,
// ohcsPair[item.id] = item.ohcName
// })
// setOhcPair(ohcNameIdPair)
const response = await axiosClientPrivate.get(`/ambulance-details/${id}`);
const items = response.data;
// console.log("edit ambulance",items);
// const changeData = {
// ...items,
// ambulanceCategoryId: ambulancePair[items.ambulanceCategoryId],
// // ambulanceCategoryId: {lable : ambuNameIdPair[items.ambulanceCategoryId],id : items.id},
// ohcTypeId: ohcsPair[items.ohcTypeId]
// // ohcTypeId: {lable : ohcNameIdPair[items.ohcTypeId],id : items.id},
// };
// console.log("edit change data",changeData);
setFieldValue(`category[${0}].id`,items.id);
// setFieldValue("id",changeData.id);
setFieldValue(`category[${0}].ambulanceName`,items.ambulanceName);
setFieldValue(`category[${0}].ambulanceNumber`,items.ambulanceNumber);
setFieldValue(`category[${0}].ohcTypeId`, ohcIdName[items.ohcTypeId]);
setFieldValue(`category[${0}].ambulanceCategoryId`, categoryIdName[items.ambulanceCategoryId]);
// console.log("values",values);
setId(id);
setShowupdate(true);
setOpenPopup(true);
} catch (error) {
console.error('Error fetching item for edit:', error);
}
};
const handleUpdate = async (id)=> {
// alert(id);
// console.log("update value",values);
// const changeData = {values.category.map((item)=>({
// ...item,
// ohcTypeId : item.ohcTypeId.id,
// ambulanceCategoryId : item.ambulanceCategoryId.id
// }))
const updataData = {
id: values.category[0].id,
ambulanceName: values.category[0].ambulanceName,
ambulanceNumber: values.category[0].ambulanceNumber,
ohcTypeId: ohcNameId[values.category[0].ohcTypeId],
ambulanceCategoryId : categoryNameId[values.category[0].ambulanceCategoryId],
}
console.log("update object",updataData);
// const update = values;
try{
// console.log(values);
await axiosClientPrivate.put(`/ambulance-details/${id}`,updataData);
toast.success("Updated Successfully!",{
position:"top-center",
autoClose: 500,
});
resetForm();
// setRowData(rowData => [...rowData,values]);
setFetchTrigger(prev => prev+1);
}
catch(err){
// console.log(updataData);
console.log(err);
}
}
// to delete a row
const handleDeleteRow = async (id) => {
alert(id)
if(window.confirm('Are you sure you want to delete this data?')){
try {
await axiosClientPrivate.delete(`/ambulance-details/${id}`);
// setRowData(prevData => prevData.filter(row => row.buId !== id));
setFetchTrigger(prev => prev+1);
} catch (error) {
console.error('Error deleting row:', error);
}
}
};
const CustomActionComponent = ({id}) => {
CustomActionComponent.propTypes = {
id: PropTypes.number.isRequired,
};
return
};
const pagination = true;
const paginationPageSize = 50;
const paginationPageSizeSelector = [50, 100, 200, 500];
useEffect(() => {
const controller = new AbortController();
const getAllOhc = async () => {
// const response1 = await axiosClientPrivate.get('ambulance-categories', { signal: controller.signal });
// const items1 = response1.data.content;
// // console.log("item1",items1);
// if(items1.length > 0){
// const ambulanceNameIdPair = {};
// const ambulanceIdNamePair = {};
// const ambulanceData = items1.map((item)=>{
// ambulanceNameIdPair[item.ambulanceCategory] = item.id
// ambulanceIdNamePair[item.id] = item.ambulanceCategory
// })
// setCategoryNameId(ambulanceNameIdPair)
// setCategoryIdName(ambulanceIdNamePair)
// console.log("ambulanceData NameId ",ambulanceNameIdPair);
// console.log("ambulanceData IdName",ambulanceIdNamePair);
// }
// const response2 = await axiosClientPrivate.get('/ohcs', { signal: controller.signal });
// const items2 = response2.data.content;
// if(items2.length > 0){
// const ohcNameIdPair = {}
// const ohcIdNamePair = {}
// const ohcData = items2.map((item)=>{
// ohcNameIdPair[item.ohcName] = item.id
// ohcIdNamePair[item.id] = item.ohcName
// })
// setOhcNameId(ohcNameIdPair)
// setOhcIdName(ohcIdNamePair)
// console.log("ohc NameId ",ohcNameIdPair);
// console.log("ohc IdName",ohcIdNamePair);
// }
// setOhcPair(ohcsPair);
// console.log("ohcPair",ohcPair);
try {
const response = await axiosClientPrivate.get('/ambulance-details', { signal: controller.signal });
const items = response.data.content;
console.log("actual data",items);
// setRowData(items);
const changeData = items.map((item)=>{
item.ambulanceCategoryId = categoryIdName[item.ambulanceCategoryId];
item.ohcTypeId = ohcIdName[item.ohcTypeId];
return { ...item }
})
setRowData(items);
console.log("ambulance changes",changeData);
if (items.length > 0) {
const columns = Object.keys(items[0]).map(key => ({
field: key,
headerName: key.charAt(0).toUpperCase() + key.slice(1),
filter: true,
floatingFilter: true,
sortable: true
}));
columns.unshift({
field: "Actions", cellRenderer: (params) =>{
const id = params.data.id;
return
}
});
setColDefs(columns);
}
} catch (err) {
console.error("Failed to fetch data: ", err);
setRowData([]);
}
};
getAllOhc();
return () => {
controller.abort();
};
}, [fetchTrigger,axiosClientPrivate]);
// category
useEffect(()=>{
const controller = new AbortController();
const Category =async ()=>{
try {
const response = await axiosClientPrivate.get('/ambulance-categories',{signal : controllers.signal})
const items = response.data.content;
// console.log("category0",items);
if(items.length > 0){
const ambulanceNameIdPair = {};
const ambulanceIdNamePair = {};
const changeData = items.map((item)=>{
ambulanceNameIdPair[item.ambulanceCategory] = item.id
ambulanceIdNamePair[item.id] = item.ambulanceCategory
return {label : item.ambulanceCategory,id : item.id}
})
setCategoryNameId(ambulanceNameIdPair)
setCategoryIdName(ambulanceIdNamePair)
console.log("ambulance category",changeData);
setCategoryDate(changeData)
}
} catch (error) {
// console.log(error);
console.log("Failed to fetch category data",error);
// setCategoryDate([]);
}
}
Category();
return () => {
controller.abort();
}
},[axiosClientPrivate])
useEffect(()=>{
const controller = new AbortController();
const getAllOhcs = async ()=>{
try {
const response = await axiosClientPrivate.get("/ohcs",{signal : controller.signal})
const items = response.data.content;
if(items.length > 0){
const ohcNameIdPair = {}
const ohcIdNamePair = {}
const changeData = items.map((item)=>{
ohcNameIdPair[item.ohcName] = item.id
ohcIdNamePair[item.id] = item.ohcName
return {label : item.ohcName,id : item.id}
})
setOhcNameId(ohcNameIdPair)
setOhcIdName(ohcIdNamePair)
setOhcs(changeData)
}
// console.log("setOhcs",items);
} catch (error) {
console.log("Failed to fetch ohc data",error);
}
}
getAllOhcs();
return ()=>{
controller.abort()
}
},[axiosClientPrivate])
const exportpdf = async () => {
const doc = new jsPDF();
const header = [['Id', 'Ambulance Name',"Ambulance Number","Ohc Type","Ambulance CAtegory"]];
const tableData = rowData.map(item => [
item.id,
item.ambulanceName,
item.ambulanceNumber,
item.ohcTypeId,
item.ambulanceCategoryId,
]);
doc.autoTable({
head: header,
body: tableData,
startY: 20,
theme: 'grid',
margin: { top: 30 },
styles: { fontSize: 5 },
columnStyles: { 0: { cellWidth: 'auto' }, 1: { cellWidth: 'auto' } }
});
doc.save("AmbulanceList.pdf");
};
const exportExcelfile = async () => {
const workbook = new ExcelJS.Workbook();
const sheet = workbook.addWorksheet('My Sheet');
const headerStyle = {
alignment: { horizontal: 'center' }
};
sheet.getRow(1).font = { bold: true };
const columnWidths = {
Id: 10,
ambulanceName: 20,
ambulanceNumber: 15,
ohcTypeId: 25,
ambulanceCategoryId: 25,
};
sheet.columns = [
{ header: "Id", key: 'Id', width: columnWidths.Id, style: headerStyle },
{ header: "Ambulance Name", key: 'ambulanceName', width: columnWidths.ambulanceName, style: headerStyle },
{ header: "Ambulance Number", key: 'ambulanceNumber', width: columnWidths.ambulanceNumber, style: headerStyle },
{ header: "Ohc Type", key: 'ohcTypeId', width: columnWidths.ohcTypeId, style: headerStyle },
{ header: "Ambulance CAtegory", key: 'ambulanceCategoryId', width: columnWidths.ambulanceCategoryId, style: headerStyle },
];
rowData.map(product =>{
sheet.addRow({
id: product.id,
ambulanceName: product.ambulanceName,
ambulanceNumber: product.ambulanceNumber,
ohcTypeId: product.ohcTypeId,
ambulanceCategoryId: product.ambulanceCategoryId,
})
});
workbook.xlsx.writeBuffer().then(data => {
const blob = new Blob([data], {
type: "application/vnd.openxmlformats-officedocument.spreadsheet.sheet",
});
const url = window.URL.createObjectURL(blob);
const anchor = document.createElement('a');
anchor.href = url;
anchor.download = 'AmbulanceList.xlsx';
anchor.click();
})
}
const handleAddFrequency = () => {
const newData = { ambulanceName: "", ambulanceNumber: "", ohcTypeId: "", ambulanceCategoryId: "" };
setFieldValue('category', [...values.category, newData]);
};
const handleRemoveFrequency = (index) => {
const updatedFrequency = values.category.filter((_, i) => i !== index);
setFieldValue('category', updatedFrequency);
};
return (
<>
} onClick={() => { setOpenPopup(true) }}>Add New
{/*
*/}
>
);
};
export default AmbulanceList;