path: root/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorView.jsx

/*!
 * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
 * or implied. See the License for the specific language governing
 * permissions and limitations under the License.
 */
import React from 'react';
import PropTypes from 'prop-types';
import i18n from 'nfvo-utils/i18n/i18n.js';
import Validator from 'nfvo-utils/Validator.js';

import Tabs from 'sdc-ui/lib/react/Tabs.js';
import Tab from 'sdc-ui/lib/react/Tab.js';

import Button from 'sdc-ui/lib/react/Button.js';
import Form from 'nfvo-components/input/validation/Form.jsx';
import Input from 'nfvo-components/input/validation/Input.jsx';
import GridSection from 'nfvo-components/grid/GridSection.jsx';
import GridItem from 'nfvo-components/grid/GridItem.jsx';
import {optionsInputValues as licenseKeyGroupOptionsInputValues, LKG_FORM_NAME, tabIds} from './LicenseKeyGroupsConstants.js';
import {optionsInputValues as LicenseModelOptionsInputValues} from '../LicenseModelConstants.js';
import {validateStartDate, thresholdValueValidation} from '../LicenseModelValidations.js';
import {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx';
import InputOptions from 'nfvo-components/input/validation/InputOptions.jsx';

import {DATE_FORMAT} from 'sdc-app/onboarding/OnboardingConstants.js';

import LicenseKeyGroupsLimits from './LicenseKeyGroupsLimits.js';
import {limitType, NEW_LIMIT_TEMP_ID} from '../limits/LimitEditorConstants.js';

 const LicenseKeyGroupPropType = PropTypes.shape({
	id: PropTypes.string,
	name: PropTypes.string,
	description: PropTypes.string,
	increments: PropTypes.string,
	operationalScope: PropTypes.shape({
		choices: PropTypes.array,
		other: PropTypes.string
	}),
	type: PropTypes.string,
	 thresholdUnits: PropTypes.string,
	 thresholdValue: PropTypes.number,
	 startDate: PropTypes.string,
	 expiryDate: PropTypes.string
});

const LicenseKeyGroupFormContent = ({data, onDataChanged, genericFieldInfo, validateName, validateStartDate, thresholdValueValidation}) => {
	let {name, description, increments, operationalScope, type, thresholdUnits, thresholdValue, startDate, expiryDate} = data;
	return (
		<GridSection hasLostColSet>
			<GridItem colSpan={2}>
				<Input
					onChange={name => onDataChanged({name}, LKG_FORM_NAME, {name: validateName})}
					label={i18n('Name')}
					data-test-id='create-lkg-name'
					value={name}
					isValid={genericFieldInfo.name.isValid}
					errorText={genericFieldInfo.name.errorText}
					isRequired={true}
					type='text'/>
			</GridItem>
			<GridItem colSpan={2} lastColInRow>
				<InputOptions
					onInputChange={()=>{}}
					isMultiSelect={true}
					onEnumChange={operationalScope => onDataChanged({operationalScope:{choices: operationalScope, other: ''}},
						LKG_FORM_NAME)}
					onOtherChange={operationalScope => onDataChanged({operationalScope:{choices: [optionInputOther.OTHER],
						other: operationalScope}}, LKG_FORM_NAME)}
					label={i18n('Operational Scope')}
					data-test-id='create-lkg-operational-scope'
					type='select'
					multiSelectedEnum={operationalScope && operationalScope.choices}
					otherValue={operationalScope && operationalScope.other}
					values={licenseKeyGroupOptionsInputValues.OPERATIONAL_SCOPE}
					isValid={genericFieldInfo.operationalScope.isValid}
					errorText={genericFieldInfo.operationalScope.errorText} />
			</GridItem>
			<GridItem colSpan={2}>
				<Input
					onChange={description => onDataChanged({description}, LKG_FORM_NAME)}
					label={i18n('Description')}
					data-test-id='create-lkg-description'
					value={description}
					isValid={genericFieldInfo.description.isValid}
					errorText={genericFieldInfo.description.errorText}
					type='textarea'
					overlayPos='bottom' />
			</GridItem>
			<GridItem colSpan={2} lastColInRow>
				<Input
					isRequired={true}
					onChange={e => { const selectedIndex = e.target.selectedIndex;
						const val = e.target.options[selectedIndex].value;
						onDataChanged({type: val}, LKG_FORM_NAME);}}
					value={type}
					label={i18n('Type')}
					data-test-id='create-lkg-type'
					isValid={genericFieldInfo.type.isValid}
					errorText={genericFieldInfo.type.errorText}
					groupClassName='bootstrap-input-options'
					className='input-options-select'
					overlayPos='bottom'
					type='select' >
					{
						licenseKeyGroupOptionsInputValues.TYPE.map(type =>
						(<option key={type.enum} value={type.enum}>{type.title}</option>))
					}
				</Input>
			</GridItem>
			<GridItem>
				<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}, LKG_FORM_NAME);
						// TODO make sure that the value is valid too
						onDataChanged({thresholdValue: thresholdValue}, LKG_FORM_NAME,{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>
			</GridItem>
			<GridItem>
				<Input
					className='entitlement-pools-form-row-threshold-value'
					onChange={thresholdValue => onDataChanged({thresholdValue}, LKG_FORM_NAME,
						{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'/>
			</GridItem>
				<GridItem>
				<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) : ''},
						LKG_FORM_NAME,
						{startDate: validateStartDate}
					)}
					isValid={genericFieldInfo.startDate.isValid}
					errorText={genericFieldInfo.startDate.errorText}
					selectsStart/>
			</GridItem>
			<GridItem lastColInRow>
				<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) : ''}, LKG_FORM_NAME);
						onDataChanged({startDate}, LKG_FORM_NAME, {startDate: validateStartDate});
					}}
					isValid={genericFieldInfo.expiryDate.isValid}
					errorText={genericFieldInfo.expiryDate.errorText}
					selectsEnd/>
			</GridItem>
			<GridItem colSpan={2}>
				<Input
					onChange={increments => onDataChanged({increments}, LKG_FORM_NAME)}
					label={i18n('Increments')}
					value={increments}
					data-test-id='create-ep-increments'
					type='text'/>
			</GridItem>
		</GridSection>
	);
};

class LicenseKeyGroupsEditorView extends React.Component {
	static propTypes = {
		data: LicenseKeyGroupPropType,
		previousData: LicenseKeyGroupPropType,
		LKGNames: 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();
		}
	}

	state = {
		localFeatureGroupsListFilter: '',
		selectedTab: tabIds.GENERAL,
		selectedLimit: ''
	};

	render() {
		let {data = {}, onDataChanged, isReadOnlyMode, onCloseLimitEditor, genericFieldInfo, limitsList = []} = this.props;
		let {selectedTab} = this.state;
		const isTabsDisabled = !data.id || !this.props.isFormValid;
		return (
			<div className='license-keygroup-editor'>
				<Tabs
					type='menu'
					activeTab={selectedTab}
					onTabClick={(tabIndex)=>{
						if (tabIndex === tabIds.ADD_LIMIT_BUTTON)  {
							this.onAddLimit();
						} else {
							this.setState({selectedTab: tabIndex});
							onCloseLimitEditor();
							this.setState({selectedLimit: ''});
						}
					}}
					invalidTabs={[]}>
					<Tab tabId={tabIds.GENERAL} data-test-id='general-tab' title={i18n('General')}>
						{ genericFieldInfo &&
							<Form
								ref='validationForm'
								hasButtons={false}
								isValid={this.props.isFormValid}
								formReady={this.props.formReady}
								onValidateForm={() => this.props.onValidateForm(LKG_FORM_NAME) }
								labledButtons={true}
								isReadOnlyMode={isReadOnlyMode}
								className='license-model-form license-key-groups-form'>
									<LicenseKeyGroupFormContent
										data={data}
										onDataChanged={onDataChanged}
										genericFieldInfo={genericFieldInfo}
										validateName={(value)=> this.validateName(value)}
										validateStartDate={(value, state)=> validateStartDate(value, state)}
										thresholdValueValidation={(value, state) => thresholdValueValidation(value, state)}/>
							</Form>}

					</Tab>
					<Tab tabId={tabIds.SP_LIMITS} disabled={isTabsDisabled} data-test-id='general-tab' title={i18n('SP Limits')}>
						{selectedTab === tabIds.SP_LIMITS &&
							<LicenseKeyGroupsLimits 
								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)}
								isReadOnlyMode={isReadOnlyMode} />}
					</Tab>
					<Tab tabId={tabIds.VENDOR_LIMITS} disabled={isTabsDisabled} data-test-id='general-tab' title={i18n('Vendor Limits')}>
						{selectedTab === tabIds.VENDOR_LIMITS && 
							<LicenseKeyGroupsLimits 
								limitType={limitType.VENDOR} 
								limitsList={limitsList.filter(item => item.type === limitType.VENDOR)}
								selectedLimit={this.state.selectedLimit}
								onCloseLimitEditor={() => this.onCloseLimitEditor()}
								onSelectLimit={limit => this.onSelectLimit(limit)}
								isReadOnlyMode={isReadOnlyMode} />}
					</Tab>
					{selectedTab !== tabIds.GENERAL ? 
							<Button
								className='add-limit-button'
								tabId={tabIds.ADD_LIMIT_BUTTON}
								btnType='link'
								iconName='plus'
								disabled={this.state.selectedLimit || isReadOnlyMode}>
								{i18n('Add Limit')}
							</Button>
						:
							<div></div> // Render empty div to not break tabs
					}
				</Tabs>

				<GridSection className='license-model-modal-buttons license-key-group-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>

		);
	}

	submit() {
		const {data: licenseKeyGroup, previousData: previousLicenseKeyGroup, formReady, onValidateForm, onSubmit} = this.props;
		if (!formReady) {
			onValidateForm(LKG_FORM_NAME);
		} else {
			onSubmit({licenseKeyGroup, previousLicenseKeyGroup});
		}
	}

	validateName(value) {
		const {data: {id}, LKGNames} = this.props;
		const isExists = Validator.isItemNameAlreadyExistsInList({itemId: id, itemName: value, list: LKGNames});

		return !isExists ?  {isValid: true, errorText: ''} :
			{isValid: false, errorText: i18n('License key group by the name \'' + value + '\' already exists. License key group name must be unique')};
	}

	onSelectLimit(limit) {
		if (limit.id === this.state.selectedLimit) {
			this.setState({selectedLimit: ''});
			return;
		}
		this.setState({selectedLimit: limit.id});
		this.props.onOpenLimitEditor(limit);
	}

	onCloseLimitEditor() {
		this.setState({selectedLimit: ''});
		this.props.onCloseLimitEditor();
	}

	onAddLimit() {
		this.setState({selectedLimit: NEW_LIMIT_TEMP_ID});
		this.props.onOpenLimitEditor();
	}
}

export default LicenseKeyGroupsEditorView;