ohctechv3/.svn/pristine/57/57acc4b1ce45246beabd1e255a090027f615eaac.svn-base

440 lines
15 KiB
Plaintext
Raw Normal View History

2024-10-28 15:03:36 +05:30
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 { RulegenerationValidationForm } 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 RulegenerationForm from './RulegenerationForm';
import PropTypes from "prop-types";
//import MultipleSelect from '../common/MultipleSelect';
//import TextField from '@mui/material';
import * as Yup from 'yup';
import TextArea from '../common/TextArea';
const RulegenerationValidationForm = Yup.object({
bracket: Yup.string().required("Please enter Bracket"),
age: Yup.string().required("Please enter Age"),
risk: Yup.string().required("Please enter Risk "),
ageend: Yup.string().required("Please enter Age End"),
advice: Yup.string().required("Please enter Advice"),
condition: Yup.string().required("Please enter Condition"),
value: Yup.string().required("Please enter Value"),
gender: Yup.string().required("Please enter Gender"),
abnormality: Yup.string().required("Please enter Abnormality"),
result: Yup.string().required("Please enter Result"),
close: Yup.string().required("Please enter Close Bracket"),
range:Yup.string().required("Please enter Range Type "),
checkup:Yup.string().required("Please enter Checkup Parameter "),
rule:Yup.string().required("Please enter Text Comparsion Rule"),
res:Yup.string().required("Please enter Result Field "),
});
const RulegenerationList = () => {
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 initialValues = {
bracket: "",
age:"",
risk:"",
ageend:"",
advice:"",
value:"",
result:"",
close:"",
checkup:"",
condition:"",
gender:"",
abnormality:"",
range:"",
res:"",
rule:""
};
const {
values,
touched,
errors,
handleBlur,
handleChange,
setFieldValue,
handleSubmit,
resetForm
} = useFormik({
initialValues: initialValues,
validationSchema: RulegenerationValidationForm,
onSubmit: async (values, {resetForm}) => {
try {
const response = await axiosClientPrivate.post('/medicallist', values);
toast.success("Saved Successfully!",{
position:"top-center"
});
// getting id(key,value) of last index
// const id = rowData[rowData.length-1].buId;
// const obj = {
// buId : id+1,
// ...values
// }
//console.log(obj);
//setRowData(rowData => [...rowData, obj]);
setFetchTrigger(prev => prev+1);
console.log('Response:', response.data);
resetForm();
} catch (error) {
console.log(values);
console.error('Error:', error);
}
},
});
const handleEdit = async (id) => {
alert(id);
try {
const response = await axiosClientPrivate.get(`/business-units/${id}`);
console.log(response.data);
setFieldValue("id",response.data.id);
setFieldValue("bracket",response.data.bracket);
setFieldValue(" age",response.data. age);
setFieldValue("risk",response.data.risk);
setFieldValue("ageend",response.data.ageend);
setFieldValue("advice", response.data.advice);
setFieldValue("value", response.data.value);
setFieldValue("result",response.data.result);
setFieldValue("close",response.data.close);
setFieldValue("checkup",response.data.checkup);
setFieldValue("condition",response.data.condition);
setFieldValue("gender", response.data.gender);
setFieldValue("abnormality", response.data.abnormality);
setFieldValue("range",response.data.range);
setFieldValue("res",response.data.res);
setFieldValue("rule",response.data.rule);
setId(id);
setShowupdate(true);
setOpenPopup(true);
} catch (error) {
console.error('Error fetching item for edit:', error);
}
};
const handleUpdate = async (id)=> {
alert(id);
const update = values;
try{
console.log(values);
await axiosClientPrivate.put(`/medicalitem/${id}`,update);
toast.success("Updated Successfully!",{
position:"top-center",
autoClose: 3000,
});
resetForm();
//setRowData(rowData => [...rowData,values]);
setFetchTrigger(prev => prev+1);
}
catch(err){
console.log(values);
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(`/business-units/${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 () => {
try {
const response = await axiosClientPrivate.get('business-units', { signal: controller.signal });
const items = response.data.content;
// console.log(items);
setRowData(items);
if (items.length > 0) {
const headerMappings = {
bracket: "Bracket",
age: "Age",
risk : "Risk",
ageend : "Age end",
advice : "Advice",
value : "Value",
result : "Result",
close : "Close",
checkup : "Checkup",
condition : "Condition",
gender : "Gender",
range : "Range",
res : "Res",
rule : "Rule",
};
const columns = Object.keys(items[0]).map(key => ({
field: key,
headerName: headerMappings[key] || key.charAt(0).toUpperCase() + key.slice(1),
filter: true,
floatingFilter: true,
sortable: true,
width: key === 'id' ? 100 : undefined,
}));
columns.unshift({
field: "Actions", cellRenderer: (params) =>{
const id = params.data.buId;
return <CustomActionComponent id={id} />
}
});
setColDefs(columns);
}
} catch (err) {
console.error("Failed to fetch data: ", err);
setRowData([]);
}
};
getAllOhc();
return () => {
controller.abort();
};
}, [fetchTrigger]);
const exportpdf = async () => {
const doc = new jsPDF();
const header = [['Id','bracket', 'age',"risk","ageend","advice","value","result","close","checkup","condition"
,"gender","abnormality","range","res","rule"]];
const tableData = rowData.map(item => [
item.bracket,
item.age,
item.risk,
item.ageend,
item.advice,
item.value,
item.result,
item.close,
item.checkup,
item.condition,
item.gender,
item.abnormality,
item.range,
item.res,
item.rule,
]);
doc.autoTable({
head: header,
body: tableData,
startY: 20, // Start Y position for the table
theme: 'grid', // Optional theme for the table
margin: { top: 30 }, // Optional margin from top
styles: { fontSize: 5 },
columnStyles: { 0: { cellWidth: 'auto' }, 1: { cellWidth: 'auto' } }
});
doc.save("RulegenerationList.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,
bracket: 20,
age: 20,
risk: 20,
ageend: 20,
advice: 20,
value: 20,
result: 20,
close: 20,
checkup: 20,
condition: 20,
gender: 20,
abnormality: 20,
range: 20,
res: 20,
rule: 20,
};
sheet.columns = [
{ header: "Id", key: 'buId', width: columnWidths.buId, style: headerStyle },
{ header: "bracket", key: 'bracket', width: columnWidths.bracket, style: headerStyle },
{ header: "age", key: 'age', width: columnWidths.age, style: headerStyle },
{ header: "risk", key: 'risk', width: columnWidths.risk, style: headerStyle },
{ header: "ageend", key: 'ageend', width: columnWidths.ageend, style: headerStyle },
{ header: "advice", key: 'advice', width: columnWidths.advice, style: headerStyle },
{ header: "value", key: 'value', width: columnWidths.value, style: headerStyle },
{ header: "result", key: 'result', width: columnWidths.result, style: headerStyle },
{ header: "close", key: 'close', width: columnWidths.close, style: headerStyle },
{ header: "checkup", key: 'checkup', width: columnWidths.checkup, style: headerStyle },
{ header: "condition", key: 'condition', width: columnWidths.condition, style: headerStyle },
{ header: "gender", key: 'gender', width: columnWidths.gender, style: headerStyle },
{ header: "abnormality", key: 'abnormality', width: columnWidths.abnormality, style: headerStyle },
{ header: "range", key: 'range', width: columnWidths.range, style: headerStyle },
{ header: "res", key: 'res', width: columnWidths.res, style: headerStyle },
{ header: "rule", key: 'rule', width: columnWidths.rule, style: headerStyle },
];
rowData.map(product =>{
sheet.addRow({
buId: product.buId,
bracket: product.bracket,
age: product. age,
risk: product. risk,
ageend: product.ageend,
advice: product. advice,
value: product. value,
result: product. result,
close: product. close,
checkup: product. checkup,
condition: product.condition,
gender: product. gender,
abnormality: product. abnormality,
range: product.range,
res: product. res,
rule: product.rule,
})
});
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 = 'download.xlsx';
anchor.click();
// anchor.URL.revokeObjectURL(url);
})
}
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="Rule Generation Form">
<RulegenerationForm values={values} touched={touched} errors={errors} handleBlur={handleBlur} handleChange={handleChange} setFieldValue={setFieldValue} handleSubmit={handleSubmit} />
</Popup>
</>
);
};
export default RulegenerationList;