Notes

/* eslint-disable indent */
/**
* FiscalCalendar
* @author gourav.sharma, shouvik.ch
*/
import React, { memo } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Helmet } from 'react-helmet';
import { FormattedMessage } from 'react-intl';
import { useInjectSaga } from 'utils/injectSaga';
import { useInjectReducer } from 'utils/injectReducer';
import moment from 'moment';
import {
IconButton,
InputBase,
Typography,
Grid,
Fab,
Button,
} from '@material-ui/core';
import {
Search as SearchIcon,
LayersOutlined as LayersOutlinedIcon,
NotificationsNoneOutlined as NotificationsNoneOutlinedIcon,
FilterList as FilterListIcon,
ArrowBackRounded as ArrowBack,
Add as AddIcon,
} from '@material-ui/icons';
import ViewWrapper from 'wrappers/ViewWrapper';
import Table from '@highradius/g4_ui_components/lib/components/molecules/Table';
import Drawer from '@highradius/g4_ui_components/lib/components/molecules/Drawer';
import Dialog from '@highradius/g4_ui_components/lib/components/molecules/CustomDialog';
import Typotool from '@highradius/g4_ui_components/lib/components/atoms/Typotool';
import Footer from 'components/AddFiscalCalendarDrawer/Footer';
import TableFooter from 'components/TableFooter';
import { navigateToAccountSetup } from 'routing';
import AddFiscalCalendarDrawer from 'components/AddFiscalCalendarDrawer';
import BlankPage from 'components/NoDataComponent';
import { useStyles } from './styles';
import {
addDataAction,
deleteClosingUnitStart,
editDataAction,
reloadTable,
searchUserStart,
handlePagination,
resetData,
resetSearch,
searchFiscalCalendarApiStart,
} from './actions';
import messages from './messages';
import {
selectAddData,
selectSearchData,
selectTableData,
selectTableFooterData,
} from './selectors';
import saga from './saga';
import reducer from './reducer';

const ficalCalenderHeaderConfig = [
{ key: 'fiscalCalendarName', title: 'Calendars' },
{ key: 'closingUnitDetails', title: 'Closing Units Mapped' },
{ key: 'isDefault', title: 'Default' },
];

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

const classes = useStyles();

const [mode, setMode] = React.useState('Add');
const [anchorSearch, setAnchorSearch] = React.useState<any>(null);
const [name, setName] = React.useState('');
const closingUnitIds = React.useRef<any>([]);
const [openDrawer, setOpenDrawer] = React.useState(false);
const [closingUnitsToDelete, setClosingUnitsToDelete] = React.useState<any>(
[],
);
const [popUp, setPopUp] = React.useState(false);
const [addParams, setAddParams] = React.useState({
currentYear: '',
closingUnitIds: [],
isDefault: false,
fiscalCalendarName: '',
pkFiscalCalendar: '',
yearStartDate: '',
yearEndDate: '',
quarterOneEndDate: '',
quarterTwoEndDate: '',
quarterThreeEndDate: '',
quarterFourEndDate: '',
confirmation: 'no',
deleteCheck: false,
});

const rowRef = React.useRef<any>({
isCurrentYear: '',
closingUnitIds: [],
isDefault: false,
fiscalCalendarName: '',
pkFiscalCalendar: '',
yearStartDate: '',
yearEndDate: '',
quarterOneEndDate: '',
quarterTwoEndDate: '',
quarterThreeEndDate: '',
quarterFourEndDate: '',
});
const searchRef = React.useRef<any>(0);
const inputRef = React.useRef<any>();

const homePageData = useSelector(selectTableData);
const tableFooterData = useSelector(selectTableFooterData);
let searchData = useSelector(selectSearchData);
const addData = useSelector(selectAddData);

const dispatch = useDispatch();

React.useEffect(() => {
if (addData.data?.fiscalCalendar?.status === 'already mapped') {
setPopUp(true);
} else {
setPopUp(false);
}
}, [addData.data?.fiscalCalendar?.status]);
React.useEffect(() => {
dispatch(reloadTable());
return () => {
dispatch(resetData());
};
}, []);

const addManager = () => {
setMode('Add');
setName('');
setOpenDrawer(true);
};

const handleEditMode = (row: any) => {
autoFill(row);
addParams.isDefault = row.isDefault;
setMode('Edit');
setName(rowRef.current.fiscalCalendarName);
setOpenDrawer(true);
};

const drawerCloser = () => {
setAddParams({
closingUnitIds: [],
currentYear: '',
isDefault: false,
fiscalCalendarName: '',
pkFiscalCalendar: '',
yearStartDate: '',
yearEndDate: '',
quarterOneEndDate: '',
quarterTwoEndDate: '',
quarterThreeEndDate: '',
quarterFourEndDate: '',
confirmation: 'no',
deleteCheck: false,
});
closingUnitIds.current = [];
setName('');
setOpenDrawer(false);
};

const autoFill = (row) => {
rowRef.current = row;
};

const handleSearchChange = (event) => {
clearTimeout(searchRef.current);
if (event.target.value.length >= 3) {
searchRef.current = setTimeout(() => {
setAnchorSearch(anchorSearch ? null : inputRef.current);
dispatch(searchFiscalCalendarApiStart(event.target.value));
}, 3000);
} else if (event.target.value.length === 0) {
dispatch(reloadTable());
}
};

const resetSearchData = () => {
dispatch(resetSearch());
};

const handleClosingUnitsToDelete = (data) => {
let index = closingUnitIds.current.findIndex(
(value: any) => value === data,
);
if (index > -1) {
closingUnitIds.current.splice(index, 1);
}

setClosingUnitsToDelete((init) => {
index = init.findIndex((value: any) => value === data);
if (index === -1) {
return [...init, ...[data]];
}
return init;
});
};

const getCalendarColumn = (row: { fiscalCalendarName: any }) => (
<Grid
container
justifyContent="space-between"
alignItems="center"
wrap="nowrap"
>
<Typotool
variant="body1"
className={classes.tooltipPopper}
TooltipProps={{ classes: { popper: classes.tooltipPopper } }}
>
{row.fiscalCalendarName}
</Typotool>
<Button
className={classes.editButton}
color="primary"
onClick={() => handleEditMode(row)}
>
View Details &#12297;
</Button>
</Grid>
);

const getClosingUnitsCountColumn = (row: {
closingUnitDetails: string | any[] | null;
}) => (
<Typography variant="body1">
{row.closingUnitDetails !== null ? row.closingUnitDetails.length : 0}
</Typography>
);

const getIsDefaultColumn = (row) => (
<Typography variant="body1">{row.isDefault ? 'Yes' : 'No'}</Typography>
);

const configObj = {
cellRenderers: {
fiscalCalendarName: getCalendarColumn,
closingUnitDetails: getClosingUnitsCountColumn,
isDefault: getIsDefaultColumn,
},
cellStyles: {
fiscalCalendarName: classes.cellStyle,
closingUnitDetails: classes.cellStyle,
isDefault: classes.cellStyle,
},
};

const getHeaderRightSection = () => (
<div className={classes.headerDiv}>
<div className={classes.search}>
<SearchIcon color="action" />
<InputBase
placeholder="Search in Fiscal calendar"
onChange={handleSearchChange}
inputProps={{
inputRef,
}}
/>
</div>
<IconButton edge="end" className={classes.notification}>
<NotificationsNoneOutlinedIcon />
</IconButton>
</div>
);

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

const handleClosingUnitIds = (data: any) => {
if (!closingUnitIds?.current?.includes(data)) {
closingUnitIds.current.push(data);
}
};

const handleAdd = () => {
addParams.closingUnitIds = closingUnitIds.current;
if (addParams.isDefault && addParams.closingUnitIds.length > 0) {
addParams.closingUnitIds = [];
}
dispatch(addDataAction(addParams));
if (!addParams.isDefault && addParams.closingUnitIds.length === 0) {
setOpenDrawer(false);
setAddParams({
closingUnitIds: [],
currentYear: '',
isDefault: false,
fiscalCalendarName: '',
pkFiscalCalendar: '',
yearStartDate: '',
yearEndDate: '',
quarterOneEndDate: '',
quarterTwoEndDate: '',
quarterThreeEndDate: '',
quarterFourEndDate: '',
confirmation: 'no',
deleteCheck: false,
});
}
if (!addParams.isDefault) {
setOpenDrawer(false);
}
closingUnitIds.current = [];
};

const editHandler = () => {
addParams.pkFiscalCalendar = rowRef.current.pkFiscalCalendar;

if (addParams.fiscalCalendarName === '') {
addParams.fiscalCalendarName = rowRef.current.fiscalCalendarName;
}

if (addParams.currentYear === '') {
addParams.currentYear = rowRef.current.isCurrentYear;
}
if (addParams.yearStartDate === '') {
addParams.yearStartDate = rowRef.current.yearStartDate;
}
if (addParams.yearEndDate === '') {
addParams.yearEndDate = rowRef.current.yearEndDate;
}
if (addParams.quarterOneEndDate === '') {
addParams.quarterOneEndDate = rowRef.current.quarterOneEndDate;
}
if (addParams.quarterTwoEndDate === '') {
addParams.quarterTwoEndDate = rowRef.current.quarterTwoEndDate;
}
if (addParams.quarterThreeEndDate === '') {
addParams.quarterThreeEndDate = rowRef.current.quarterThreeEndDate;
}
if (addParams.quarterFourEndDate === '') {
addParams.quarterFourEndDate = rowRef.current.quarterFourEndDate;
}
addParams.closingUnitIds = closingUnitIds.current;
if (addParams.isDefault && addParams.closingUnitIds.length > 0) {
addParams.closingUnitIds = [];
}
if (closingUnitsToDelete.length > 0) {
addParams.deleteCheck = true;
}
dispatch(editDataAction(addParams));
closingUnitIds.current = [];
handleMappingDelete();
if (!addParams.isDefault && addParams.closingUnitIds.length === 0) {
setOpenDrawer(false);
setAddParams({
closingUnitIds: [],
currentYear: '',
isDefault: false,
fiscalCalendarName: '',
pkFiscalCalendar: '',
yearStartDate: '',
yearEndDate: '',
quarterOneEndDate: '',
quarterTwoEndDate: '',
quarterThreeEndDate: '',
quarterFourEndDate: '',
confirmation: 'no',
deleteCheck: false,
});
}
if (!addParams.isDefault) {
setOpenDrawer(false);
}
};

const finalAddCall = (data: any) => {
addParams.pkFiscalCalendar = addData?.data.fiscalCalendar.pkFiscalCalendar;
addParams.confirmation = data === 'approve' ? 'yes' : 'no';
addParams.isDefault =
data === 'approve' && addParams.closingUnitIds.length === 0;
addParams.closingUnitIds =
data === 'approve' ? addParams.closingUnitIds : [];
setOpenDrawer(false);
dispatch(editDataAction(addParams));
setAddParams({
closingUnitIds: [],
currentYear: '',
isDefault: false,
fiscalCalendarName: '',
pkFiscalCalendar: '',
yearStartDate: '',
yearEndDate: '',
quarterOneEndDate: '',
quarterTwoEndDate: '',
quarterThreeEndDate: '',
quarterFourEndDate: '',
confirmation: 'no',
deleteCheck: false,
});
closingUnitIds.current = [];
};

const handleSearch = (searchTerm: any) => {
if (searchTerm.query === '') {
searchData = [];
} else dispatch(searchUserStart(searchTerm));
};

const handleMappingDelete = () => {
const data = {
closingUnitIds: closingUnitsToDelete,
fiscalCalendar: rowRef.current.pkFiscalCalendar,
};
dispatch(deleteClosingUnitStart(data));
setClosingUnitsToDelete([]);
};

const monthFinder = (month: string) => {
const monthNumber = moment.months().findIndex((value) => value === month);
return (monthNumber + 1).toString();
};

const addParamsHandler = (target) => {
setAddParams((localState) => {
const data = { ...localState };
if (target.type === 'text') {
data.fiscalCalendarName = target.value;
} else if (target.type === 'checkbox') {
if (mode === 'Add') {
if (target.value === 'true') {
data.isDefault = false;
} else {
data.isDefault = true;
}
} else if (mode === 'Edit') {
if (rowRef.current.isDefault) {
if (target.value === 'true') {
data.isDefault = true;
} else {
data.isDefault = false;
}
} else if (target.value === 'true') {
data.isDefault = false;
} else {
data.isDefault = true;
}
}
} else if (target.name === '0') {
data.yearStartDate = monthFinder(target.value);
data.yearEndDate = monthFinder(target.values.endMonth);
data.quarterOneEndDate = monthFinder(target.values.quarter1);
data.quarterTwoEndDate = monthFinder(target.values.quarter2);
data.quarterThreeEndDate = monthFinder(target.values.quarter3);
data.quarterFourEndDate = monthFinder(target.values.quarter4);
} else if (target.innerHTML === 'Current Year') {
data.currentYear = target.innerHTML;
} else if (target.innerHTML === 'Current Year + 1') {
data.currentYear = target.innerHTML;
} else if (target.name === '1') {
data.yearEndDate = monthFinder(target.value);
} else if (target.name === '2') {
addParams.quarterOneEndDate = monthFinder(target.value);
} else if (target.name === '3') {
data.quarterTwoEndDate = monthFinder(target.value);
} else if (target.name === '4') {
data.quarterThreeEndDate = monthFinder(target.value);
} else if (target.name === '5') {
data.quarterFourEndDate = monthFinder(target.value);
}

return data;
});
};

const nameSetter = (data) => {
setName(data);
};

return (
<ViewWrapper
headerProps={{
headerRightSection: getHeaderRightSection(),
title: getHeaderTitle(),
}}
>
<div className={classes.root}>
<Helmet>
<title>Autonomous Software</title>
</Helmet>
{!homePageData?.isSearch &&
!homePageData?.loading &&
homePageData?.success &&
homePageData?.data.length === 0 ? (
<BlankPage
onClick={addManager}
startIcon={<AddIcon />}
start={<FormattedMessage {...messages.start} />}
message1={<FormattedMessage {...messages.message1} />}
message2={<FormattedMessage {...messages.message2} />}
create={<FormattedMessage {...messages.create} />}
isButton={false}
button={<div />}
/>
) : (
<>
<div className={classes.toolbar}>
<Button
onClick={addManager}
variant="contained"
startIcon={<AddIcon />}
>
Add New
</Button>
<div className={classes.topBtnContainer}>
<span className={classes.topSpanForIcons}>
<FilterListIcon className={classes.icons} />
<Typography variant="body1">
<FormattedMessage {...messages.filter} />
</Typography>
</span>
<span className={classes.topSpan2ForIcons}>
<LayersOutlinedIcon className={classes.icons} />
<Typography variant="body2">
<FormattedMessage {...messages.groupBy} />
</Typography>
</span>
</div>
</div>
<div className={classes.tableWrapper}>
<Table
headers={ficalCalenderHeaderConfig}
data={homePageData.slicedData}
config={configObj}
className={classes.tableStyles}
loading={homePageData.loading}
/>
</div>
<TableFooter
{...tableFooterData}
handlePagination={(_e, next) => dispatch(handlePagination(next))}
/>
</>
)}
<Drawer
open={openDrawer}
classes={{ paper: classes.addPage }}
header={
mode === 'Add' ? (
<FormattedMessage {...messages.addFiscalCalendar} />
) : (
<FormattedMessage {...messages.editFiscalCalendar} />
)
}
onClose={drawerCloser}
content={
<AddFiscalCalendarDrawer
autoFillData={rowRef.current}
resetSearch={resetSearchData}
nameSetter={nameSetter}
searchdata={searchData}
mode={mode}
addParamsHandler={addParamsHandler}
handleSearch={handleSearch}
handleClosingUnitIds={handleClosingUnitIds}
handleClosingUnitsToDelete={handleClosingUnitsToDelete}
/>
}
footer={
<Footer
type={mode}
onClose={drawerCloser}
handleAdd={handleAdd}
handleEdit={editHandler}
addParams={addParams}
name={name}
/>
}
/>
<Dialog
contentHead="Closing units are already mapped do you want to override?"
open={popUp}
onClose={() => {
setPopUp(false);
}}
actions={[
<Button
onClick={() => {
finalAddCall('approve');
}}
variant="contained"
>
Approve
</Button>,
<Button
onClick={() => {
setOpenDrawer(false);
finalAddCall('discard');
setPopUp(false);
}}
variant="contained"
>
Discard
</Button>,
]}
/>
</div>
</ViewWrapper>
);
};

export default memo(FiscalCalendar);