openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx

   1 import React from 'react';
   2 import classnames from 'classnames';
   3 import i18n from 'nfvo-utils/i18n/i18n.js';
   4
   5 import Navbar from 'react-bootstrap/lib/Navbar.js';
   6 import Nav from 'react-bootstrap/lib/Nav.js';
   7 import ValidationInput from 'nfvo-components/input/validation/ValidationInput.jsx';
   8 import {actionsEnum, statusEnum} from './VersionControllerConstants.js';
   9
  10
  11 class VersionController extends React.Component {
  12
  13         static propTypes = {
  14                 version: React.PropTypes.string,
  15                 viewableVersions: React.PropTypes.array,
  16                 onVersionSwitching: React.PropTypes.func,
  17                 isCheckedOut: React.PropTypes.bool.isRequired,
  18                 status: React.PropTypes.string.isRequired,
  19                 callVCAction: React.PropTypes.func,
  20                 onSave: React.PropTypes.func,
  21                 onClose: React.PropTypes.func,
  22                 isFormDataValid: React.PropTypes.bool
  23         };
  24
  25         render() {
  26                 let {status, isCheckedOut, version = '', viewableVersions = [], onVersionSwitching, callVCAction, onSave, isFormDataValid, onClose} = this.props;
  27                 let isCheckedIn = Boolean(status === statusEnum.CHECK_IN_STATUS);
  28                 let isLatestVersion = Boolean(version === viewableVersions[viewableVersions.length - 1]);
  29                 if (!isLatestVersion) {
  30                         status = statusEnum.PREVIOUS_VERSION;
  31                 }
  32
  33                 return (
  34                         <div className='version-controller-bar'>
  35                                 <Navbar inverse className='navbar'>
  36                                         <Navbar.Collapse>
  37                                                 <Nav className='items-in-left'>
  38                                                         <div className='version-section'>
  39                                                                 <ValidationInput
  40                                                                         type='select'
  41                                                                         selectedEnum={version}
  42                                                                         onEnumChange={value => onVersionSwitching && onVersionSwitching(value)}>
  43                                                                         {viewableVersions && viewableVersions.map(viewVersion => {
  44                                                                                 return (
  45                                                                                         <option key={viewVersion} value={viewVersion}>{`V ${viewVersion}`}</option>
  46                                                                                 );
  47                                                                         })
  48                                                                         }
  49                                                                         {!viewableVersions.includes(version) &&
  50                                                                         <option key={version} value={version}>{`V ${version}`}</option>}
  51                                                                 </ValidationInput>
  52                                                         </div>
  53                                                         <div className='vc-status'>
  54                                                                 <div className='onboarding-status-icon'></div>
  55                                                                 <div className='status-text'> {i18n('ONBOARDING')}
  56                                                                         <div className='status-text-dash'> -</div>
  57                                                                 </div>
  58                                                                 {this.renderStatus(status)}
  59                                                         </div>
  60                                                 </Nav>
  61                                                 <Nav pullRight>
  62                                                         <div className='items-in-right'>
  63                                                                 <div className='action-buttons'>
  64                                                                         {callVCAction &&
  65                                                                         <div className='version-control-buttons'>
  66                                                                                 <div
  67                                                                                         className={classnames('vc-nav-item-button button-submit', {'disabled': !isCheckedIn || !isLatestVersion})}
  68                                                                                         onClick={() => this.submit(callVCAction)}>
  69                                                                                         {i18n('Submit')}
  70                                                                                 </div>
  71                                                                                 <div
  72                                                                                         className={classnames('vc-nav-item-button button-checkin-checkout', {'disabled': status === statusEnum.LOCK_STATUS || !isLatestVersion})}
  73                                                                                         onClick={() => this.checkinCheckoutVersion(callVCAction)}>
  74                                                                                         {`${isCheckedOut ? i18n('Check In') : i18n('Check Out')}`}
  75                                                                                 </div>
  76                                                                                 <div
  77                                                                                         className={classnames('sprite-new revert-btn ng-scope ng-isolate-scope', {'disabled': !isCheckedOut || version === '0.1' || !isLatestVersion})}
  78                                                                                         onClick={() => this.revertCheckout(callVCAction)}>
  79                                                                                 </div>
  80                                                                         </div>
  81                                                                         }
  82                                                                         {onSave &&
  83                                                                         <div
  84                                                                                 className={classnames('sprite-new save-btn ng-scope ng-isolate-scope', {'disabled': !isCheckedOut || !isFormDataValid || !isLatestVersion})}
  85                                                                                 onClick={() => onSave()}>
  86                                                                         </div>
  87                                                                         }
  88                                                                 </div>
  89                                                                 <div className='vc-nav-item-close' onClick={() => onClose && onClose()}> X</div>
  90                                                         </div>
  91                                                 </Nav>
  92                                         </Navbar.Collapse>
  93                                 </Navbar>
  94                         </div>
  95                 );
  96         }
  97
  98         renderStatus(status) {
  99                 switch (status) {
 100                         case statusEnum.CHECK_OUT_STATUS:
 101                                 return (
 102                                         <div className='checkout-status-icon'>
 103                                                 <div className='catalog-tile-check-in-status sprite-new checkout-editable-status-icon'></div>
 104                                                 <div className='status-text'> {i18n('CHECKED OUT')} </div>
 105                                         </div>
 106                                 );
 107                         case statusEnum.LOCK_STATUS:
 108                                 return (
 109                                         <div className='status-text'> {i18n('LOCKED')} </div>
 110                                 );
 111                         case statusEnum.CHECK_IN_STATUS:
 112                                 return (
 113                                         <div className='status-text'> {i18n('CHECKED IN')} </div>
 114                                 );
 115                         case statusEnum.SUBMIT_STATUS:
 116                                 return (
 117                                         <div className='status-text'> {i18n('SUBMITTED')} </div>
 118                                 );
 119                         default:
 120                                 return (
 121                                         <div className='status-text'> {i18n(status)} </div>
 122                                 );
 123                 }
 124         }
 125
 126         checkinCheckoutVersion(callVCAction) {
 127                 if (this.props.isCheckedOut) {
 128                         this.checkin(callVCAction);
 129                 }
 130                 else {
 131                         this.checkout(callVCAction);
 132                 }
 133         }
 134
 135         checkin(callVCAction) {
 136
 137                 const action = actionsEnum.CHECK_IN;
 138
 139                 if (this.props.onSave) {
 140                         this.props.onSave().then(()=>{
 141                                  callVCAction(action);
 142                          });
 143                 }else{
 144                         callVCAction(action);
 145                 }
 146
 147         }
 148
 149         checkout(callVCAction) {
 150                 const action = actionsEnum.CHECK_OUT;
 151                 callVCAction(action);
 152         }
 153
 154         submit(callVCAction) {
 155                 const action = actionsEnum.SUBMIT;
 156                 callVCAction(action);
 157         }
 158
 159         revertCheckout(callVCAction) {
 160                 const action = actionsEnum.UNDO_CHECK_OUT;
 161                 callVCAction(action);
 162         }
 163 }
 164
 165 export default VersionController;