src/generic-components/filter/Filter.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 Col from 'react-bootstrap/lib/Col';
  23 import Row from 'react-bootstrap/lib/Row';
  24 import Grid from 'react-bootstrap/lib/Grid';
  25 import AddFilters from './components/AddFilters.jsx';
  26 import ClearFilter from './components/ClearFilter.jsx';
  27 import RunFilterQuery from './components/RunFilterQuery.jsx';
  28 import SelectFilter from './components/SelectFilter.jsx';
  29 import FilterTypes from './components/FilterTypes.jsx';
  30 import {GlobalExtConstants} from 'utils/GlobalExtConstants.js';
  31 let APERTURE_SERVICE = JSON.parse(sessionStorage.getItem(GlobalExtConstants.ENVIRONMENT + 'APERTURE_SERVICE'));
  32
  33 class Filter extends Component {
  34   constructor(props){
  35     super(props);
  36     APERTURE_SERVICE=JSON.parse(sessionStorage.getItem(GlobalExtConstants.ENVIRONMENT + 'APERTURE_SERVICE'));
  37   };
  38   state = {
  39     filterList: this.props.filterList,
  40     filterSelected: this.props.nodeType,
  41     filterDisplay: 'Select Filter' ,
  42     filterTypeDisplay: 'Filter Type',
  43     errorMsg: '',
  44     showFilter:(this.props.filterMessage && this.props.filterMessage.length > 0) ? true : false,
  45     filterMessage:this.props.filterMessage,
  46     filterValue:'',
  47     filterSelectedList:this.props.filterSelectedList,
  48     isRunEnable:this.props.isRunEnable,
  49     enableRealTime:JSON.parse(sessionStorage.getItem(GlobalExtConstants.ENVIRONMENT + 'ENABLE_ANALYSIS'))
  50   };
  51   componentDidMount(){
  52     console.log('Filter component  mount');
  53   };
  54   componentWillReceiveProps(){
  55     console.log('filter component  componentWillReceiveProps');
  56     this.setState({
  57       filterDisplay:this.props.filterDisplay,
  58       filterTypeDisplay:this.props.filterTypeDisplay,
  59       errorMsg:(this.props.errorMsg) ? this.props.errorMsg : '',
  60       filterSelected:this.props.nodeType,
  61       showFilter:(this.props.filterMessage && this.props.filterMessage.length > 0) ? true : false,
  62       filterMessage: this.props.filterMessage,
  63       filterValue:'',
  64       filterSelectedList:this.props.filterSelectedList,
  65       enableRealTime:JSON.parse(sessionStorage.getItem(GlobalExtConstants.ENVIRONMENT + 'ENABLE_ANALYSIS'))
  66     });
  67   }
  68   renderFilterMessage = (props) => {
  69     console.log('Filter render Filter Message>>>>>',props.showFilter);
  70     if(props.showFilter){
  71         const filters = props.filterSelectedList.map( (filterMsg,index) =>{
  72         let filterType=(this.state.enableRealTime && filterMsg.type ==='=')? 'CONTAINS' : filterMsg.type;
  73         return (
  74           <div className = 'badgeFilter' key={index}>
  75            <span><b>{filterMsg.id}</b>&nbsp;<i>{filterType}</i>&nbsp;{filterMsg.value}</span>
  76             <button type='button' className='close' aria-label='Close' onClick={() => this.onRemoveFilters(filterMsg.id.trim(),filterMsg.value.trim(),filterMsg.type)}>
  77                <span aria-hidden='true'>&times;</span>
  78             </button>
  79           </div>
  80         );
  81       });
  82       console.log('render Filter Message>>>>>before return ');
  83       return(
  84         <Row className='show-grid topBottomMargin'>
  85             <Col md={12} className='removeLeftPadding'>
  86                 { filters }
  87             </Col>
  88         </Row>
  89       );
  90       console.log('Filter render Filter Message>>>>>After return ');
  91     }
  92   };
  93   renderError = (props) => {
  94     if(props.errorMsg) {
  95       return(
  96         <Row className='show-grid topBottomMargin'>
  97           <span className='label badge-pill label-danger topBottomMargin'><strong>Error </strong>: {this.state.errorMsg}</span>
  98         </Row>
  99       );
 100     }
 101   };
 102   filterClearAllButtonSelectedHandler = () => {
 103     console.log('clear all called');
 104     if(this.state.isRunEnable || this.state.filterMessage.length === 0){
 105       this.setState(
 106         {
 107           filterDisplay: 'Select Filter',
 108           filterTypeDisplay: 'Filter Type',
 109           errorMsg: '',
 110           filterMessage: [],
 111           filterValue:'',
 112           filterSelectedList:[]
 113         }
 114       );
 115     }else{
 116       var tempState = this.state;
 117       tempState.filterMessage = [];
 118       tempState.filterSelectedList = [];
 119       tempState.filterValue = '';
 120       tempState.errorMsg = '';
 121       tempState.filterDisplay = 'Select Filter';
 122       tempState.filterTypeDisplay = 'Filter Type';
 123       this.setState(tempState,function(){this.props.loadInventory(tempState);});
 124     }
 125
 126   };
 127   filterAddButtonSelectedHandler = () => {
 128     console.log('add Filter called');
 129     var found = this.isContaining(this.state.filterDisplay, this.state.filterSelectedList);
 130     console.log('filterAddButtonSelectedHandler>>>>>found',found);
 131     this.errorMsg = null;
 132     let filterDisplayState = true;
 133     if(this.state.enableRealTime){
 134       if(this.state.filterTypeDisplay !== 'Filter Type'){
 135         filterDisplayState = true;
 136       }else{
 137         filterDisplayState = false;
 138       }
 139     }
 140     if (this.state.filterDisplay !== 'Select Filter' && filterDisplayState && this.state.filterValue && !found){
 141       console.log('filterAddButtonSelectedHandler>>>>>inside',this.state.filterValue);
 142       var tempState = this.state;
 143       if(this.state.enableRealTime){
 144         tempState.filterMessage.push(this.state.filterDisplay + this.state.filterTypeDisplay +this.state.filterValue);
 145         tempState.filterSelectedList.push({'id' : this.state.filterDisplay, 'value' : this.state.filterValue,'type': this.state.filterTypeDisplay});
 146       }else{
 147         tempState.filterMessage.push(this.state.filterDisplay + '=' +this.state.filterValue);
 148         tempState.filterSelectedList.push({'id' : this.state.filterDisplay, 'value' : this.state.filterValue,'type': '='});
 149       }
 150       tempState.filterDisplay = 'Select Filter';
 151       tempState.filterTypeDisplay = 'Filter Type';
 152       tempState.filterValue = '';
 153       tempState.showFilter = true;
 154       tempState.errorMsg = '';
 155       console.log('filterAddButtonSelectedHandler>>>>>tempState',tempState);
 156       if(this.state.isRunEnable) {
 157         this.setState(tempState);
 158       }else{
 159         this.setState(tempState,function(){this.props.loadInventory(tempState);});
 160       }
 161     }else{
 162       console.log('filterAddButtonSelectedHandler>>>>>Else',this.state.filterDisplay);
 163       console.log('filterAddButtonSelectedHandlerfilterTypeDisplay>>>>>Else',this.state.filterTypeDisplay);
 164       console.log('this.state.filterValue>>>>>>>>>>>>>>',this.state.filterValue);
 165       if(found){
 166         this.setState({errorMsg: 'Please remove the current filter for this field before trying to add another.'});
 167       }else if ( this.state.filterDisplay === 'Select Filter'){
 168         this.setState({errorMsg: 'Please select a filter.'});
 169       }else if (this.state.enableRealTime && this.state.filterTypeDisplay === 'Filter Type'){
 170         this.setState({errorMsg: 'Please select a filter type.'});
 171       }else{
 172         this.setState({errorMsg: 'Please validate your filter, there seems to be an issue.'});
 173       }
 174     }
 175   };
 176   isContaining(nameKey, listArray){
 177     var found = false;
 178     if(listArray) {
 179     listArray.map((lists) => {
 180       if(lists.id === nameKey){
 181         console.log('foundName key in list',lists.id);
 182         found = true;
 183       }
 184     });
 185     }
 186     return found;
 187   };
 188   onTargetMenuSelect = (listName) => {
 189     console.log('onTargetMenuSelect',listName);
 190     this.setState({filterDisplay:listName,errorMsg:''});
 191   };
 192   onTargetMenuOfFilterTypes = (listName) => {
 193     console.log('onTargetMenuOfFilterTypes',listName);
 194     this.setState({filterTypeDisplay:listName,errorMsg:''});
 195   }
 196   onInputDataChange = (event) =>{
 197     console.log('inputtext',event.target.value);
 198     this.setState({filterValue:event.target.value});
 199   };
 200   onRemoveFilters = (filter,filterText,filterType) => {
 201     console.log('onRemoveFilters',this.state.filterSelectedList);
 202     var found = this.isContaining(filter, this.state.filterSelectedList);
 203     console.log('onRemoveFilters.....found',found);
 204     if(found){
 205       const filterList = this.state.filterSelectedList.filter(function(el) {
 206         console.log('el.id',el.id);
 207         return el.id !== filter;
 208       });
 209       console.log('onRemoveFilters.....filterList',filterList);
 210       let message = filter + filterType + filterText;
 211       const filterMsgList = this.state.filterMessage.filter((el) =>{
 212         return el !== message;
 213       });
 214       console.log('onRemoveFilters.....filterMsgList',filterMsgList);
 215       if(this.state.isRunEnable) {
 216         this.setState({filterSelectedList:filterList,filterValue:'',filterMessage:filterMsgList,errorMsg:''});
 217       }else{
 218         var tempState = this.state;
 219         tempState.filterMessage = filterMsgList;
 220         tempState.filterSelectedList = filterList;
 221         tempState.filterValue = '';
 222         tempState.errorMsg = '';
 223         this.setState(tempState,function(){this.props.loadInventory(tempState);});
 224       }
 225     }
 226   };
 227   render(){
 228     let filterTags ='';
 229     if(APERTURE_SERVICE && this.state.enableRealTime){
 230       console.log('before passing Filter>*',this.state);
 231       filterTags= <Col md={(this.state.isRunEnable) ? 2 : 2} className='removeLeftPadding'>
 232                     <FilterTypes param={this.state}
 233                       filterList={this.props.filterList}
 234                       onMenuSelect={this.onTargetMenuOfFilterTypes} />
 235                   </Col>
 236     }
 237     return(
 238         <div id='filterPane' className={this.props.isFilterEnable ? 'show' : 'hidden'}>
 239             <Grid className='custom-container'>
 240                 <Row className='show-grid topBottomMargin'>
 241                     <Col md={(this.state.isRunEnable) ? 3 : 2} className='removeLeftPadding'>
 242                         <SelectFilter param={this.state}
 243                             filterList={this.props.filterList}
 244                             onMenuSelect={this.onTargetMenuSelect} />
 245                     </Col>
 246                     {filterTags}
 247                     <Col md={(this.state.isRunEnable) ? 7 : 8}>
 248                         <input type='text' size='36'
 249                             onBlur={(event) => this.onInputDataChange(event)}
 250                             placeholder='Please Enter Filter text'
 251                             value={this.state.filterValue}
 252                             onChange={(event) => this.onInputDataChange(event)} />
 253                         <AddFilters param={this.state}
 254                             addHandler={this.filterAddButtonSelectedHandler} />
 255                         <ClearFilter param={this.state} clearAllHandler={this.filterClearAllButtonSelectedHandler} />
 256                         <RunFilterQuery param={this.state} />
 257                     </Col>
 258                 </Row>
 259                 {
 260                     this.renderError(this.state)
 261                 }
 262                 {
 263                     this.renderFilterMessage(this.state)
 264                 }
 265             </Grid>
 266         </div>
 267     );
 268   }
 269 }
 270 export default Filter;