725 lines
26 KiB
Plaintext
725 lines
26 KiB
Plaintext
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 <div> <Button onClick={() => handleEdit(id)} > <EditNoteRoundedIcon /></Button>
|
|
<Button color="error" onClick={() => handleDeleteRow(id)}> <DeleteSweepRoundedIcon /> </Button> </div>
|
|
|
|
};
|
|
|
|
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 <CustomActionComponent id={id} />
|
|
}
|
|
});
|
|
|
|
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 (
|
|
<>
|
|
<ToastContainer />
|
|
<Box
|
|
className="ag-theme-quartz"
|
|
style={{ height: 500 }}
|
|
>
|
|
|
|
<Stack sx={{ display: 'flex', flexDirection: 'row' }} marginY={1} paddingX={1}>
|
|
<ButtonGroup variant="contained" aria-label="Basic button group">
|
|
<Button variant="contained" endIcon={<AddCircleOutlineRoundedIcon />} onClick={() => { setOpenPopup(true) }}>Add New</Button>
|
|
<Button variant="contained" onClick={exportpdf} color="success" endIcon={<PictureAsPdfIcon/>}>PDF</Button>
|
|
<Button variant="contained" onClick={()=> exportExcelfile()} color="success" endIcon={<DownloadIcon/>}>Excel</Button>
|
|
</ButtonGroup>
|
|
|
|
</Stack>
|
|
<AgGridReact
|
|
rowData={rowData}
|
|
columnDefs={colDefs}
|
|
animateRows={true}
|
|
pagination={pagination}
|
|
paginationPageSize={paginationPageSize}
|
|
paginationPageSizeSelector={paginationPageSizeSelector}
|
|
/>
|
|
</Box>
|
|
|
|
{/*<Popup showupdate={showupdate} id= {id} handleUpdate={handleUpdate} setShowupdate={setShowupdate} resetForm={resetForm} handleSubmit={handleSubmit} openPopup={openPopup} setOpenPopup={setOpenPopup} title="Ambulanceform ">
|
|
|
|
<AmbulanceForm categoryData={categoryData} values={values} touched={touched} errors={errors} handleBlur={handleBlur} handleChange={handleChange} setFieldValue={setFieldValue} handleSubmit={handleSubmit} />
|
|
|
|
</Popup>*/}
|
|
|
|
<Dialog
|
|
open={openPopup}
|
|
// sx={{ width: "1200px",height : '600px' }}
|
|
fullWidth={true}
|
|
maxWidth={"lg"}
|
|
>
|
|
<DialogTitle>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
}}
|
|
>
|
|
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
|
|
Task Frequency List
|
|
</Typography>
|
|
<Button
|
|
color="error"
|
|
endIcon={<CancelRoundedIcon />}
|
|
onClick={() => {
|
|
setOpenPopup(false)
|
|
setShowupdate(false)
|
|
// setFetchTrigger(prev => prev+1);
|
|
resetForm()
|
|
// setRowIndex(null);
|
|
}}
|
|
>
|
|
Close
|
|
</Button>
|
|
</Box>
|
|
</DialogTitle>
|
|
|
|
<DialogContent dividers>
|
|
|
|
<Box>
|
|
{values.category.map((item,index)=>(
|
|
<Stack key={index}
|
|
direction={'row'}
|
|
spacing={1}
|
|
marginTop={1}
|
|
alignItems={'center'}
|
|
>
|
|
<Input
|
|
label="Enter Ambulance Name"
|
|
// name="frequencyName"
|
|
name={`category[${index}].ambulanceName`}
|
|
type="text"
|
|
sx={{width : "290px"}}
|
|
size="small"
|
|
{...getFieldProps(`category[${index}].ambulanceName`)}
|
|
helperText={
|
|
errors.category?.[index]?.ambulanceName && touched.category?.[index]?.ambulanceName ? (
|
|
<span style={{ color: "red" }}>
|
|
{errors.category?.[index]?.ambulanceName}
|
|
</span>
|
|
) : null
|
|
}
|
|
/>
|
|
<Input
|
|
label="Frequency Code"
|
|
// name="frequencyCode"
|
|
name={`category[${index}].ambulanceNumber`}
|
|
type="text"
|
|
// size="large"
|
|
size="small"
|
|
sx={{width : "290px"}}
|
|
{...getFieldProps(`category[${index}].ambulanceNumber`)}
|
|
|
|
helperText={
|
|
errors.category?.[index]?.ambulanceNumber && touched.category?.[index]?.ambulanceNumber ? (
|
|
<span style={{ color: "red" }}>
|
|
{errors.category?.[index]?.ambulanceNumber}
|
|
</span>
|
|
) : null
|
|
}
|
|
/>
|
|
|
|
<SingleSelect
|
|
// sx={{ width: "150px" }}
|
|
|
|
arr={ohcs}
|
|
label="Select Ohc"
|
|
name={`category[${index}].ohcTypeId`}
|
|
size="small"
|
|
// {...getFieldProps(`category[${index}].ohcTypeId`)}
|
|
value={values.category[index].ohcTypeId}
|
|
// onChange={handleChange}
|
|
// onChange={(event, newValue) => {
|
|
// 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}
|
|
/>
|
|
|
|
<SingleSelect
|
|
|
|
arr={categoryData}
|
|
size="small"
|
|
label="Select ambulance category"
|
|
// name="ambulanceCategoryId"
|
|
name={`category[${index}].ambulanceCategoryId`}
|
|
|
|
value={values.category[index].ambulanceCategoryId}
|
|
// onChange={handleChange}
|
|
// onChange={(event, newValue) => {
|
|
// 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 && (
|
|
<DeleteIcon
|
|
color="error"
|
|
style={{ cursor: 'pointer', marginLeft: '1rem' }}
|
|
onClick={() => handleRemoveFrequency(index)}
|
|
/>
|
|
)}
|
|
|
|
|
|
|
|
|
|
</Stack>
|
|
))}
|
|
<Button
|
|
sx={{mt : 1}}
|
|
style={{display : showupdate ? "none" : "null" }}
|
|
fullWidth
|
|
variant="contained"
|
|
type="button"
|
|
onClick={() => handleAddFrequency()}
|
|
>Add Row</Button>
|
|
</Box>
|
|
|
|
</DialogContent>
|
|
|
|
<DialogActions>
|
|
<Button type="submit" onClick={()=> handleUpdate(id)} variant="outlined" style={{display : showupdate ? "null" : "none" }}>Update</Button>
|
|
<Button type="submit" onClick={() => handleSubmit()} variant="outlined" style={{display : showupdate ? "none" : "null" }}>Save</Button>
|
|
<Button onClick={() => resetForm()} type="reset" color='warning' variant="outlined">Reset</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default AmbulanceList;
|