-
Notifications
You must be signed in to change notification settings - Fork 12
/
SearchByAttributeInput.jsx
124 lines (115 loc) · 4.16 KB
/
SearchByAttributeInput.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
import React from 'react';
import { InputBase, Divider, IconButton, Tooltip, Menu, Button, MenuItem } from '@mui/material';
import {
Search as SearchIcon,
Clear as ClearIcon,
Menu as MenuIcon,
} from '@mui/icons-material';
import { map, get } from 'lodash';
const DEFAULT_HAPI_FHIR_ATTRIBUTE = {id: 'name', label: 'Name'}
const DEFAULT_OCL_FHIR_ATTRIBUTE = {id: 'status', label: 'Status'}
const HAPI_FHIR_ATTRIBUTES = [
{id: '_id', label: 'id'},
{id: 'date', label: 'Release Date'},
{id: 'status', label: 'Status'},
DEFAULT_HAPI_FHIR_ATTRIBUTE,
{id: 'version', label: 'Version'},
{id: 'description', label: 'Description'},
]
const OCL_FHIR_ATTRIBUTES = [
DEFAULT_OCL_FHIR_ATTRIBUTE,
{id: 'content-mode', label: 'Content Mode'},
{id: 'publisher', label: 'Publisher'},
]
class SearchByAttributeInput extends React.Component {
constructor(props) {
super(props);
const isHAPISearchMode = props.hapi || props.searchMode === 'hapi'
this.state = {
input: '',
attrs: isHAPISearchMode ? HAPI_FHIR_ATTRIBUTES : OCL_FHIR_ATTRIBUTES,
selectedAttribute: isHAPISearchMode ? DEFAULT_HAPI_FHIR_ATTRIBUTE : DEFAULT_OCL_FHIR_ATTRIBUTE,
anchorEl: null,
}
}
toggleAnchorEl = event => this.setState({anchorEl: this.state.anchorEl ? null : event.currentTarget})
performSearch = () => {
const { selectedAttribute, input } = this.state;
const id = get(selectedAttribute, 'id')
const params = id ? {[id]: input || ''} : {}
this.props.onSearch(params)
}
clearSearch = () => this.setState({input: '', anchorEl: null}, this.performSearch)
handleInputChange = event => this.setState({input: event.target.value || ''})
handleKeyPress = event => {
if (event.key === 'Enter') {
event.preventDefault();
event.stopPropagation();
this.performSearch()
}
return false
}
render() {
const { attrs, input, selectedAttribute, anchorEl } = this.state;
const { searchInputPlaceholder } = this.props;
const placeholder = (searchInputPlaceholder || "Search OCL")
return (
<div className='col-sm-12 no-side-padding'>
<div className='col-sm-12 no-side-padding' style={{marginBottom: '0px', display: 'flex', alignItems: 'center', border: '1px solid darkgray', borderRadius: '4px'}}>
<Button className='search-attribute-menu-button' color='primary' variant='text' startIcon={<MenuIcon fontSize='inherit'/>} onClick={this.toggleAnchorEl}>
{get(selectedAttribute, 'label')}
</Button>
<InputBase
style={{flex: 1, marginLeft: '10px'}}
placeholder={placeholder}
inputProps={{ 'aria-label': 'search ocl' }}
value={input || ''}
fullWidth
onChange={this.handleInputChange}
onKeyPress={this.handleKeyPress}
/>
{
input &&
<React.Fragment>
<Tooltip arrow title='Clear'>
<span>
<IconButton
type="submit"
style={{padding: '10px'}}
aria-label="clear"
onClick={this.clearSearch}
size="large">
<ClearIcon />
</IconButton>
</span>
</Tooltip>
<Divider style={{height: '28px', margin: '4px'}} orientation="vertical" />
</React.Fragment>
}
<Tooltip arrow title='Search'>
<span>
<IconButton
type="submit"
style={{padding: '10px'}}
aria-label="search"
onClick={this.performSearch}
size="large">
<SearchIcon />
</IconButton>
</span>
</Tooltip>
</div>
<Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={this.toggleAnchorEl}>
{
map(attrs, attr => (
<MenuItem key={attr.id} onClick={() => this.setState({selectedAttribute: attr, anchorEl: null})}>
{attr.label}
</MenuItem>
))
}
</Menu>
</div>
);
}
}
export default SearchByAttributeInput;