openecomp-ui/src/sdc-app/ModulesOptions.jsx

import React from 'react';
import {connect} from 'react-redux';
import Input from 'react-bootstrap/lib/Input.js';

import LicenseModelActionHelper from './onboarding/licenseModel/LicenseModelActionHelper.js';
import LicenseAgreementListEditor from './onboarding/licenseModel/licenseAgreement/LicenseAgreementListEditor.js';
import LicenseAgreementActionHelper from './onboarding/licenseModel/licenseAgreement/LicenseAgreementActionHelper.js';
import FeatureGroupListEditor from './onboarding/licenseModel/featureGroups/FeatureGroupListEditor.js';
import FeatureGroupsActionHelper from './onboarding/licenseModel/featureGroups/FeatureGroupsActionHelper.js';
import LicenseKeyGroupsListEditor from './onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditor.js';
import LicenseKeyGroupsActionHelper from './onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsActionHelper.js';
import EntitlementPoolsListEditor from './onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditor.js';
import EntitlementPoolsActionHelper from './onboarding/licenseModel/entitlementPools/EntitlementPoolsActionHelper.js';
import SoftwareProductLandingPage  from './onboarding/softwareProduct/landingPage/SoftwareProductLandingPage.js';
import SoftwareProductDetails  from './onboarding/softwareProduct/details/SoftwareProductDetails.js';
import OnboardingCatalog from './onboarding/OnboardingCatalog.js';
import SoftwareProductActionHelper from './onboarding/softwareProduct/SoftwareProductActionHelper.js';
import FlowsListEditor from './flows/FlowsListEditor.js';
import FlowsActions from './flows/FlowsActions.js';


const mapStateToProps = ({licenseModelList}) => {
	return {licenseModelList};
};


const mapActionsToProps = dispatch => {
	return {
		onBootstrapped: () => LicenseModelActionHelper.fetchLicenseModels(dispatch),
		onLicenseAgreementListEditor: licenseModelId => LicenseAgreementActionHelper.fetchLicenseAgreementList(dispatch, {licenseModelId}),
		onFeatureGroupsListEditor: licenseModelId => FeatureGroupsActionHelper.fetchFeatureGroupsList(dispatch, {licenseModelId}),
		onLicenseKeyGroupsListEditor: licenseModelId =>LicenseKeyGroupsActionHelper.fetchLicenseKeyGroupsList(dispatch, {licenseModelId}),
		onEntitlementPoolsListEditor: licenseModelId => EntitlementPoolsActionHelper.fetchEntitlementPoolsList(dispatch, {licenseModelId}),
		onOnboardingCatalog: () => SoftwareProductActionHelper.fetchSoftwareProductList(dispatch),
		onSoftwareProductDetails: () => SoftwareProductActionHelper.fetchSoftwareProductCategories(dispatch),
		onFlowsListEditor: () => FlowsActions.fetchFlows(dispatch)
	};
};

class ModuleOptions extends React.Component {

	static propTypes = {
		onBootstrapped: React.PropTypes.func.isRequired,
		onLicenseAgreementListEditor: React.PropTypes.func.isRequired,
		onFeatureGroupsListEditor: React.PropTypes.func.isRequired,
		onLicenseKeyGroupsListEditor: React.PropTypes.func.isRequired,
		onEntitlementPoolsListEditor: React.PropTypes.func.isRequired,
		onOnboardingCatalog: React.PropTypes.func.isRequired,
		onSoftwareProductDetails: React.PropTypes.func.isRequired,
	};

	state = {
		currentModule: localStorage.getItem('default-module'),
		licenseModelId: localStorage.getItem('default-license-model-id')
	};

	componentDidMount() {
		this.props.onBootstrapped();
	}

	render() {
		let {currentModule, licenseModelId} = this.state;
		let {licenseModelList} = this.props;
		return (
			<div style={{marginTop:20}}>
				<Input
					name='licenseModel'
					value={licenseModelId}
					ref='licenseModelId'
					type='select'
					onChange={this.handleLicenseModelIdChange}
					className='inner-pagination select-input'>
					<option value='' key={null}>Select License Model</option>
					{
						licenseModelList.map(({id, vendorName}) => <option value={id} key={id}>{`${vendorName} License Model`}</option>)
					}
				</Input>
				<Input
					name='currentView'
					value={currentModule}
					ref='selectedModule'
					type='select'
					onChange={this.handleModuleSelection}
					className='inner-pagination select-input'>
					<option value=''>Select Module</option>
					<option value='EntitlementPoolsListEditor'>Entitlement Pools</option>
					<option value='LicenseAgreementListEditor'>License Agreements</option>
					<option value='FutureGroupListEditor'>Feature Groups</option>
					<option value='LicenseKeyGroupsListEditor'>License Key Groups</option>
					<option value='SoftwareProductLanding'>Software Product Landing</option>
					<option value='SoftwareProductDetails'>Software Product Details</option>
					<option value='OnboardingCatalog'>Onboarding Catalog</option>
					<option value='Flows'>Flows</option>
				</Input>
				<div className='sub-module-view' style={{paddingTop: 10, margin: 4, borderTop: '1px solid silver'}}>
					{this.renderModule(currentModule)}
				</div>
			</div>
		);
	}

	renderModule(currentModule) {
		const {licenseModelId} = this.state;
		if (!licenseModelId) {
			return;
		}

		switch (currentModule) {
			case 'LicenseAgreementListEditor':
				this.props.onLicenseAgreementListEditor(licenseModelId);
				return <LicenseAgreementListEditor licenseModelId={licenseModelId}/>;
			case 'FutureGroupListEditor':
				this.props.onFeatureGroupsListEditor(licenseModelId);
				return <FeatureGroupListEditor licenseModelId={licenseModelId}/>;
			case 'EntitlementPoolsListEditor':
				this.props.onEntitlementPoolsListEditor(licenseModelId);
				return <EntitlementPoolsListEditor licenseModelId={licenseModelId}/>;
			case 'LicenseKeyGroupsListEditor':
				this.props.onLicenseKeyGroupsListEditor(licenseModelId);
				return <LicenseKeyGroupsListEditor licenseModelId={licenseModelId}/>;
			case 'SoftwareProductLanding':
				return <SoftwareProductLandingPage licenseModelId={licenseModelId}/>;
			case 'SoftwareProductDetails':
				this.props.onSoftwareProductDetails(licenseModelId);
				return <SoftwareProductDetails licenseModelId={licenseModelId}/>;
			case 'OnboardingCatalog':
				this.props.onOnboardingCatalog();
				return <OnboardingCatalog/>;
			case 'Flows':
				this.props.onFlowsListEditor();
				return <FlowsListEditor/>;
			default:
				return;
		}
	}

	handleModuleSelection = () => {
		let selectedModule = this.refs.selectedModule.getValue();
		localStorage.setItem('default-module', selectedModule);
		this.setState({currentModule: selectedModule});
	}

	handleLicenseModelIdChange = () => {
		let licenseModelId = this.refs.licenseModelId.getValue();
		localStorage.setItem('default-license-model-id', licenseModelId);
		this.setState({licenseModelId});
	}
}

export default connect(mapStateToProps, mapActionsToProps)(ModuleOptions);