diff --git a/src/components/helpers/Search/Search.js b/src/components/helpers/Search/Search.js index c64d01097..6dc4adb16 100644 --- a/src/components/helpers/Search/Search.js +++ b/src/components/helpers/Search/Search.js @@ -15,6 +15,13 @@ import { LoadingIcon, SearchIcon, WarningIcon } from '../../icons'; import styles from './search.less'; class Search extends Component { + componentDidMount() { + const { showAllOnEmptyQuery, onChange, query } = this.props; + if (showAllOnEmptyQuery) { + onChange(query); + } + } + render() { const { id = '', @@ -23,7 +30,8 @@ class Search extends Component { hasFailed, query, foundItems, - renderList + renderList, + showAllOnEmptyQuery = false } = this.props; return ( @@ -60,17 +68,22 @@ class Search extends Component { - {query && - query.length > 0 && + {((query && query.length > 0) || showAllOnEmptyQuery) &&
-

- {' '} - - {'"'}{query}{'"'} -

+ {query.length > 0 && +

+ {' '} + + + {'"'} + {query} + {'"'} + + +

} {(!isLoading || foundItems.size > 0) &&
@@ -91,7 +104,8 @@ Search.propTypes = { foundItems: ImmutablePropTypes.list.isRequired, isLoading: PropTypes.bool, hasFailed: PropTypes.bool, - isReady: PropTypes.bool + isReady: PropTypes.bool, + showAllOnEmptyQuery: PropTypes.bool }; export default Search; diff --git a/src/containers/SearchContainer/SearchContainer.js b/src/containers/SearchContainer/SearchContainer.js index f167822bb..9ef8c40e3 100644 --- a/src/containers/SearchContainer/SearchContainer.js +++ b/src/containers/SearchContainer/SearchContainer.js @@ -19,8 +19,9 @@ const SearchContainer = ({ search, status, foundItems, - renderList -}) => ( + renderList, + showAllOnEmptyQuery = false +}) => -); + showAllOnEmptyQuery={showAllOnEmptyQuery} + />; SearchContainer.propTypes = { id: PropTypes.string.isRequired, @@ -41,7 +42,8 @@ SearchContainer.propTypes = { query: PropTypes.string, status: PropTypes.string, foundItems: ImmutablePropTypes.list.isRequired, - renderList: PropTypes.func.isRequired + renderList: PropTypes.func.isRequired, + showAllOnEmptyQuery: PropTypes.bool }; const mapStateToProps = (state, { id }) => { diff --git a/src/pages/Users/Users.js b/src/pages/Users/Users.js index 7f516c014..f3b12d029 100644 --- a/src/pages/Users/Users.js +++ b/src/pages/Users/Users.js @@ -5,28 +5,24 @@ import { connect } from 'react-redux'; import { FormattedMessage } from 'react-intl'; import { push } from 'react-router-redux'; import { LinkContainer } from 'react-router-bootstrap'; -import { - FormGroup, - ControlLabel, - FormControl, - InputGroup -} from 'react-bootstrap'; import FetchManyResourceRenderer from '../../components/helpers/FetchManyResourceRenderer'; -import { SettingsIcon, SearchIcon, TransferIcon } from '../../components/icons'; +import { SettingsIcon, TransferIcon } from '../../components/icons'; import Button from '../../components/widgets/FlatButton'; import DeleteUserButtonContainer from '../../containers/DeleteUserButtonContainer'; import PageContent from '../../components/layout/PageContent'; import Box from '../../components/widgets/Box'; import UsersList from '../../components/Users/UsersList'; +import SearchContainer from '../../containers/SearchContainer'; import { - usersSelector, isSuperAdmin, - fetchManyStatus + fetchManyStatus, + loggedInUserSelector } from '../../redux/selectors/users'; +import { loggedInUserIdSelector } from '../../redux/selectors/auth'; import { fetchAllUsers } from '../../redux/modules/users'; import { takeOver } from '../../redux/modules/auth'; -import { loggedInUserIdSelector } from '../../redux/selectors/auth'; +import { searchPeople } from '../../redux/modules/search'; import withLinks from '../../hoc/withLinks'; @@ -35,38 +31,16 @@ class Users extends Component { componentWillMount() { this.props.loadAsync(); - this.setState({ visibleUsers: [] }); - } - - componentWillReceiveProps(nextProps) { - this.setState({ - visibleUsers: nextProps.users.toArray().map(user => user.toJS().data) - }); - } - - onChange(query, allUsers) { - const normalizedQuery = query.toLocaleLowerCase(); - const filteredUsers = allUsers - .toArray() - .map(user => user.toJS().data) - .filter( - user => - user.name.lastName.toLocaleLowerCase().startsWith(normalizedQuery) || - user.fullName.toLocaleLowerCase().startsWith(normalizedQuery) || - user.id.toLocaleLowerCase().startsWith(normalizedQuery) - ); - this.setState({ - visibleUsers: filteredUsers - }); } render() { const { - users, links: { EDIT_USER_URI_FACTORY, DASHBOARD_URI }, takeOver, isSuperAdmin, - fetchStatus + fetchStatus, + search, + user } = this.props; return ( @@ -139,67 +113,42 @@ class Users extends Component { defaultMessage="Users" /> } - noPadding unlimitedHeight > -
-
- - - - - - { - this.query = e.target.value; - }} - /> - - - - - -
- -
- - - - {isSuperAdmin && - } - -
} - /> -
+ + +
+ + + + {isSuperAdmin && + } + +
} + />} + />
} @@ -212,24 +161,29 @@ Users.propTypes = { loadAsync: PropTypes.func.isRequired, push: PropTypes.func.isRequired, links: PropTypes.object.isRequired, - users: ImmutablePropTypes.map, takeOver: PropTypes.func.isRequired, isSuperAdmin: PropTypes.bool, - fetchStatus: PropTypes.string + fetchStatus: PropTypes.string, + search: PropTypes.func, + user: ImmutablePropTypes.map.isRequired }; export default withLinks( connect( - state => ({ - users: usersSelector(state), - fetchStatus: fetchManyStatus(state), - isSuperAdmin: isSuperAdmin(loggedInUserIdSelector(state))(state) - }), + state => { + return { + isSuperAdmin: isSuperAdmin(loggedInUserIdSelector(state))(state), + fetchStatus: fetchManyStatus(state), + user: loggedInUserSelector(state) + }; + }, dispatch => ({ push: url => dispatch(push(url)), loadAsync: () => Users.loadAsync({}, dispatch), takeOver: (userId, redirectUrl) => - dispatch(takeOver(userId)).then(() => dispatch(push(redirectUrl))) + dispatch(takeOver(userId)).then(() => dispatch(push(redirectUrl))), + search: instanceId => query => + dispatch(searchPeople(instanceId)('users-page', query)) }) )(Users) ); diff --git a/src/redux/modules/search.js b/src/redux/modules/search.js index 03569d4ac..9f10df371 100644 --- a/src/redux/modules/search.js +++ b/src/redux/modules/search.js @@ -46,7 +46,7 @@ export default handleActions( initialState ); -export const search = endpoint => (id, query) => +export const search = endpoint => (id, query = '') => createApiAction({ type: actionTypes.SEARCH, endpoint,