Notes

import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useInjectReducer } from 'utils/injectReducer';
import { useInjectSaga } from 'utils/injectSaga';
import CreateDataset from 'icons/CreateDataset';
import DatasetSchedule from 'icons/DatasetSchedule';
import FilterIcon from 'icons/FilterIcon';
import Notify from 'icons/Notify';
import Summary from 'icons/Summary';
import DynamicStepperLayout from 'components/DynamicStepperLayout';
import {
closeSnackbar,
pushNewSnackbar,
} from 'components/UniversalSnackbar/actions';
import SvgConfigureSftp from 'icons/ConfigureSftp';
import SvgColumnMapping from 'icons/ColumnMapping';
import { dataObj } from './components/ColumnMapping/columnMappingConfigs';
import CreateDatasetTab from './components/CreateDatasetTab';
import ConfigTab from './components/ConfigTab';
import ColumnMappingTab from './components/ColumnMapping/index';
import InitialLoadTab from './components/InitialLoadTab';
import NotifyTab from './components/NotifyTab';
import SummaryTab from './components/SummaryTab';
import RecurringLoadTab from './components/RecurringLoad';
import FilterTab from './components/FilterTab';
import saga from './saga';
import reducer from './reducer';
import {
getConnectionsDropdownApiStart,
resetReducer,
checkMilestonesApiStart,
uploadHeaderFileApi,
getHrcSoColumnsApiSuccess,
getPicklistValuesApiSuccess,
checkMilestonesApiSuccess,
} from './actions';
import useDatasetCreateStyles from './styles';
import {
selectColumnMappingData,
selectconfigureTabData,
selectMilestonesData,
selectRecurringLoadData,
} from './selectors';

interface Props {
handleCancel: () => void;
handleSave: (...any) => void;
data?: any;
}

interface iTableData {
dataArr: Array<any>;
dataObjectMapping: Array<any>;
dataStaticMapping: Array<any>;
datasetObjectColumn: String;
datasetTargetColumn: String;
}

const initialDatasetData = {
datasetName: '',
description: '',
connectionName: '',
objectName: '',
objectId: '',
datasourceId: '',
connectionId: '',
flow: '',
};

const initialTableData = {
dataArr: [],
dataObjectMapping: [],
dataStaticMapping: [],
datasetObjectColumn: '',
datasetTargetColumn: '',
};

const DatasetCreation = ({ handleCancel, handleSave, data }: Props) => {
useInjectReducer({ key: 'datasetCreation', reducer });
useInjectSaga({ key: 'datasetCreation', saga });

const classes = useDatasetCreateStyles();

const [initialLoad, setInitialLoad] = React.useState<Array<any>>([]);
const [datasetTags, setDatasetTags] = React.useState<any>([]);
const [datasetData, setDatasetData] = React.useState<any>(initialDatasetData);
const [schedulerData, setSchedulerData] = React.useState<any>({
days: [],
addDataChoice: [],
time: new Date(),
scheduler: '',
});
const [userList, setUserList] = React.useState<any>([]);
const [filters, setFilters] = React.useState<any>([]);
const [tableData, setTableData] =
React.useState<iTableData>(initialTableData);
const [configData, setConfigData] = React.useState<any>({});

const dispatch = useDispatch();

const {
data: {
columnMapping,
configure,
// create,
filter,
initialLoad: initialLoadExist,
// notify,
recurringLoad,
// summary,
},
loading,
} = useSelector(selectMilestonesData);
const { data: recurringLoadData } = useSelector(selectRecurringLoadData);
const configureTabData = useSelector(selectconfigureTabData);
const columnMappingTabData = useSelector(selectColumnMappingData);

React.useEffect(() => {
setTableData((prev) => ({
...prev,
dataArr: columnMappingTabData?.fileColumn?.map((column, index) => ({
...dataObj,
id: index,
fileColumn: column,
})),
}));
}, [columnMappingTabData]);

React.useEffect(() => {
uploadFileToGetHeaders();
}, [configData.sampleFile]);

React.useEffect(() => {
dispatch(resetReducer());
if (!data) dispatch(getConnectionsDropdownApiStart('All'));
return () => {
dispatch(resetReducer());
};
}, []);

React.useEffect(() => {
setInitialLoad([]);
setFilters([]);
dispatch(getHrcSoColumnsApiSuccess([]));
dispatch(getPicklistValuesApiSuccess([]));
dispatch(checkMilestonesApiSuccess({}));
}, [datasetData.objectId]);

React.useEffect(() => {
if (datasetData.datasourceId && datasetData.objectId) {
const reqObj = {
dataSourceId: datasetData.datasourceId,
objectId: datasetData.objectId,
flowType: datasetData.flow,
};
dispatch(checkMilestonesApiStart(reqObj));
}
}, [datasetData.datasourceId, datasetData.objectId]);

React.useEffect(() => {
if (loading)
dispatch(
pushNewSnackbar({
options: { variant: 'inProgress', key: 'MILESTONE' },
message: 'Loading Milestones',
}),
);
else {
dispatch(closeSnackbar('MILESTONE'));
}
}, [loading]);

React.useEffect(() => {
if (!data) return;
const obj = {};
Object.keys(initialDatasetData).forEach((k) => {
if (k in data.dataset) obj[k] = data.dataset[k] || initialDatasetData[k];
});
setDatasetData((prev) => ({ ...prev, ...obj }));
setUserList(data.users);
setDatasetTags(data.tags.map((tg) => tg.name));
}, [data]);

React.useEffect(() => {
setConfigData(
parseConfigureTabFieldsData(configureTabData.data, configData),
);
}, [configureTabData.data]);

const convertToCamelCase = (fieldName) => {
if (!fieldName) return '';
const splittedFields = fieldName.split('_');
const updatedFields = splittedFields.map((f, index) =>
index === 0 ? f : f[0].toUpperCase() + f.substr(1),
);
return updatedFields.join('');
};

const parseConfigureTabFieldsData = (fields, obj) => {
const parsedObj = { ...obj, parameter_names: [] };
if (!fields.length) return {};
fields?.forEach((field) => {
parsedObj.parameter_names.push(field?.parameterName?.trim());
if (field.isMultivalued && field.datasetPicklistValues.length) {
parsedObj[convertToCamelCase(field.parameterName.trim())] =
field.datasetPicklistValues.map((value) => ({
...value,
checked: false,
key: value?.pkDcDatasetPicklistValuesId,
text: value?.picklistValue,
}));
} else {
parsedObj[convertToCamelCase(field?.parameterName?.trim())] =
field?.parameterName?.trim() === 'SWITCH' ? false : '';
}
});
return parsedObj;
};

const cronMaker = (time, days) => {
const t = new Date(time);
let expression = `${t.getSeconds()}:${t.getMinutes()}:${t.getHours()}:`;
expression = expression.concat(days.join(','));
return expression;
};

const onSave = () => {
const filterArray = [...filters].map((f) => ({
fieldId: f.fieldId,
operator: f.operator,
sequence: f.sequence,
dcFieldType: f.dcFieldType,
argument: f.argument,
}));

const initialLoadValue = [...initialLoad].map((i) => ({
pkId: i.pkId,
configValue:
i.parameterType === 'TIME'
? new Date(i.configValue).toLocaleTimeString()
: new Date(i.configValue).toLocaleDateString(),
parameterType: i.parameterType,
}));

const recurringLoadValue = schedulerData.addDataChoice.map((v) => ({
pkId: recurringLoadData[1]?.pkDcDatasourceLoadConfigMetadataId,
configValue: v,
parameterType: recurringLoadData[1]?.parameterType,
}));

const getConfigValue = (name) => {
switch (name) {
case 'isSftpEncrypted':
return configData?.[name] ? 'Enable' : 'Disable';
case 'fileCharacteristics':
return configData?.[name]
.filter((f) => f.checked)
.map((c) => c?.text || '')
.join(', ');
default:
return configData?.[name];
}
};

const configValues = configureTabData.data
.filter((val) => val.parameterName !== 'sample_file')
.map((dt) => ({
pkId: dt?.pkDcDatasourceLoadConfigMetadataId,
configValue: getConfigValue(convertToCamelCase(dt.parameterName)),
parameterType: dt.parameterType,
}))
.filter((cnfV) => cnfV?.configValue !== '');

const loadConfigValue = initialLoadValue.concat(
recurringLoadValue,
configValues,
);

const columnMappingData = tableData?.dataArr.map((td) => ({
fileColumnName: td?.fileColumn,
isUnique: td?.uniqueColumn ? 1 : 0,
isMandatory: td?.mandatory ? 1 : 0,
objectFieldId: columnMappingTabData.hrcSoColumn.find(
(f) => f.displayName === td.hrcSoColumn,
)?.fieldId,
inputDateFormat: td?.inputFormat,
staticValue: null,
datasetId: null,
}));

const cron = cronMaker(schedulerData.time, schedulerData.days);
const cronObj = {
pkId: recurringLoadData[0]?.pkDcDatasourceLoadConfigMetadataId,
configValue: cron,
parameterType: recurringLoadData[0]?.parameterType,
};

if (recurringLoadValue?.length && initialLoadValue?.length)
loadConfigValue.push(cronObj);
const users = userList.reduce((c, i) => [...c, i.pkUserId], []);
const tags =
datasetTags.length !== 0
? datasetTags.map((tag) => ({ name: tag.name, id: tag.pkDcTagId }))
: null;

const creationObject = {
metaData: {
name: datasetData.datasetName,
description: datasetData.description,
dcObjectId: datasetData.objectId,
dcConnectionId: datasetData.connectionId,
dcCategoryId: 1,
},
filter:
filterArray.length !== 0
? {
filterListDTO: filterArray,
}
: null,
loadConfig:
initialLoad?.some((x) => typeof x.configValue === 'object') || configure
? {
configValueDTOs: loadConfigValue,
}
: null,

notify: users.length ? { userIds: users } : null,

tags,
columnMapping:
columnMapping && columnMappingData?.length ? columnMappingData : null,
};
handleSave(creationObject);
};

const handleChangeDataset = (name, value) => {
setDatasetData((prev) => ({
...prev,
[name]: value,
}));
};

const handleChangeScheduler = (name, value, isMultivalued = 1) => {
setSchedulerData((prev) => ({
...prev,
[name]: value,
}));
if (name !== 'addDataChoice') return;
if (isMultivalued) {
const options = [...schedulerData.addDataChoice];
const index = options.findIndex((opn) => opn === value);
if (index === -1) {
options.push(value);
setSchedulerData((prev) => ({
...prev,
[name]: options,
}));
} else {
options.splice(index, 1);
setSchedulerData((prev) => ({
...prev,
[name]: options,
}));
}
} else {
const options = [...schedulerData.addDataChoice];
if (options.length) {
options.length = 0;
options.push(value);
} else {
options.push(value);
}
setSchedulerData((prev) => ({
...prev,
[name]: options,
}));
}
};
const uploadFileToGetHeaders = () => {
if (configData?.sampleFile) {
dispatch(uploadHeaderFileApi(configData?.sampleFile));
}
};

const checkColumnMappingDisabled = (columnData) => {
if (columnData.length === 1) {
const d = columnData?.[0];
return !(
d?.fileColumn &&
d?.hrcSoColumn &&
d?.dataType &&
(d.dataType === 'DATE' || d.dataType === 'DATETIME'
? d?.inputFormat
: true)
);
}
return !columnData?.reduce(
(prev, curr) =>
curr?.fileColumn &&
curr?.hrcSoColumn &&
curr?.dataType &&
(curr.dataType === 'DATE' || curr.dataType === 'DATETIME'
? curr?.inputFormat
: true) &&
prev,
);
};

const config = [
{
header: 'Create New Dataset',
label: 'Create',
icon: <CreateDataset />,
content: (
<CreateDatasetTab
datasetData={datasetData}
handleChangeDataset={handleChangeDataset}
datasetTags={datasetTags}
setDatasetTags={setDatasetTags}
isEditable={!data}
/>
),
isDisabled:
!datasetData.objectName ||
!datasetData.connectionName ||
!datasetData.datasetName ||
loading,
hidden: false,
},
{
header: 'Configure Source Path',
label: 'Configure',
icon: <SvgConfigureSftp />,
content: (
<ConfigTab
configData={configData}
setConfigData={setConfigData}
configFieldsData={configureTabData.data}
convertToCamelCase={convertToCamelCase}
/>
),

hidden: !configure,
styleClasses: classes.additionalContentWidth,
},
{
header: 'Map',
label: 'Column Mapping',
icon: <SvgColumnMapping />,
content: (
<ColumnMappingTab
tableData={tableData}
setTableData={setTableData}
columnMappingTabData={columnMappingTabData}
objectId={datasetData.objectId || 0}
/>
),
isDisabled:
tableData?.dataArr?.length &&
checkColumnMappingDisabled(tableData?.dataArr),
hidden: !columnMapping,
styleClasses: classes.additionalContentWidth,
},
{
header: 'Apply Filter',
label: 'Filter',
icon: <FilterIcon />,
content: <FilterTab filters={filters} handleChange={setFilters} />,
hidden: !filter,
},
{
header: 'Schedule Initial Load',
label: 'Schedule',
icon: <DatasetSchedule />,
content: (
<InitialLoadTab
setInitialLoad={setInitialLoad}
initialLoad={initialLoad}
/>
),

nestedPages: [
{
header: 'Schedule Recurring Load',
content: (
<RecurringLoadTab
handleChange={handleChangeScheduler}
schedulerData={schedulerData}
/>
),
hidden: !(
initialLoad?.some((x) => typeof x.configValue === 'object') &&
recurringLoad
),
},
],
isDisabled: false,
hidden: !initialLoadExist,
},
{
header: 'Notify',
label: 'Notify',
icon: <Notify />,
content: <NotifyTab userList={userList} setUserList={setUserList} />,
isDisabled: false,
// hidden: !notify,
},
{
header: 'Summary',
label: 'Summary',
icon: <Summary />,
content: (
<SummaryTab
datasetData={datasetData}
datasetTags={datasetTags}
configData={configData}
convertToCamelCase={convertToCamelCase}
initialLoad={initialLoad}
schedulerData={schedulerData}
userList={userList}
filters={filters}
/>
),
isDisabled: false,
// hidden: !summary,
},
];

return (
<DynamicStepperLayout
isCreate={false}
config={config}
classes={{ content: classes.contentWidth, stepper: classes.stepperWidth }}
onCancel={handleCancel}
onSave={onSave}
/>
);
};

export default DatasetCreation;