openecomp-ui/src/sdc-app/onboarding/OnboardingCatalogView.jsx

   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';
  10
  11 export const catalogItemTypes = Object.freeze({
  12         LICENSE_MODEL: 'license-model',
  13         SOFTWARE_PRODUCT: 'software-product'
  14 });
  15
  16 const catalogItemTypeClasses = {
  17         LICENSE_MODEL: 'license-model-type',
  18         SOFTWARE_PRODUCT: 'software-product-type'
  19 };
  20
  21 class OnboardingCatalogView extends React.Component {
  22
  23         constructor(props) {
  24                 super(props);
  25                 this.state = {searchValue: ''};
  26                 this.handleSearch = this.handleSearch.bind(this);
  27         }
  28
  29         handleSearch(event){
  30                 this.setState({searchValue: event.target.value});
  31         }
  32
  33         static propTypes = {
  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
  41         };
  42
  43         getModalDetails() {
  44                 const {modalToShow} = this.props;
  45                 switch (modalToShow) {
  46                         case catalogItemTypes.LICENSE_MODEL:
  47                                 return {
  48                                         title: i18n('New License Model'),
  49                                         element: <LicenseModelCreation/>
  50                                 };
  51                         case catalogItemTypes.SOFTWARE_PRODUCT:
  52                                 return {
  53                                         title: i18n('New Software Product'),
  54                                         element: <SoftwareProductCreation/>
  55                                 };
  56                 }
  57         }
  58
  59         render() {
  60                 const modalDetails = this.getModalDetails();
  61                 const {licenseModelList, softwareProductList, onSelectLicenseModel, onSelectSoftwareProduct, onAddLicenseModelClick, onAddSoftwareProductClick, modalToShow} = this.props;
  62
  63                 return (
  64                         <div className='catalog-view'>
  65                                 <div className='catalog-header'>
  66                                         <div className='catalog-header-title'>{i18n('Onboarding Catalog')}</div>
  67                                         <ExpandableInput
  68                                                 onChange={this.handleSearch}
  69                                                 iconType='search'/>
  70                                 </div>
  71                                 <div className='catalog-list'>
  72
  73                                         <div className='create-catalog-item tile'>
  74                                                 <div className='plus-section'>
  75                                                         <div className='plus-icon-button'/>
  76                                                         <span>{i18n('ADD')}</span>
  77                                                 </div>
  78                                                 <div className='primary-btn new-license-model'>
  79                                                         <span
  80                                                                 className='primary-btn-text'
  81                                                                 onClick={() => onAddLicenseModelClick()}>{i18n('New License Model')}</span></div>
  82                                                 <div className='primary-btn'>
  83                                                         <span
  84                                                                 className='primary-btn-text'
  85                                                                 onClick={() => onAddSoftwareProductClick()}>{i18n('New Vendor Software Product')}</span>
  86                                                 </div>
  87                                         </div>
  88                                         {licenseModelList.filter(vlm => vlm.vendorName.toLowerCase().indexOf(this.state.searchValue.toLowerCase()) > -1).map(licenseModel => this.renderTile(
  89                                                 {
  90                                                         ...licenseModel,
  91                                                         name: licenseModel.vendorName
  92                                                 },
  93                                                 catalogItemTypeClasses.LICENSE_MODEL,
  94                                                 () => onSelectLicenseModel(licenseModel))
  95                                         )}
  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))
  99                                         )}
 100                                 </div>
 101                                 <Modal
 102                                         show={Boolean(modalDetails)}
 103                                         className={`${this.getCatalogItemTypeClassByItemType(modalToShow)}-modal`}>
 104                                         <Modal.Header>
 105                                                 <Modal.Title>{modalDetails && modalDetails.title}</Modal.Title>
 106                                         </Modal.Header>
 107                                         <Modal.Body>
 108                                                 {
 109                                                         modalDetails && modalDetails.element
 110                                                 }
 111                                         </Modal.Body>
 112                                 </Modal>
 113                         </div>
 114                 );
 115
 116         }
 117
 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;
 124                 }
 125         }
 126
 127         renderTile(catalogItemData, catalogItemTypeClass, onSelect) {
 128                 let {status: itemStatus} = VersionControllerUtils.getCheckOutStatusKindByUserID(catalogItemData.status, catalogItemData.lockingUser);
 129                 return (
 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>
 134                                 </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>
 139                                         </div>
 140                                         <div className={classnames('catalog-tile-check-in-status', {'sprite-new checkout-editable-status-icon': itemStatus === 'Locked'})}>
 141                                         </div>
 142                                 </div>
 143                         </div>
 144                 );
 145         }
 146 }
 147 export default OnboardingCatalogView;