Notes

/**
* @author: suyash.roy
*/

import React from 'react';
import { FormattedMessage } from 'react-intl';
import { useDispatch, useSelector } from 'react-redux';
import { Helmet } from 'react-helmet';
import { useInjectSaga } from 'utils/injectSaga';
import { useInjectReducer } from 'utils/injectReducer';
import { Typography, InputBase, Button, Grid, Fab } from '@material-ui/core';
import {
LayersOutlined as LayersOutlinedIcon,
ArrowBackRounded as ArrowBackRoundedIcon,
Search as SearchIcon,
Add as AddIcon,
FilterList as FilterListIcon,
NotificationsNoneOutlined as NotificationsNoneOutlinedIcon,
} from '@material-ui/icons';
import Table from '@highradius/g4_ui_components/lib/components/molecules/Table';
import AddHolidayCalendarDrawer from 'components/AddHolidayCalendarDrawer';
import Typotool from '@highradius/g4_ui_components/lib/components/atoms/Typotool';
import ViewWrapper from 'wrappers/ViewWrapper';
import TableFooter from 'components/TableFooter';
import { navigateToAccountSetup } from 'routing';
import saga from './saga';
import reducer from './reducer';
import {
selectHolidayCalendarDomain,
selectTableFooterData,
} from './selectors';
import {
getHolidayDrawerStart,
addHolidayCalendar,
editHolidayCalendar,
addHoliday,
editHoliday,
deleteHoliday,
reloadTable,
handlePagination,
resetReducer,
searchStart,
deleteClosingUnit,
searchSuccess,
addClosingUnit,
} from './actions';
import messages from './messages';
import { useStyles } from './styles';

const holidayCalendarHeaders = [
{
key: 'name',
title: 'Calendar Name',
},
{
key: 'closingUnitDetails',
title: 'Closing Units Mapped',
},
{
key: 'year',
title: 'Year',
},
];

const HolidayCalendar = () => {
useInjectReducer({ key: 'holidayCalendar', reducer });
useInjectSaga({ key: 'holidayCalendar', saga });

const classes = useStyles();

const [data, setData] = React.useState({
name: '',
description: '',
year: '',
pkHolidayCalendarId: '',
});
const [addOrEdit, setAddOrEdit] = React.useState('');
const [drawerData, setDrawerData] = React.useState({
holidayDate: '',
holidayName: '',
holidayCalendar: '',
isWeekend: '',
pkHolidayId: '',
});
const [drawerEdit, setDrawerEdit] = React.useState('Add');

const holidayCalendar = useSelector(selectHolidayCalendarDomain);
const tableFooterData = useSelector(selectTableFooterData);

const dispatch = useDispatch();

React.useEffect(() => {
dispatch(reloadTable());
return () => {
dispatch(resetReducer());
};
}, [dispatch]);

const handleChange = (event) => {
if (addOrEdit === 'Add') {
setData((prev) => ({
...prev,
[event.target.name]: event.target.value,
}));
} else {
setData((prev) => ({
...prev,
[event.target.name]: event.target.value,
}));
}
};

const handleDrawerChange = (event) => {
setDrawerData((prev) => ({
...prev,
[event.target.name]: event.target.value,
holidayCalendar: data.pkHolidayCalendarId,
}));
};

const handleDrawerChangeEdit = (event) => {
setDrawerData((prev) => ({
...prev,
[event.target.name]: event.target.value,
}));
};
const removeClosingUnit = (removeUnit) => {
if (removeUnit.holidayCalendar !== '') {
dispatch(deleteClosingUnit(removeUnit));
}
};

const addClosingUnitApi = (newUnits) => {
if (newUnits.holidayCalendar !== '') {
dispatch(addClosingUnit(newUnits));
}
};

const submitData = () => {
if (data.name !== '' && data.year !== '') {
if (addOrEdit === 'Add') {
dispatch(addHolidayCalendar(data));
if (drawerData.holidayName !== '' && drawerEdit === 'Add') {
dispatch(addHoliday(drawerData));
setDrawerData({
holidayDate: '',
holidayName: '',
holidayCalendar: '',
isWeekend: '',
pkHolidayId: '',
});
}
if (drawerEdit === 'Edit') {
dispatch(editHoliday(drawerData));
setDrawerEdit('Add');
setDrawerData({
holidayDate: '',
holidayName: '',
holidayCalendar: '',
isWeekend: '',
pkHolidayId: '',
});
}
openDialog();
}
}
if (data.name !== '') {
if (addOrEdit === 'Edit') {
setData((prev) => ({
...prev,
pkHolidayCalendarId: data.pkHolidayCalendarId,
}));
dispatch(editHolidayCalendar(data));
if (drawerData.holidayName !== '' && drawerEdit === 'Add') {
dispatch(addHoliday(drawerData));
setDrawerData({
holidayDate: '',
holidayName: '',
holidayCalendar: '',
isWeekend: '',
pkHolidayId: '',
});
}
if (drawerEdit === 'Edit') {
dispatch(editHoliday(drawerData));
setDrawerEdit('Add');
setDrawerData({
holidayDate: '',
holidayName: '',
holidayCalendar: '',
isWeekend: '',
pkHolidayId: '',
});
}
openDialog();
}
}
};

const submitSearch = (searchTerm) => {
dispatch(searchStart(searchTerm));
};

const getEditColumn = (row) => (
<Grid
container
justifyContent="space-between"
alignItems="center"
wrap="nowrap"
>
<Typotool
variant="body1"
TooltipProps={{ classes: { popper: classes.tooltipPopper } }}
>
{row.name}
</Typotool>
<Button
className={classes.editButton}
color="primary"
onClick={() => openEditDialog(row)}
>
<FormattedMessage {...messages.view} /> <span>&#12297;</span>
</Button>
</Grid>
);

const getClosingUnitColumn = (row) => (
<Typotool
variant="body1"
TooltipProps={{ classes: { popper: classes.tooltipPopper } }}
>
{row?.closingUnitDetails?.length ? row.closingUnitDetails.length : 0}
</Typotool>
);

const getYearColumn = (row) => (
<Typotool
variant="body1"
TooltipProps={{ classes: { popper: classes.tooltipPopper } }}
>
{row.year}
</Typotool>
);

const getHeaderTitle = () => (
<>
<Fab
size="small"
className={classes.back}
onClick={navigateToAccountSetup}
>
<ArrowBackRoundedIcon />
</Fab>
<Typography variant="h1">
<FormattedMessage {...messages.holiday} />
</Typography>
</>
);

const getHeaderRightSection = () => (
<div className={classes.headerDiv}>
<div className={classes.search}>
<SearchIcon />
<InputBase placeholder="Search in calendars" />
</div>
<Fab size="small" className={classes.notdiv}>
<NotificationsNoneOutlinedIcon />
</Fab>
</div>
);

const configObj = {
cellRenderers: {
name: getEditColumn,
closingUnitDetails: getClosingUnitColumn,
year: getYearColumn,
},
cellStyles: {
name: classes.colStyle,
closingUnitsMapped: classes.colStyle,
year: classes.colStyle,
},
};

const openDialog = () => {
setData({
name: '',
description: '',
year: '',
pkHolidayCalendarId: '',
});
setAddOrEdit('Add');
};

const fetchHolidayDrawer = (holidayCalendar) => {
dispatch(getHolidayDrawerStart(holidayCalendar));
};

const openEditDialog = (row) => {
setData(row);
setAddOrEdit('Edit');
fetchHolidayDrawer(row.pkHolidayCalendarId);
setData({
name: row.name,
description: row.description,
pkHolidayCalendarId: row.pkHolidayCalendarId,
year: row.year,
});
};

const removeHoliday = (row) => {
dispatch(deleteHoliday(row));
};

const closeDialog = () => {
setDrawerData({
holidayDate: '',
holidayName: '',
holidayCalendar: '',
isWeekend: '',
pkHolidayId: '',
});
setDrawerEdit('Add');
setAddOrEdit('');
dispatch(searchSuccess([]));
};

return (
<ViewWrapper
headerProps={{
title: getHeaderTitle(),
headerRightSection: getHeaderRightSection(),
}}
>
<div className={classes.root}>
<Helmet>
<title>Holiday Calendar</title>
</Helmet>
<div className={classes.bodyHeader}>
<Button
onClick={openDialog}
variant="contained"
startIcon={<AddIcon />}
>
<FormattedMessage {...messages.add} />
</Button>
<FilterListIcon className={classes.filterIcon} />
<Typography variant="subtitle1">
<FormattedMessage {...messages.filter} />
</Typography>
<LayersOutlinedIcon className={classes.layersOutlineIcon} />
<Typography variant="subtitle1">
<FormattedMessage {...messages.groupBy} />
</Typography>
</div>
<div className={classes.tableWrapper}>
<Table
headers={holidayCalendarHeaders}
loading={holidayCalendar.loading}
error={!holidayCalendar.success}
data={holidayCalendar.slicedData}
config={configObj}
className={classes.tableStyle}
/>
</div>
<TableFooter
{...tableFooterData}
handlePagination={(_e, next) => dispatch(handlePagination(next))}
/>
<AddHolidayCalendarDrawer
holidayCalendar={holidayCalendar}
setDrawerData={setDrawerData}
closingUnit={holidayCalendar.closingUnit}
submitSearch={submitSearch}
drawerEdit={drawerEdit}
setDrawerEdit={setDrawerEdit}
onClose={closeDialog}
drawerData={drawerData}
data={data}
type={addOrEdit}
handleChange={handleChange}
handleDrawerChange={handleDrawerChange}
removeHoliday={removeHoliday}
handleDrawerChangeEdit={handleDrawerChangeEdit}
onSubmit={submitData}
closingUnitLoading={holidayCalendar.closingUnitLoading}
removeClosingUnit={removeClosingUnit}
holidayTable={
holidayCalendar.holidaySuccess && addOrEdit === 'Edit'
? holidayCalendar.holiday
: []
}
holidayLoading={holidayCalendar.holidayLoading}
addClosingUnitApi={addClosingUnitApi}
/>
</div>
</ViewWrapper>
);
};
export default HolidayCalendar;