Notes

export const closingUnitTableHeaders = [
{
key: 'name',
title: 'Closing Unit Name',
},
{
key: 'phone',
title: 'Templates Mapped',
},
{
key: 'usersmapped',
title: 'Users Mapped',
},
{
key: 'website',
title: 'Projects',
},
{
key: 'edit',
title: '',
},
];

export function ClosingUnit({ closingUnit }) {
useInjectReducer({ key: 'closingUnit', reducer });
useInjectSaga({ key: 'closingUnit', saga });

const dispatch = useDispatch();
const classes = useStyles();
const tableData = closingUnit.data;
const { slicedData, pageNumber, showMore, rowCapacity, totalCount } =
useSelector((state) => state?.closingUnit || {});

const [addEditClosingUnitDialogState, setAddEditClosingUnitDialogState] =
React.useState({
open: false,
data: null,
});
const [removeClosingUnitDialog, setRemoveClosingUnitDialog] = React.useState({
open: false,
data: null,
});

const [activateClosingUnitDialog, setActivateClosingUnitDialog] =
React.useState({
open: false,
data: null,
});

const closeAddDialog = () => {
setAddEditClosingUnitDialogState({
open: false,
data: null,
});
};

const closeRemoveDialog = () => {
setRemoveClosingUnitDialog({
open: false,
data: null,
});
};

const closeActivateDialog = () => {
setActivateClosingUnitDialog({
open: false,
data: null,
});
};

const openAddEditClosingUnitForm = () => {
setAddEditClosingUnitDialogState({
open: true,
data: null,
});
};

const openRemoveDialog = (row) => {
setRemoveClosingUnitDialog({
open: true,
data: row,
});
};

const openActivateDialog = (row) => {
setActivateClosingUnitDialog({
open: true,
data: row,
});
};

const handleCreateClosingUnit = (params) => {
dispatch(createClosingUnitApi(params));
closeAddDialog();
};

useEffect(() => {
console.log('inside useeffect');
dispatch(fetchDataApiStart());
console.log('inside useeffect dispatch called');
}, [dispatch]);

const editClosingUnit = (row) => {
setAddEditClosingUnitDialogState({
open: true,
data: row,
});
};

const handleRemoveClosingUnit = () => {
dispatch(removeClosingUnitApi(removeClosingUnitDialog.data.id));
closeRemoveDialog();
};

const handleActivateClosingUnit = () => {
dispatch(activateClosingUnitApi(activateClosingUnitDialog.data.id));
closeActivateDialog();
};

const getEditColumn = (row) => (
<div className={classes.editColumnStyles}>
<Button onClick={() => editClosingUnit(row, row.id)}>
<EditOutlined className={classes.iconStyles} />
</Button>
<MenuPopper
className={classes.menupop}
options={[
{
value: 'view',
displayValue: 'View User',
icon: <PersonOutlined className={classes.icon} />,
},
{
value: 'Remove',
displayValue: 'Remove',
icon: <Clear className={classes.icon} />,
handleSelect: () => openRemoveDialog(row),
},
{
value: 'delete',
displayValue: 'Delete',
icon: <DeleteOutlined className={classes.icon} />,
handleSelect: () => openRemoveDialog(row),
},
{
value: 'activate',
displayValue: 'Activate',
icon: <BeenhereOutlined className={classes.icon} />,
handleSelect: () => openActivateDialog(row),
},
]}
/>
</div>
);
const getUsersColumn = (row) => (
<div className={classes.avatarColumn}>
<Avatar />
<Avatar />
<Avatar />
</div>
);
// className={classes.editColumnStyles}
const getDescriptionColumn = (row) => <>{row.description || '-'}</>;

const configObj = {
cellRenderers: {
usersmapped: getUsersColumn,
edit: getEditColumn,
description: getDescriptionColumn,
},
cellStyles: { edit: classes.editColumn },
};

const handlePagination = (_e, next = true) => {
dispatch(handleClosingUnitPagination(next));
};

const getTableFooter = () => (
<Grid
container
justifyContent="flex-end"
alignItems="center"
className={classes.paginationRoot}
>
<Typography variant="caption">{`${(pageNumber - 1) * rowCapacity + 1} - ${
pageNumber * rowCapacity > totalCount
? totalCount
: pageNumber * rowCapacity
} of ${totalCount}`}</Typography>
<Fab
disabled={pageNumber === 1}
onClick={(e) => handlePagination(e, false)}
>
<NavigateBeforeRounded />
</Fab>
<Fab disabled={!showMore} onClick={handlePagination}>
<NavigateNextRounded />
</Fab>
</Grid>
);
const getClosingUnitTable = (rows) => {
console.log('rows=', rows.slicedData);
console.log('Data=', slicedData);
console.log('tableData =', tableData);
console.log('Closing Unit =', ClosingUnit.data);
return (
<div className={classes.tableWrapper}>
<Table
className={classes.tableContainer}
headers={closingUnitTableHeaders}
data={rows.slicedData}
config={configObj}
disableCheckbox
/>
</div>
);
};
return (
<>
<AppBar position="static" style={{ backgroundColor: '#FFFFFF' }}>
<Toolbar>
<Typography variant="h2" style={{ backgroundColor: '#FFFFFF' }}>
<b>Closing Unit</b>
</Typography>
<IconButton edge="end" color="inherit">
<Notifications style={{ fontSize: 30 }} />
</IconButton>
<IconButton edge="end" color="inherit">
<AccountCircle style={{ fontSize: 30 }} />
</IconButton>
</Toolbar>
</AppBar>
<Divider />
<Grid container className={classes.buttonGrid}>
<Button
startIcon={<Add />}
variant="contained"
onClick={openAddEditClosingUnitForm}
// title="Add Workspace"
>
Add Closing Unit
{/* <FormattedMessage {...messages.createClosingUnit} /> */}
</Button>
</Grid>
{closingUnit.success ? (
getClosingUnitTable(closingUnit.data)
) : (
<>failed</>
)}
{/* {} */}
{getTableFooter()}
<ClosingUnitForm
useDialog={{
dialogState: { open: addEditClosingUnitDialogState.open },
closeDialog: closeAddDialog,
}}
data={addEditClosingUnitDialogState.data}
onSubmit={handleCreateClosingUnit}
/>
<CustomDialog
useDialog={{
dialogState: { open: removeClosingUnitDialog.open },
closeDialog: closeRemoveDialog,
}}
onCloseClick={closeRemoveDialog}
header="Remove Closing Unit"
contentHead="Selected Closing Unit will be deleted. Are you sure you want to delete ?"
actions={[
<Button variant="text" onClick={closeRemoveDialog}>
Cancel
</Button>,
<Button variant="contained" onClick={handleRemoveClosingUnit}>
Remove
</Button>,
]}
/>
<CustomDialog
useDialog={{
dialogState: { open: activateClosingUnitDialog.open },
closeDialog: closeActivateDialog,
}}
onCloseClick={closeActivateDialog}
header="Activate Closing Unit"
contentHead="Selected Closing Unit will be activated. Are you sure you want to activate ?"
actions={[
<Button variant="text" onClick={closeActivateDialog}>
Cancel
</Button>,
<Button variant="contained" onClick={handleActivateClosingUnit}>
Activate
</Button>,
]}
/>
</>
);
}

ClosingUnit.propTypes = {
dispatch: PropTypes.func.isRequired,
};

const mapStateToProps = createStructuredSelector({
closingUnit: makeSelectClosingUnit(),
});

function mapDispatchToProps(dispatch) {
return {
dispatch,
};
}

const withConnect = connect(mapStateToProps, mapDispatchToProps);

export default compose(withConnect, memo)(ClosingUnit);