Notes

/**
*
* ReasonCodes
*
*/

import React, { memo, useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Helmet } from 'react-helmet';
import { FormattedMessage } from 'react-intl';
import { createStructuredSelector } from 'reselect';
import { compose } from 'redux';
import { makeStyles } from '@material-ui/core/styles';
import { useInjectSaga } from 'utils/injectSaga';
import { useInjectReducer } from 'utils/injectReducer';
import { defaultStyle } from './styles';
import makeSelectReasonCodes from './selectors';
import reducer from './reducer';
import saga from './saga';
import messages from './messages';
import Header from './../../components/ReasonCodeHeader';
import Table from '@highradius/g4_ui_components/lib/components/molecules/Table';
import Button from '@material-ui/core/Button';
import { pxToRem } from '@highradius/g4_ui_components/lib/components/theme/defaultTheme';
import AddIcon from '@material-ui/icons/Add';
import FilterListIcon from '@material-ui/icons/FilterList';
import { Typography, TextField, InputAdornment } from '@material-ui/core';
import { LayersOutlined } from '@material-ui/icons';
import NotificationsNoneOutlinedIcon from '@material-ui/icons/NotificationsNoneOutlined';
import SearchIcon from '@material-ui/icons/Search';

import CustomDialog from '@highradius/g4_ui_components/lib/components/molecules/CustomDialog';
import ViewWrapper from 'wrappers/ViewWrapper';
import { ArrowBackRounded, BorderAllRounded } from '@material-ui/icons';
import ReasoncodeAdd from '../../components/ReasoncodeAdd';
import { InputBase, IconButton } from '@material-ui/core';

const headers = ['name', 'description'];

const reasonCodeHeaders = [
{
key: 'code',
title: 'Reson Code',
},
{
key: 'edit',
title: '',
},
{
key: 'description',
title: 'Description',
},
{
key: 'bucket',
title: 'Bucket',
},
];

const reasonCodeData = [
{
code: 'code',
description: 'description',
bucket: 'bucket',
},
{
code: 'code1',
description: 'description1',
bucket: 'bucket1',
},
];

const useStyles = makeStyles((theme) => ({
root: {
backgroundColor: theme.palette.background.default,
width: '100%',
},
bodyHeader: {
display: 'flex',
alignItems: 'center',
marginBottom: pxToRem(15),
},
filterIcon: {
marginLeft: pxToRem(1300),
fontSize: pxToRem(30),
},
addButton: {
marginLeft: pxToRem(10),
},
bodyDiv: {
marginTop: pxToRem(20),
},
viewButton: {
display: 'none',
},
editButton: {
display: 'none',
visibility: 'hidden',
color: theme.palette.common.blue,
fontFamily: 'poppins',
},
tableStyle: {
// backgroundColor:'red',
'& tbody tr:hover': {
// '&:hover': {
backgroundColor: '#D0EFFC !important',
'& $editButton': {
display: 'flex',
visibility: 'visible',
},
// },
},
},
back: {
backgroundColor: theme.palette.grey[200],
width: pxToRem(40),
height: pxToRem(40),
borderWidth: pxToRem(1),
//borderStyle:'solid',
borderRadius: pxToRem(20),
},
backArrow: {
marginBottom: pxToRem(11),
marginLeft: pxToRem(9),
},
search: {
width: pxToRem(250),
height: pxToRem(40),
backgroundColor: theme.palette.background.main,
borderRadius: pxToRem(20),
paddingLeft: pxToRem(15),
},
notification: {
marginRight:pxToRem(7),
},
headerDiv: {
display: 'flex',
alignItems: 'center',
},
notdiv: {
marginLeft:pxToRem(5),
height: pxToRem(40),
width: pxToRem(40),
borderRadius: pxToRem(20),
backgroundColor: theme.palette.grey[200],
paddingLeft: pxToRem(6),
},
}));

export function ReasonCodes() {
const classes = useStyles();
useInjectReducer({ key: 'reasonCodes', reducer });
useInjectSaga({ key: 'reasonCodes', saga });

const [showDialog, setShowDialog] = useState(false);
const [data, setData] = useState(null);
const [mode, setMode] = useState('add');

const editColumn = (row) => {
console.log(row);
console.log(obj);
};

const getEditColumn = (row) => {
return (
<div className={classes.tableRow}>
<Button
className={classes.editButton}
variant="text"
onClick={(e) => openEditDialog(row)}
>
View Details <span style={{ marginLeft: pxToRem(10) }}>&#12297;</span>
</Button>
</div>
);
};

const getHeaderTitle = () => {
return (
<>
<div className={classes.back}>
<ArrowBackRounded className={classes.backArrow}></ArrowBackRounded>
</div>
<Typography className={classes.heading} variant="h1">
Reason Codes
</Typography>
</>
);
};

const getHeaderRightSection = () => (
<div className={classes.headerDiv}>
<div className={classes.search}>
<SearchIcon />
<InputBase placeholder="Search in closing units" />
</div>
<div className={classes.notdiv}>
{/* <IconButton edge="end" className={classes.notification}> */}
<NotificationsNoneOutlinedIcon className={classes.notification} />
{/* </IconButton> */}
</div>
</div>
);

const configObj = {
cellRenderers: {
edit: getEditColumn,
},
};

const openDialog = () => {
setShowDialog(true);
setData(null);
setMode('add');
};

const openEditDialog = (row) => {
console.log(row);
setShowDialog(true);
setData(row);
setMode('edit');
};

const closeDialog = () => {
console.log('close dialog');
setShowDialog(false);
};

return (
<ViewWrapper
headerProps={{
title: getHeaderTitle(),
headerRightSection: getHeaderRightSection(),
}}
>
<div className={classes.root}>
<div className={classes.bodyDiv}>
<div className={classes.bodyHeader}>
<Button
onClick={openDialog}
className={classes.addButton}
variant="contained"
>
<AddIcon style={{ marginLeft: pxToRem(2) }} />
<span style={{ marginRight: pxToRem(2) }}>Add New</span>
</Button>
<FilterListIcon
className={classes.filterIcon}
onClick={() => {
alert('icon');
}}
/>
<LayersOutlined style={{ marginLeft: pxToRem(30) }} />
<Typography>
<span style={{ color: 'gray' }}>Group By:</span>
</Typography>
</div>
<ReasoncodeAdd
show={showDialog}
data={data}
onclose={closeDialog}
mode={mode}
/>
<Table
headers={reasonCodeHeaders}
data={reasonCodeData}
config={configObj}
className={classes.tableStyle}
/>
</div>
</div>
</ViewWrapper>
);
}

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

const mapStateToProps = createStructuredSelector({
reasonCodes: makeSelectReasonCodes(),
});

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

const withConnect = connect(mapStateToProps, mapDispatchToProps);

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