Notes

/**
* @author arpit.pandey
*/
import React, { useEffect, useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { FormattedMessage } from 'react-intl';
import {
Button,
Grid,
TextField,
Divider,
InputLabel,
Fab,
Tooltip,
Typography,
} from '@material-ui/core';
import { Close as CloseIcon } from '@material-ui/icons';
import Select from '@highradius/g4_ui_components/lib/components/atoms/Select';
import DialogWrapper from 'components/Dialog';
import { useInjectReducer } from 'utils/injectReducer';
import { useInjectSaga } from 'utils/injectSaga';
import LinearLoader from '@highradius/g4_ui_components/lib/components/atoms/Loader';
import { selectProjectDropdownState, selectUsersTabState } 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: '',
projectPeriod: -1,
projectType: 'CLOSE',
projectTemplateToUse: -1,
workDay0: '',
processor: [-1],
changeProcessorTo: [-1],
template: [-1],
changeTemplateTo: [-1],
};

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

const ProjectDrawer = ({ context, uxManager }: any) => {
useInjectReducer({ key: 'closingUnitContainer', reducer });
useInjectSaga({ key: 'closingUnitContainer', saga });
const classes = useProjectDrawerStyles();

const [projectData, setProjectData] = useState<any>(initialData);
const [formatChecker, setFormatChecker] = useState(0);
const [changePrimaryAssigneesLength, setChangePrimaryAssigneesLength] =
useState(1);
const [
changeTaskWorkbookTemplatesLength,
setChangeTaskWorkbookTemplatesLength,
] = React.useState(1);

// const fieldError = React.useRef<any>({ projectName: false }).current;
const [fieldError, setFieldError] = useState(errorObj);

const dispatch = useDispatch();

const dropDownProps = useSelector(selectProjectDropdownState);
const { data: changeProcessorToDropdown } = useSelector(selectUsersTabState);

useEffect(() => {
dispatch(
ACTIONS.fetchAddProjectDialogDropdownApiStart(
context?.currentRowDetails?.pkClosingUnitId,
),
);
setProjectData(initialData);
setChangePrimaryAssigneesLength(1);
setChangeTaskWorkbookTemplatesLength(1);
}, [context?.currentRowDetails?.pkClosingUnitId, dispatch]);

const validateFields = ({ name, value }) => {
let errorFlag = !value;
if (value < 0) {
errorFlag = true;
}
setFieldError((prev) => ({
...prev,
[name]: errorFlag,
}));
};

const checkDisabled = () =>
!(
projectData.projectName &&
projectData.projectReleaseDate &&
projectData.projectPeriod >= 0 &&
projectData.projectPeriod !== '' &&
projectData.projectTemplateToUse >= 0 &&
projectData.projectTemplateToUse !== '' &&
projectData.workDay0 &&
!dropDownProps?.taskDependency?.loading &&
formatChecker === 0
);

const checkAddMoreProcessorDisabled = () =>
projectData.processor.length === dropDownProps?.processor?.data?.length ||
projectData.changeProcessorTo.length ===
changeProcessorToDropdown?.length ||
!dropDownProps?.processor?.data?.length;

const checkAddMoreTemplateDisabled = () =>
projectData.template.length === dropDownProps?.template?.data?.length ||
projectData.changeTemplateTo.length ===
dropDownProps?.changeTemplateTo?.data?.length ||
!dropDownProps?.template?.data?.length;

const handleFormChange = (e) => {
let { value } = e.target;
let name;
let number;
if (e?.target?.name) {
[name, number] = e.target.name.split('.');
}

// fieldError[name] = !value;

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

switch (name) {
case 'processor': {
if (
projectData.changeProcessorTo[number] === -1 &&
projectData.processor[number] === -1
) {
setFormatChecker((prev) => prev + 1);
} else if (
projectData.changeProcessorTo[number] !== -1 &&
projectData.processor[number] === -1
) {
setFormatChecker((prev) => prev - 1);
}
break;
}
case 'changeProcessorTo': {
if (
projectData.changeProcessorTo[number] === -1 &&
projectData.processor[number] === -1
) {
setFormatChecker((prev) => prev + 1);
} else if (
projectData.changeProcessorTo[number] === -1 &&
projectData.processor[number] !== -1
) {
setFormatChecker((prev) => prev - 1);
}
break;
}
case 'template': {
if (
projectData.changeTemplateTo[number] === -1 &&
projectData.template[number] === -1
) {
setFormatChecker((prev) => prev + 1);
} else if (
projectData.changeTemplateTo[number] !== -1 &&
projectData.template[number] === -1
) {
setFormatChecker((prev) => prev - 1);
}
break;
}
case 'changeTemplateTo': {
if (
projectData.changeTemplateTo[number] === -1 &&
projectData.template[number] === -1
) {
setFormatChecker((prev) => prev + 1);
} else if (
projectData.changeTemplateTo[number] === -1 &&
projectData.template[number] !== -1
) {
setFormatChecker((prev) => prev - 1);
}
break;
}
case 'closingUnit':
dispatch(ACTIONS.fetchAddProjectDialogDropdownApiStart(value));
setProjectData((data) => ({
...data,
projectTemplateToUse: '',
projectPeriod: '',
}));
break;
case 'projectReleaseDate':
setProjectData((data) => ({
...data,
workDay0: '',
}));
break;
case 'projectType':
case 'projectTemplateToUse': {
if (name === 'projectType') {
setProjectData((data) => ({
...data,
projectTemplateToUse: '',
}));
} else dispatch(ACTIONS.fetchTasksApiStart(value));
setProjectData((data) => ({
...data,
processor: [-1],
changeProcessorTo: [-1],
template: [-1],
changeTemplateTo: [-1],
}));
setChangePrimaryAssigneesLength(1);
setChangeTaskWorkbookTemplatesLength(1);
break;
}
default:
break;
}

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

const handleChangePrimaryAssigneesLength = () => {
setChangePrimaryAssigneesLength(changePrimaryAssigneesLength + 1);
setProjectData((data) => ({
...data,
processor: projectData.processor?.concat(-1),
changeProcessorTo: projectData.changeProcessorTo?.concat(-1),
}));
};

const handleChangeTaskWorkbookTemplates = () => {
setChangeTaskWorkbookTemplatesLength(changeTaskWorkbookTemplatesLength + 1);
setProjectData((data) => ({
...data,
template: projectData.template?.concat(-1),
changeTemplateTo: projectData.changeTemplateTo?.concat(-1),
}));
};

const handleSubmitProject = () => {
const assignee = projectData?.processor?.reduce((acc, curr, i) => {
acc[curr] = projectData?.changeProcessorTo[i] || -1;
return acc;
}, {});

const workbookTemplate = projectData?.template?.reduce((acc, curr, i) => {
acc[curr] = projectData?.changeTemplateTo[i] || -1;
return acc;
}, {});

const formData = {
project: {
name: projectData?.projectName,
closingUnitId: context?.currentRowDetails?.pkClosingUnitId,
description: '',
functionType: projectData?.projectType === 'CLOSE' ? 32 : 31,
projectTemplate: projectData?.projectTemplateToUse,
releaseDate: projectData?.projectReleaseDate,
projectPeriod: projectData?.projectPeriod,
workDayZero: projectData?.workDay0,
assignee,
workbookTemplate,
},
};
const params = {
activeSearch: {
details: {
searchState: false,
searchText: '',
},
},
formData,
};
dispatch(
ACTIONS.submitProjectApiStart({
params,
keyValueReferesh:
context?.closing_unit_details_keyValuePair?.functions?.fetchData,
gridRefresh:
context?.closing_unit_details_projects_grid?.functions?.refreshGrid,
closeDialog: handleClose,
}),
);
};

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

const handleRemoveProcessor = (index) => {
if (changePrimaryAssigneesLength === 1) {
setProjectData((data) => ({
...data,
processor: [-1],
changeProcessorTo: [-1],
}));
} else {
setChangePrimaryAssigneesLength(changePrimaryAssigneesLength - 1);
setProjectData((data) => ({
...data,
processor: [
...projectData.processor.slice(0, index),
...projectData.processor.slice(index + 1),
],
changeProcessorTo: [
...projectData.changeProcessorTo.slice(0, index),
...projectData.changeProcessorTo.slice(index + 1),
],
}));
}
if (
(projectData.processor[index] === -1 &&
projectData.changeProcessorTo[index] !== -1) ||
(projectData.processor[index] !== -1 &&
projectData.changeProcessorTo[index] === -1)
) {
setFormatChecker(formatChecker - 1);
}
};

const handleRemoveTemplate = (index) => {
if (changeTaskWorkbookTemplatesLength === 1) {
setProjectData((data) => ({
...data,
template: [-1],
changeTemplateTo: [-1],
}));
} else {
setChangeTaskWorkbookTemplatesLength(
changeTaskWorkbookTemplatesLength - 1,
);
setProjectData((data) => ({
...data,
template: [
...projectData.template.slice(0, index),
...projectData.template.slice(index + 1),
],
changeTemplateTo: [
...projectData.changeTemplateTo.slice(0, index),
...projectData.changeTemplateTo.slice(index + 1),
],
}));
}
if (
(projectData.template[index] === -1 &&
projectData.changeTemplateTo[index] !== -1) ||
(projectData.template[index] !== -1 &&
projectData.changeTemplateTo[index] === -1)
) {
setFormatChecker(formatChecker - 1);
}
};

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

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

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

const renderProcessorName = (val) =>
`${
dropDownProps?.processor?.data?.find((n) => n.pkUserId === val)
?.firstName || ''
} ${
dropDownProps?.processor?.data?.find((n) => n.pkUserId === val)
?.lastName || ''
}`;

const renderChangeProcessorToName = (val) =>
`${
changeProcessorToDropdown?.find((n) => n.pkUserId === val)?.firstName ||
''
} ${
changeProcessorToDropdown?.find((n) => n.pkUserId === val)?.lastName || ''
}`;

const renderTemplateName = (val) =>
dropDownProps?.template?.data?.find((p) => p.workbookId === val)?.name ||
'';

const renderChangeTemplateToName = (val) =>
dropDownProps?.changeTemplateTo?.data?.find((p) => p.workbookId === val)
?.name || '';

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

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.closingUnit} />
</InputLabel>
</Grid>
<Grid item xs={12} className={classes.innerGridField}>
<Select
data-testid="addProjectClosingUnit"
fullWidth
name="closingUnit"
value={context?.currentRowDetails?.pkClosingUnitId}
MenuProps={{ classes: { paper: classes.menuItem } }}
options={[
{
value: context?.currentRowDetails?.pkClosingUnitId,
displayValue: context?.currentRowDetails?.name,
},
]}
disabled
/>
</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
data-testid="addProjectProjectName"
fullWidth
error={fieldError.projectName}
name="projectName"
variant="outlined"
value={projectData.projectName}
onChange={handleFormChange}
onBlur={(e) => validateFields(e.target)}
/>
</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
data-testid="addProjectProjectType"
fullWidth
name="projectType"
value={projectData.projectType}
onChange={handleFormChange}
error={fieldError.projectType}
onBlur={(e) => validateFields(e.target)}
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
data-testid="addProjectProjectTemplate"
loading={dropDownProps?.projectTemplate?.loading}
fullWidth
name="projectTemplateToUse"
MenuProps={{ classes: { paper: classes.menuItem } }}
value={projectData.projectTemplateToUse}
error={fieldError.projectTemplateToUse}
onChange={handleFormChange}
onBlur={(e) => validateFields(e.target)}
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}>
<Tooltip
title={
fieldError.projectReleaseDate ? (
<FormattedMessage {...messages.commonMsgFieldReqd} />
) : (
''
)
}
>
<TextField
data-testid="addProjectReleaseDate"
fullWidth
name="projectReleaseDate"
type="date"
variant="outlined"
error={fieldError.projectReleaseDate}
value={projectData.projectReleaseDate}
onChange={handleFormChange}
onBlur={(e) => validateFields(e.target)}
/>
</Tooltip>
</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}>
<Tooltip
title={
fieldError.workDay0 ? (
<FormattedMessage {...messages.commonMsgFieldReqd} />
) : (
''
)
}
>
<TextField
data-testid="addProjectWorkDay0"
fullWidth
name="workDay0"
type="date"
variant="outlined"
InputProps={{
inputProps: {
min: minDate(),
},
}}
value={projectData.workDay0}
error={fieldError.workDay0}
onChange={handleFormChange}
onBlur={(e) => validateFields(e.target)}
/>
</Tooltip>
</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
data-testid="addProjectProjectPeriod"
loading={dropDownProps?.projectPeriod?.loading}
fullWidth
name="projectPeriod"
value={projectData.projectPeriod}
error={fieldError.projectPeriod}
onChange={handleFormChange}
onBlur={(e) => validateFields(e.target)}
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 getAssigneeForm = () => (
<Grid item xs={12}>
{/* Change primary assignees title */}
<Grid container item xs={12} className={classes.changeTitle}>
<Grid item xs={11}>
<Typography variant="h3" className={classes.title}>
<FormattedMessage {...messages.assigneeLabel} />
</Typography>
</Grid>
<Grid item xs={1} className={classes.addMore}>
<Button
data-testid="addProjectAddMoreAssignee"
className={classes.addMore}
onClick={handleChangePrimaryAssigneesLength}
disabled={checkAddMoreProcessorDisabled()}
variant="outlined"
>
<FormattedMessage {...messages.addMoreLabel} />
</Button>
</Grid>
</Grid>
{/* Change primary assignees body */}
<Grid container item xs={12} className={classes.selectForm}>
{[...Array(changePrimaryAssigneesLength)].map((value, index) => (
<Grid container justifyContent="space-between" wrap="nowrap">
{/* first column */}
<Grid
container
item
xs={6}
direction="row"
className={classes.fieldGridContainer}
>
{/* Select Processor */}
<Grid item xs={12} className={classes.innerGrid}>
<InputLabel>
<FormattedMessage {...messages.processorLabel} />
</InputLabel>
</Grid>
<Grid item xs={12} className={classes.innerGridField}>
<Select
data-testid={`addProjectProcessor${index}`}
fullWidth
loading={dropDownProps?.processor?.loading}
name={`processor.${index}`}
MenuProps={{ classes: { paper: classes.bottomMenuItem } }}
value={
projectData.processor[index] === -1
? ''
: projectData.processor[index]
}
onChange={handleFormChange}
renderValue={renderProcessorName}
options={
projectData.projectTemplateToUse !== -1
? dropDownProps?.processor?.data
?.filter(
(items) =>
!projectData.processor.includes(items.pkUserId) ||
projectData.processor[index] === items.pkUserId,
)
?.map((items) => ({
value: items.pkUserId,
displayValue: `${items.firstName} ${items.lastName}`,
}))
: []
}
/>
</Grid>
</Grid>
<Divider
orientation="vertical"
flexItem
className={classes.invisibleDivider}
/>
<Grid
container
item
xs={6}
direction="row"
className={classes.fieldGridContainer}
>
{/* Change Processor to */}
<Grid item xs={12} className={classes.innerGrid}>
<InputLabel>
<FormattedMessage {...messages.changeProcessorLabel} />
</InputLabel>
</Grid>
<Grid item xs={12} className={classes.innerGridField}>
<Select
data-testid={`addProjectChangeProcessorTo${index}`}
fullWidth
name={`changeProcessorTo.${index}`}
MenuProps={{ classes: { paper: classes.bottomMenuItem } }}
loading={
dropDownProps?.processor?.loading ||
changeProcessorToDropdown?.loading
}
value={
projectData.changeProcessorTo[index] === -1
? ''
: projectData.changeProcessorTo[index]
}
onChange={handleFormChange}
renderValue={renderChangeProcessorToName}
options={changeProcessorToDropdown
?.filter(
(items) =>
!projectData.changeProcessorTo?.includes(
items.pkUserId,
) ||
projectData.changeProcessorTo[index] === items.pkUserId,
)
?.map((items) => ({
value: items.pkUserId,
displayValue: `${items.firstName} ${items.lastName}`,
}))}
/>
</Grid>
</Grid>
{/* cross button */}
<Grid item className={classes.crossButtonRoot}>
<Fab
data-testid={`addProjectRemoveProcessor${index}`}
size="small"
className={classes.crossButton}
onClick={() => handleRemoveProcessor(index)}
>
<CloseIcon />
</Fab>
</Grid>
</Grid>
))}
</Grid>
</Grid>
);
const getTemplateForm = () => (
<Grid item xs={12}>
{/* Change task workbook templates title */}
<Grid container item xs={12} className={classes.changeTitle}>
<Grid item xs={11}>
<Typography variant="h3" className={classes.title}>
<FormattedMessage {...messages.workbookLabel} />
</Typography>
</Grid>
<Grid item xs={1} className={classes.addMore}>
<Button
data-testid="addProjectAddMoreTemplate"
className={classes.addMore}
onClick={handleChangeTaskWorkbookTemplates}
disabled={checkAddMoreTemplateDisabled()}
variant="outlined"
>
<FormattedMessage {...messages.addMoreLabel} />
</Button>
</Grid>
</Grid>
{/* Change task workbook templates body */}
<Grid container item xs={12} className={classes.selectForm}>
{[...Array(changeTaskWorkbookTemplatesLength)].map((value, index) => (
<Grid container justifyContent="space-between" wrap="nowrap">
<Grid
container
item
xs={6}
direction="row"
className={classes.fieldGridContainer}
>
{/* Select Template */}
<Grid item xs={12} className={classes.innerGrid}>
<InputLabel>
<FormattedMessage {...messages.selectTemplateLabel} />
</InputLabel>
</Grid>
<Grid item xs={12} className={classes.innerGridField}>
<Select
data-testid={`addProjectTemplate${index}`}
fullWidth
name={`template.${index}`}
MenuProps={{ classes: { paper: classes.bottomMenuItem } }}
loading={dropDownProps?.template?.loading}
value={
projectData.template[index] === -1
? ''
: projectData.template[index]
}
onChange={handleFormChange}
renderValue={renderTemplateName}
options={
projectData.projectTemplateToUse !== -1
? dropDownProps?.template?.data
?.filter(
(items) =>
!projectData.template.includes(
items.workbookId,
) ||
projectData.template[index] === items.workbookId,
)
?.map((items) => ({
value: items.workbookId,
displayValue: items.name,
}))
: []
}
/>
</Grid>
</Grid>
<Divider
orientation="vertical"
flexItem
className={classes.invisibleDivider}
/>
<Grid
container
item
xs={6}
direction="row"
className={classes.fieldGridContainer}
>
{/* Change template to */}
<Grid item xs={12} className={classes.innerGrid}>
<InputLabel>
<FormattedMessage {...messages.changeTemplateLabel} />
</InputLabel>
</Grid>
<Grid item xs={12} className={classes.innerGridField}>
<Select
data-testid={`addProjectChangeTemplateTo${index}`}
fullWidth
loading={
dropDownProps?.template?.loading ||
!projectData?.changeTemplateTo?.length
}
name={`changeTemplateTo.${index}`}
MenuProps={{ classes: { paper: classes.bottomMenuItem } }}
value={
projectData.changeTemplateTo[index] === -1
? ''
: projectData.changeTemplateTo[index]
}
onChange={handleFormChange}
renderValue={renderChangeTemplateToName}
options={
projectData.projectTemplateToUse !== -1
? dropDownProps?.changeTemplateTo?.data
?.filter(
(items) =>
!projectData.changeTemplateTo.includes(
items.workbookId,
) ||
projectData.changeTemplateTo[index] ===
items.workbookId,
)
?.map((items) => ({
value: items.workbookId,
displayValue: items.name,
}))
: []
}
/>
</Grid>
</Grid>
{/* cross button */}
<Grid item className={classes.crossButtonRoot}>
<Fab
data-testid={`addProjectRemoveTemplate${index}`}
size="small"
className={classes.crossButton}
onClick={() => handleRemoveTemplate(index)}
>
<CloseIcon />
</Fab>
</Grid>
</Grid>
))}
</Grid>
</Grid>
);
const projectDrawerBody = () =>
dropDownProps?.taskDependency?.loading ? (
<div className={classes.linearLoader}>
<LinearLoader />
</div>
) : (
<div className={classes.root}>
{getProjectForm()}
{getAssigneeForm()}
{getTemplateForm()}
</div>
);

const handleOpenDialog = () => (
<DialogWrapper
header={<FormattedMessage {...messages.createProjet} />}
onClose={handleClose}
content={projectDrawerBody()}
className={classes.projectDialog}
actions={[
<Button
data-testid="addProjectCancel"
variant="outlined"
onClick={handleClose}
className={classes.leftButton}
>
<FormattedMessage {...messages.commonMsgCancel} />
</Button>,
<Button
data-testid="addProjectSave"
className={classes.rightButton}
variant="contained"
onClick={handleSubmitProject}
disabled={checkDisabled()}
>
<FormattedMessage {...messages.commonMsgSave} />
</Button>,
]}
/>
);
return <>{handleOpenDialog()}</>;
};

export default ProjectDrawer;