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 ( <> {/* */} Task Frequency List {values.category.map((item,index)=>( {errors.category?.[index]?.ambulanceName} ) : null } /> {errors.category?.[index]?.ambulanceNumber} ) : null } /> { // const syntheticEvent = { // target: { // name: `category[${index}].ohcTypeId`, // Dynamically assign the correct name // value: newValue, // Set the selected value // }, // }; // handleChange(syntheticEvent); // Pass it to Formik's handleChange // }} onChange={(event, newValue) => { setFieldValue(`category[${index}].ohcTypeId`, newValue ? newValue.label : ''); }} onBlur={handleBlur} /> { // const syntheticEvent = { // target: { // name: `category[${index}].ambulanceCategoryId`, // Dynamically assign the correct name // value: newValue, // Set the selected value // }, // }; // handleChange(syntheticEvent); // Pass it to Formik's handleChange // }} onChange={(event, newValue) => { setFieldValue(`category[${index}].ambulanceCategoryId`, newValue ? newValue.label : ''); }} onBlur={handleBlur} /> {index > 0 && ( handleRemoveFrequency(index)} /> )} ))} ); }; export default AmbulanceList;