summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorView.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorView.jsx')
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorView.jsx730
1 files changed, 451 insertions, 279 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorView.jsx
index efae7f3ad2..46eda622b5 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorView.jsx
@@ -25,307 +25,479 @@ import Form from 'nfvo-components/input/validation/Form.jsx';
import Button from 'sdc-ui/lib/react/Button.js';
import GridSection from 'nfvo-components/grid/GridSection.jsx';
import GridItem from 'nfvo-components/grid/GridItem.jsx';
-import {optionsInputValues as EntitlementPoolsOptionsInputValues, SP_ENTITLEMENT_POOL_FORM, tabIds} from './EntitlementPoolsConstants.js';
-import {optionsInputValues as LicenseModelOptionsInputValues} from '../LicenseModelConstants.js';
-import {validateStartDate, thresholdValueValidation} from '../LicenseModelValidations.js';
-import {DATE_FORMAT} from 'sdc-app/onboarding/OnboardingConstants.js';
-import {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx';
+import {
+ optionsInputValues as EntitlementPoolsOptionsInputValues,
+ SP_ENTITLEMENT_POOL_FORM,
+ tabIds
+} from './EntitlementPoolsConstants.js';
+import { optionsInputValues as LicenseModelOptionsInputValues } from '../LicenseModelConstants.js';
+import {
+ validateStartDate,
+ thresholdValueValidation
+} from '../LicenseModelValidations.js';
+import { DATE_FORMAT } from 'sdc-app/onboarding/OnboardingConstants.js';
+import { other as optionInputOther } from 'nfvo-components/input/validation/InputOptions.jsx';
import Tabs from 'sdc-ui/lib/react/Tabs.js';
import Tab from 'sdc-ui/lib/react/Tab.js';
import EntitlementPoolsLimits from './EntitlementPoolsLimits.js';
-import {limitType, NEW_LIMIT_TEMP_ID} from '../limits/LimitEditorConstants.js';
+import {
+ limitType,
+ NEW_LIMIT_TEMP_ID
+} from '../limits/LimitEditorConstants.js';
const EntitlementPoolPropType = PropTypes.shape({
- id: PropTypes.string,
- name: PropTypes.string,
- description: PropTypes.string,
- operationalScope: PropTypes.shape({
- choices: PropTypes.array,
- other: PropTypes.string
- }),
- thresholdUnits: PropTypes.string,
- thresholdValue: PropTypes.string,
- increments: PropTypes.string,
- startDate: PropTypes.string,
- expiryDate: PropTypes.string
+ id: PropTypes.string,
+ name: PropTypes.string,
+ description: PropTypes.string,
+ operationalScope: PropTypes.shape({
+ choices: PropTypes.array,
+ other: PropTypes.string
+ }),
+ thresholdUnits: PropTypes.string,
+ thresholdValue: PropTypes.string,
+ increments: PropTypes.string,
+ startDate: PropTypes.string,
+ expiryDate: PropTypes.string
});
-const EntitlementPoolsFormContent = ({data, genericFieldInfo, onDataChanged, validateName,
- thresholdValueValidation, validateStartDate}) => {
+const EntitlementPoolsFormContent = ({
+ data,
+ genericFieldInfo,
+ onDataChanged,
+ validateName,
+ thresholdValueValidation,
+ validateStartDate
+}) => {
+ let {
+ name,
+ description,
+ operationalScope,
+ thresholdUnits,
+ thresholdValue,
+ increments,
+ startDate,
+ expiryDate
+ } = data;
+ return (
+ <GridSection hasLastColSet>
+ <GridItem colSpan={2}>
+ <Input
+ onChange={name =>
+ onDataChanged({ name }, SP_ENTITLEMENT_POOL_FORM, {
+ name: validateName
+ })
+ }
+ isValid={genericFieldInfo.name.isValid}
+ isRequired={true}
+ errorText={genericFieldInfo.name.errorText}
+ label={i18n('Name')}
+ value={name}
+ data-test-id="create-ep-name"
+ type="text"
+ />
+ </GridItem>
+ <GridItem colSpan={2} lastColInRow>
+ <InputOptions
+ onInputChange={() => {}}
+ isMultiSelect={true}
+ onEnumChange={operationalScope =>
+ onDataChanged(
+ {
+ operationalScope: {
+ choices: operationalScope,
+ other: ''
+ }
+ },
+ SP_ENTITLEMENT_POOL_FORM
+ )
+ }
+ onOtherChange={operationalScope =>
+ onDataChanged(
+ {
+ operationalScope: {
+ choices: [optionInputOther.OTHER],
+ other: operationalScope
+ }
+ },
+ SP_ENTITLEMENT_POOL_FORM
+ )
+ }
+ label={i18n('Operational Scope')}
+ data-test-id="create-ep-operational-scope"
+ type="select"
+ multiSelectedEnum={
+ operationalScope && operationalScope.choices
+ }
+ otherValue={operationalScope && operationalScope.other}
+ values={
+ EntitlementPoolsOptionsInputValues.OPERATIONAL_SCOPE
+ }
+ isValid={genericFieldInfo.operationalScope.isValid}
+ errorText={genericFieldInfo.operationalScope.errorText}
+ />
+ </GridItem>
+ <GridItem colSpan={2} stretch>
+ <Input
+ onChange={description =>
+ onDataChanged({ description }, SP_ENTITLEMENT_POOL_FORM)
+ }
+ isValid={genericFieldInfo.description.isValid}
+ errorText={genericFieldInfo.description.errorText}
+ label={i18n('Description')}
+ value={description}
+ data-test-id="create-ep-description"
+ type="textarea"
+ />
+ </GridItem>
+ <GridItem colSpan={2} lastColInRow>
+ <div className="threshold-section">
+ <Input
+ onChange={e => {
+ // setting the unit to the correct value
+ const selectedIndex = e.target.selectedIndex;
+ const val = e.target.options[selectedIndex].value;
+ onDataChanged(
+ { thresholdUnits: val },
+ SP_ENTITLEMENT_POOL_FORM
+ );
+ // TODO make sure that the value is valid too
+ if (thresholdValue && thresholdValue !== '') {
+ onDataChanged(
+ { thresholdValue: thresholdValue },
+ SP_ENTITLEMENT_POOL_FORM,
+ { thresholdValue: thresholdValueValidation }
+ );
+ }
+ }}
+ value={thresholdUnits}
+ label={i18n('Threshold Units')}
+ data-test-id="create-ep-threshold-units"
+ isValid={genericFieldInfo.thresholdUnits.isValid}
+ errorText={genericFieldInfo.thresholdUnits.errorText}
+ groupClassName="bootstrap-input-options"
+ className="input-options-select"
+ type="select">
+ {LicenseModelOptionsInputValues.THRESHOLD_UNITS.map(
+ mtype => (
+ <option key={mtype.enum} value={mtype.enum}>{`${
+ mtype.title
+ }`}</option>
+ )
+ )}
+ </Input>
- let {name, description, operationalScope, thresholdUnits, thresholdValue,
- increments, startDate, expiryDate} = data;
- return (
- <GridSection hasLastColSet>
- <GridItem colSpan={2}>
- <Input
- onChange={name => onDataChanged({name}, SP_ENTITLEMENT_POOL_FORM, {name: validateName})}
- isValid={genericFieldInfo.name.isValid}
- isRequired={true}
- errorText={genericFieldInfo.name.errorText}
- label={i18n('Name')}
- value={name}
- data-test-id='create-ep-name'
- type='text'/>
- </GridItem>
- <GridItem colSpan={2} lastColInRow>
- <InputOptions
- onInputChange={()=>{}}
- isMultiSelect={true}
- onEnumChange={operationalScope => onDataChanged({operationalScope:{choices: operationalScope, other: ''}},
- SP_ENTITLEMENT_POOL_FORM)}
- onOtherChange={operationalScope => onDataChanged({operationalScope:{choices: [optionInputOther.OTHER],
- other: operationalScope}}, SP_ENTITLEMENT_POOL_FORM)}
- label={i18n('Operational Scope')}
- data-test-id='create-ep-operational-scope'
- type='select'
- multiSelectedEnum={operationalScope && operationalScope.choices}
- otherValue={operationalScope && operationalScope.other}
- values={EntitlementPoolsOptionsInputValues.OPERATIONAL_SCOPE}
- isValid={genericFieldInfo.operationalScope.isValid}
- errorText={genericFieldInfo.operationalScope.errorText} />
- </GridItem>
- <GridItem colSpan={2} stretch>
- <Input
- onChange={description => onDataChanged({description}, SP_ENTITLEMENT_POOL_FORM)}
- isValid={genericFieldInfo.description.isValid}
- errorText={genericFieldInfo.description.errorText}
- label={i18n('Description')}
- value={description}
- data-test-id='create-ep-description'
- type='textarea'/>
- </GridItem>
- <GridItem colSpan={2} lastColInRow>
- <div className='threshold-section'>
- <Input
- onChange={e => {
- // setting the unit to the correct value
- const selectedIndex = e.target.selectedIndex;
- const val = e.target.options[selectedIndex].value;
- onDataChanged({thresholdUnits: val}, SP_ENTITLEMENT_POOL_FORM);
- // TODO make sure that the value is valid too
- if(thresholdValue && thresholdValue !== '') {
- onDataChanged({thresholdValue: thresholdValue}, SP_ENTITLEMENT_POOL_FORM,{thresholdValue : thresholdValueValidation});
- }}
-
- }
- value={thresholdUnits}
- label={i18n('Threshold Units')}
- data-test-id='create-ep-threshold-units'
- isValid={genericFieldInfo.thresholdUnits.isValid}
- errorText={genericFieldInfo.thresholdUnits.errorText}
- groupClassName='bootstrap-input-options'
- className='input-options-select'
- type='select' >
- {LicenseModelOptionsInputValues.THRESHOLD_UNITS.map(mtype =>
- <option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)}
- </Input>
-
- <Input
- className='entitlement-pools-form-row-threshold-value'
- onChange={thresholdValue => onDataChanged({thresholdValue}, SP_ENTITLEMENT_POOL_FORM,
- {thresholdValue : thresholdValueValidation})}
- label={i18n('Threshold Value')}
- isValid={genericFieldInfo.thresholdValue.isValid}
- errorText={genericFieldInfo.thresholdValue.errorText}
- data-test-id='create-ep-threshold-value'
- value={thresholdValue}
- type='text'/>
- </div>
- <Input
- onChange={increments => onDataChanged({increments}, SP_ENTITLEMENT_POOL_FORM)}
- label={i18n('Increments')}
- value={increments}
- data-test-id='create-ep-increments'
- type='text'/>
- <div className='date-section'>
- <Input
- type='date'
- label={i18n('Start Date')}
- value={startDate}
- dateFormat={DATE_FORMAT}
- startDate={startDate}
- endDate={expiryDate}
- onChange={startDate => onDataChanged(
- {startDate: startDate ? startDate.format(DATE_FORMAT) : ''},
- SP_ENTITLEMENT_POOL_FORM,
- {startDate: validateStartDate}
- )}
- isValid={genericFieldInfo.startDate.isValid}
- errorText={genericFieldInfo.startDate.errorText}
- selectsStart/>
- <Input
- type='date'
- label={i18n('Expiry Date')}
- value={expiryDate}
- dateFormat={DATE_FORMAT}
- startDate={startDate}
- endDate={expiryDate}
- onChange={expiryDate => {
- onDataChanged({expiryDate: expiryDate ? expiryDate.format(DATE_FORMAT) : ''}, SP_ENTITLEMENT_POOL_FORM);
- onDataChanged({startDate}, SP_ENTITLEMENT_POOL_FORM, {startDate: validateStartDate});
- }}
- isValid={genericFieldInfo.expiryDate.isValid}
- errorText={genericFieldInfo.expiryDate.errorText}
- selectsEnd/>
- </div>
- </GridItem>
- </GridSection>
- );
+ <Input
+ className="entitlement-pools-form-row-threshold-value"
+ onChange={thresholdValue =>
+ onDataChanged(
+ { thresholdValue },
+ SP_ENTITLEMENT_POOL_FORM,
+ {
+ thresholdValue: thresholdValueValidation
+ }
+ )
+ }
+ label={i18n('Threshold Value')}
+ isValid={genericFieldInfo.thresholdValue.isValid}
+ errorText={genericFieldInfo.thresholdValue.errorText}
+ data-test-id="create-ep-threshold-value"
+ value={thresholdValue}
+ type="text"
+ />
+ </div>
+ <Input
+ onChange={increments =>
+ onDataChanged({ increments }, SP_ENTITLEMENT_POOL_FORM)
+ }
+ label={i18n('Increments')}
+ value={increments}
+ data-test-id="create-ep-increments"
+ type="text"
+ />
+ <div className="date-section">
+ <Input
+ type="date"
+ label={i18n('Start Date')}
+ value={startDate}
+ dateFormat={DATE_FORMAT}
+ startDate={startDate}
+ endDate={expiryDate}
+ onChange={startDate =>
+ onDataChanged(
+ {
+ startDate: startDate
+ ? startDate.format(DATE_FORMAT)
+ : ''
+ },
+ SP_ENTITLEMENT_POOL_FORM,
+ { startDate: validateStartDate }
+ )
+ }
+ isValid={genericFieldInfo.startDate.isValid}
+ errorText={genericFieldInfo.startDate.errorText}
+ selectsStart
+ />
+ <Input
+ type="date"
+ label={i18n('Expiry Date')}
+ value={expiryDate}
+ dateFormat={DATE_FORMAT}
+ startDate={startDate}
+ endDate={expiryDate}
+ onChange={expiryDate => {
+ onDataChanged(
+ {
+ expiryDate: expiryDate
+ ? expiryDate.format(DATE_FORMAT)
+ : ''
+ },
+ SP_ENTITLEMENT_POOL_FORM
+ );
+ onDataChanged(
+ { startDate },
+ SP_ENTITLEMENT_POOL_FORM,
+ {
+ startDate: validateStartDate
+ }
+ );
+ }}
+ isValid={genericFieldInfo.expiryDate.isValid}
+ errorText={genericFieldInfo.expiryDate.errorText}
+ selectsEnd
+ />
+ </div>
+ </GridItem>
+ </GridSection>
+ );
};
class EntitlementPoolsEditorView extends React.Component {
+ static propTypes = {
+ data: EntitlementPoolPropType,
+ previousData: EntitlementPoolPropType,
+ EPNames: PropTypes.object,
+ isReadOnlyMode: PropTypes.bool,
+ onDataChanged: PropTypes.func.isRequired,
+ onSubmit: PropTypes.func.isRequired,
+ onCancel: PropTypes.func.isRequired
+ };
- static propTypes = {
- data: EntitlementPoolPropType,
- previousData: EntitlementPoolPropType,
- EPNames: PropTypes.object,
- isReadOnlyMode: PropTypes.bool,
- onDataChanged: PropTypes.func.isRequired,
- onSubmit: PropTypes.func.isRequired,
- onCancel: PropTypes.func.isRequired
- };
-
- static defaultProps = {
- data: {}
- };
-
- componentDidUpdate(prevProps) {
- if (this.props.formReady && this.props.formReady !== prevProps.formReady) { // if form validation succeeded -> continue with submit
- this.submit();
- }
- }
+ static defaultProps = {
+ data: {}
+ };
- state = {
- selectedTab: tabIds.GENERAL,
- selectedLimit: ''
- };
+ componentDidUpdate(prevProps) {
+ if (
+ this.props.formReady &&
+ this.props.formReady !== prevProps.formReady
+ ) {
+ // if form validation succeeded -> continue with submit
+ this.submit();
+ }
+ }
- render() {
- let {data = {}, onDataChanged, isReadOnlyMode, genericFieldInfo, onCloseLimitEditor, limitsList = []} = this.props;
- const {selectedTab} = this.state;
- const isTabsDisabled = !data.id || !this.props.isFormValid;
+ state = {
+ selectedTab: tabIds.GENERAL,
+ selectedLimit: ''
+ };
- return (
- <div>
- <Tabs
- type='menu'
- activeTab={selectedTab}
- onTabClick={(tabIndex)=>{
- if (tabIndex === tabIds.ADD_LIMIT_BUTTON) {
- this.onAddLimit();
- } else {
- this.setState({selectedTab: tabIndex});
- this.setState({selectedLimit: ''});
- onCloseLimitEditor();
- }
- }}
- invalidTabs={[]}>
- <Tab tabId={tabIds.GENERAL} data-test-id='general-tab' title={i18n('General')}>
- {
- genericFieldInfo && <Form
- ref='validationForm'
- hasButtons={false}
- labledButtons={false}
- isReadOnlyMode={isReadOnlyMode}
- isValid={this.props.isFormValid}
- formReady={this.props.formReady}
- onValidateForm={() => this.props.onValidateForm(SP_ENTITLEMENT_POOL_FORM) }
- className='license-model-form entitlement-pools-form'>
- <EntitlementPoolsFormContent
- data={data}
- genericFieldInfo={genericFieldInfo}
- onDataChanged={onDataChanged}
- validateName={(value) => this.validateName(value)}
- validateStartDate={(value, state) => validateStartDate(value, state)}
- thresholdValueValidation={(value, state) => thresholdValueValidation(value, state)}/>
- </Form>
- }
- </Tab>
- <Tab disabled={isTabsDisabled} tabId={tabIds.SP_LIMITS} data-test-id='sp-limits-tab' title={i18n('SP Limits')}>
- {selectedTab === tabIds.SP_LIMITS &&
- <EntitlementPoolsLimits
- isReadOnlyMode={isReadOnlyMode}
- limitType={limitType.SERVICE_PROVIDER}
- limitsList={limitsList.filter(item => item.type === limitType.SERVICE_PROVIDER)}
- selectedLimit={this.state.selectedLimit}
- onCloseLimitEditor={() => this.onCloseLimitEditor()}
- onSelectLimit={limit => this.onSelectLimit(limit)}/>}
- </Tab>
- <Tab disabled={isTabsDisabled} tabId={tabIds.VENDOR_LIMITS} data-test-id='vendor-limits-tab' title={i18n('Vendor Limits')}>
- {selectedTab === tabIds.VENDOR_LIMITS &&
- <EntitlementPoolsLimits
- isReadOnlyMode={isReadOnlyMode}
- limitType={limitType.VENDOR}
- limitsList={limitsList.filter(item => item.type === limitType.VENDOR)}
- selectedLimit={this.state.selectedLimit}
- onCloseLimitEditor={() => this.onCloseLimitEditor()}
- onSelectLimit={limit => this.onSelectLimit(limit)}/>}
- </Tab>
- {
- selectedTab !== tabIds.GENERAL ?
- <Button
- disabled={this.state.selectedLimit || isReadOnlyMode}
- className='add-limit-button'
- tabId={tabIds.ADD_LIMIT_BUTTON}
- btnType='link'
- iconName='plus'>
- {i18n('Add Limit')}
- </Button>
- :
- <div key='empty_ep_tab_key'></div> // Render empty div to not break tabs
- }
- </Tabs>
- <GridSection className='license-model-modal-buttons entitlement-pools-editor-buttons'>
- {!this.state.selectedLimit &&
- <Button btnType='default' disabled={!this.props.isFormValid || isReadOnlyMode} onClick={() => this.submit()} type='reset'>
- {i18n('Save')}
- </Button>
- }
- <Button btnType={this.state.selectedLimit ? 'default' : 'outline'} onClick={() => this.props.onCancel()} type='reset'>
- {i18n('Cancel')}
- </Button>
- </GridSection>
- </div>
- );
- }
+ render() {
+ let {
+ data = {},
+ onDataChanged,
+ isReadOnlyMode,
+ genericFieldInfo,
+ onCloseLimitEditor,
+ limitsList = []
+ } = this.props;
+ const { selectedTab } = this.state;
+ const isTabsDisabled = !data.id || !this.props.isFormValid;
- submit() {
- const {data: entitlementPool, previousData: previousEntitlementPool, formReady} = this.props;
- if (!formReady) {
- this.props.onValidateForm(SP_ENTITLEMENT_POOL_FORM);
- } else {
- this.props.onSubmit({entitlementPool, previousEntitlementPool});
- }
- }
+ return (
+ <div>
+ <Tabs
+ type="menu"
+ activeTab={selectedTab}
+ onTabClick={tabIndex => {
+ if (tabIndex === tabIds.ADD_LIMIT_BUTTON) {
+ this.onAddLimit();
+ } else {
+ this.setState({ selectedTab: tabIndex });
+ this.setState({ selectedLimit: '' });
+ onCloseLimitEditor();
+ }
+ }}
+ invalidTabs={[]}>
+ <Tab
+ tabId={tabIds.GENERAL}
+ data-test-id="general-tab"
+ title={i18n('General')}>
+ {genericFieldInfo && (
+ <Form
+ ref="validationForm"
+ hasButtons={false}
+ labledButtons={false}
+ isReadOnlyMode={isReadOnlyMode}
+ isValid={this.props.isFormValid}
+ formReady={this.props.formReady}
+ onValidateForm={() =>
+ this.props.onValidateForm(
+ SP_ENTITLEMENT_POOL_FORM
+ )
+ }
+ className="license-model-form entitlement-pools-form">
+ <EntitlementPoolsFormContent
+ data={data}
+ genericFieldInfo={genericFieldInfo}
+ onDataChanged={onDataChanged}
+ validateName={value =>
+ this.validateName(value)
+ }
+ validateStartDate={(value, state) =>
+ validateStartDate(value, state)
+ }
+ thresholdValueValidation={(value, state) =>
+ thresholdValueValidation(value, state)
+ }
+ />
+ </Form>
+ )}
+ </Tab>
+ <Tab
+ disabled={isTabsDisabled}
+ tabId={tabIds.SP_LIMITS}
+ data-test-id="sp-limits-tab"
+ title={i18n('SP Limits')}>
+ {selectedTab === tabIds.SP_LIMITS && (
+ <EntitlementPoolsLimits
+ isReadOnlyMode={isReadOnlyMode}
+ limitType={limitType.SERVICE_PROVIDER}
+ limitsList={limitsList.filter(
+ item =>
+ item.type === limitType.SERVICE_PROVIDER
+ )}
+ selectedLimit={this.state.selectedLimit}
+ onCloseLimitEditor={() =>
+ this.onCloseLimitEditor()
+ }
+ onSelectLimit={limit =>
+ this.onSelectLimit(limit)
+ }
+ />
+ )}
+ </Tab>
+ <Tab
+ disabled={isTabsDisabled}
+ tabId={tabIds.VENDOR_LIMITS}
+ data-test-id="vendor-limits-tab"
+ title={i18n('Vendor Limits')}>
+ {selectedTab === tabIds.VENDOR_LIMITS && (
+ <EntitlementPoolsLimits
+ isReadOnlyMode={isReadOnlyMode}
+ limitType={limitType.VENDOR}
+ limitsList={limitsList.filter(
+ item => item.type === limitType.VENDOR
+ )}
+ selectedLimit={this.state.selectedLimit}
+ onCloseLimitEditor={() =>
+ this.onCloseLimitEditor()
+ }
+ onSelectLimit={limit =>
+ this.onSelectLimit(limit)
+ }
+ />
+ )}
+ </Tab>
+ {selectedTab !== tabIds.GENERAL ? (
+ <Button
+ disabled={
+ this.state.selectedLimit || isReadOnlyMode
+ }
+ className="add-limit-button"
+ tabId={tabIds.ADD_LIMIT_BUTTON}
+ btnType="link"
+ iconName="plus">
+ {i18n('Add Limit')}
+ </Button>
+ ) : (
+ <div key="empty_ep_tab_key" />
+ ) // Render empty div to not break tabs
+ }
+ </Tabs>
+ <GridSection className="license-model-modal-buttons entitlement-pools-editor-buttons">
+ {!this.state.selectedLimit && (
+ <Button
+ btnType="default"
+ disabled={!this.props.isFormValid || isReadOnlyMode}
+ onClick={() => this.submit()}
+ type="reset">
+ {i18n('Save')}
+ </Button>
+ )}
+ <Button
+ btnType={
+ this.state.selectedLimit ? 'default' : 'outline'
+ }
+ onClick={() => this.props.onCancel()}
+ type="reset">
+ {i18n('Cancel')}
+ </Button>
+ </GridSection>
+ </div>
+ );
+ }
- validateName(value) {
- const {data: {id}, EPNames} = this.props;
- const isExists = Validator.isItemNameAlreadyExistsInList({itemId: id, itemName: value, list: EPNames});
+ submit() {
+ const {
+ data: entitlementPool,
+ previousData: previousEntitlementPool,
+ formReady
+ } = this.props;
+ if (!formReady) {
+ this.props.onValidateForm(SP_ENTITLEMENT_POOL_FORM);
+ } else {
+ this.props.onSubmit({ entitlementPool, previousEntitlementPool });
+ }
+ }
- return !isExists ? {isValid: true, errorText: ''} :
- {isValid: false, errorText: i18n('Entitlement pool by the name \'' + value + '\' already exists. Entitlement pool name must be unique')};
- }
+ validateName(value) {
+ const { data: { id }, EPNames } = this.props;
+ const isExists = Validator.isItemNameAlreadyExistsInList({
+ itemId: id,
+ itemName: value,
+ list: EPNames
+ });
- onSelectLimit(limit) {
- if (limit.id === this.state.selectedLimit) {
- this.setState({selectedLimit: ''});
- return;
- }
- this.setState({selectedLimit: limit.id});
- this.props.onOpenLimitEditor(limit);
- }
+ return !isExists
+ ? { isValid: true, errorText: '' }
+ : {
+ isValid: false,
+ errorText: i18n(
+ "Entitlement pool by the name '" +
+ value +
+ "' already exists. Entitlement pool name must be unique"
+ )
+ };
+ }
- onCloseLimitEditor() {
- this.setState({selectedLimit: ''});
- this.props.onCloseLimitEditor();
- }
+ onSelectLimit(limit) {
+ if (limit.id === this.state.selectedLimit) {
+ this.setState({ selectedLimit: '' });
+ return;
+ }
+ this.setState({ selectedLimit: limit.id });
+ this.props.onOpenLimitEditor(limit);
+ }
- onAddLimit() {
- this.setState({selectedLimit: NEW_LIMIT_TEMP_ID});
- this.props.onOpenLimitEditor();
- }
+ onCloseLimitEditor() {
+ this.setState({ selectedLimit: '' });
+ this.props.onCloseLimitEditor();
+ }
+ onAddLimit() {
+ this.setState({ selectedLimit: NEW_LIMIT_TEMP_ID });
+ this.props.onOpenLimitEditor();
+ }
}
export default EntitlementPoolsEditorView;