Notes

/**
*
* CustomisedTable
* @author shreeja.shrimayee
*
*/
import React, { useEffect, useState } from 'react';
import { connect, useDispatch, useSelector } from 'react-redux';
import { compose } from 'redux';
import LinearLoader from '@highradius/g4_ui_components/lib/components/atoms/Loader';
import { pushNewSnackbar } from 'components/UniversalSnackbar/actions';
import { Typography, Backdrop } from '@material-ui/core';
import Info from '@material-ui/icons/Info';
import { createStructuredSelector } from 'reselect';
import { useInjectReducer } from 'utils/injectReducer';
import { useInjectSaga } from 'utils/injectSaga';
import ForecastRibbon from '@highradius/g4_ui_components/lib/components/molecules/ForecastRibbon';
import WorksheetAppbar from 'components/WorksheetAppbar';
import CustomDialog from '@highradius/g4_ui_components/lib/components/molecules/CustomDialog';
import { setSelectedDatas } from 'containers/TemplateLibrary/actions';
import {
fetchWorksheetDropDownStart,
updateTaskTableApiStart,
fetchTaskPreviewApiStart,
} from './actions';
import { formatRequestObject } from './helper';
import reducer from './reducer';
import saga from './saga';
import makeSelectCustomisedTable from './selectors';
import { workSheetStyles } from './styles';
import TaskWorkSheet from './TaskWorkSheet';
import { CustomisedTableTypes, variantObjectProps } from './types';
import SaveAsModal from './SaveAsModal';

export function CustomisedTable({ customisedTable }: CustomisedTableTypes) {
const classes = workSheetStyles();
const dispatch = useDispatch();
const selectedDatas = useSelector(
(state: any) => state.templateLibrary?.selectedDatas,
);
const projectName = selectedDatas?.selectedTemplateName;
const projectDescription = selectedDatas?.selectedDescription;
const filter = selectedDatas?.selectedFilter;

const projectId = selectedDatas?.selectedTemplateId;
const useOOBTemplate = selectedDatas?.useOOBTemplate;
const [data, setData] = useState<any>(undefined);
const [visible, setVisible] = useState<any>(false);
const [updateData, setUpdateData] = useState<any>(undefined);
const errorDateFormat =
customisedTable?.errorDateFormat === undefined
? {}
: customisedTable?.errorDateFormat;
const [disable, setDisable] = useState(true);
const [openModal, setOpenModal] = useState('');
const [saveBtnStatus, setSaveBtnStatus] = useState('');
const [clickedBtn, setClickedBtn] = useState('');
const [changeApprover, setChangeApprover] = useState(false);
useInjectReducer({ key: 'customisedTable', reducer });
useInjectSaga({ key: 'customisedTable', saga });

useEffect(() => {
dispatch(fetchTaskPreviewApiStart(projectId));
dispatch(fetchWorksheetDropDownStart());
}, [dispatch]);

useEffect(() => {
if (!customisedTable.tasks.success || !customisedTable.success) return;
setData(customisedTable.tasks.data);
setUpdateData(customisedTable.tasks.data);
if (filter === 'standard' && !useOOBTemplate) {
dispatch(
pushNewSnackbar({
message: 'Template Loaded Successfully',
options: { variant: 'success' },
}),
);
}
}, [customisedTable.tasks.success, customisedTable.success]);

const inconsistentDependencyCheck = () => {
console.log(updateData);
return true;
};
useEffect(() => {
const status = handleDisableBtn();
if (saveBtnStatus === 'Error Checked') {
if (clickedBtn === 'SaveAs') {
if (!status && !changeApprover) setOpenModal('saveAsModalOpen');
} else if (!status && !changeApprover) {
if (inconsistentDependencyCheck())
setOpenModal('inconsistentDependency');
else {
dispatch(
updateTaskTableApiStart({
taskRequests: {
taskRequestDTOs: updateData,
},
}),
);
}
}
}
}, [saveBtnStatus]);

useEffect(() => {
if (
data &&
!customisedTable.tasks.loading &&
customisedTable.tasks.success
) {
setVisible(true);
} else setVisible(false);
}, [data]);

const handleClose = () => setOpenModal('');
const getUpdatedData = (payload: any, status?: string) => {
if (status && status === 'inActive') {
setDisable(true);
} else {
setDisable(false);
}

const finalRequestBody: any = [];
const actualPayloadObjs = payload?.data?.dataTable;
// eslint-disable-next-line no-unused-vars
Object.entries(actualPayloadObjs)?.forEach(([key, val]) => {
const obj = formatRequestObject(val, projectId, [...updateData]);
if (obj !== null) finalRequestBody.push(obj);
});
setUpdateData(finalRequestBody);
};

const handleSave = () => {
dispatch(
pushNewSnackbar({
message: 'Checking all Mandatory Fields',
options: { variant: 'inProgress' },
}),
);
setTimeout(function () {
setClickedBtn('Save');
setSaveBtnStatus('Clicked');
}, 1000);
};

const handleSaveAs = () => {
dispatch(
pushNewSnackbar({
message: 'Checking all Mandatory Fields',
options: { variant: 'inProgress' },
}),
);
setTimeout(function () {
setClickedBtn('SaveAs');
setSaveBtnStatus('Clicked');
}, 1000);
};

const handleOOBSaveAs = () => {
if (!useOOBTemplate) {
dispatch(
pushNewSnackbar({
message: 'Checking all Mandatory Fields',
options: { variant: 'inProgress' },
}),
);
setTimeout(function () {
setClickedBtn('SaveAs');
setSaveBtnStatus('Clicked');
}, 1000);
} else {
let templateData = { ...selectedDatas };
templateData.useOOBTemplate = false;
dispatch(setSelectedDatas(templateData));
dispatch(
pushNewSnackbar({
message: `Preparing Template for use`,
options: { variant: 'inProgress' },
}),
);
dispatch(fetchTaskPreviewApiStart(projectId));
dispatch(fetchWorksheetDropDownStart());
}
};
const handleDisableBtn = () => {
// eslint-disable-next-line no-restricted-syntax
let flag = false;
Object.keys(errorDateFormat).every((item) => {
if (errorDateFormat[item] === true) {
flag = true;
return false;
}
return true;
});
return flag ? true : disable;
};
const customVariantObjs: Array<variantObjectProps> = [
{
name: 'Save',
iconName: 'save',
onClick: handleSave,
disable: handleDisableBtn(),
hide: false,
},
{
name: 'Save AS',
iconName: 'saveAs',
onClick: handleSaveAs,
disable: handleDisableBtn(),
hide: false,
},
];
const oobVariantObjs: Array<variantObjectProps> = [
{
name: useOOBTemplate ? 'Use Template' : 'Save AS',
iconName: 'saveAs',
onClick: handleOOBSaveAs,
disable: handleDisableBtn(),
hide: false,
},
];

const getDataNotFound = () => (
<div className={classes.systemMsg}>
<Info />
&nbsp;&nbsp;&nbsp;
<Typography variant="h6">
Something went wrong. Please contact your system Adminitrator.
</Typography>
</div>
);

if (customisedTable.loading || customisedTable.tasks.loading)
return <LinearLoader />;

const getSuccess = () => (
<>
<ForecastRibbon
variantObjects={
filter === 'custom' ? customVariantObjs : oobVariantObjs
}
visibleRows={updateData === null ? updateData?.length : data?.length}
totalRows={data?.length}
showMidSection
/>
<div className={classes.tabPanel}>
<TaskWorkSheet
data={data}
getUpdatedData={getUpdatedData}
updatedData={updateData}
saveBtnStatus={saveBtnStatus}
setSaveBtnStatus={setSaveBtnStatus}
changeApprover={changeApprover}
setChangeApprover={setChangeApprover}
/>
</div>
</>
);

return (
<div>
<WorksheetAppbar
label={projectName}
description={projectDescription}
projectId={projectId}
projectFilter={filter}
/>
{visible &&
customisedTable.success &&
!customisedTable.loading &&
getSuccess()}
{((!customisedTable.success && !customisedTable.loading) ||
(!customisedTable.tasks.success && !customisedTable.tasks.loading)) &&
getDataNotFound()}
{openModal === 'saveAsModalOpen' && (
<SaveAsModal
updateData={updateData}
openModal={openModal}
setOpenModal={setOpenModal}
/>
)}
<Backdrop
className={classes.backdrop}
open={customisedTable.active || saveBtnStatus === 'Clicked'}
>
<LinearLoader />
</Backdrop>
{openModal === 'inconsistentDependency' && (
<CustomDialog
id="inconsistentDependencyDialog"
open={openModal === 'inconsistentDependency'}
onClose={handleClose}
header={<Typography variant="h3">Inconsistent Dependency</Typography>}
/>
)}
</div>
);
}

const mapStateToProps = createStructuredSelector({
customisedTable: makeSelectCustomisedTable(),
});

const withConnect = connect(mapStateToProps, null);
export default compose(withConnect)(CustomisedTable);