Notes

/* indes.tsx(Subdataset Creation Component) */
/*
* @author debanshu.datta, abhishek.man, akash.yadav
*/
import React, { useState } from 'react';
import { FormattedMessage } from 'react-intl';
import {
Button,
Avatar,
InputLabel,
TextField,
Typography,
} from '@material-ui/core';
import { useDispatch, useSelector } from 'react-redux';
import CustomDialog from '@highradius/g4_ui_components/lib/components/molecules/CustomDialog';
import SearchMenu from 'components/SearchMenu';
import { searchUsersApiStart } from 'containers/DatasetPreviewContainer/actions';
import { selectSearchUserData } from 'containers/DatasetPreviewContainer/selectors';
import FilterView from './FilterView';
import useSubDatasetCreationStyles from './styles';
import messages from './messages';

type SubDatasetCreationProps = {
datasetName: string;
parentDatasetId: string | number;
handleSave: (params: any) => void;
handleCancel: () => void;
data: any;
previewData: any;
filtersData: any;
handleSubDatasetOpen: any;
open: string;
};

interface DialogProps {
header: React.ReactNode;
onClose: () => void;
data: any[];
onSubmit: (data: any) => void;
open: string;
}

interface ListProps {
header: React.ReactNode;
}

interface SearchProps {
searchFunction: (query?: string) => void;
loading?: boolean;
searchTextLength?: number;
header?: React.ReactNode;
error?: boolean;
searchData: any[];
}

type UserAccessProps = {
classes: any;
formData: any;
searchProps: SearchProps;
dialogProps: DialogProps;
listProps: ListProps;
setFormData: any;
};

type DisplayComponentProps = {
classes: any;
data: any;
handleChange: (event: any) => void;
};

const initialData = {
name: '',
description: '',
parentDatasetId: '',
emails: [],
filterPayloadList: [],
};

const filterComparetor = (firstValue, secondValue, operator) => {
switch (operator) {
case '=':
return firstValue === secondValue;
case '<':
return firstValue < secondValue;
case '>':
return firstValue > secondValue;
case '<=':
return firstValue <= secondValue;
case '>=':
return firstValue >= secondValue;
default:
return firstValue === secondValue;
}
};

const AddUserComonent = ({
classes,
searchProps: { searchFunction = () => {}, loading, header, searchData },
dialogProps,
listProps,
formData,
setFormData,
}: UserAccessProps) => {
const [userList, setUserList] = React.useState(dialogProps.data || []);
const [emailList, setEmailList] = React.useState<any>([]);

React.useEffect(() => {
setFormData((prev) => ({
...prev,
emails: emailList,
}));
}, [emailList]);

const isPresentInList = (value) =>
!userList?.some((user) => user?.pkUserId === value.pkUserId);

const handleUserSelect = (option) => {
setUserList((prev) => [
{
...option,
new: true,
},
...prev,
]);
setEmailList((prev) => [{ ...option, new: true }.email, ...prev]);
};

const handleRemoveMapUser = (id) => {
setUserList((prev) => {
const toDelete = prev.find(({ pkUserId }) => pkUserId === id);
let newUserList = [...prev];
if (toDelete?.new) {
newUserList = newUserList.filter(({ pkUserId }) => pkUserId !== id);
} else {
newUserList = newUserList.map((user) =>
user?.pkUserId === id ? { ...user, isDeleted: 1 } : user,
);
}
setEmailList([]);
newUserList.map((option) => {
setEmailList((prev) => [{ ...option, new: true }.email, ...prev]);
});

return newUserList;
});
setFormData((prev) => ({
...prev,
emails: emailList,
}));
};

return (
<>
<SearchMenu
className={classes.customDialog}
searchProps={{
onSearch: (value) => searchFunction(value),
loading,
header,
}}
listProps={{
header: '',
}}
list={userList
?.filter(({ isDeleted }) => !isDeleted)
.map((user) => ({
icon: <Avatar>{user?.firstName?.charAt(0)}</Avatar>,
primaryText: `${user?.firstName} ${user?.lastName}`,
secondaryText: user.email,
onRemove: handleRemoveMapUser,
id: user.pkUserId,
}))}
options={searchData.filter(isPresentInList).map((option: any) => ({
handleSelect: () => {
handleUserSelect(option);
},
selected: false,
value: option.pkUserId,
icon: (
<Avatar>
{option?.firstName?.charAt(0)}&nbsp;
{option?.lastName?.charAt(0)}
</Avatar>
),
primaryText: (
<Typography variant="body2">
{option?.firstName}&nbsp;{option?.lastName}
</Typography>
),
tertiaryText: (
<Typography variant="subtitle1">{option?.email}</Typography>
),
}))}
/>
</>
);
};

const DetailsComponent = ({
classes,
data,
handleChange,
}: DisplayComponentProps) => (
<div className={classes.form}>
<InputLabel required>
<FormattedMessage {...messages.title} />
</InputLabel>
<TextField
name="name"
error={!data.name}
value={data.name}
onChange={handleChange}
variant="outlined"
placeholder="Enter Sub-Dataset title"
fullWidth
/>
<InputLabel>
<FormattedMessage {...messages.description} />
</InputLabel>
<TextField
name="description"
value={data?.description}
variant="outlined"
minRows={5}
multiline
placeholder="Enter Description"
onChange={handleChange}
fullWidth
/>
</div>
);

const SubDatasetCreation = ({
datasetName,
parentDatasetId,
handleSave,
handleCancel,
data,
previewData,
filtersData,
open,
handleSubDatasetOpen,
}: SubDatasetCreationProps) => {
const classes = useSubDatasetCreationStyles();
const [filteredPreviewData, setfilteredPreviewData] = useState([]);
const [formData, setFormData] = React.useState<any>({
...initialData,
parentDatasetId,
});

const dispatch = useDispatch();

const searchData = useSelector(selectSearchUserData);

const filterPreviewDatasetHandler = (filters) => {
let updatedData = previewData.data.data;
for (let i = 0; i < filters.length; i += 1) {
updatedData = updatedData.filter((option) =>
filterComparetor(
option[
filters[i]?.dataSourceFieldName?.toUpperCase().split(' ').join('_')
],
filters[i]?.value,
filters[i]?.operator,
),
);
}
setfilteredPreviewData(updatedData);
if (filters.length === 0) {
setfilteredPreviewData([]);
}
};

const handleChange = (event) => {
setFormData((prev) => ({
...prev,
[event.target.name]: event.target.value,
}));
};

const getDialogContent = () => (
<>
<DetailsComponent
classes={classes}
data={formData}
handleChange={handleChange}
/>
<FilterView
classes={classes}
filtersData={filtersData}
setFilterCondition={setFormData}
formData={formData}
/>
<AddUserComonent
classes={classes}
dialogProps={{
header: 'Add User',
onClose: () => {},
data: [],
onSubmit: () => {},
open: true,
}}
listProps={{
header: {},
}}
formData={formData}
setFormData={setFormData}
searchProps={{
searchFunction: (value) => dispatch(searchUsersApiStart(value)),
loading: searchData.loading,
searchData: searchData.data,
header: <Typography variant="h3">Add User</Typography>,
}}
/>
</>
);

const getDialogActions = () => (
<>
<Button onClick={() => handleCancel()}>
<FormattedMessage {...messages.cancelText} />
</Button>
<Button variant="contained">
<FormattedMessage {...messages.previewText} />
</Button>
<Button variant="contained" onClick={() => handleSave(formData)}>
<FormattedMessage {...messages.saveText} />
</Button>
</>
);

return (
<CustomDialog
open={open === 'add' || open === 'edit'}
classes={{ paper: classes.deleteDialog }}
onClose={() => handleSubDatasetOpen('')}
header={
open === 'add' ? (
<FormattedMessage {...messages.addSubDatasetHeader} />
) : (
<FormattedMessage {...messages.editSubDatasetHeader} />
)
}
contentHead={getDialogContent()}
actions={getDialogActions()}
/>
);
};

export default SubDatasetCreation;