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;
+