gerrit.onap Code Review - sdc.git/blob

   1 /*
   2  * Copyright © 2016-2017 European Support Limited
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  *      http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  * See the License for the specific language governing permissions and
  14  * limitations under the License.
  15  */
  16 import React from 'react';
  17 import PropTypes from 'prop-types';
  18 import Dropzone from 'react-dropzone';
  19
  20 import DraggableUploadFileBox from 'nfvo-components/fileupload/DraggableUploadFileBox.jsx';
  21 import i18n from 'nfvo-utils/i18n/i18n.js';
  22 import Form from 'nfvo-components/input/validation/Form.jsx';
  23 import Input from 'nfvo-components/input/validation/Input.jsx';
  24 import GridSection from 'nfvo-components/grid/GridSection.jsx';
  25 import GridItem from 'nfvo-components/grid/GridItem.jsx';
  26
  27 const SoftwareProductProcessEditorPropType = PropTypes.shape({
  28     id: PropTypes.string,
  29     name: PropTypes.string,
  30     description: PropTypes.string,
  31     artifactName: PropTypes.string,
  32     type: PropTypes.string
  33 });
  34
  35 class SoftwareProductProcessesEditorForm extends React.Component {
  36     static propTypes = {
  37         data: SoftwareProductProcessEditorPropType,
  38         previousData: SoftwareProductProcessEditorPropType,
  39         isReadOnlyMode: PropTypes.bool,
  40         onDataChanged: PropTypes.func,
  41         onSubmit: PropTypes.func,
  42         onCancel: PropTypes.func
  43     };
  44     state = {
  45         dragging: false,
  46         files: []
  47     };
  48
  49     render() {
  50         let {
  51             data = {},
  52             isReadOnlyMode,
  53             onDataChanged,
  54             onCancel,
  55             genericFieldInfo,
  56             optionsInputValues
  57         } = this.props;
  58         let { name, description, artifactName, type } = data;
  59
  60         return (
  61             <div>
  62                 {genericFieldInfo && (
  63                     <Form
  64                         ref="validationForm"
  65                         hasButtons={true}
  66                         labledButtons={true}
  67                         isReadOnlyMode={isReadOnlyMode}
  68                         onSubmit={() => this.submit()}
  69                         onReset={() => onCancel()}
  70                         isValid={this.props.isFormValid}
  71                         formReady={this.props.formReady}
  72                         onValidateForm={() => this.props.onValidateForm()}
  73                         className="vsp-processes-editor">
  74                         <div
  75                             className={`vsp-processes-editor-data${
  76                                 isReadOnlyMode ? ' disabled' : ''
  77                             }`}>
  78                             <Dropzone
  79                                 className={`vsp-process-dropzone-view ${
  80                                     this.state.dragging ? 'active-dragging' : ''
  81                                 }`}
  82                                 onDrop={(acceptedFiles, rejectedFiles) =>
  83                                     this.handleImportSubmit(
  84                                         acceptedFiles,
  85                                         rejectedFiles
  86                                     )
  87                                 }
  88                                 onDragEnter={() =>
  89                                     this.setState({ dragging: true })
  90                                 }
  91                                 onDragLeave={() =>
  92                                     this.setState({ dragging: false })
  93                                 }
  94                                 multiple={false}
  95                                 disableClick={true}
  96                                 ref="processEditorFileInput"
  97                                 name="processEditorFileInput">
  98                                 <GridSection hasLastColSet={true}>
  99                                     <GridItem colSpan={2}>
 100                                         <Input
 101                                             onChange={name =>
 102                                                 onDataChanged({ name })
 103                                             }
 104                                             isValid={
 105                                                 genericFieldInfo.name.isValid
 106                                             }
 107                                             isRequired={true}
 108                                             data-test-id="name"
 109                                             errorText={
 110                                                 genericFieldInfo.name.errorText
 111                                             }
 112                                             label={i18n('Name')}
 113                                             value={name}
 114                                             type="text"
 115                                         />
 116                                     </GridItem>
 117                                     <GridItem colSpan={2} lastColInRow={true}>
 118                                         <label>&nbsp;</label>
 119                                         <DraggableUploadFileBox
 120                                             className="process-editor-file-box"
 121                                             isReadOnlyMode={isReadOnlyMode}
 122                                             onClick={() =>
 123                                                 this.refs.processEditorFileInput.open()
 124                                             }
 125                                         />
 126                                     </GridItem>
 127                                 </GridSection>
 128                                 <GridSection hasLastColSet={true}>
 129                                     <GridItem colSpan={2}>
 130                                         <Input
 131                                             name="vsp-process-description"
 132                                             groupClassName="vsp-process-description"
 133                                             onChange={description =>
 134                                                 onDataChanged({ description })
 135                                             }
 136                                             isValid={
 137                                                 genericFieldInfo.description
 138                                                     .isValid
 139                                             }
 140                                             errorText={
 141                                                 genericFieldInfo.description
 142                                                     .errorText
 143                                             }
 144                                             label={i18n('Notes')}
 145                                             value={description}
 146                                             data-test-id="vsp-process-description"
 147                                             type="textarea"
 148                                         />
 149                                     </GridItem>
 150                                     <GridItem colSpan={2} lastColInRow={true}>
 151                                         <Input
 152                                             label={i18n('Artifacts')}
 153                                             value={artifactName}
 154                                             type="text"
 155                                             disabled
 156                                         />
 157                                         <Input
 158                                             onChange={e => {
 159                                                 // setting the unit to the correct value
 160                                                 const selectedIndex =
 161                                                     e.target.selectedIndex;
 162                                                 const val =
 163                                                     e.target.options[
 164                                                         selectedIndex
 165                                                     ].value;
 166                                                 onDataChanged({ type: val });
 167                                             }}
 168                                             value={type}
 169                                             label={i18n('Process Type')}
 170                                             className="process-type"
 171                                             data-test-id="process-type"
 172                                             isValid={
 173                                                 genericFieldInfo.type.isValid
 174                                             }
 175                                             errorText={
 176                                                 genericFieldInfo.type.errorText
 177                                             }
 178                                             type="select">
 179                                             {optionsInputValues.PROCESS_TYPE.map(
 180                                                 mtype => (
 181                                                     <option
 182                                                         key={mtype.enum}
 183                                                         value={mtype.enum}>{`${
 184                                                         mtype.title
 185                                                     }`}</option>
 186                                                 )
 187                                             )}
 188                                         </Input>
 189                                     </GridItem>
 190                                 </GridSection>
 191                             </Dropzone>
 192                         </div>
 193                     </Form>
 194                 )}
 195             </div>
 196         );
 197     }
 198
 199     submit() {
 200         const { data: process, previousData: previousProcess } = this.props;
 201         let { files } = this.state;
 202         let formData = false;
 203         if (files.length) {
 204             let file = files[0];
 205             formData = new FormData();
 206             formData.append('upload', file);
 207         }
 208
 209         let updatedProcess = {
 210             ...process,
 211             formData
 212         };
 213         this.props.onSubmit({ process: updatedProcess, previousProcess });
 214     }
 215
 216     handleImportSubmit(files, rejectedFiles) {
 217         if (files.length > 0) {
 218             let { onDataChanged } = this.props;
 219             this.setState({
 220                 dragging: false,
 221                 complete: '0',
 222                 files
 223             });
 224             onDataChanged({ artifactName: files[0].name });
 225         } else if (rejectedFiles.length > 0) {
 226             this.setState({
 227                 dragging: false
 228             });
 229             if (DEBUG) {
 230                 console.log('file was rejected.' + rejectedFiles[0].name);
 231             }
 232         }
 233     }
 234 }
 235
 236 export default SoftwareProductProcessesEditorForm;