1 import React from 'react';
2 import i18n from 'nfvo-utils/i18n/i18n.js';
3 import Modal from 'nfvo-components/modal/Modal.jsx';
4 import objectValues from 'lodash/values.js';
5 import LicenseModelCreation from './licenseModel/creation/LicenseModelCreation.js';
6 import SoftwareProductCreation from './softwareProduct/creation/SoftwareProductCreation.js';
7 import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js';
8 import classnames from 'classnames';
9 import ExpandableInput from 'nfvo-components/input/ExpandableInput.jsx';
11 export const catalogItemTypes = Object.freeze({
12 LICENSE_MODEL: 'license-model',
13 SOFTWARE_PRODUCT: 'software-product'
16 const catalogItemTypeClasses = {
17 LICENSE_MODEL: 'license-model-type',
18 SOFTWARE_PRODUCT: 'software-product-type'
21 class OnboardingCatalogView extends React.Component {
25 this.state = {searchValue: ''};
26 this.handleSearch = this.handleSearch.bind(this);
30 this.setState({searchValue: event.target.value});
34 licenseModelList: React.PropTypes.array,
35 softwareProductList: React.PropTypes.array,
36 modalToShow: React.PropTypes.oneOf(objectValues(catalogItemTypes)),
37 onSelectLicenseModel: React.PropTypes.func.isRequired,
38 onSelectSoftwareProduct: React.PropTypes.func.isRequired,
39 onAddLicenseModelClick: React.PropTypes.func.isRequired,
40 onAddSoftwareProductClick: React.PropTypes.func.isRequired
44 const {modalToShow} = this.props;
45 switch (modalToShow) {
46 case catalogItemTypes.LICENSE_MODEL:
48 title: i18n('New License Model'),
49 element: <LicenseModelCreation/>
51 case catalogItemTypes.SOFTWARE_PRODUCT:
53 title: i18n('New Software Product'),
54 element: <SoftwareProductCreation/>
60 const modalDetails = this.getModalDetails();
61 const {licenseModelList, softwareProductList, onSelectLicenseModel, onSelectSoftwareProduct, onAddLicenseModelClick, onAddSoftwareProductClick, modalToShow} = this.props;
64 <div className='catalog-view'>
65 <div className='catalog-header'>
66 <div className='catalog-header-title'>{i18n('Onboarding Catalog')}</div>
68 onChange={this.handleSearch}
71 <div className='catalog-list'>
73 <div className='create-catalog-item tile'>
74 <div className='plus-section'>
75 <div className='plus-icon-button'/>
76 <span>{i18n('ADD')}</span>
78 <div className='primary-btn new-license-model'>
80 className='primary-btn-text'
81 onClick={() => onAddLicenseModelClick()}>{i18n('New License Model')}</span></div>
82 <div className='primary-btn'>
84 className='primary-btn-text'
85 onClick={() => onAddSoftwareProductClick()}>{i18n('New Vendor Software Product')}</span>
88 {licenseModelList.filter(vlm => vlm.vendorName.toLowerCase().indexOf(this.state.searchValue.toLowerCase()) > -1).map(licenseModel => this.renderTile(
91 name: licenseModel.vendorName
93 catalogItemTypeClasses.LICENSE_MODEL,
94 () => onSelectLicenseModel(licenseModel))
96 {softwareProductList.filter(vsp => vsp.name.toLowerCase().indexOf(this.state.searchValue.toLowerCase()) > -1).map(softwareProduct => this.renderTile(softwareProduct,
97 catalogItemTypeClasses.SOFTWARE_PRODUCT,
98 () => onSelectSoftwareProduct(softwareProduct))
102 show={Boolean(modalDetails)}
103 className={`${this.getCatalogItemTypeClassByItemType(modalToShow)}-modal`}>
105 <Modal.Title>{modalDetails && modalDetails.title}</Modal.Title>
109 modalDetails && modalDetails.element
118 getCatalogItemTypeClassByItemType(catalogItemType) {
119 switch (catalogItemType) {
120 case catalogItemTypes.LICENSE_MODEL:
121 return catalogItemTypeClasses.LICENSE_MODEL;
122 case catalogItemTypes.SOFTWARE_PRODUCT:
123 return catalogItemTypeClasses.SOFTWARE_PRODUCT;
127 renderTile(catalogItemData, catalogItemTypeClass, onSelect) {
128 let {status: itemStatus} = VersionControllerUtils.getCheckOutStatusKindByUserID(catalogItemData.status, catalogItemData.lockingUser);
130 <div className='catalog-tile tile' key={catalogItemData.id} onClick={() => onSelect()}>
131 <div className={`catalog-tile-type ${catalogItemTypeClass}`}/>
132 <div className='catalog-tile-icon'>
133 <div className={`icon ${catalogItemTypeClass}-icon`}></div>
135 <div className='catalog-tile-content'>
136 <div className='catalog-tile-item-details'>
137 <div className='catalog-tile-item-name'>{catalogItemData.name}</div>
138 <div className='catalog-tile-item-version'>V {catalogItemData.version}</div>
140 <div className={classnames('catalog-tile-check-in-status', {'sprite-new checkout-editable-status-icon': itemStatus === 'Locked'})}>
147 export default OnboardingCatalogView;