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 PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
import DownloadIcon from '@mui/icons-material/Download';
import Popup from './Popup';
import RefferedByForm from './RefferedByForm';
import { useFormik } from "formik";
// import axios from 'axios';
//import { RefferedByValidationForm } from './Validationform';
import PropTypes from "prop-types";
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import ExcelJS from 'exceljs';
import jsPDF from 'jspdf';
import 'jspdf-autotable';
import * as Yup from 'yup';
const RefferedByValidationForm = Yup.object({
referredBy: Yup.string().required("Please enter Reffered By"),
description: Yup.string().required("Please Enter Description"),
remarks: Yup.string().required("Please Enter Remarks"),
});
const RefferedByList = () => {
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 = {
referredBy : "",
description: "",
remarks: "",
};
const {
values,
touched,
errors,
handleBlur,
handleChange,
setFieldValue,
handleSubmit,
resetForm
} = useFormik({
initialValues: initialValues,
validationSchema: RefferedByValidationForm,
// onSubmit: (values, action) => {
// console.log(values);
// action.resetForm();
// },
onSubmit: async (values, {resetForm}) => {
console.log(values);
try {
const response = await axiosClientPrivate.post('/referred-bys', values);
toast.success("Saved Successfully!",{
position:"top-center",
autoClose:500
});
// getting id(key,value) of last index
// const id = rowData[rowData.length-1].id;
// const obj = {
// id : 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);
}
},
});
// 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(`/referred-bys/${id}`);
// setRowData(prevData => prevData.filter(row => row.id !== 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 () => {
try {
const response = await axiosClientPrivate.get('/referred-bys?page=0&size=5', { signal: controller.signal });
const items = response.data.content;
// console.log(items);
if (items.length > 0) {
const headerMappings = {
referredBy: "Referred By",
description: "Description",
remarks: "Remarks",
lastModified: "Last Modified",
modifiedBy: "Modified By",
};
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.id;
return
}
});
setColDefs(columns);
}
setRowData(items);
} catch (err) {
console.error("Failed to fetch data: ", err);
setRowData([]);
}
};
getAllOhc();
return () => {
controller.abort();
};
}, [fetchTrigger]);
const handleEdit = async (id) => {
// alert(id);
try {
const response = await axiosClientPrivate.get(`/referred-bys/${id}`);
console.log(response.data);
setFieldValue("id",response.data.id);
setFieldValue("referredBy",response.data.referredBy);
setFieldValue("description",response.data.description);
setFieldValue("remarks",response.data.remarks);
setFieldValue("lastModified", response.data.lastModified);
setFieldValue("modifiedBy", response.data.modifiedBy);
setId(id);
setShowupdate(true);
setOpenPopup(true);
} catch (error) {
console.error('Error fetching item for edit:', error);
}
};
const handleUpdate = async (id)=> {
// alert(id);
console.log(values);
const update = values;
try{
// console.log(values);
await axiosClientPrivate.put(`/referred-bys/${id}`,update);
toast.success("Updated Successfully!",{
position:"top-center",
autoClose:500
});
resetForm();
// setRowData(rowData => [...rowData,values]);
setFetchTrigger(prev => prev+1);
}
catch(err){
console.log("after:- ",values);
console.log(err);
}
}
const exportpdf = async () => {
const doc = new jsPDF();
const header = [["Id","Referred By",'Description',"Remarks"]];
const tableData = rowData.map(item => [
item.id,
item.referredBy,
item.description,
item.remarks,
]);
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("RefferedByList.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: 20,
referredBy: 25,
description: 25,
remarks: 25,
};
sheet.columns = [
{ header: "Id", key: 'id', width: columnWidths.id, style: headerStyle },
{ header: "Referred By", key: 'referredBy', width: columnWidths.referredBy, style: headerStyle },
{ header: "Description", key: 'description', width: columnWidths.description, style: headerStyle },
{ header: "Remarks", key: 'remarks', width: columnWidths.remarks, style: headerStyle },
];
rowData.map(product =>{
sheet.addRow({
id: product.id,
referredBy: product.referredBy,
description: product.description,
remarks: product.remarks,
})
});
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 = 'RefferedByList.xlsx';
anchor.click();
})
}
return (
<>
} onClick={() => { setOpenPopup(true) }}>Add New
>
);
};
export default RefferedByList;