Notes

/**
*
* ReasonCodeTaskCategoryDialog
* @author biswabijayee.m
*
*/

import React, { memo, useEffect, useState } from 'react';
import { Button, Grid, Typography, TextField } from '@material-ui/core';
import CustomDialog from '@highradius/g4_ui_components/lib/components/molecules/CustomDialog';
import { makeStyles } from '@material-ui/core/styles';
import SelectBox from '@highradius/g4_ui_components/lib/components/atoms/SelectBox';
import PropTypes from 'prop-types';
import { defaultStyle } from './styles';

const useStyles = makeStyles(defaultStyle);

function ReasonCodeTaskCategoryDialog({
show,
data,
close,
mode,
onSubmit,
getfkCategoryId,
fkcategoryId,
}) {
const classes = useStyles();
const [taskAddDialog, settaskAddDialog] = React.useState(show);
const [dialogData, setDialogData] = useState({
category: '',
description: '',
fkCategoryId: '',
});

useEffect(() => {
if (show) {
openTaskAddDialog();
getfkCategoryId();
}
}, [show]);

const handleChange = (e: { target: { name?: any; value?: any } }) => {
const { name } = e.target;
const { value } = e.target;
setDialogData({ ...dialogData, [name]: value });
};

const closeTaskAddDialog = () => {
settaskAddDialog(false);
close();
};

const openTaskAddDialog = () => {
settaskAddDialog(true);
setDialogData(data);
};
const handleTaskAddDialog = () => {
if (mode === 'add') {
onSubmit(dialogData);
} else {
onSubmit({
category: dialogData.category,
description: dialogData.description,
pkClientTaskCategoryId: data.pkClientTaskCategoryId,
fkCategoryId: dialogData.fkCategoryId,
});
}
closeTaskAddDialog();
};

const handleSelectBox = (selectedId: string) => {
setDialogData({ ...dialogData, fkCategoryId: selectedId });
};

const getOptions = (buckets: any[]) => {
const arrayBuckets: Array<{ id: any; name: any }> = [];
if (buckets && buckets.length > 0) {
buckets.map((bucket) => {
const b = {
id: bucket.pkCategoryId,
name: bucket.name,
};
arrayBuckets.push(b);
return null;
});
}
return arrayBuckets;
};

const getContent = () => (
<Grid container xs={12} direction="column">
<Grid container item xs={12} className={classes.itemStyle}>
<Grid item xs={12}>
<Typography variant="body1">Task Category Name</Typography>
<TextField
fullWidth
variant="outlined"
name="category"
value={dialogData?.category}
onChange={handleChange}
/>
</Grid>
</Grid>
<Grid container item xs={12} className={classes.itemStyle}>
<Grid item xs={12}>
<Typography variant="body1">Description</Typography>
</Grid>
<Grid item xs={12}>
<TextField
fullWidth
variant="outlined"
name="description"
rows={5}
multiline
value={dialogData?.description}
onChange={handleChange}
/>
</Grid>
<Grid item xs={12} className={classes.itemStyle}>
<Typography variant="body1">Task Category Bucket</Typography>
<SelectBox
defaultValue={dialogData?.fkCategoryId}
disableClearable
handleChange={(_e, selectedId) => {
handleSelectBox(selectedId);
}}
className={classes.selectbox}
options={getOptions(fkcategoryId)}
/>
</Grid>
</Grid>
</Grid>
);

return (
<>
<CustomDialog
useDialog={{
dialogState: { open: taskAddDialog },
closeDialog: closeTaskAddDialog,
}}
id="task-category-dialog"
onCloseClick={closeTaskAddDialog}
header={mode === 'add' ? 'Add Task Category' : 'Edit Task category'}
topDivider
contentHead={getContent()}
actions={[
<Button variant="text" onClick={closeTaskAddDialog}>
Cancel
</Button>,
<Button
variant="contained"
onClick={() => {
handleTaskAddDialog();
}}
>
{mode === 'add' ? 'Add' : 'Save'}
</Button>,
]}
/>
</>
);
}

ReasonCodeTaskCategoryDialog.propTypes = {
show: PropTypes.bool,
data: PropTypes.object,
close: PropTypes.func,
mode: PropTypes.string,
onSubmit: PropTypes.func,
getfkCategoryId: PropTypes.func,
fkcategoryId: PropTypes.array,
};

export default memo(ReasonCodeTaskCategoryDialog);