summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/sdc-app/onboarding/OnboardingCatalogView.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/OnboardingCatalogView.jsx')
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/OnboardingCatalogView.jsx147
1 files changed, 147 insertions, 0 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/OnboardingCatalogView.jsx b/openecomp-ui/src/sdc-app/onboarding/OnboardingCatalogView.jsx
new file mode 100644
index 0000000000..f2a9db1342
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/OnboardingCatalogView.jsx
@@ -0,0 +1,147 @@
+import React from 'react';
+import i18n from 'nfvo-utils/i18n/i18n.js';
+import Modal from 'nfvo-components/modal/Modal.jsx';
+import objectValues from 'lodash/values.js';
+import LicenseModelCreation from './licenseModel/creation/LicenseModelCreation.js';
+import SoftwareProductCreation from './softwareProduct/creation/SoftwareProductCreation.js';
+import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js';
+import classnames from 'classnames';
+import ExpandableInput from 'nfvo-components/input/ExpandableInput.jsx';
+
+export const catalogItemTypes = Object.freeze({
+ LICENSE_MODEL: 'license-model',
+ SOFTWARE_PRODUCT: 'software-product'
+});
+
+const catalogItemTypeClasses = {
+ LICENSE_MODEL: 'license-model-type',
+ SOFTWARE_PRODUCT: 'software-product-type'
+};
+
+class OnboardingCatalogView extends React.Component {
+
+ constructor(props) {
+ super(props);
+ this.state = {searchValue: ''};
+ this.handleSearch = this.handleSearch.bind(this);
+ }
+
+ handleSearch(event){
+ this.setState({searchValue: event.target.value});
+ }
+
+ static propTypes = {
+ licenseModelList: React.PropTypes.array,
+ softwareProductList: React.PropTypes.array,
+ modalToShow: React.PropTypes.oneOf(objectValues(catalogItemTypes)),
+ onSelectLicenseModel: React.PropTypes.func.isRequired,
+ onSelectSoftwareProduct: React.PropTypes.func.isRequired,
+ onAddLicenseModelClick: React.PropTypes.func.isRequired,
+ onAddSoftwareProductClick: React.PropTypes.func.isRequired
+ };
+
+ getModalDetails() {
+ const {modalToShow} = this.props;
+ switch (modalToShow) {
+ case catalogItemTypes.LICENSE_MODEL:
+ return {
+ title: i18n('New License Model'),
+ element: <LicenseModelCreation/>
+ };
+ case catalogItemTypes.SOFTWARE_PRODUCT:
+ return {
+ title: i18n('New Software Product'),
+ element: <SoftwareProductCreation/>
+ };
+ }
+ }
+
+ render() {
+ const modalDetails = this.getModalDetails();
+ const {licenseModelList, softwareProductList, onSelectLicenseModel, onSelectSoftwareProduct, onAddLicenseModelClick, onAddSoftwareProductClick, modalToShow} = this.props;
+
+ return (
+ <div className='catalog-view'>
+ <div className='catalog-header'>
+ <div className='catalog-header-title'>{i18n('Onboarding Catalog')}</div>
+ <ExpandableInput
+ onChange={this.handleSearch}
+ iconType='search'/>
+ </div>
+ <div className='catalog-list'>
+
+ <div className='create-catalog-item tile'>
+ <div className='plus-section'>
+ <div className='plus-icon-button'/>
+ <span>{i18n('ADD')}</span>
+ </div>
+ <div className='primary-btn new-license-model'>
+ <span
+ className='primary-btn-text'
+ onClick={() => onAddLicenseModelClick()}>{i18n('New License Model')}</span></div>
+ <div className='primary-btn'>
+ <span
+ className='primary-btn-text'
+ onClick={() => onAddSoftwareProductClick()}>{i18n('New Vendor Software Product')}</span>
+ </div>
+ </div>
+ {licenseModelList.filter(vlm => vlm.vendorName.toLowerCase().indexOf(this.state.searchValue.toLowerCase()) > -1).map(licenseModel => this.renderTile(
+ {
+ ...licenseModel,
+ name: licenseModel.vendorName
+ },
+ catalogItemTypeClasses.LICENSE_MODEL,
+ () => onSelectLicenseModel(licenseModel))
+ )}
+ {softwareProductList.filter(vsp => vsp.name.toLowerCase().indexOf(this.state.searchValue.toLowerCase()) > -1).map(softwareProduct => this.renderTile(softwareProduct,
+ catalogItemTypeClasses.SOFTWARE_PRODUCT,
+ () => onSelectSoftwareProduct(softwareProduct))
+ )}
+ </div>
+ <Modal
+ show={Boolean(modalDetails)}
+ className={`${this.getCatalogItemTypeClassByItemType(modalToShow)}-modal`}>
+ <Modal.Header>
+ <Modal.Title>{modalDetails && modalDetails.title}</Modal.Title>
+ </Modal.Header>
+ <Modal.Body>
+ {
+ modalDetails && modalDetails.element
+ }
+ </Modal.Body>
+ </Modal>
+ </div>
+ );
+
+ }
+
+ getCatalogItemTypeClassByItemType(catalogItemType) {
+ switch (catalogItemType) {
+ case catalogItemTypes.LICENSE_MODEL:
+ return catalogItemTypeClasses.LICENSE_MODEL;
+ case catalogItemTypes.SOFTWARE_PRODUCT:
+ return catalogItemTypeClasses.SOFTWARE_PRODUCT;
+ }
+ }
+
+ renderTile(catalogItemData, catalogItemTypeClass, onSelect) {
+ let {status: itemStatus} = VersionControllerUtils.getCheckOutStatusKindByUserID(catalogItemData.status, catalogItemData.lockingUser);
+ return (
+ <div className='catalog-tile tile' key={catalogItemData.id} onClick={() => onSelect()}>
+ <div className={`catalog-tile-type ${catalogItemTypeClass}`}/>
+ <div className='catalog-tile-icon'>
+ <div className={`icon ${catalogItemTypeClass}-icon`}></div>
+ </div>
+ <div className='catalog-tile-content'>
+ <div className='catalog-tile-item-details'>
+ <div className='catalog-tile-item-name'>{catalogItemData.name}</div>
+ <div className='catalog-tile-item-version'>V {catalogItemData.version}</div>
+ </div>
+ <div className={classnames('catalog-tile-check-in-status', {'sprite-new checkout-editable-status-icon': itemStatus === 'Locked'})}>
+ </div>
+ </div>
+ </div>
+ );
+ }
+}
+export default OnboardingCatalogView;