Notes
Notes - notes.io |
import React, {useContext} from 'react';
import {observer} from 'mobx-react';
import {Accordion} from 'react-bootstrap';
import Radio from '@aosprodsys/brucke-ui-core/dist/es/components/Radio';
import Input from '@aosprodsys/brucke-ui-core/dist/es/components/Input';
import TypeAhead from '@aosprodsys/brucke-ui-core/dist/es/components/TypeAhead';
import Checkbox from '@aosprodsys/brucke-ui-core/dist/es/components/Checkbox';
import Toggle from '@aosprodsys/brucke-ui-core/dist/es/components/Toggle';
import Trash from '@apple/symbols/medium/trash.svg';
import CreatableLookupSelect from '../../components/CreatableLookUpSelect';
import NavTabs from '../../components/NavTabs';
import {StoreContext} from '../../utils/StoreContext';
const ExportConfig = ({history, location}) => {
const {appState, fileProcessing} = useContext(StoreContext),
{id} = location.query,
{isFetching} = appState,
{exportConfig, isSaving, selectedTab} = fileProcessing,
{
includeUserGuide,
includeValueSet,
sheetName,
fieldGuidelines,
additionalGuidelines,
columns,
fileType,
valueSetConfig,
appOptions,
moduleOptions,
callbackOptions,
selectedApp,
selectedModule,
selectedCallback
} = exportConfig || {};
console.log(valueSetConfig, 'valueSetConfig');
const columnNameOptions = (columns || []).map(col => ({
label: col.columnName,
value: col.columnName
}));
const renderViews = [
{
label: 'Value Sets',
value: '/value-sets'
},
{
label: 'User Guides',
value: '/user-guides'
}
];
if (isFetching) return <div className="loader" />;
const isFieldGuidelineValid = fieldGuidelines.every(f => f.name?.trim() && f.details?.trim());
const isAdditionalGuidelineValid = additionalGuidelines.every(a => a.name?.trim() && a.details?.trim());
const isValidSheetName = sheetName ? !/^[A-Za-z_]{1,30}$/.test(sheetName) : false;
return (
<div className="export-config-form">
<div className="export-title global-header-super">Export Config</div>
<div className="nav-container">
<NavTabs
navs={renderViews}
active={selectedTab}
onClick={(evt, val) => {
fileProcessing.updateValue({
key: 'selectedTab',
value: val ? val : null
});
}}
/>
</div>
{selectedTab === '/user-guides' ? (
<>
<Toggle
label="Include User Guide sheet in Excel File"
inputProps={{
disabled: isSaving || fileType !== 'XLSX',
checked: includeUserGuide,
onChange: () => {
fileProcessing.updateForm('exportConfig', 'includeUserGuide', !includeUserGuide);
}
}}
/>
{includeUserGuide && (
<div className="data-container">
<div className="global-header-medium details-section">Sheet Name</div>
<Input
className="details-section sheet-name"
errorMessage={isValidSheetName && 'Max 30 characters includes only alphabets, _'}
placeholder="Sheet Name"
inputProps={{
disabled: isSaving,
debounceTimeout: 500,
value: sheetName ? sheetName : 'Guidelines',
onKeyPress: e => {
const key = e.key;
if (!/^[A-Za-z_]$/.test(key) || e.target.value.length >= 30) {
e.preventDefault();
}
},
onChange: e => {
fileProcessing.updateForm('exportConfig', 'sheetName', e.target.value);
}
}}
/>
<div className="global-header-medium details-section">Field Guidelines</div>
{(fieldGuidelines || []).map((row, idx) => {
const selectedNames = fieldGuidelines.reduce((acc, {name}, i) => {
if (i !== idx && name) acc.push(name);
return acc;
}, []);
let options = columnNameOptions.filter(
opt => !selectedNames.includes(opt.value) || opt.value === row.name
);
if (row.name && !options.some(opt => opt.value === row.name)) {
options.push({label: row.name, value: row.name});
}
const selectedValue = options.find(opt => opt.value === row.name) || null;
return (
<div key={idx} className="guideline-row">
<div className="name-field">
<TypeAhead
placeholder="Name"
showChevronIcon={true}
clearable={false}
errorMessage={!selectedValue && 'It is required field'}
selectOptions={{
isMulti: false,
isDisabled: isSaving,
hideSelectedOptions: true,
closeMenuOnSelect: true,
backspaceRemovesValue: true,
options,
showSelectedValue: true
}}
value={selectedValue}
onChange={selected => {
fileProcessing.updateExportConfig(idx, 'fieldGuidelines', 'name', selected?.value);
}}
/>
</div>
<div className="desc-field">
<Input
placeholder="Details"
errorMessage={!row.details && 'It is required field'}
maxCharCount={400}
inputProps={{
element: 'textarea',
value: row.details,
disabled: isSaving,
onChange: e => {
fileProcessing.updateExportConfig(idx, 'fieldGuidelines', 'details', e.target.value);
}
}}
/>
</div>
<div className="delete-icon">
<Trash
desiredFontSize={9}
title="Delete"
className="action-icon delete"
onClick={() => {
fileProcessing.updateForm(
'exportConfig',
'fieldGuidelines',
fieldGuidelines.filter((item, index) => idx !== index)
);
}}
/>
</div>
</div>
);
})}
<button
className="global-link-medium link action-link"
disabled={isSaving || fieldGuidelines.length >= columns.length}
onClick={() => {
fileProcessing.updateForm('exportConfig', 'fieldGuidelines', [
...fieldGuidelines,
{
name: '',
details: ''
}
]);
}}
>
Add field guidelines...
</button>
<div className="global-header-medium details-section">Additional Guidelines</div>
{(additionalGuidelines || []).map((row, idx) => (
<div key={idx} className="guideline-row">
<div className="name-field">
<Input
placeholder="Name(Max 30 char)"
errorMessage={!row.name && 'It is required field'}
inputProps={{
disabled: isSaving,
debounceTimeout: 500,
value: row.name,
onKeyPress: e => {
if (e.target.value.length >= 30) {
e.preventDefault();
}
},
onChange: e => {
fileProcessing.updateExportConfig(idx, 'additionalGuidelines', 'name', e.target.value);
}
}}
/>
</div>
<div className="desc-field">
<Input
placeholder="Details"
maxCharCount={400}
errorMessage={!row.details && 'It is required field'}
inputProps={{
element: 'textarea',
value: row.details,
disabled: isSaving,
onChange: e => {
fileProcessing.updateExportConfig(idx, 'additionalGuidelines', 'details', e.target.value);
}
}}
/>
</div>
<div className="delete-icon">
<Trash
desiredFontSize={9}
title="Delete"
className="row-actions-container action-icon delete"
onClick={() => {
fileProcessing.updateForm(
'exportConfig',
'additionalGuidelines',
additionalGuidelines.filter((item, index) => idx !== index)
);
}}
/>
</div>
</div>
))}
<button
className="link global-link-medium"
disabled={isSaving}
onClick={() => {
fileProcessing.updateForm('exportConfig', 'additionalGuidelines', [
...additionalGuidelines,
{
name: '',
details: ''
}
]);
}}
>
Add guidelines...
</button>
</div>
)}
<hr />
<div className="form-actions-container">
<button
disabled={isSaving}
className="button button-block button-secondary button-base"
onClick={() => {
history.push(`/file-processing-mgmt/create/output-config${id ? `?id=${id}` : ''}`);
}}
>
Back
</button>
<button
className="button button-block button-base"
disabled={isSaving || !(isAdditionalGuidelineValid && isFieldGuidelineValid)}
onClick={() => {
fileProcessing.editExportConfig(history, id);
}}
>
Save
</button>
</div>
</>
) : (
<div className="global-header-medium details-section">
<Toggle
label="Add Value Sets In Excel File"
inputProps={{
disabled: isSaving,
checked: includeValueSet,
onChange: () => {
fileProcessing.updateForm('exportConfig', 'includeValueSet', !includeValueSet);
}
}}
/>
<hr />
{includeValueSet && (
<Accordion defaultActiveKey="0" alwaysOpen>
{(valueSetConfig || []).map((row, idx) => {
const selectedNames = valueSetConfig.reduce((acc, {fieldName}, i) => {
if (i !== idx && fieldName) acc.push(fieldName);
return acc;
}, []);
let options = columnNameOptions.filter(
opt => !selectedNames.includes(opt.value) || opt.value === row.fieldName
);
if (row.fieldName && !options.some(opt => opt.value === row.fieldName)) {
options.push({label: row.fieldName, value: row.fieldName});
}
const selectedValue = options.find(opt => opt.value === row.fieldName) || null;
return (
<Accordion.Item eventKey={idx.toString()} key={idx}>
<Accordion.Header>{row.fieldName ? row.fieldName : `Value Set ${idx + 1}`}</Accordion.Header>
<Accordion.Body>
<div className="data-container">
<div className="global-header-medium details-section">Field Name</div>
<div className="name-field">
<TypeAhead
placeholder="Name"
showChevronIcon={true}
clearable={false}
errorMessage={!selectedValue && 'It is required field'}
selectOptions={{
isMulti: false,
isDisabled: isSaving,
hideSelectedOptions: true,
closeMenuOnSelect: true,
backspaceRemovesValue: true,
options,
showSelectedValue: true
}}
value={selectedValue}
onChange={selected => {
fileProcessing.updateExportConfig(idx, 'valueSetConfig', 'fieldName', selected?.value);
}}
/>
</div>
<div className="global-header-medium details-section">Add value source type</div>
<Radio
inputProps={{
disabled: isSaving,
checked: row.valueSourceType === 'static',
onChange: () => {
fileProcessing.updateExportConfig(idx, 'valueSetConfig', 'valueSourceType', 'static');
}
}}
label="Add Static Value Set"
/>
<Radio
inputProps={{
checked: row.valueSourceType === 'api',
onChange: () => {
fileProcessing.updateExportConfig(idx, 'valueSetConfig', 'valueSourceType', 'api');
}
}}
label="Add Value Set From API"
/>
{row?.valueSourceType === 'static' ? (
<>
<CreatableLookupSelect
placeholder="static Value Set"
showChevronIcon={true}
selectOptions={{
menuPortalTarget: document.body,
isMulti: true,
closeMenuOnSelect: false,
hideSelectedOptions: true,
backspaceRemovesValue: true,
value: row.valueSet,
isDisabled: isSaving
}}
showSelectedValue={true}
onChange={selected => {
fileProcessing.updateExportConfig(idx, 'valueSetConfig', 'valueSet', selected);
}}
/>
</>
) : (
<>
<TypeAhead
placeholder="Select Application"
showChevronIcon={true}
clearable={false}
selectOptions={{
isDisabled: !appOptions?.length || isSaving,
isMulti: false,
closeMenuOnSelect: true,
backspaceRemovesValue: true,
options: appOptions,
showSelectedValue: true
}}
value={selectedApp}
onChange={selected => {
fileProcessing.updateForm(idx, 'valueSetConfig', 'selectedApp', selected);
}}
/>
{selectedApp && (
<TypeAhead
placeholder="Select Module"
showChevronIcon={true}
clearable={false}
selectOptions={{
isDisabled: !moduleOptions?.length || isSaving,
isMulti: false,
closeMenuOnSelect: true,
backspaceRemovesValue: true,
options: moduleOptions,
showSelectedValue: true
}}
value={selectedModule}
onChange={selected => {
fileProcessing.updateForm(idx, 'valueSetConfig', 'selectedModule', selected);
}}
/>
)}
{selectedModule && (
<TypeAhead
placeholder="Select Callback"
showChevronIcon={true}
clearable={false}
selectOptions={{
isDisabled: !callbackOptions?.length || isSaving,
isMulti: false,
closeMenuOnSelect: true,
backspaceRemovesValue: true,
options: callbackOptions,
showSelectedValue: true
}}
value={selectedCallback}
onChange={selected => {
fileProcessing.updateForm(idx, 'valueSetConfig', 'selectedModule', selected);
}}
/>
)}
<Toggle
label="Transformation needed"
inputProps={{
disabled: isSaving,
checked: row?.apiValueSet?.transformationConfig?.applyTransformation,
onChange: () => {
fileProcessing.updateExportConfig(
'valueSetConfig',
'includeValueSet',
!applyTransformation
);
}
}}
/>
{row?.apiValueSet?.transformationConfig?.applyTransformation && (
<div className="name-field">
<TypeAhead
placeholder="Name"
showChevronIcon={true}
clearable={false}
errorMessage={!selectedValue && 'It is required field'}
selectOptions={{
isMulti: false,
isDisabled: isSaving,
hideSelectedOptions: true,
closeMenuOnSelect: true,
backspaceRemovesValue: true,
options,
showSelectedValue: true
}}
value={selectedValue}
onChange={selected => {
fileProcessing.updateExportConfig(
idx,
'valueSetConfig',
'fieldName',
selected?.value
);
}}
/>
</div>
)}
<Checkbox
inputProps={{
checked: row?.apiValueSet?.addKeyValuePair,
onChange: () => {
fileProcessing.updateValue({
key: 'addKeyValuePair',
value: row.addKeyValuePair
});
}
}}
className="global-header-medium"
label={'Add Key- Label Pair'}
/>
{row?.apiValueSet?.addKeyValuePair && (
<>
<div className="global-header-medium details-section">Key</div>
<Input
placeholder="key"
inputProps={{
disabled: isSaving,
debounceTimeout: 500,
value: row.key,
onChange: e => {
fileProcessing.updateExportConfig(idx, 'valueSetConfig', 'key', e.target.value);
}
}}
/>
<div className="global-header-medium details-section">Label</div>
<Input
placeholder="label"
inputProps={{
disabled: isSaving,
debounceTimeout: 500,
value: row.label,
onChange: e => {
fileProcessing.updateExportConfig(idx, 'valueSetConfig', 'label', e.target.value);
}
}}
/>
</>
)}
</>
)}
<hr />
</div>
</Accordion.Body>
</Accordion.Item>
);
})}
</Accordion>
)}
<button
className="global-link-medium link action-link"
disabled={isSaving || fieldGuidelines.length >= columns.length}
onClick={() => {
fileProcessing.updateForm('exportConfig', 'valueSetConfig', [
...valueSetConfig,
{
fieldName: '',
valueSourceType: '',
valueSet: [],
apiValueSet: {
callbackApplicationId: '',
callbackModuleId: '',
callbackId: '',
transformationConfig: {
applyTransformation: false,
apiTransformConfigId: null
},
addKeyValuePair: false,
key: '',
label: ''
}
}
]);
}}
>
Add valueSet...
</button>
</div>
)}
</div>
);
};
export default observer(ExportConfig);
Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `ExportConfig`.
at createFiberFromTypeAndProps (react-dom.development.js:25058:1)
at createFiberFromElement (react-dom.development.js:25086:1)
at createChild (react-dom.development.js:13446:1)
at reconcileChildrenArray (react-dom.development.js:13719:1)
at reconcileChildFibers (react-dom.development.js:14125:1)
at reconcileChildren (react-dom.development.js:16990:1)
at updateHostComponent (react-dom.development.js:17632:1)
at beginWork (react-dom.development.js:19080:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
createFiberFromTypeAndProps @ react-dom.development.js:25058
createFiberFromElement @ react-dom.development.js:25086
createChild @ react-dom.development.js:13446
reconcileChildrenArray @ react-dom.development.js:13719
reconcileChildFibers @ react-dom.development.js:14125
reconcileChildren @ react-dom.development.js:16990
updateHostComponent @ react-dom.development.js:17632
beginWork @ react-dom.development.js:19080
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22779
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
flushPendingDiscreteUpdates @ react-dom.development.js:22372
flushDiscreteUpdates @ react-dom.development.js:22353
finishEventHandler @ react-dom.development.js:3714
batchedEventUpdates @ react-dom.development.js:3748
dispatchEventForPluginEventSystem @ react-dom.development.js:8507
attemptToDispatchEvent @ react-dom.development.js:6005
dispatchEvent @ react-dom.development.js:5924
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
discreteUpdates$1 @ react-dom.development.js:22413
discreteUpdates @ react-dom.development.js:3756
dispatchDiscreteEvent @ react-dom.development.js:5889
react-dom.development.js:20085 The above error occurred in the <div> component:
at div
at https://localhost.apple.com:3399/dist/client_pages_fileProcessingManagement_ExportConfig_js.js:898:89
at div
at div
at ExportConfig (https://localhost.apple.com:3399/dist/main.js?hash=git-hash.txt%20wasn%27t%20found:120662:73)
at InnerLoadable (eval at ES6ProxyComponentFactory (https://localhost.apple.com:3399/dist/main.js?hash=git-hash.txt%20wasn%27t%20found:175930:10), <anonymous>:14:7)
at LoadableWithChunkExtractor
at Loadable
at Route (eval at ES6ProxyComponentFactory (https://localhost.apple.com:3399/dist/main.js?hash=git-hash.txt%20wasn%27t%20found:175930:10), <anonymous>:14:7)
at Switch (eval at ES6ProxyComponentFactory (https://localhost.apple.com:3399/dist/main.js?hash=git-hash.txt%20wasn%27t%20found:175930:10), <anonymous>:14:7)
at div
at section
at div
at CreateFileProcessingFlow (https://localhost.apple.com:3399/dist/main.js?hash=git-hash.txt%20wasn%27t%20found:120662:73)
at InnerLoadable (eval at ES6ProxyComponentFactory (https://localhost.apple.com:3399/dist/main.js?hash=git-hash.txt%20wasn%27t%20found:175930:10), <anonymous>:14:7)
at LoadableWithChunkExtractor
at Loadable
at Route (eval at ES6ProxyComponentFactory (https://localhost.apple.com:3399/dist/main.js?hash=git-hash.txt%20wasn%27t%20found:175930:10), <anonymous>:14:7)
at Switch (eval at ES6ProxyComponentFactory (https://localhost.apple.com:3399/dist/main.js?hash=git-hash.txt%20wasn%27t%20found:175930:10), <anonymous>:14:7)
at https://localhost.apple.com:3399/dist/main.js?hash=git-hash.txt%20wasn%27t%20found:120662:73
at div
at section
at div
at ProxyFacade (https://localhost.apple.com:3399/dist/main.js?hash=git-hash.txt%20wasn%27t%20found:176425:20)
at ProxyFacade (https://localhost.apple.com:3399/dist/main.js?hash=git-hash.txt%20wasn%27t%20found:176425:20)
at ProxyFacade (https://localhost.apple.com:3399/dist/main.js?hash=git-hash.txt%20wasn%27t%20found:176425:20)
at ErrorBoundary (eval at ES6ProxyComponentFactory (https://localhost.apple.com:3399/dist/main.js?hash=git-hash.txt%20wasn%27t%20found:175930:10), <anonymous>:14:7)
at ProxyFacade (https://localhost.apple.com:3399/dist/main.js?hash=git-hash.txt%20wasn%27t%20found:176425:20)
at ProxyFacade (https://localhost.apple.com:3399/dist/main.js?hash=git-hash.txt%20wasn%27t%20found:176425:20)
at AppContainer (eval at ES6ProxyComponentFactory (https://localhost.apple.com:3399/dist/main.js?hash=git-hash.txt%20wasn%27t%20found:175930:10), <anonymous>:14:7)
at HotExportedComponent (eval at ES6ProxyComponentFactory (https://localhost.apple.com:3399/dist/main.js?hash=git-hash.txt%20wasn%27t%20found:175930:10), <anonymous>:14:7)
at Router (eval at ES6ProxyComponentFactory (https://localhost.apple.com:3399/dist/main.js?hash=git-hash.txt%20wasn%27t%20found:175930:10), <anonymous>:14:7)
React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
import {observer} from 'mobx-react';
import {Accordion} from 'react-bootstrap';
import Radio from '@aosprodsys/brucke-ui-core/dist/es/components/Radio';
import Input from '@aosprodsys/brucke-ui-core/dist/es/components/Input';
import TypeAhead from '@aosprodsys/brucke-ui-core/dist/es/components/TypeAhead';
import Checkbox from '@aosprodsys/brucke-ui-core/dist/es/components/Checkbox';
import Toggle from '@aosprodsys/brucke-ui-core/dist/es/components/Toggle';
import Trash from '@apple/symbols/medium/trash.svg';
import CreatableLookupSelect from '../../components/CreatableLookUpSelect';
import NavTabs from '../../components/NavTabs';
import {StoreContext} from '../../utils/StoreContext';
const ExportConfig = ({history, location}) => {
const {appState, fileProcessing} = useContext(StoreContext),
{id} = location.query,
{isFetching} = appState,
{exportConfig, isSaving, selectedTab} = fileProcessing,
{
includeUserGuide,
includeValueSet,
sheetName,
fieldGuidelines,
additionalGuidelines,
columns,
fileType,
valueSetConfig,
appOptions,
moduleOptions,
callbackOptions,
selectedApp,
selectedModule,
selectedCallback
} = exportConfig || {};
console.log(valueSetConfig, 'valueSetConfig');
const columnNameOptions = (columns || []).map(col => ({
label: col.columnName,
value: col.columnName
}));
const renderViews = [
{
label: 'Value Sets',
value: '/value-sets'
},
{
label: 'User Guides',
value: '/user-guides'
}
];
if (isFetching) return <div className="loader" />;
const isFieldGuidelineValid = fieldGuidelines.every(f => f.name?.trim() && f.details?.trim());
const isAdditionalGuidelineValid = additionalGuidelines.every(a => a.name?.trim() && a.details?.trim());
const isValidSheetName = sheetName ? !/^[A-Za-z_]{1,30}$/.test(sheetName) : false;
return (
<div className="export-config-form">
<div className="export-title global-header-super">Export Config</div>
<div className="nav-container">
<NavTabs
navs={renderViews}
active={selectedTab}
onClick={(evt, val) => {
fileProcessing.updateValue({
key: 'selectedTab',
value: val ? val : null
});
}}
/>
</div>
{selectedTab === '/user-guides' ? (
<>
<Toggle
label="Include User Guide sheet in Excel File"
inputProps={{
disabled: isSaving || fileType !== 'XLSX',
checked: includeUserGuide,
onChange: () => {
fileProcessing.updateForm('exportConfig', 'includeUserGuide', !includeUserGuide);
}
}}
/>
{includeUserGuide && (
<div className="data-container">
<div className="global-header-medium details-section">Sheet Name</div>
<Input
className="details-section sheet-name"
errorMessage={isValidSheetName && 'Max 30 characters includes only alphabets, _'}
placeholder="Sheet Name"
inputProps={{
disabled: isSaving,
debounceTimeout: 500,
value: sheetName ? sheetName : 'Guidelines',
onKeyPress: e => {
const key = e.key;
if (!/^[A-Za-z_]$/.test(key) || e.target.value.length >= 30) {
e.preventDefault();
}
},
onChange: e => {
fileProcessing.updateForm('exportConfig', 'sheetName', e.target.value);
}
}}
/>
<div className="global-header-medium details-section">Field Guidelines</div>
{(fieldGuidelines || []).map((row, idx) => {
const selectedNames = fieldGuidelines.reduce((acc, {name}, i) => {
if (i !== idx && name) acc.push(name);
return acc;
}, []);
let options = columnNameOptions.filter(
opt => !selectedNames.includes(opt.value) || opt.value === row.name
);
if (row.name && !options.some(opt => opt.value === row.name)) {
options.push({label: row.name, value: row.name});
}
const selectedValue = options.find(opt => opt.value === row.name) || null;
return (
<div key={idx} className="guideline-row">
<div className="name-field">
<TypeAhead
placeholder="Name"
showChevronIcon={true}
clearable={false}
errorMessage={!selectedValue && 'It is required field'}
selectOptions={{
isMulti: false,
isDisabled: isSaving,
hideSelectedOptions: true,
closeMenuOnSelect: true,
backspaceRemovesValue: true,
options,
showSelectedValue: true
}}
value={selectedValue}
onChange={selected => {
fileProcessing.updateExportConfig(idx, 'fieldGuidelines', 'name', selected?.value);
}}
/>
</div>
<div className="desc-field">
<Input
placeholder="Details"
errorMessage={!row.details && 'It is required field'}
maxCharCount={400}
inputProps={{
element: 'textarea',
value: row.details,
disabled: isSaving,
onChange: e => {
fileProcessing.updateExportConfig(idx, 'fieldGuidelines', 'details', e.target.value);
}
}}
/>
</div>
<div className="delete-icon">
<Trash
desiredFontSize={9}
title="Delete"
className="action-icon delete"
onClick={() => {
fileProcessing.updateForm(
'exportConfig',
'fieldGuidelines',
fieldGuidelines.filter((item, index) => idx !== index)
);
}}
/>
</div>
</div>
);
})}
<button
className="global-link-medium link action-link"
disabled={isSaving || fieldGuidelines.length >= columns.length}
onClick={() => {
fileProcessing.updateForm('exportConfig', 'fieldGuidelines', [
...fieldGuidelines,
{
name: '',
details: ''
}
]);
}}
>
Add field guidelines...
</button>
<div className="global-header-medium details-section">Additional Guidelines</div>
{(additionalGuidelines || []).map((row, idx) => (
<div key={idx} className="guideline-row">
<div className="name-field">
<Input
placeholder="Name(Max 30 char)"
errorMessage={!row.name && 'It is required field'}
inputProps={{
disabled: isSaving,
debounceTimeout: 500,
value: row.name,
onKeyPress: e => {
if (e.target.value.length >= 30) {
e.preventDefault();
}
},
onChange: e => {
fileProcessing.updateExportConfig(idx, 'additionalGuidelines', 'name', e.target.value);
}
}}
/>
</div>
<div className="desc-field">
<Input
placeholder="Details"
maxCharCount={400}
errorMessage={!row.details && 'It is required field'}
inputProps={{
element: 'textarea',
value: row.details,
disabled: isSaving,
onChange: e => {
fileProcessing.updateExportConfig(idx, 'additionalGuidelines', 'details', e.target.value);
}
}}
/>
</div>
<div className="delete-icon">
<Trash
desiredFontSize={9}
title="Delete"
className="row-actions-container action-icon delete"
onClick={() => {
fileProcessing.updateForm(
'exportConfig',
'additionalGuidelines',
additionalGuidelines.filter((item, index) => idx !== index)
);
}}
/>
</div>
</div>
))}
<button
className="link global-link-medium"
disabled={isSaving}
onClick={() => {
fileProcessing.updateForm('exportConfig', 'additionalGuidelines', [
...additionalGuidelines,
{
name: '',
details: ''
}
]);
}}
>
Add guidelines...
</button>
</div>
)}
<hr />
<div className="form-actions-container">
<button
disabled={isSaving}
className="button button-block button-secondary button-base"
onClick={() => {
history.push(`/file-processing-mgmt/create/output-config${id ? `?id=${id}` : ''}`);
}}
>
Back
</button>
<button
className="button button-block button-base"
disabled={isSaving || !(isAdditionalGuidelineValid && isFieldGuidelineValid)}
onClick={() => {
fileProcessing.editExportConfig(history, id);
}}
>
Save
</button>
</div>
</>
) : (
<div className="global-header-medium details-section">
<Toggle
label="Add Value Sets In Excel File"
inputProps={{
disabled: isSaving,
checked: includeValueSet,
onChange: () => {
fileProcessing.updateForm('exportConfig', 'includeValueSet', !includeValueSet);
}
}}
/>
<hr />
{includeValueSet && (
<Accordion defaultActiveKey="0" alwaysOpen>
{(valueSetConfig || []).map((row, idx) => {
const selectedNames = valueSetConfig.reduce((acc, {fieldName}, i) => {
if (i !== idx && fieldName) acc.push(fieldName);
return acc;
}, []);
let options = columnNameOptions.filter(
opt => !selectedNames.includes(opt.value) || opt.value === row.fieldName
);
if (row.fieldName && !options.some(opt => opt.value === row.fieldName)) {
options.push({label: row.fieldName, value: row.fieldName});
}
const selectedValue = options.find(opt => opt.value === row.fieldName) || null;
return (
<Accordion.Item eventKey={idx.toString()} key={idx}>
<Accordion.Header>{row.fieldName ? row.fieldName : `Value Set ${idx + 1}`}</Accordion.Header>
<Accordion.Body>
<div className="data-container">
<div className="global-header-medium details-section">Field Name</div>
<div className="name-field">
<TypeAhead
placeholder="Name"
showChevronIcon={true}
clearable={false}
errorMessage={!selectedValue && 'It is required field'}
selectOptions={{
isMulti: false,
isDisabled: isSaving,
hideSelectedOptions: true,
closeMenuOnSelect: true,
backspaceRemovesValue: true,
options,
showSelectedValue: true
}}
value={selectedValue}
onChange={selected => {
fileProcessing.updateExportConfig(idx, 'valueSetConfig', 'fieldName', selected?.value);
}}
/>
</div>
<div className="global-header-medium details-section">Add value source type</div>
<Radio
inputProps={{
disabled: isSaving,
checked: row.valueSourceType === 'static',
onChange: () => {
fileProcessing.updateExportConfig(idx, 'valueSetConfig', 'valueSourceType', 'static');
}
}}
label="Add Static Value Set"
/>
<Radio
inputProps={{
checked: row.valueSourceType === 'api',
onChange: () => {
fileProcessing.updateExportConfig(idx, 'valueSetConfig', 'valueSourceType', 'api');
}
}}
label="Add Value Set From API"
/>
{row?.valueSourceType === 'static' ? (
<>
<CreatableLookupSelect
placeholder="static Value Set"
showChevronIcon={true}
selectOptions={{
menuPortalTarget: document.body,
isMulti: true,
closeMenuOnSelect: false,
hideSelectedOptions: true,
backspaceRemovesValue: true,
value: row.valueSet,
isDisabled: isSaving
}}
showSelectedValue={true}
onChange={selected => {
fileProcessing.updateExportConfig(idx, 'valueSetConfig', 'valueSet', selected);
}}
/>
</>
) : (
<>
<TypeAhead
placeholder="Select Application"
showChevronIcon={true}
clearable={false}
selectOptions={{
isDisabled: !appOptions?.length || isSaving,
isMulti: false,
closeMenuOnSelect: true,
backspaceRemovesValue: true,
options: appOptions,
showSelectedValue: true
}}
value={selectedApp}
onChange={selected => {
fileProcessing.updateForm(idx, 'valueSetConfig', 'selectedApp', selected);
}}
/>
{selectedApp && (
<TypeAhead
placeholder="Select Module"
showChevronIcon={true}
clearable={false}
selectOptions={{
isDisabled: !moduleOptions?.length || isSaving,
isMulti: false,
closeMenuOnSelect: true,
backspaceRemovesValue: true,
options: moduleOptions,
showSelectedValue: true
}}
value={selectedModule}
onChange={selected => {
fileProcessing.updateForm(idx, 'valueSetConfig', 'selectedModule', selected);
}}
/>
)}
{selectedModule && (
<TypeAhead
placeholder="Select Callback"
showChevronIcon={true}
clearable={false}
selectOptions={{
isDisabled: !callbackOptions?.length || isSaving,
isMulti: false,
closeMenuOnSelect: true,
backspaceRemovesValue: true,
options: callbackOptions,
showSelectedValue: true
}}
value={selectedCallback}
onChange={selected => {
fileProcessing.updateForm(idx, 'valueSetConfig', 'selectedModule', selected);
}}
/>
)}
<Toggle
label="Transformation needed"
inputProps={{
disabled: isSaving,
checked: row?.apiValueSet?.transformationConfig?.applyTransformation,
onChange: () => {
fileProcessing.updateExportConfig(
'valueSetConfig',
'includeValueSet',
!applyTransformation
);
}
}}
/>
{row?.apiValueSet?.transformationConfig?.applyTransformation && (
<div className="name-field">
<TypeAhead
placeholder="Name"
showChevronIcon={true}
clearable={false}
errorMessage={!selectedValue && 'It is required field'}
selectOptions={{
isMulti: false,
isDisabled: isSaving,
hideSelectedOptions: true,
closeMenuOnSelect: true,
backspaceRemovesValue: true,
options,
showSelectedValue: true
}}
value={selectedValue}
onChange={selected => {
fileProcessing.updateExportConfig(
idx,
'valueSetConfig',
'fieldName',
selected?.value
);
}}
/>
</div>
)}
<Checkbox
inputProps={{
checked: row?.apiValueSet?.addKeyValuePair,
onChange: () => {
fileProcessing.updateValue({
key: 'addKeyValuePair',
value: row.addKeyValuePair
});
}
}}
className="global-header-medium"
label={'Add Key- Label Pair'}
/>
{row?.apiValueSet?.addKeyValuePair && (
<>
<div className="global-header-medium details-section">Key</div>
<Input
placeholder="key"
inputProps={{
disabled: isSaving,
debounceTimeout: 500,
value: row.key,
onChange: e => {
fileProcessing.updateExportConfig(idx, 'valueSetConfig', 'key', e.target.value);
}
}}
/>
<div className="global-header-medium details-section">Label</div>
<Input
placeholder="label"
inputProps={{
disabled: isSaving,
debounceTimeout: 500,
value: row.label,
onChange: e => {
fileProcessing.updateExportConfig(idx, 'valueSetConfig', 'label', e.target.value);
}
}}
/>
</>
)}
</>
)}
<hr />
</div>
</Accordion.Body>
</Accordion.Item>
);
})}
</Accordion>
)}
<button
className="global-link-medium link action-link"
disabled={isSaving || fieldGuidelines.length >= columns.length}
onClick={() => {
fileProcessing.updateForm('exportConfig', 'valueSetConfig', [
...valueSetConfig,
{
fieldName: '',
valueSourceType: '',
valueSet: [],
apiValueSet: {
callbackApplicationId: '',
callbackModuleId: '',
callbackId: '',
transformationConfig: {
applyTransformation: false,
apiTransformConfigId: null
},
addKeyValuePair: false,
key: '',
label: ''
}
}
]);
}}
>
Add valueSet...
</button>
</div>
)}
</div>
);
};
export default observer(ExportConfig);
Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `ExportConfig`.
at createFiberFromTypeAndProps (react-dom.development.js:25058:1)
at createFiberFromElement (react-dom.development.js:25086:1)
at createChild (react-dom.development.js:13446:1)
at reconcileChildrenArray (react-dom.development.js:13719:1)
at reconcileChildFibers (react-dom.development.js:14125:1)
at reconcileChildren (react-dom.development.js:16990:1)
at updateHostComponent (react-dom.development.js:17632:1)
at beginWork (react-dom.development.js:19080:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
createFiberFromTypeAndProps @ react-dom.development.js:25058
createFiberFromElement @ react-dom.development.js:25086
createChild @ react-dom.development.js:13446
reconcileChildrenArray @ react-dom.development.js:13719
reconcileChildFibers @ react-dom.development.js:14125
reconcileChildren @ react-dom.development.js:16990
updateHostComponent @ react-dom.development.js:17632
beginWork @ react-dom.development.js:19080
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22779
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
flushPendingDiscreteUpdates @ react-dom.development.js:22372
flushDiscreteUpdates @ react-dom.development.js:22353
finishEventHandler @ react-dom.development.js:3714
batchedEventUpdates @ react-dom.development.js:3748
dispatchEventForPluginEventSystem @ react-dom.development.js:8507
attemptToDispatchEvent @ react-dom.development.js:6005
dispatchEvent @ react-dom.development.js:5924
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
discreteUpdates$1 @ react-dom.development.js:22413
discreteUpdates @ react-dom.development.js:3756
dispatchDiscreteEvent @ react-dom.development.js:5889
react-dom.development.js:20085 The above error occurred in the <div> component:
at div
at https://localhost.apple.com:3399/dist/client_pages_fileProcessingManagement_ExportConfig_js.js:898:89
at div
at div
at ExportConfig (https://localhost.apple.com:3399/dist/main.js?hash=git-hash.txt%20wasn%27t%20found:120662:73)
at InnerLoadable (eval at ES6ProxyComponentFactory (https://localhost.apple.com:3399/dist/main.js?hash=git-hash.txt%20wasn%27t%20found:175930:10), <anonymous>:14:7)
at LoadableWithChunkExtractor
at Loadable
at Route (eval at ES6ProxyComponentFactory (https://localhost.apple.com:3399/dist/main.js?hash=git-hash.txt%20wasn%27t%20found:175930:10), <anonymous>:14:7)
at Switch (eval at ES6ProxyComponentFactory (https://localhost.apple.com:3399/dist/main.js?hash=git-hash.txt%20wasn%27t%20found:175930:10), <anonymous>:14:7)
at div
at section
at div
at CreateFileProcessingFlow (https://localhost.apple.com:3399/dist/main.js?hash=git-hash.txt%20wasn%27t%20found:120662:73)
at InnerLoadable (eval at ES6ProxyComponentFactory (https://localhost.apple.com:3399/dist/main.js?hash=git-hash.txt%20wasn%27t%20found:175930:10), <anonymous>:14:7)
at LoadableWithChunkExtractor
at Loadable
at Route (eval at ES6ProxyComponentFactory (https://localhost.apple.com:3399/dist/main.js?hash=git-hash.txt%20wasn%27t%20found:175930:10), <anonymous>:14:7)
at Switch (eval at ES6ProxyComponentFactory (https://localhost.apple.com:3399/dist/main.js?hash=git-hash.txt%20wasn%27t%20found:175930:10), <anonymous>:14:7)
at https://localhost.apple.com:3399/dist/main.js?hash=git-hash.txt%20wasn%27t%20found:120662:73
at div
at section
at div
at ProxyFacade (https://localhost.apple.com:3399/dist/main.js?hash=git-hash.txt%20wasn%27t%20found:176425:20)
at ProxyFacade (https://localhost.apple.com:3399/dist/main.js?hash=git-hash.txt%20wasn%27t%20found:176425:20)
at ProxyFacade (https://localhost.apple.com:3399/dist/main.js?hash=git-hash.txt%20wasn%27t%20found:176425:20)
at ErrorBoundary (eval at ES6ProxyComponentFactory (https://localhost.apple.com:3399/dist/main.js?hash=git-hash.txt%20wasn%27t%20found:175930:10), <anonymous>:14:7)
at ProxyFacade (https://localhost.apple.com:3399/dist/main.js?hash=git-hash.txt%20wasn%27t%20found:176425:20)
at ProxyFacade (https://localhost.apple.com:3399/dist/main.js?hash=git-hash.txt%20wasn%27t%20found:176425:20)
at AppContainer (eval at ES6ProxyComponentFactory (https://localhost.apple.com:3399/dist/main.js?hash=git-hash.txt%20wasn%27t%20found:175930:10), <anonymous>:14:7)
at HotExportedComponent (eval at ES6ProxyComponentFactory (https://localhost.apple.com:3399/dist/main.js?hash=git-hash.txt%20wasn%27t%20found:175930:10), <anonymous>:14:7)
at Router (eval at ES6ProxyComponentFactory (https://localhost.apple.com:3399/dist/main.js?hash=git-hash.txt%20wasn%27t%20found:175930:10), <anonymous>:14:7)
React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
|
|
Notes is a web-based application for online taking notes. You can take your notes and share with others people. If you like taking long notes, notes.io is designed for you. To date, over 8,000,000,000+ notes created and continuing...
With notes.io;
- * You can take a note from anywhere and any device with internet connection.
- * You can share the notes in social platforms (YouTube, Facebook, Twitter, instagram etc.).
- * You can quickly share your contents without website, blog and e-mail.
- * You don't need to create any Account to share a note. As you wish you can use quick, easy and best shortened notes with sms, websites, e-mail, or messaging services (WhatsApp, iMessage, Telegram, Signal).
- * Notes.io has fabulous infrastructure design for a short link and allows you to share the note as an easy and understandable link.
Fast: Notes.io is built for speed and performance. You can take a notes quickly and browse your archive.
Easy: Notes.io doesn’t require installation. Just write and share note!
Short: Notes.io’s url just 8 character. You’ll get shorten link of your note when you want to share. (Ex: notes.io/q )
Free: Notes.io works for 14 years and has been free since the day it was started.
You immediately create your first note and start sharing with the ones you wish. If you want to contact us, you can use the following communication channels;
Email: [email protected]
Twitter: http://twitter.com/notesio
Instagram: http://instagram.com/notes.io
Facebook: http://facebook.com/notesio
Regards;
Notes.io Team
