src/generic-components/DownloadRangeModel.jsx

   1 /*
   2  * ============LICENSE_START=======================================================
   3  * org.onap.aai
   4  * ================================================================================
   5  * Copyright © 2017-2021 AT&T Intellectual Property. All rights reserved.
   6  * ================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License");
   8  * you may not use this file except in compliance with the License.
   9  * You may obtain a copy of the License at
  10  *
  11  *       http://www.apache.org/licenses/LICENSE-2.0
  12  *
  13  * Unless required by applicable law or agreed to in writing, software
  14  * distributed under the License is distributed on an "AS IS" BASIS,
  15  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16  * See the License for the specific language governing permissions and
  17  * limitations under the License.
  18  * ============LICENSE_END=========================================================
  19  */
  20
  21 import React, {Component} from 'react';
  22 import Modal from 'react-bootstrap/lib/Modal';
  23 import {GlobalExtConstants} from 'utils/GlobalExtConstants.js';
  24 import Row from 'react-bootstrap/lib/Row';
  25 import Button from 'react-bootstrap/lib/Button';
  26 import Spinner from 'utils/SpinnerContainer.jsx';
  27
  28 let PAGINATION_CONSTANT = GlobalExtConstants.PAGINATION_CONSTANT;
  29 let PAGINATION_RESULTS = PAGINATION_CONSTANT.RESULTS_PER_PAGE;
  30
  31 class DownloadRangeModel extends Component {
  32   constructor(props){
  33     super(props);
  34     let totalPages = Math.ceil(this.props.totalResults/PAGINATION_RESULTS);
  35     let defaultCount = (totalPages < 10)? totalPages : 10;
  36     let defaultPageRange = defaultCount*PAGINATION_RESULTS;
  37     this.state = {
  38       defaultPageCount : defaultCount,
  39       downloadType: 'defaultPage',
  40       totalPages:totalPages,
  41       limitTotalPages:defaultCount,
  42       startPageCount:'',
  43       endPageCount:'',
  44       defaultPageError:false,
  45       downloadPageRangeError:false,
  46       defaultPageErrorMsg:'',
  47       downloadPageRangeErrorMsg:'',
  48       showDownloadResultsModal:this.props.showDownloadResultsModal,
  49       triggerDownload:this.props.triggerDownload,
  50       triggerClose:this.props.triggerClose,
  51       totalResults: this.props.totalResults,
  52       errorDownloadResults:this.props.errorDownloadResults,
  53       downloadErrorMsg:this.props.downloadErrorMsg,
  54       pageRange:defaultPageRange,
  55       enableBusyFeedback: this.props.enableModelBusyFeedback
  56     };
  57   };
  58   componentDidMount(){
  59     console.log('DownloadRange component  mount');
  60   };
  61   componentWillReceiveProps(nextProps){
  62     console.log('DownloadRange component  componentWillReceiveProps',nextProps);
  63     let totalPages = Math.ceil(nextProps.totalResults/PAGINATION_RESULTS);
  64     let defaultCount = (totalPages < 10)? totalPages : 10;
  65     let defaultPageRange = defaultCount*PAGINATION_RESULTS;
  66     this.setState({
  67       showDownloadResultsModal:nextProps.showDownloadResultsModal,
  68       errorDownloadResults:nextProps.errorDownloadResults,
  69       downloadErrorMsg:nextProps.downloadErrorMsg,
  70       enableBusyFeedback: nextProps.enableModelBusyFeedback,
  71       totalPages:totalPages,
  72       limitTotalPages:defaultCount,
  73       defaultPageCount: defaultCount
  74     });
  75   }
  76   renderError = (errorMsg) => {
  77     return(
  78         <Row className='show-grid topBottomMargin'>
  79           <span className='label badge-pill label-danger topBottomMargin pre-wrap-text'><strong>Error</strong>: {errorMsg}</span>
  80         </Row>
  81       );
  82   };
  83   onInputDataChange = (event) =>{
  84     let name=event.target.name;
  85     let value= (event.target.value !== '')? parseInt(event.target.value): '';
  86     this.onDataValidate(name,value);
  87   }
  88   onDataValidate =(name,value) =>{
  89     console.log('DownloadRangeModel onDataValidate>>>>>>',this.state);
  90     let pageCount=1;
  91     let msg='';
  92     let totalCount = 0;
  93     let totalResultsCount=0;
  94     if(name === 'defaultPageCount'){
  95       if(isNaN(value)){
  96         msg = 'Please enter valid input as Number';
  97       }else if(value <= 0){
  98         msg = 'Please enter valid page count From 1 to ' + this.state.limitTotalPages;
  99       }else if(value > this.state.limitTotalPages ){
 100         msg = 'Please enter valid page count From 1 to ' + this.state.limitTotalPages+'.The maximum download is limited to '+this.state.limitTotalPages +' pages at a time';
 101       }
 102       if(msg === ''){
 103           pageCount=value*PAGINATION_RESULTS;
 104           console.log('Before setting state defaultPageCount>>>>>',value);
 105           this.setState({defaultPageCount:value,pageRange:pageCount,defaultPageError:false,defaultPageErrorMsg:'',disableDownloadBtn:false});
 106       }else if(msg !== ''){
 107         this.setState({defaultPageCount:event.target.value,defaultPageError:true,defaultPageErrorMsg:msg,disableDownloadBtn:true});
 108       }
 109     }else if(name === 'startPageCount'){
 110       if(isNaN(value)){
 111         msg = 'Please enter valid input as Number';
 112       }
 113       if(msg === ''){
 114         console.log('Before setting state startPageCount>>>>>',value);
 115         this.setState({startPageCount:value,downloadPageRangeError:false,downloadPageRangeErrorMsg:'',disableDownloadBtn:false},function(){this.onDataValidate('rangeValidation')}.bind(this));
 116       }else{
 117         this.setState({downloadPageRangeError:true,downloadPageRangeErrorMsg:msg,disableDownloadBtn:true});
 118       }
 119     }else if(name === 'endPageCount'){
 120       if(isNaN(value)){
 121         msg = 'Please enter valid input as Number';
 122       }
 123       if(msg === ''){
 124         console.log('Before setting state endPageCount>>>>>',value);
 125         this.setState({endPageCount: value,downloadPageRangeError: false, downloadPageRangeErrorMsg: '',disableDownloadBtn:false},function(){this.onDataValidate('rangeValidation')}.bind(this));
 126       }else{
 127         this.setState({downloadPageRangeError:true,downloadPageRangeErrorMsg:msg,disableDownloadBtn:true});
 128       }
 129     }
 130     if(name === 'rangeValidation'){
 131       let startCount = this.state.startPageCount;
 132       startCount=(startCount === '')? 0:parseInt(startCount);
 133       let endCount = this.state.endPageCount;
 134       endCount=(endCount === '')? 0:parseInt(endCount);
 135       if(startCount <= 0 || endCount <= 0 || startCount > this.state.totalPages || endCount > this.state.totalPages || startCount > endCount || endCount < startCount){
 136         msg = 'Please enter a valid page range from 1 to '+ this.state.totalPages +'.The maximum download is limited to '+ this.state.limitTotalPages +' pages at a time';
 137       }else{
 138         totalCount = this.state.endPageCount - this.state.startPageCount + 1;
 139         totalResultsCount=totalCount*PAGINATION_RESULTS;
 140         if(totalCount > 10){
 141           msg = 'The maximum download is limited to '+ this.state.limitTotalPages +' pages at a time. Please adjust your input to continue';
 142         }
 143       }
 144       if(msg !== ''){
 145         this.setState({downloadPageRangeError:true,downloadPageRangeErrorMsg:msg,disableDownloadBtn:true});
 146       }else{
 147         pageCount=this.state.startPageCount + '-' + this.state.endPageCount;
 148         this.setState({disableDownloadBtn: false, pageRange: pageCount});
 149       }
 150     }
 151   };
 152   setSelectTypeOfDownload = (event) =>{
 153     console.log('DownloadRange:setSelectTypeOfDownload',event.target.value);
 154     let totalPages=parseInt(this.state.totalPages);
 155     let pageCount=0;
 156     if (event.target.value === 'downloadPageRange'){
 157       this.setState(
 158         {defaultPageCount : (totalPages < 10)? totalPages : 10,startPageCount:'',endPageCount:'',downloadType:event.target.value,downloadPageRangeError:false,defaultPageError:false,disableDownloadBtn:true, downloadErrorMsg:'', errorDownloadResults:false}
 159        );
 160     }else{
 161       pageCount= (totalPages < 10)? totalPages*PAGINATION_RESULTS : 10*PAGINATION_RESULTS;
 162       this.setState({defaultPageCount : (totalPages < 10)? totalPages : 10, startPageCount:'',endPageCount:'',pageRange:pageCount,downloadType:event.target.value,downloadPageRangeError:false,defaultPageError:false,disableDownloadBtn:false, downloadErrorMsg:'',errorDownloadResults:false});
 163     }
 164   }
 165   submitDownloadResults = () =>{
 166     console.log('DownloadRange:submitDonwloadResults',this.state);
 167     this.props.triggerDownload(this.state.pageRange,true);
 168   }
 169   closeDownloadResults = () =>{
 170     console.log('DownloadRange:closeDownloadReults');
 171     this.props.triggerClose();
 172   }
 173   render(){
 174     console.log('downloadRange:this.state>>>>>>>>>>>*',this.state);
 175     return(
 176         <div id='downloadPagePane' className='addPadding customDsl'>
 177           <div className='static-modal'>
 178             <Modal show={this.state.showDownloadResultsModal} onHide={this.closeDownloadResults}>
 179               <Modal.Header>
 180                 <Modal.Title>Download Results</Modal.Title>
 181               </Modal.Header>
 182               <Modal.Body>
 183                 <h4>Your result set has <strong>{this.state.totalPages}</strong> pages</h4>
 184                 {this.state.errorDownloadResults && (<div>{this.renderError(this.state.downloadErrorMsg)}</div>)}
 185                 <form id='downloadRangeForm' name='downloadRangeForm'>
 186                   <div className="radio">
 187                     <label>
 188                       <input type="radio" value="defaultPage"
 189                               checked={this.state.downloadType === 'defaultPage'}
 190                               onChange={(e) => this.setSelectTypeOfDownload(e)} />
 191                       <input type='number' size='8' name='defaultPageCount'
 192                               onBlur={(event) => this.onInputDataChange(event)}
 193                               placeholder='Default Page Count'
 194                               value={this.state.defaultPageCount}
 195                               disabled={!(this.state.downloadType === 'defaultPage')}
 196                               onChange={(event) => this.onInputDataChange(event)} />
 197                       <span>pages</span>
 198                     </label>
 199                     {this.state.defaultPageError && (<div>{this.renderError(this.state.defaultPageErrorMsg)}</div>)}
 200                   </div>
 201                   <div className="radio">
 202                     <label>
 203                       <input type="radio"  value="downloadPageRange"
 204                               checked={this.state.downloadType === 'downloadPageRange'}
 205                               onChange={(e) => this.setSelectTypeOfDownload(e)} />
 206                       From
 207                       <span><input type='number' size='8' name='startPageCount'
 208                               onBlur={(event) => this.onInputDataChange(event)}
 209                               placeholder='Start Page'
 210                               disabled={!(this.state.downloadType === 'downloadPageRange')}
 211                               value={this.state.startPageCount}
 212                               onChange={(event) => this.onInputDataChange(event)} /></span>
 213                       <span>To</span>
 214                       <span><input type='number' size='8' name='endPageCount'
 215                               onBlur={(event) => this.onInputDataChange(event)}
 216                               placeholder='End Page'
 217                               value={this.state.endPageCount}
 218                               disabled={!(this.state.downloadType === 'downloadPageRange')}
 219                               onChange={(event) => this.onInputDataChange(event)} /></span>
 220                       <span>pages</span>
 221                     </label>
 222                     {this.state.downloadPageRangeError && (<div>{this.renderError(this.state.downloadPageRangeErrorMsg)}</div>)}
 223                   </div>
 224                 </form>
 225               </Modal.Body>
 226               <Modal.Footer>
 227                 <Button onClick={this.closeDownloadResults}>Close</Button>
 228                 <Button onClick={this.submitDownloadResults} disabled={this.state.disableDownloadBtn}>Download</Button>
 229               </Modal.Footer>
 230             </Modal>
 231           </div>
 232         </div>
 233     );
 234   }
 235 }
 236 export default DownloadRangeModel;