feat: pr changes
This commit is contained in:
+147
-150
@@ -7,11 +7,11 @@ import {
|
||||
Select,
|
||||
TextField,
|
||||
Tooltip,
|
||||
} from '@mui/material';
|
||||
import {MaterialReactTable} from 'material-react-table';
|
||||
import PreviousIcon from '@mui/icons-material/ArrowBack';
|
||||
import NextIcon from '@mui/icons-material/ArrowForward';
|
||||
import PropTypes from 'prop-types';
|
||||
} from "@mui/material";
|
||||
import { MaterialReactTable } from "material-react-table";
|
||||
import PreviousIcon from "@mui/icons-material/ArrowBack";
|
||||
import NextIcon from "@mui/icons-material/ArrowForward";
|
||||
import PropTypes from "prop-types";
|
||||
import React, {
|
||||
forwardRef,
|
||||
memo,
|
||||
@@ -20,17 +20,17 @@ import React, {
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react';
|
||||
import SearchIcon from '@mui/icons-material/Search';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Pagination from '@mui/material/Pagination';
|
||||
import PaginationItem from '@mui/material/PaginationItem';
|
||||
import { debounce } from 'lodash';
|
||||
import { ExpandMore } from '@mui/icons-material';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
} from "react";
|
||||
import SearchIcon from "@mui/icons-material/Search";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import Pagination from "@mui/material/Pagination";
|
||||
import PaginationItem from "@mui/material/PaginationItem";
|
||||
import { debounce } from "lodash";
|
||||
import { ExpandMore } from "@mui/icons-material";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
import { useStyles } from './styles/tableStyles';
|
||||
import ProtectedComponent from '../components/ProtectedComponent';
|
||||
import { useStyles } from "./styles/tableStyles";
|
||||
import ProtectedComponent from "../components/ProtectedComponent";
|
||||
|
||||
const Table = memo(
|
||||
forwardRef((props, ref) => {
|
||||
@@ -54,31 +54,13 @@ const Table = memo(
|
||||
navigateTo,
|
||||
} = props;
|
||||
const [data, setData] = useState([]);
|
||||
const [formattedColumns, setFormattedColumns] = useState(
|
||||
columns.map((column, i) => {
|
||||
if (i === 0) {
|
||||
return {
|
||||
...column,
|
||||
muiTableBodyCellProps: {
|
||||
sx: (theme) => ({
|
||||
opacity: 1,
|
||||
fontWeight: 600,
|
||||
fontSize: '16px',
|
||||
fontFamily: theme.fontFamily.semiBold,
|
||||
color: theme.palette.grey[10],
|
||||
}),
|
||||
},
|
||||
};
|
||||
}
|
||||
return column;
|
||||
})
|
||||
);
|
||||
const [formattedColumns, setFormattedColumns] = useState([]);
|
||||
const [isError, setIsError] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isRefetching, setIsRefetching] = useState(false);
|
||||
const [rowCount, setRowCount] = useState(0);
|
||||
const [columnFilters, setColumnFilters] = useState([]);
|
||||
const [globalFilter, setGlobalFilter] = useState('');
|
||||
const [globalFilter, setGlobalFilter] = useState("");
|
||||
const [sorting, setSorting] = useState([]);
|
||||
const tableRef = useRef();
|
||||
const [pagination, setPagination] = useState({
|
||||
@@ -111,26 +93,46 @@ const Table = memo(
|
||||
},
|
||||
}));
|
||||
useEffect(() => {
|
||||
// Process columns and add any action columns that have a render function
|
||||
const processedColumns = [...columns];
|
||||
|
||||
// Add action columns with render functions
|
||||
if (actions && actions.length > 0) {
|
||||
actions.forEach((action) => {
|
||||
if (action.render && action.field) {
|
||||
processedColumns.push({
|
||||
accessorKey: action.field,
|
||||
header: action.title || "",
|
||||
Cell: ({ row }) => action.render(row.original),
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
setFormattedColumns(
|
||||
columns.map((column, i) => {
|
||||
processedColumns.map((column, i) => {
|
||||
if (column.isBold) {
|
||||
return {
|
||||
...column,
|
||||
muiTableBodyCellProps: {
|
||||
sx: (theme) => ({
|
||||
opacity: 1,
|
||||
fontWeight: 600,
|
||||
fontSize: '16px',
|
||||
fontFamily: theme.fontFamily.semiBold,
|
||||
color: theme.palette.grey[10],
|
||||
}),
|
||||
},
|
||||
Cell: ({ cell }) => (
|
||||
<Typography
|
||||
sx={(theme) => ({
|
||||
opacity: 1,
|
||||
fontWeight: 600,
|
||||
fontSize: "16px",
|
||||
fontFamily: theme.fontFamily.semiBold,
|
||||
color: theme.palette.grey[10],
|
||||
})}
|
||||
>
|
||||
{cell.getValue()}
|
||||
</Typography>
|
||||
),
|
||||
};
|
||||
}
|
||||
return column;
|
||||
})
|
||||
);
|
||||
}, [columns]);
|
||||
}, [columns, actions]);
|
||||
|
||||
const fetchData = async () => {
|
||||
if (!data.length) {
|
||||
@@ -138,15 +140,15 @@ const Table = memo(
|
||||
} else {
|
||||
setIsRefetching(true);
|
||||
}
|
||||
let filterString = '';
|
||||
let filterString = "";
|
||||
columnFilters.forEach((filter) => {
|
||||
filterString += `${filter.id}=${filter.value}&`;
|
||||
});
|
||||
let sortingString = sorting
|
||||
.map(
|
||||
(sort) => `orderBy=${sort.id}&order=${sort.desc ? 'DESC' : 'ASC'}&`
|
||||
(sort) => `orderBy=${sort.id}&order=${sort.desc ? "DESC" : "ASC"}&`
|
||||
)
|
||||
.join('');
|
||||
.join("");
|
||||
try {
|
||||
const response = await getData({
|
||||
pagination,
|
||||
@@ -222,11 +224,6 @@ const Table = memo(
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="end">
|
||||
{/* <img
|
||||
src={SearchFieldIcon}
|
||||
alt="search icon"
|
||||
className={classes.searchIconImg}
|
||||
/> */}
|
||||
<SearchIcon />
|
||||
</InputAdornment>
|
||||
),
|
||||
@@ -256,29 +253,26 @@ const Table = memo(
|
||||
<CustomPagination table={props.table} />
|
||||
)}
|
||||
muiTableBodyCellProps={{
|
||||
// className: classes?.muiTableBodyCell,
|
||||
sx: (theme) => ({
|
||||
opacity: '1',
|
||||
// lineHeight: '2.5rem',
|
||||
opacity: "1",
|
||||
margin: theme.spacing(1),
|
||||
fontWeight: 500,
|
||||
fontSize: '16px',
|
||||
fontStretch: 'normal',
|
||||
fontStyle: 'normal',
|
||||
letterSpacing: 'normal',
|
||||
fontSize: "16px",
|
||||
fontStretch: "normal",
|
||||
fontStyle: "normal",
|
||||
letterSpacing: "normal",
|
||||
fontFamily: theme.fontFamily.medium,
|
||||
color: theme.palette.grey[22],
|
||||
// textAlign: 'center',
|
||||
textAlign: 'left',
|
||||
textAlign: "left",
|
||||
}),
|
||||
}}
|
||||
muiTopToolbarProps={{
|
||||
sx: (theme) => ({
|
||||
borderRadius: theme.shape.borderRadius,
|
||||
'& div': {
|
||||
'& div': {
|
||||
'& .MuiIconButton-sizeMedium': {
|
||||
display: 'none',
|
||||
"& div": {
|
||||
"& div": {
|
||||
"& .MuiIconButton-sizeMedium": {
|
||||
display: "none",
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -288,6 +282,16 @@ const Table = memo(
|
||||
renderTopToolbar={false}
|
||||
muiTableHeadCellProps={{
|
||||
className: classes?.muiTableHeadCell,
|
||||
sx: {
|
||||
// Fix for extra space in header cells
|
||||
padding: "16px 8px",
|
||||
whiteSpace: "nowrap",
|
||||
justifyContent: "flex-start",
|
||||
'& .MuiTableSortLabel-root': {
|
||||
width: '100%',
|
||||
justifyContent: 'flex-start',
|
||||
}
|
||||
}
|
||||
}}
|
||||
enableRowNumbers={enableRowNumbers}
|
||||
rowNumberMode={rowNumberMode}
|
||||
@@ -296,15 +300,15 @@ const Table = memo(
|
||||
sx: (theme) => ({
|
||||
borderRadius: theme.shape.borderRadius,
|
||||
backgroundColor: theme.palette.common.white,
|
||||
boxShadow: 'none',
|
||||
'& .MuiTableContainer-root': {
|
||||
border: '0px solid',
|
||||
borderRadius: '16px',
|
||||
boxShadow: "none",
|
||||
"& .MuiTableContainer-root": {
|
||||
border: "0px solid",
|
||||
borderRadius: "16px",
|
||||
},
|
||||
}),
|
||||
}}
|
||||
muiTableHeadCellFilterTextFieldProps={{
|
||||
variant: 'outlined',
|
||||
variant: "outlined",
|
||||
}}
|
||||
muiTableBodyProps={{
|
||||
sx: (theme) => ({
|
||||
@@ -328,12 +332,12 @@ const Table = memo(
|
||||
muiToolbarAlertBannerProps={
|
||||
isError
|
||||
? {
|
||||
color: 'error',
|
||||
children: 'Error loading data',
|
||||
color: "error",
|
||||
children: "Error loading data",
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
positionToolbarAlertBanner={'none'}
|
||||
positionToolbarAlertBanner={"none"}
|
||||
onColumnFiltersChange={setColumnFilters}
|
||||
onGlobalFilterChange={setGlobalFilter}
|
||||
onPaginationChange={setPagination}
|
||||
@@ -351,16 +355,16 @@ const Table = memo(
|
||||
className: classes?.tableHeadRow,
|
||||
}}
|
||||
displayColumnDefOptions={{
|
||||
'mrt-row-actions': {
|
||||
header: '',
|
||||
"mrt-row-actions": {
|
||||
header: "",
|
||||
},
|
||||
}}
|
||||
muiTableBodyRowProps={({ row }) => ({
|
||||
onClick: (event) => {
|
||||
if (
|
||||
Object.values(event.target)?.[1]
|
||||
?.className?.split(' ')
|
||||
.includes('MuiBackdrop-root')
|
||||
?.className?.split(" ")
|
||||
.includes("MuiBackdrop-root")
|
||||
) {
|
||||
return;
|
||||
}
|
||||
@@ -378,74 +382,67 @@ const Table = memo(
|
||||
muiSelectAllCheckboxProps={{
|
||||
className: classes?.tableCheckbox,
|
||||
}}
|
||||
renderRowActionMenuItems={({ row, closeMenu }) =>
|
||||
actions?.map((action, index) =>
|
||||
!(action?.renderAction?.(row) ?? true) ? null : (
|
||||
<ProtectedComponent
|
||||
key={index}
|
||||
permission={action.permissionName}
|
||||
>
|
||||
{(action?.icon ||
|
||||
action?.text ||
|
||||
(action?.textFn && action?.textFn(row))) && (
|
||||
<MenuItem
|
||||
className={classes.menuItem}
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
action.onClick(row);
|
||||
closeMenu();
|
||||
}}
|
||||
disabled={
|
||||
action?.isDisabledValue
|
||||
? action?.isDisabledValue ===
|
||||
row?.original?.[action?.rowKey]
|
||||
: false
|
||||
}
|
||||
>
|
||||
{action?.icon} {action?.text}{' '}
|
||||
{action.textFn && action.textFn(row)}
|
||||
</MenuItem>
|
||||
)}
|
||||
</ProtectedComponent>
|
||||
)
|
||||
) ?? []
|
||||
}
|
||||
// renderRowActionMenuItems={({ row, closeMenu }) =>
|
||||
// actions?.filter(action => !action.render)?.map((action, index) =>
|
||||
// !(action?.renderAction?.(row) ?? true) ? null : (
|
||||
// <MenuItem
|
||||
// key={index}
|
||||
// className={classes.menuItem}
|
||||
// onClick={(event) => {
|
||||
// event.stopPropagation();
|
||||
// action.onClick && action.onClick(row);
|
||||
// closeMenu();
|
||||
// }}
|
||||
// disabled={
|
||||
// action?.isDisabledValue
|
||||
// ? action?.isDisabledValue ===
|
||||
// row?.original?.[action?.rowKey]
|
||||
// : false
|
||||
// }
|
||||
// >
|
||||
// {action?.icon} {action?.text}{" "}
|
||||
// {action.textFn && action.textFn(row)}
|
||||
// </MenuItem>
|
||||
// )
|
||||
// ) ?? []
|
||||
// }
|
||||
renderTopToolbarCustomActions={({ table }) => {
|
||||
const handleActive = () => {
|
||||
const data = table
|
||||
.getSelectedRowModel()
|
||||
.flatRows.map((row) => row?.original);
|
||||
return handleBulkAction('ACTIVE', data);
|
||||
return handleBulkAction("ACTIVE", data);
|
||||
};
|
||||
const handleDelete = () => {
|
||||
const data = table
|
||||
.getSelectedRowModel()
|
||||
.flatRows.map((row) => row?.original);
|
||||
return handleBulkAction('DELETE', data, table);
|
||||
return handleBulkAction("DELETE", data, table);
|
||||
};
|
||||
const handleDownload = () => {
|
||||
const data = table
|
||||
.getSelectedRowModel()
|
||||
.flatRows.map((row) => row?.original);
|
||||
return handleBulkAction('DOWNLOAD', data);
|
||||
return handleBulkAction("DOWNLOAD", data);
|
||||
};
|
||||
return table.getIsSomeRowsSelected() ||
|
||||
table.getIsAllRowsSelected() ? (
|
||||
<Box
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<Tooltip title="Change Status">
|
||||
<Box
|
||||
component="img"
|
||||
src={inactive}
|
||||
// Replace with actual image path or icon component
|
||||
// src={inactive}
|
||||
style={{
|
||||
marginLeft: '5px',
|
||||
cursor: 'pointer',
|
||||
marginTop: '8px',
|
||||
marginLeft: "5px",
|
||||
cursor: "pointer",
|
||||
marginTop: "8px",
|
||||
}}
|
||||
onClick={handleActive}
|
||||
/>
|
||||
@@ -453,11 +450,11 @@ const Table = memo(
|
||||
<Tooltip title="Delete">
|
||||
<Box
|
||||
component="img"
|
||||
src={deleteIcon}
|
||||
// src={deleteIcon}
|
||||
style={{
|
||||
marginLeft: '24px',
|
||||
cursor: 'pointer',
|
||||
marginTop: '8px',
|
||||
marginLeft: "24px",
|
||||
cursor: "pointer",
|
||||
marginTop: "8px",
|
||||
}}
|
||||
onClick={handleDelete}
|
||||
/>
|
||||
@@ -466,12 +463,12 @@ const Table = memo(
|
||||
<Tooltip title="Download Report">
|
||||
<Box
|
||||
component="img"
|
||||
src={downloadActivity}
|
||||
// src={downloadActivity}
|
||||
style={{
|
||||
marginLeft: '24px',
|
||||
cursor: 'pointer',
|
||||
marginTop: '9px',
|
||||
height: '20px',
|
||||
marginLeft: "24px",
|
||||
cursor: "pointer",
|
||||
marginTop: "9px",
|
||||
height: "20px",
|
||||
}}
|
||||
onClick={handleDownload}
|
||||
/>
|
||||
@@ -483,7 +480,7 @@ const Table = memo(
|
||||
);
|
||||
}}
|
||||
muiTablePaginationProps={{
|
||||
labelRowsPerPage: 'Records Per Page',
|
||||
labelRowsPerPage: "Records Per Page",
|
||||
}}
|
||||
tableInstanceRef={tableRef}
|
||||
state={{
|
||||
@@ -548,9 +545,9 @@ const CustomPagination = ({ table }) => {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: { xs: 'column', md: 'row' },
|
||||
alignItems: 'center',
|
||||
display: "flex",
|
||||
flexDirection: { xs: "column", md: "row" },
|
||||
alignItems: "center",
|
||||
padding: 2,
|
||||
}}
|
||||
>
|
||||
@@ -562,7 +559,7 @@ const CustomPagination = ({ table }) => {
|
||||
boundaryCount={3}
|
||||
onChange={(event, page) => setPageIndex(page - 1)}
|
||||
renderItem={(item) => {
|
||||
if (item.type === 'previous') {
|
||||
if (item.type === "previous") {
|
||||
return (
|
||||
<PaginationItem
|
||||
component={() => (
|
||||
@@ -572,13 +569,13 @@ const CustomPagination = ({ table }) => {
|
||||
disabled={currentPage === 1}
|
||||
onClick={() => previousPage()}
|
||||
>
|
||||
<PreviousIcon style={{ marginRight: '6px' }} />
|
||||
<PreviousIcon style={{ marginRight: "6px" }} />
|
||||
Previous
|
||||
</Button>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
} else if (item.type === 'next') {
|
||||
} else if (item.type === "next") {
|
||||
return (
|
||||
<PaginationItem
|
||||
component={() => (
|
||||
@@ -589,7 +586,7 @@ const CustomPagination = ({ table }) => {
|
||||
onClick={() => nextPage()}
|
||||
>
|
||||
Next
|
||||
<NextIcon style={{ marginLeft: '6px' }} />
|
||||
<NextIcon style={{ marginLeft: "6px" }} />
|
||||
</Button>
|
||||
)}
|
||||
disabled={currentPage === totalPage}
|
||||
@@ -600,19 +597,19 @@ const CustomPagination = ({ table }) => {
|
||||
}
|
||||
}}
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
flex: '1',
|
||||
'& .MuiPagination-ul': {
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
cursor: 'pointer',
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
flex: "1",
|
||||
"& .MuiPagination-ul": {
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
cursor: "pointer",
|
||||
},
|
||||
'& .MuiPagination-ul > :first-child': {
|
||||
marginRight: 'auto',
|
||||
"& .MuiPagination-ul > :first-child": {
|
||||
marginRight: "auto",
|
||||
},
|
||||
' & .MuiPagination-ul > :last-child': {
|
||||
marginLeft: 'auto',
|
||||
" & .MuiPagination-ul > :last-child": {
|
||||
marginLeft: "auto",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
@@ -620,4 +617,4 @@ const CustomPagination = ({ table }) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default Table;
|
||||
export default Table;
|
||||
Reference in New Issue
Block a user