* ============LICENSE_START=======================================================
* org.onap.aai
* ================================================================================
- * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
- * Copyright © 2017 Amdocs
+ * Copyright © 2017-2018 AT&T Intellectual Property. All rights reserved.
+ * Copyright © 2017-2018 Amdocs
* ================================================================================
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* See the License for the specific language governing permissions and
* limitations under the License.
* ============LICENSE_END=========================================================
- *
- * ECOMP is a trademark and service mark of AT&T Intellectual Property.
*/
import React, {Component} from 'react';
+import { PropTypes } from 'prop-types';
import {Button} from 'react-bootstrap';
import AutoSuggest from 'react-autosuggest';
import Highlighter from 'react-highlight-words';
import debounce from 'lodash.debounce';
import {ButtonGroup} from 'react-bootstrap';
+import Modal from 'react-bootstrap/lib/Modal';
import {Link} from 'react-router-dom';
+import {genericRequest} from 'app/networking/NetworkCalls.js';
import {changeUrlAddress} from 'utils/Routes.js';
import {
ICON_CLASS_SEARCH,
ICON_CLASS_CLEAR,
+ ICON_CLASS_HELP,
SEARCH_DEBOUNCE_TIME,
NO_MATCHES_FOUND,
SEARCH_PLACEHOLDER_TEXT
export default class AutoCompleteSearchBar extends Component {
static propTypes = {
- value: React.PropTypes.string,
- suggestions: React.PropTypes.array,
- cachedSuggestions: React.PropTypes.array,
- suggestionName: React.PropTypes.string
+ value: PropTypes.string,
+ suggestions: PropTypes.array,
+ cachedSuggestions: PropTypes.array,
+ suggestionName: PropTypes.string
+ };
+
+ constructor(props) {
+ console.log(props);
+ super(props);
+ this.state = {
+ helpModalShow: false,
+ searchable: []
+ };
};
componentWillMount() {
render() {
const {
- value, suggestions,
- suggestionName, cachedSuggestions,
- onInputChange, onInvalidSearch,
- onClearSuggestionsTextFieldRequested,
- onSuggestionsClearRequested,
- dispatchAnalytics
- } = this.props;
+ value, suggestions,
+ suggestionName, cachedSuggestions,
+ onInputChange, onInvalidSearch,
+ onClearSuggestionsTextFieldRequested,
+ onSuggestionsClearRequested,
+ dispatchAnalytics
+ } = this.props;
const inputProps = {
placeholder: SEARCH_PLACEHOLDER_TEXT,
value,
onChange: onInputChange
};
+ let closeHelpModal = () => {
+ this.setState({helpModalShow: false});
+ };
+ let showHelpModal = () => {
+ genericRequest('/schema/searchable', true, 'GET').then(res=>{
+ let searchDOM = res.sort(function(a, b) {
+ var compareA = (a['node-type']).toLowerCase();
+ var compareB = (b['node-type']).toLowerCase();
+ if(compareA < compareB){
+ return -1;
+ };
+ if(compareA > compareB){
+ return 1;
+ };
+ return 0;
+ }).map((prop) => {
+ return (
+ <div><p><strong>{prop['node-type']}:</strong></p><p>{prop['searchable-attributes']}</p></div>
+ );
+ });
+ this.setState({searchable: searchDOM, helpModalShow: true});
+ }, error => {
+ console.log(error);
+ this.setState({searchable: 'An error occurred, please try again later.', helpModalShow: true});
+ }).catch(error => {
+ console.log(error);
+ this.setState({searchable: 'An error occurred, please try again later.', helpModalShow: true});
+ });
+ };
+
let clearButtonClass = (value.length > 0)
? 'auto-complete-clear-button'
: 'auto-complete-clear-button hidden';
+
return (
<div className='auto-complete-search'>
<AutoSuggest
renderSuggestionsContainer={this.renderSuggestionsContainer}/>
<ButtonGroup className='auto-complete-search-button-group'>
<Button type='submit' className={clearButtonClass}
- onClick={onClearSuggestionsTextFieldRequested}>
+ onClick={onClearSuggestionsTextFieldRequested}>
<i className={ICON_CLASS_CLEAR} aria-hidden='true'/>
</Button>
-
+ <Button type='submit' className='auto-complete-help-button' onClick={showHelpModal}>
+ <i className={ICON_CLASS_HELP} aria-hidden='true'/>
+ </Button>
<Button type='submit' className='auto-complete-search-button' onClick={() => {
this.newSearchSelected(this.getSelectedSuggestionObj(value, cachedSuggestions),
onInvalidSearch, dispatchAnalytics, value);
<i className={ICON_CLASS_SEARCH} aria-hidden='true'/>
</Button>
</ButtonGroup>
+ <div className='static-modal'>
+ <Modal show={this.state.helpModalShow} onHide={closeHelpModal}>
+ <Modal.Header>
+ <Modal.Title>Searchable Fields</Modal.Title>
+ </Modal.Header>
+ <Modal.Body>
+ <div className='modal-searchable'>
+ {this.state.searchable}
+ </div>
+ </Modal.Body>
+ <Modal.Footer>
+ <Button onClick={closeHelpModal}>Close</Button>
+ </Modal.Footer>
+ </Modal>
+ </div>
</div>
);
}
<Highlighter key={arrayIndex + 'high'}
highlightClassName='highlight'
searchWords={toHighLightArray}
- textToHighlight={suggestionTextArray[arrayIndex]}/>
+ textToHighlight={suggestionTextArray[arrayIndex]}
+ autoEscape={true}/>
{ ++arrayIndex ? ' ' : ' '}
</span>);
<Highlighter key={arrayIndex + 'high'}
highlightClassName='highlight'
searchWords={toHighLightArray}
- textToHighlight={suggestionTextArray[arrayIndex]}/>
+ textToHighlight={suggestionTextArray[arrayIndex]}
+ autoEscape={true}/>
{ ++arrayIndex ? ' ' : ' '}
</span>);
rest.className = 'react-autosuggest__suggestions-containerCopy';
}
return (
- <div {...rest}>
+ <div {...rest.containerProps} {...rest}>
{children}
</div>
);