/*!
* 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 classnames from 'classnames';
import Dropzone from 'react-dropzone';
import i18n from 'nfvo-utils/i18n/i18n.js';
import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
import ListEditorItemViewField from 'nfvo-components/listEditor/ListEditorItemViewField.jsx';
import SVGIcon from 'nfvo-components/icon/SVGIcon.jsx';
const SoftwareProductPropType = React.PropTypes.shape({
name: React.PropTypes.string,
description: React.PropTypes.string,
version: React.PropTypes.object,
id: React.PropTypes.string,
categoryId: React.PropTypes.string,
vendorId: React.PropTypes.string,
status: React.PropTypes.string,
licensingData: React.PropTypes.object,
validationData: React.PropTypes.object
});
const ComponentPropType = React.PropTypes.shape({
id: React.PropTypes.string,
name: React.PropTypes.string,
displayName: React.PropTypes.string,
description: React.PropTypes.string
});
class SoftwareProductLandingPageView extends React.Component {
state = {
localFilter: '',
fileName: '',
dragging: false,
files: []
};
static propTypes = {
currentSoftwareProduct: SoftwareProductPropType,
isReadOnlyMode: React.PropTypes.bool,
componentsList: React.PropTypes.arrayOf(ComponentPropType),
onDetailsSelect: React.PropTypes.func,
onAttachmentsSelect: React.PropTypes.func,
onUpload: React.PropTypes.func,
onUploadConfirmation: React.PropTypes.func,
onInvalidFileSizeUpload: React.PropTypes.func,
onComponentSelect: React.PropTypes.func,
onAddComponent: React.PropTypes.func
};
render() {
let {currentSoftwareProduct, isReadOnlyMode, componentsList = []} = this.props;
return (
this.handleImportSubmit(files, isReadOnlyMode)}
onDragEnter={() => this.handleOnDragEnter(isReadOnlyMode)}
onDragLeave={() => this.setState({dragging:false})}
multiple={false}
disableClick={true}
ref='fileInput'
name='fileInput'
accept='.zip'
disabled>
{this.renderProductSummary(currentSoftwareProduct)}
{this.renderProductDetails(currentSoftwareProduct, isReadOnlyMode)}
{
componentsList.length > 0 && this.renderComponents()
}
);
}
handleOnDragEnter(isReadOnlyMode) {
if (!isReadOnlyMode) {
this.setState({dragging: true});
}
}
renderProductSummary(currentSoftwareProduct) {
let {name = '', description = '', vendorName = '', fullCategoryDisplayName = '', licenseAgreementName = ''} = currentSoftwareProduct;
let {onDetailsSelect} = this.props;
return (
{i18n('Software Product Details')}
onDetailsSelect(currentSoftwareProduct)}>
{i18n('Vendor')}
{vendorName}
{i18n('Category')}
{fullCategoryDisplayName}
{i18n('License Agreement')}
{this.renderLicenseAgreement(licenseAgreementName)}
{i18n('Description')}
{description}
);
}
renderProductDetails(currentSoftwareProduct, isReadOnlyMode) {
let {validationData} = currentSoftwareProduct;
let {onAttachmentsSelect} = this.props;
let details = {
heatTemplates: validationData ? '1' : '0',
images: '0',
otherArtifacts: '0'
};
return (
{i18n('Software Product Attachments')}
onAttachmentsSelect(currentSoftwareProduct)}>
{i18n('HEAT Templates')} ({details.heatTemplates})
{i18n('Drag & drop for upload')}
{i18n('or')}
this.refs.fileInput.open()}>
{i18n('Select file')}
);
}
renderComponents() {
const {localFilter} = this.state;
return (
this.setState({localFilter: value})}
twoColumns>
{this.filterList().map(component => this.renderComponentsListItem(component))}
);
}
renderComponentsListItem(component) {
let {id: componentId, name, displayName, description = ''} = component;
let {currentSoftwareProduct: {id}, onComponentSelect} = this.props;
return (
onComponentSelect({id, componentId})}>
{displayName}
{description}
);
}
renderLicenseAgreement(licenseAgreementName) {
if (licenseAgreementName !== null && !licenseAgreementName) {
return ();
}
return (licenseAgreementName);
}
filterList() {
let {componentsList = []} = this.props;
let {localFilter} = this.state;
if (localFilter.trim()) {
const filter = new RegExp(escape(localFilter), 'i');
return componentsList.filter(({displayName = '', description = ''}) => {
return escape(displayName).match(filter) || escape(description).match(filter);
});
}
else {
return componentsList;
}
}
handleImportSubmit(files, isReadOnlyMode) {
if (isReadOnlyMode) {
return;
}
if (files[0] && files[0].size) {
this.setState({
fileName: files[0].name,
dragging: false,
complete: '0',
});
this.startUploading(files);
}
else {
this.setState({
dragging: false
});
this.props.onInvalidFileSizeUpload();
}
}
startUploading(files) {
let {onUpload, currentSoftwareProduct, onUploadConfirmation} = this.props;
let {validationData} = currentSoftwareProduct;
if (!(files && files.length)) {
return;
}
let file = files[0];
let formData = new FormData();
formData.append('upload', file);
this.refs.fileInput.value = '';
if (validationData) {
onUploadConfirmation(currentSoftwareProduct.id, formData);
}else {
onUpload(currentSoftwareProduct.id, formData);
}
}
}
export default SoftwareProductLandingPageView;