summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditorView.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditorView.jsx')
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditorView.jsx339
1 files changed, 339 insertions, 0 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditorView.jsx
new file mode 100644
index 0000000000..6fecd16b71
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditorView.jsx
@@ -0,0 +1,339 @@
+import React from 'react';
+import ValidationTabs from 'nfvo-components/input/validation/ValidationTabs.jsx';
+import ValidationTab from 'nfvo-components/input/validation/ValidationTab.jsx';
+import ButtonGroup from 'react-bootstrap/lib/ButtonGroup.js';
+import Button from 'react-bootstrap/lib/Button.js';
+
+import ValidationForm from 'nfvo-components/input/validation/ValidationForm.jsx';
+import DualListboxView from 'nfvo-components/input/dualListbox/DualListboxView.jsx';
+import ValidationInput from 'nfvo-components/input/validation/ValidationInput.jsx';
+import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
+import ListEditorViewItem from 'nfvo-components/listEditor/ListEditorItemView.jsx';
+import i18n from 'nfvo-utils/i18n/i18n.js';
+
+import {state as FeatureGroupStateConstants} from './FeatureGroupsConstants.js';
+
+const FeatureGroupsPropType = React.PropTypes.shape({
+ id: React.PropTypes.string,
+ name: React.PropTypes.string,
+ description: React.PropTypes.string,
+ partNumber: React.PropTypes.string,
+ entitlementPoolsIds: React.PropTypes.array(React.PropTypes.string),
+ licenseKeyGroupsIds: React.PropTypes.array(React.PropTypes.string)
+});
+
+class FeatureGroupEditorView extends React.Component {
+
+
+ static propTypes = {
+ data: FeatureGroupsPropType,
+ previousData: FeatureGroupsPropType,
+ isReadOnlyMode: React.PropTypes.bool,
+
+ onSubmit: React.PropTypes.func,
+ onCancel: React.PropTypes.func,
+
+ selectedTab: React.PropTypes.number,
+ onTabSelect: React.PropTypes.func,
+
+ selectedEntitlementPoolsButtonTab: React.PropTypes.number,
+ selectedLicenseKeyGroupsButtonTab: React.PropTypes.number,
+ onEntitlementPoolsButtonTabSelect: React.PropTypes.func,
+ onLicenseKeyGroupsButtonTabSelect: React.PropTypes.func,
+
+ entitlementPoolsList: DualListboxView.propTypes.availableList,
+ licenseKeyGroupsList: DualListboxView.propTypes.availableList
+ };
+
+
+ static defaultProps = {
+ data: {},
+ selectedTab: FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.GENERAL,
+ selectedEntitlementPoolsButtonTab: FeatureGroupStateConstants.SELECTED_ENTITLEMENT_POOLS_BUTTONTAB.ASSOCIATED_ENTITLEMENT_POOLS,
+ selectedLicenseKeyGroupsButtonTab: FeatureGroupStateConstants.SELECTED_LICENSE_KEY_GROUPS_BUTTONTAB.ASSOCIATED_LICENSE_KEY_GROUPS
+ };
+
+ state = {
+ localEntitlementPoolsListFilter: '',
+ localLicenseKeyGroupsListFilter: ''
+ };
+
+
+ render() {
+ let {selectedTab, onTabSelect, isReadOnlyMode} = this.props;
+ return (
+ <ValidationForm
+ ref='validationForm'
+ hasButtons={true}
+ onSubmit={ () => this.submit() }
+ onReset={ () => this.props.onCancel() }
+ labledButtons={true}
+ isReadOnlyMode={isReadOnlyMode}
+ name='feature-group-validation-form'
+ className='feature-group-form'>
+ <ValidationTabs activeKey={onTabSelect ? selectedTab : undefined} onSelect={onTabSelect}>
+ {this.renderGeneralTab()}
+ {this.renderEntitlementPoolsTab()}
+ {this.renderLicenseKeyGroupsTab()}
+ </ValidationTabs>
+
+ </ValidationForm>
+ );
+ }
+
+ submit() {
+ const {data: featureGroup, previousData: previousFeatureGroup} = this.props;
+ this.props.onSubmit(previousFeatureGroup, featureGroup);
+ }
+
+ renderGeneralTab() {
+ let {data = {}, onDataChanged} = this.props;
+ let {name, description, partNumber} = data;
+ return (
+ <ValidationTab eventKey={FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.GENERAL} title={i18n('General')}>
+ <div>
+ <ValidationInput
+ groupClassName='field-section'
+ onChange={name => onDataChanged({name})}
+ ref='name'
+ label={i18n('Name')}
+ value={name}
+ name='feature-group-name'
+ validations={{maxLength: 120, required: true}}
+ type='text'/>
+ <ValidationInput
+ groupClassName='field-section'
+ className='description-field'
+ onChange={description => onDataChanged({description})}
+ ref='description'
+ label={i18n('Description')}
+ value={description}
+ name='feature-group-description'
+ validations={{maxLength: 1000, required: true}}
+ type='textarea'/>
+ <ValidationInput
+ groupClassName='field-section'
+ onChange={partNumber => onDataChanged({partNumber})}
+ label={i18n('Part Number')}
+ value={partNumber}
+ validations={{required: true}}
+ type='text'/>
+ </div>
+ </ValidationTab>
+ );
+ }
+
+ renderEntitlementPoolsTab() {
+ let {selectedEntitlementPoolsButtonTab, onEntitlementPoolsButtonTabSelect, entitlementPoolsList} = this.props;
+ if (entitlementPoolsList.length > 0) {
+ return (
+ <ValidationTab
+ eventKey={FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.ENTITLEMENT_POOLS}
+ title={i18n('Entitlement Pools')}>
+ <ButtonGroup>
+ {
+ this.renderButtonsTab(
+ FeatureGroupStateConstants.SELECTED_ENTITLEMENT_POOLS_BUTTONTAB.ASSOCIATED_ENTITLEMENT_POOLS,
+ selectedEntitlementPoolsButtonTab,
+ i18n('Associated Entitlement Pools'),
+ onEntitlementPoolsButtonTabSelect
+ )
+ }
+ {
+ this.renderButtonsTab(
+ FeatureGroupStateConstants.SELECTED_ENTITLEMENT_POOLS_BUTTONTAB.AVAILABLE_ENTITLEMENT_POOLS,
+ selectedEntitlementPoolsButtonTab,
+ i18n('Available Entitlement Pools'),
+ onEntitlementPoolsButtonTabSelect
+ )
+ }
+ </ButtonGroup>
+ {this.renderEntitlementPoolsButtonTabContent(selectedEntitlementPoolsButtonTab)}
+ </ValidationTab>
+ );
+ } else {
+ return (
+ <ValidationTab
+ eventKey={FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.ENTITLEMENT_POOLS}
+ title={i18n('Entitlement Pools')}>
+ <p>{i18n('There is no available entitlement pools.')}</p>
+ </ValidationTab>
+ );
+ }
+ }
+
+ renderLicenseKeyGroupsTab() {
+ let {selectedLicenseKeyGroupsButtonTab, onLicenseKeyGroupsButtonTabSelect, licenseKeyGroupsList} = this.props;
+ if (licenseKeyGroupsList.length > 0) {
+ return (
+ <ValidationTab
+ eventKey={FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.LICENCE_KEY_GROUPS}
+ title={i18n('License Key Groups')}>
+ <ButtonGroup>
+ {
+ this.renderButtonsTab(
+ FeatureGroupStateConstants.SELECTED_LICENSE_KEY_GROUPS_BUTTONTAB.ASSOCIATED_LICENSE_KEY_GROUPS,
+ selectedLicenseKeyGroupsButtonTab,
+ i18n('Associated License Key Groups'),
+ onLicenseKeyGroupsButtonTabSelect
+ )
+ }
+ {
+ this.renderButtonsTab(
+ FeatureGroupStateConstants.SELECTED_LICENSE_KEY_GROUPS_BUTTONTAB.AVAILABLE_LICENSE_KEY_GROUPS,
+ selectedLicenseKeyGroupsButtonTab,
+ i18n('Available License Key Groups'),
+ onLicenseKeyGroupsButtonTabSelect
+ )
+ }
+ </ButtonGroup>
+ {this.renderLicenseKeyGroupsTabContent(selectedLicenseKeyGroupsButtonTab)}
+ </ValidationTab>
+ );
+ } else {
+ return (
+ <ValidationTab
+ eventKey={FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.LICENCE_KEY_GROUPS}
+ title={i18n('License Key Groups')}>
+ <p>{i18n('There is no available license key groups')}</p>
+ </ValidationTab>);
+ }
+ }
+
+ renderButtonsTab(buttonTab, selectedButtonTab, title, onClick) {
+ const isSelected = buttonTab === selectedButtonTab;
+ return (
+ <Button
+ className='button-tab'
+ active={isSelected}
+ onClick={() => !isSelected && onClick(buttonTab)}>
+ { title }
+ </Button>
+ );
+ }
+
+ renderEntitlementPoolsButtonTabContent(selectedFeatureGroupsButtonTab) {
+ const {entitlementPoolsList = [], data: {entitlementPoolsIds = []}} = this.props;
+ let dualBoxTitle = {
+ left: i18n('Available Entitlement Pools'),
+ right: i18n('Selected Entitlement Pools')
+ };
+
+ if (entitlementPoolsList.length) {
+ const {localEntitlementPoolsListFilter} = this.state;
+ let selectedEntitlementPools = entitlementPoolsIds.map(entitlementPoolId => entitlementPoolsList.find(entitlementPool => entitlementPool.id === entitlementPoolId));
+
+ switch (selectedFeatureGroupsButtonTab) {
+ case FeatureGroupStateConstants.SELECTED_ENTITLEMENT_POOLS_BUTTONTAB.ASSOCIATED_ENTITLEMENT_POOLS:
+ if (selectedEntitlementPools.length) {
+ return (
+ <ListEditorView
+ className='thinner-list'
+ filterValue={localEntitlementPoolsListFilter}
+ onFilter={localEntitlementPoolsListFilter => this.setState({localEntitlementPoolsListFilter})}>
+ {this.filterAssociatedItems(selectedEntitlementPools, localEntitlementPoolsListFilter)
+ .map(entitlementPool => this.renderAssociatedListItem(entitlementPool
+ , FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.ENTITLEMENT_POOLS))}
+ </ListEditorView>
+ );
+ }
+ else {
+ return (
+ <div>
+ <br/>{i18n('There are currently no entitlement pools associated with this feature group. Click "Available Entitlement Pools" to associate.')}
+ </div>
+ );
+ }
+ case FeatureGroupStateConstants.SELECTED_ENTITLEMENT_POOLS_BUTTONTAB.AVAILABLE_ENTITLEMENT_POOLS:
+ return (
+ <DualListboxView
+ filterTitle={dualBoxTitle}
+ selectedValuesList={entitlementPoolsIds}
+ availableList={entitlementPoolsList}
+ onChange={ selectedValuesList => this.props.onDataChanged( { entitlementPoolsIds: selectedValuesList } )}/>
+ );
+ }
+ }
+ }
+
+ renderLicenseKeyGroupsTabContent(selectedFeatureGroupsButtonTab) {
+ const {licenseKeyGroupsList = [], data: {licenseKeyGroupsIds = []}} = this.props;
+ let dualBoxFilterTitle = {
+ left: i18n('Available License Key Groups'),
+ right: i18n('Selected License Key Groups')
+ };
+
+ if (licenseKeyGroupsList.length) {
+ const {localLicenseKeyGroupsListFilter} = this.state;
+ let selectedLicenseKeyGroups = licenseKeyGroupsIds.map(licenseKeyGroupId => licenseKeyGroupsList.find(licenseKeyGroup => licenseKeyGroup.id === licenseKeyGroupId));
+
+ switch (selectedFeatureGroupsButtonTab) {
+ case FeatureGroupStateConstants.SELECTED_LICENSE_KEY_GROUPS_BUTTONTAB.ASSOCIATED_LICENSE_KEY_GROUPS:
+ if (selectedLicenseKeyGroups.length) {
+ return (
+ <ListEditorView
+ className='thinner-list'
+ filterValue={localLicenseKeyGroupsListFilter}
+ onFilter={localLicenseKeyGroupsListFilter => this.setState({localLicenseKeyGroupsListFilter})}>
+ {this.filterAssociatedItems(selectedLicenseKeyGroups, localLicenseKeyGroupsListFilter)
+ .map(licenseKeyGroup => this.renderAssociatedListItem(licenseKeyGroup
+ , FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.LICENCE_KEY_GROUPS))}
+ </ListEditorView>
+ );
+ } else {
+ return (
+ <div className='no-items-msg'>
+ {i18n('There are currently no license key groups associated with this feature group. Click "Available License Key Groups" to associate.')}
+ </div>
+ );
+ }
+ case FeatureGroupStateConstants.SELECTED_LICENSE_KEY_GROUPS_BUTTONTAB.AVAILABLE_LICENSE_KEY_GROUPS:
+ return (
+ <DualListboxView
+ filterTitle={dualBoxFilterTitle}
+ selectedValuesList={this.props.data.licenseKeyGroupsIds}
+ availableList={this.props.licenseKeyGroupsList}
+ onChange={ selectedValuesList => this.props.onDataChanged( { licenseKeyGroupsIds: selectedValuesList } )}/>
+ );
+ }
+ }
+ }
+
+
+ renderAssociatedListItem(listItem, itemType) {
+ let {isReadOnlyMode} = this.props;
+ return (
+ <ListEditorViewItem
+ key={listItem.id}
+ onDelete={() => this.deleteAssociatedItem(listItem.id, itemType)}
+ isReadOnlyMode={isReadOnlyMode}>
+ <div className='name'>{listItem.name}</div>
+ <div className='description'>{listItem.description}</div>
+ </ListEditorViewItem>
+ );
+ }
+
+ filterAssociatedItems(list, localList) {
+ if (localList) {
+ const filter = new RegExp(escape(localList), 'i');
+ return list.filter(({name = '', description = ''}) => name.match(filter) || description.match(filter));
+ }
+ else {
+ return list;
+ }
+ }
+
+ deleteAssociatedItem(id, type) {
+ const {data: {licenseKeyGroupsIds = [], entitlementPoolsIds = []}} = this.props;
+ if (type === FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.LICENCE_KEY_GROUPS) {
+ this.props.onDataChanged({licenseKeyGroupsIds: licenseKeyGroupsIds.filter(listId => listId !== id)});
+ } else {
+ this.props.onDataChanged({entitlementPoolsIds: entitlementPoolsIds.filter(listId => listId !== id)});
+ }
+
+ }
+}
+
+
+export default FeatureGroupEditorView;
+