Notes

/**
* @author pratyaksha.s
*/
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { FormattedMessage } from 'react-intl';
import moment from 'moment';
import DatePicker from 'components/DatePicker';
import {
Button,
Grid,
TextField,
Divider,
Tooltip,
InputLabel,
} from '@material-ui/core';
import { useInjectReducer } from 'utils/injectReducer';
import { useInjectSaga } from 'utils/injectSaga';
import LinearLoader from '@highradius/g4_ui_components/lib/components/atoms/Loader';
import DialogWrapper from 'components/Dialog';
import Select from '@highradius/g4_ui_components/lib/components/atoms/Select';
import * as SELECTORS from '../selectors';
import { useProjectDrawerStyles } from '../styles';
import messages from '../messages';
import * as ACTIONS from '../actions';
import reducer from '../reducer';
import saga from '../saga';

const initialData = {
projectName: '',
projectReleaseDate: moment().format('YYYY-MM-DD'),
projectPeriod: -1,
projectType: 'CLOSE',
projectTemplateToUse: -1,
projectCompletionStatus: '',
closingUnit: -1,
workDay0: '',
};

const errorObj = {
closingUnit: false,
projectName: false,
projectReleaseDate: false,
projectPeriod: false,
projectType: false,
projectTemplateToUse: false,
workDay0: false,
};

const ProjectDrawer = (props: any) => {
useInjectReducer({ key: 'projectContainer', reducer });
useInjectSaga({ key: 'projectContainer', saga });

const classes = useProjectDrawerStyles();

const [projectData, setProjectData] = React.useState<any>(initialData);

const fieldError = React.useRef<any>(errorObj).current;

const dispatch = useDispatch();

const dropDownProps = useSelector(SELECTORS.selectProjectDropdownState);
const closingUnitDropDownProps = useSelector(
SELECTORS.selectClosingUnitDropdownState,
);

React.useEffect(() => {
dispatch(ACTIONS.resetProjectDropdown());
dispatch(ACTIONS.fetchClosingUnitDropdownApiStart());
setProjectData(initialData);
}, []);

const checkDisabled = () =>
!(
projectData.projectName &&
projectData.projectReleaseDate &&
projectData.projectReleaseDate !== 'Invalid date' &&
projectData.projectPeriod >= 0 &&
projectData.projectPeriod !== '' &&
projectData.projectTemplateToUse >= 0 &&
projectData.projectTemplateToUse !== '' &&
projectData.workDay0 &&
projectData.workDay0 !== 'Invalid date' &&
projectData.projectType &&
projectData.closingUnit >= 0 &&
projectData.closingUnit !== ''
);

const handleFormChange = (e) => {
let { value } = e.target;

let name;
let number;
if (e?.target?.name?.length) {
[name, number] = e.target.name.split('.');
}

fieldError[name] = !value;
if (value < 0 || value === 'Invalid date') {
fieldError[name] = true;
}

if (number) {
value = [
...projectData[name].slice(0, number),
value,
...projectData[name].slice(number + 1),
];
}

switch (name) {
case 'closingUnit':
dispatch(ACTIONS.fetchAddProjectDialogDropdownApiStart(value));
setProjectData((data) => ({
...data,
projectTemplateToUse: '',
projectPeriod: '',
}));
break;
case 'projectReleaseDate':
setProjectData((data) => ({
...data,
workDay0: '',
}));
break;
case 'projectType':
setProjectData((data) => ({
...data,
projectTemplateToUse: '',
}));
break;
default:
break;
}

setProjectData((data) => ({
...data,
[name]: value,
}));
};

const handleSubmitProject = () => {
const formData = {
project: {
name: projectData?.projectName,
closingUnitId: projectData.closingUnit,
functionType: projectData?.projectType === 'CLOSE' ? 32 : 31,
projectTemplate: projectData?.projectTemplateToUse,
releaseDate: projectData?.projectReleaseDate,
projectPeriod: projectData?.projectPeriod,
workDayZero: projectData?.workDay0,
},
};
const params = {
activeSearch: {
details: {
searchState: false,
searchText: '',
},
},
formData,
};

dispatch(
ACTIONS.submitProjectApiStart({
...params,
refresh:
props?.context?.[props?.args?.roleActions]?.functions?.refreshGrid,
closeDialog: handleClose,
redirectToPreviewPage,
}),
);
console.log('ggs ola', props);
};

const redirectToPreviewPage = (data) => {
props?.uxManager?.dispatch(
props?.uxManager?.config?.actions?.changeCurrentPage({
pageSysName: 'project_details_preview',
type: 'forward',
}),
);
props?.uxManager?.dispatch(
props?.uxManager?.config?.actions?.changeLayoutContext({
id: 'currentRowDetails',
data: { ...data, currentRowPrimaryKey: 'projectId' },
}),
);
};

const handleClose = () => {
props.uxManager.dispatch(props.uxManager.config.actions.toggleDialog());
};

const templateToUseDropdown =
projectData.projectType === 'CLOSE'
? dropDownProps?.projectTemplate.close
: dropDownProps?.projectTemplate.reconcillation;

const renderProjectPeriodName = (val) =>
dropDownProps?.projectPeriod?.data?.find(
(p) => p.pkFiscalCalendarPeriodId === val,
)?.fiscalCalendarName || '';

const renderClosingUnitName = (val) =>
closingUnitDropDownProps?.data?.find((p) => p.pkClosingUnitId === val)
?.name || '';

const renderProjectTemplateToUseName = (val) =>
templateToUseDropdown?.find((p) => p.projectTemplateId === val)?.name || '';

const minDate = () => {
const d = new Date(projectData.projectReleaseDate);
d.setDate(d.getDate());
return d.toLocaleDateString('en-CA');
};

const isDisabled = () => {
if (projectData?.id) {
if (projectData.projectReleaseDate === '') {
return false;
}
const releaseDate = new Date(projectData.projectReleaseDate);
const today = new Date();
today.setHours(0, 0, 0, 0);
return !(today < releaseDate);
}
return false;
};

const datePickerTextField = (props, name) => (
<Tooltip
placement="bottom"
title={
fieldError[name] ? (
<FormattedMessage {...messages.commonMsgFieldReqd} />
) : (
''
)
}
>
<TextField
{...props}
value={moment(props.value).isValid() ? props.value : ''}
helperText=""
/>
</Tooltip>
);

const getProjectForm = () => (
<Grid container xs={12} justifyContent="space-between" wrap="nowrap">
<Grid
container
item
xs={6}
className={classes.formContainer}
direction="column"
wrap="nowrap"
>
{/* Closing Unit */}
<Grid container className={classes.fieldGridContainer} direction="row">
<Grid item xs={12} className={classes.innerGrid}>
<InputLabel required>
<FormattedMessage {...messages.closingUnitLabel} />
</InputLabel>
</Grid>
<Grid item xs={12} className={classes.innerGridField}>
<Select
fullWidth
data-testid="addNewProjectClosingUnit"
loading={closingUnitDropDownProps?.loading}
name="closingUnit"
value={projectData.closingUnit}
error={fieldError.closingUnit}
onChange={handleFormChange}
renderValue={renderClosingUnitName}
MenuProps={{ classes: { paper: classes.menuItem } }}
disabled={isDisabled()}
options={closingUnitDropDownProps?.data?.map((items) => ({
value: items.pkClosingUnitId,
displayValue: items.name,
}))}
/>
</Grid>
</Grid>
{/* Project Name */}
<Grid container direction="row" className={classes.fieldGridContainer}>
<Grid item xs={12} className={classes.innerGrid}>
<InputLabel required>
<FormattedMessage {...messages.projectNameLabel} />
</InputLabel>
</Grid>
<Grid item xs={12} className={classes.innerGridField}>
<Tooltip
title={
fieldError.projectName ? (
<FormattedMessage {...messages.commonMsgFieldReqd} />
) : (
''
)
}
>
<TextField
fullWidth
data-testid="addNewProjectProjectName"
error={fieldError.projectName}
name="projectName"
variant="outlined"
value={projectData.projectName}
onChange={handleFormChange}
/>
</Tooltip>
</Grid>
</Grid>
{/* Project Type */}
<Grid container className={classes.fieldGridContainer} direction="row">
<Grid item xs={12} className={classes.innerGrid}>
<InputLabel required>
<FormattedMessage {...messages.typeLabel} />
</InputLabel>
</Grid>
<Grid item xs={12} className={classes.innerGridField}>
<Tooltip
title={
fieldError.projectType ? (
<FormattedMessage {...messages.commonMsgFieldReqd} />
) : (
''
)
}
>
<Select
fullWidth
data-testid="addNewProjectProjectType"
name="projectType"
value={projectData.projectType}
onChange={handleFormChange}
error={fieldError.projectType}
MenuProps={{ classes: { paper: classes.menuItem } }}
options={[
{
value: 'CLOSE',
displayValue: 'Close',
},
{
value: 'RECON',
displayValue: 'Reconcillation',
},
]}
/>
</Tooltip>
</Grid>
</Grid>
{/* Project Template To Use */}
<Grid container direction="row" className={classes.fieldGridContainer}>
<Grid item xs={12} className={classes.innerGrid}>
<InputLabel required>
<FormattedMessage {...messages.templateLabel} />
</InputLabel>
</Grid>
<Grid item xs={12} className={classes.innerGridField}>
<Tooltip
placement="top"
title={
fieldError.projectTemplateToUse ? (
<FormattedMessage {...messages.commonMsgFieldReqd} />
) : (
''
)
}
>
<Select
loading={dropDownProps?.projectTemplate?.loading}
fullWidth
data-testid="addNewProjectProjectTemplateToUse"
name="projectTemplateToUse"
MenuProps={{ classes: { paper: classes.menuItem } }}
value={projectData.projectTemplateToUse}
error={fieldError.projectTemplateToUse}
onChange={handleFormChange}
renderValue={renderProjectTemplateToUseName}
options={templateToUseDropdown?.map((items) => ({
value: items.projectTemplateId,
displayValue: items.name,
}))}
/>
</Tooltip>
</Grid>
</Grid>
</Grid>
<Divider
orientation="vertical"
flexItem
className={classes.invisibleDivider}
/>
<Grid
container
item
xs={6}
direction="column"
className={classes.formContainer}
wrap="nowrap"
>
{/* Project Release Date */}
<Grid container className={classes.fieldGridContainer} direction="row">
<Grid item xs={12} className={classes.innerGrid}>
<InputLabel required>
<FormattedMessage {...messages.releaseDateLabel} />
</InputLabel>
</Grid>
<Grid item xs={12} className={classes.innerGridField}>
<DatePicker
value={
projectData.projectReleaseDate === ''
? null
: new Date(
moment(projectData.projectReleaseDate).format(
'MM-DD-YYYY',
),
)
}
name="projectReleaseDate"
datatestid="addNewProjectReleaseDate"
onChange={(e) => {
handleFormChange({
target: {
name: 'projectReleaseDate',
value: moment(e).format('YYYY-MM-DD'),
},
});
}}
renderDisplayDate={(cur: any) =>
cur ? moment(new Date(cur)).format('DD-MMM-YYYY') : ''
}
error={fieldError.projectReleaseDate}
TextFieldComponent={(props) =>
datePickerTextField(props, 'projectReleaseDate')
}
minDate={moment().format('MM-DD-YYYY')}
/>
</Grid>
</Grid>
{/* Work Day 0 */}
<Grid container direction="row" className={classes.fieldGridContainer}>
<Grid item xs={12} className={classes.innerGrid}>
<InputLabel required>
<FormattedMessage {...messages.workDayLabel} />
</InputLabel>
</Grid>
<Grid item xs={12} className={classes.innerGridField}>
<DatePicker
value={
projectData.workDay0 === ''
? null
: new Date(moment(projectData.workDay0).format('MM-DD-YYYY'))
}
name="workDay0"
datatestid="addNewProjectWorkDay0"
onChange={(e) => {
handleFormChange({
target: {
name: 'workDay0',
value: moment(e).format('YYYY-MM-DD'),
},
});
}}
minDate={minDate()}
renderDisplayDate={(cur: any) =>
cur ? moment(new Date(cur)).format('DD-MMM-YYYY') : ''
}
error={fieldError.workDay0}
TextFieldComponent={(props) =>
datePickerTextField(props, 'workDay0')
}
/>
</Grid>
</Grid>

{/* Project Period */}
<Grid container className={classes.fieldGridContainer} direction="row">
<Grid item xs={12} className={classes.innerGrid}>
<InputLabel required>
<FormattedMessage {...messages.periodLabel} />
</InputLabel>
</Grid>
<Grid item xs={12} className={classes.innerGridField}>
<Tooltip
placement="top"
title={
fieldError.projectPeriod ? (
<FormattedMessage {...messages.commonMsgFieldReqd} />
) : (
''
)
}
>
<Select
loading={dropDownProps?.projectPeriod?.loading}
fullWidth
data-testid="addNewProjectProjectPeriod"
name="projectPeriod"
value={projectData.projectPeriod}
error={fieldError.projectPeriod}
onChange={handleFormChange}
renderValue={renderProjectPeriodName}
MenuProps={{ classes: { paper: classes.menuItem } }}
options={dropDownProps?.projectPeriod?.data?.map((items) => ({
value: items.pkFiscalCalendarPeriodId,
displayValue: items.fiscalCalendarName,
}))}
/>
</Tooltip>
</Grid>
</Grid>
</Grid>
</Grid>
);

const addProjectDialogBody = () =>
dropDownProps?.taskDependency?.loading ? (
<div className={classes.linearLoader}>
<LinearLoader />
</div>
) : (
<div className={classes.root}>{getProjectForm()}</div>
);

const handleOpenDialog = () => (
<DialogWrapper
header={<FormattedMessage {...messages.CreateProject} />}
onClose={handleClose}
content={addProjectDialogBody()}
className={classes.projectDialog}
actions={[
<Button
data-testid="addNewProjectLeftCancel"
variant="outlined"
onClick={handleClose}
className={classes.leftButton}
>
<FormattedMessage {...messages.commonMsgCancel} />
</Button>,
<Button
data-testid="addNewProjectSave"
className={classes.rightButton}
variant="contained"
onClick={handleSubmitProject}
disabled={checkDisabled()}
>
<FormattedMessage {...messages.commonMsgPreview} />
</Button>,
]}
/>
);

return <>{handleOpenDialog()}</>;
};

export default ProjectDrawer;