332 lines
11 KiB
Plaintext
332 lines
11 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 ManageCategoryForm from './ManageCategoryForm';
|
||
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';
|
||
|
||
const CategoryValidationForm = Yup.object({
|
||
categoryName: Yup.string().required("Please enter Category Name"),
|
||
status: Yup.string().required("Please Enter status"),
|
||
remarks: Yup.string().required("Please Enter Remarks"),
|
||
});
|
||
|
||
const ManageCategoryList = () => {
|
||
|
||
|
||
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 = {
|
||
categoryName:"",
|
||
status:"",
|
||
remarks:"",
|
||
|
||
};
|
||
|
||
|
||
const {
|
||
values,
|
||
touched,
|
||
errors,
|
||
handleBlur,
|
||
handleChange,
|
||
setFieldValue,
|
||
handleSubmit,
|
||
resetForm
|
||
} = useFormik({
|
||
initialValues: initialValues,
|
||
validationSchema: CategoryValidationForm,
|
||
onSubmit: async (values, {resetForm}) => {
|
||
try {
|
||
console.log('item category',values);
|
||
|
||
const response = await axiosClientPrivate.post('/categories', values);
|
||
toast.success("Saved Successfully!",{
|
||
position:"top-center",
|
||
autoClose : 500
|
||
});
|
||
// 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);
|
||
setOpenPopup(false);
|
||
console.log('Response:', response.data);
|
||
resetForm();
|
||
} catch (error) {
|
||
console.log(values);
|
||
console.error('Error:', error);
|
||
}
|
||
},
|
||
});
|
||
|
||
|
||
// const Type = [{label : "Active",id : 1}, {label : "Not Active",id : 0}];
|
||
|
||
|
||
const handleEdit = async (id) => {
|
||
// alert(id);
|
||
try {
|
||
const response = await axiosClientPrivate.get(`/categories/${id}`);
|
||
console.log('cagegory',response.data);
|
||
|
||
setFieldValue("id",response.data.id);
|
||
setFieldValue("categoryName",response.data.categoryName);
|
||
setFieldValue("status",Number(response.data.status));
|
||
setFieldValue("remarks",response.data.remarks);
|
||
|
||
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(`/categories/${id}`,update);
|
||
toast.success("Updated Successfully!",{
|
||
position:"top-center",
|
||
autoClose: 500,
|
||
});
|
||
resetForm();
|
||
setOpenPopup(false);
|
||
setShowupdate(false);
|
||
// 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(`/categories/${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('/categories', { signal: controller.signal });
|
||
const items = response.data.content;
|
||
// console.log(items);
|
||
const changeItems = items.map((item)=>{
|
||
return {
|
||
...item,
|
||
status : item.status == '1' ? "Active" : "No Active"
|
||
}
|
||
})
|
||
|
||
setRowData(changeItems);
|
||
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]);
|
||
|
||
|
||
|
||
|
||
const exportpdf = async () => {
|
||
|
||
const doc = new jsPDF();
|
||
const header = [['Id', 'Category Name',"Status","Remarks"]];
|
||
const tableData = rowData.map(item => [
|
||
item.id,
|
||
item.categoryName,
|
||
item.status,
|
||
item.remarks,
|
||
|
||
]);
|
||
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("ManageCategoryList.pdf");
|
||
};
|
||
const exportExcelfile = async () => {
|
||
const workbook = new ExcelJS.Workbook();
|
||
const sheet = workbook.addWorksheet('My Sheet');
|
||
|
||
const headerStyle = {
|
||
// font: { bold: true, size: 12 },
|
||
alignment: { horizontal: 'center' }
|
||
|
||
};
|
||
|
||
sheet.getRow(1).font = { bold: true };
|
||
|
||
const columnWidths = {
|
||
id: 10,
|
||
categoryName: 50,
|
||
status: 15,
|
||
remarks: 55,
|
||
};
|
||
|
||
sheet.columns = [
|
||
{ header: "Id", key: 'id', width: columnWidths.id, style: headerStyle },
|
||
{ header: "Category Name", key: 'categoryName', width: columnWidths.categoryName, style: headerStyle },
|
||
{ header: "Status", key: 'status', width: columnWidths.status, style: headerStyle },
|
||
{ header: "Remarks", key: 'remarks', width: columnWidths.remarks, style: headerStyle },
|
||
|
||
];
|
||
|
||
rowData.map(product =>{
|
||
sheet.addRow({
|
||
id:product.id,
|
||
categoryName:product.categoryName,
|
||
status:product.status,
|
||
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 = 'ManageCategoryList.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="Item Category">
|
||
|
||
<ManageCategoryForm values={values} touched={touched} errors={errors} handleBlur={handleBlur} handleChange={handleChange} setFieldValue={setFieldValue} handleSubmit={handleSubmit} />
|
||
|
||
</Popup>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default ManageCategoryList;
|