Commit 64d7599d authored by Andrew Hrdy's avatar Andrew Hrdy
Browse files

Added campus region filter.

parent a9412df8
Pipeline #1889 passed with stage
in 1 minute and 45 seconds
...@@ -5,6 +5,7 @@ export const SET_FACILITIES = 'SET_FACILITIES'; ...@@ -5,6 +5,7 @@ export const SET_FACILITIES = 'SET_FACILITIES';
export const GET_FACILITIES = 'GET_FACILITIES'; export const GET_FACILITIES = 'GET_FACILITIES';
export const SET_SELECTED_FACILITY = 'SET_SELECTED_FACILITY'; export const SET_SELECTED_FACILITY = 'SET_SELECTED_FACILITY';
export const SET_SEARCH_TERM = 'SET_SEARCH_TERM'; export const SET_SEARCH_TERM = 'SET_SEARCH_TERM';
export const SET_CAMPUS_REGION = 'SET_CAMPUS_REGION';
export const ADD_FAVORITE_FACILITY = 'ADD_FAVORITE_FACILITY'; export const ADD_FAVORITE_FACILITY = 'ADD_FAVORITE_FACILITY';
export const REMOVE_FAVORITE_FACILITY = 'REMOVE_FAVORITE_FACILITY'; export const REMOVE_FAVORITE_FACILITY = 'REMOVE_FAVORITE_FACILITY';
export const SET_ALL_FAVORITES = 'SET_ALL_FAVORITES'; export const SET_ALL_FAVORITES = 'SET_ALL_FAVORITES';
......
...@@ -2,6 +2,7 @@ import { ...@@ -2,6 +2,7 @@ import {
ADD_FAVORITE_FACILITY, ADD_FAVORITE_FACILITY,
REMOVE_FAVORITE_FACILITY, REMOVE_FAVORITE_FACILITY,
SET_SEARCH_TERM, SET_SEARCH_TERM,
SET_CAMPUS_REGION,
TOGGLE_SIDEBAR, TOGGLE_SIDEBAR,
TOGGLE_SIDEBAR_MAP, TOGGLE_SIDEBAR_MAP,
SET_ALL_FAVORITES, SET_SELECTED_FACILITY, SET_SIDEBAR SET_ALL_FAVORITES, SET_SELECTED_FACILITY, SET_SIDEBAR
...@@ -13,9 +14,7 @@ export const toggleSidebar = () => ({ ...@@ -13,9 +14,7 @@ export const toggleSidebar = () => ({
export const setSidebar = (setOpen) => ({ export const setSidebar = (setOpen) => ({
type: SET_SIDEBAR, type: SET_SIDEBAR,
setOpen, setOpen
}); });
export const toggleSidebarMap = () => ({ export const toggleSidebarMap = () => ({
...@@ -32,6 +31,11 @@ export const setSearchTerm = (term) => ({ ...@@ -32,6 +31,11 @@ export const setSearchTerm = (term) => ({
term, term,
}); });
export const setCampusRegion = (campusRegion) => ({
type: SET_CAMPUS_REGION,
campusRegion
});
export const addFavoriteFacility = slug => ({ export const addFavoriteFacility = slug => ({
type: ADD_FAVORITE_FACILITY, type: ADD_FAVORITE_FACILITY,
slug slug
...@@ -45,6 +49,6 @@ export const removeFavoriteFacility = slug => ({ ...@@ -45,6 +49,6 @@ export const removeFavoriteFacility = slug => ({
export const setAllFavorites = (favorites) => ({ export const setAllFavorites = (favorites) => ({
type: SET_ALL_FAVORITES, type: SET_ALL_FAVORITES,
favorites, favorites,
}) });
...@@ -2,9 +2,13 @@ import React from 'react' ...@@ -2,9 +2,13 @@ import React from 'react'
import FacilityCard from '../containers/FacilityCard' import FacilityCard from '../containers/FacilityCard'
import Grid from 'material-ui/Grid'; import Grid from 'material-ui/Grid';
const CardContainer = ({searchTerm, facilities}) => { const CardContainer = ({searchTerm, campusRegion, facilities}) => {
const filterCards = (facility) => { const filterCards = (facility) => {
if (facility.facility_location.campus_region.toLowerCase() !== campusRegion.toLowerCase()) {
return false;
}
const lSearchTerm = searchTerm.toLowerCase(); const lSearchTerm = searchTerm.toLowerCase();
const facilityName = facility.facility_name.toLowerCase(); const facilityName = facility.facility_name.toLowerCase();
const facilityLocation = facility.facility_location.building.toLowerCase(); const facilityLocation = facility.facility_location.building.toLowerCase();
......
...@@ -39,7 +39,7 @@ class Layout extends React.Component { ...@@ -39,7 +39,7 @@ class Layout extends React.Component {
}; };
render() { render() {
const {isSidebarOpen, isSidebarMapOpen, toggleSidebar, toggleSidebarMap, getFacilities, selectedFacility,facilities,searchTerm,sortByFavorites,favorites} = this.props; const {isSidebarOpen, isSidebarMapOpen, toggleSidebar, toggleSidebarMap, getFacilities, selectedFacility, facilities, searchTerm, campusRegion, sortByFavorites, favorites} = this.props;
return ( return (
<div className={'layout-root'}> <div className={'layout-root'}>
<AppBar isOpen={false} handleMenuClick={() => { <AppBar isOpen={false} handleMenuClick={() => {
...@@ -47,7 +47,7 @@ class Layout extends React.Component { ...@@ -47,7 +47,7 @@ class Layout extends React.Component {
<div className={'layout-container'}> <div className={'layout-container'}>
<div className={'layout-main-content'}> <div className={'layout-main-content'}>
<div className={'layout-card-container'}> <div className={'layout-card-container'}>
<CardContainer styles={'layout-card-container'} searchTerm={searchTerm} <CardContainer styles={'layout-card-container'} searchTerm={searchTerm} campusRegion={campusRegion}
facilities={facilities} /> facilities={facilities} />
</div> </div>
</div> </div>
...@@ -65,6 +65,7 @@ function mapStateToProps(state) { ...@@ -65,6 +65,7 @@ function mapStateToProps(state) {
facilities: state.facilities.data, facilities: state.facilities.data,
favorites: state.ui.favorites, favorites: state.ui.favorites,
searchTerm: state.ui.search.term, searchTerm: state.ui.search.term,
campusRegion: state.ui.search.campusRegion,
isLoading: state.facilities.isLoading, isLoading: state.facilities.isLoading,
selectedFacility: state.ui.selectedFacility, selectedFacility: state.ui.selectedFacility,
isSidebarOpen: state.ui.sidebar.isOpen, isSidebarOpen: state.ui.sidebar.isOpen,
......
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import {connect} from 'react-redux'; import {connect} from 'react-redux';
import {setSearchTerm} from '../actions/ui'; import {setSearchTerm, setCampusRegion} from '../actions/ui';
import SearchIcon from 'material-ui-icons/Search'; import SearchIcon from 'material-ui-icons/Search';
import CloseIcon from 'material-ui-icons/Close'; import CloseIcon from 'material-ui-icons/Close';
import ArrowBackIcon from 'material-ui-icons/ArrowBack'; import ArrowBackIcon from 'material-ui-icons/ArrowBack';
import IconButton from 'material-ui/IconButton'; import IconButton from 'material-ui/IconButton';
import Input from 'material-ui/Input'; import Input from 'material-ui/Input';
import Paper from 'material-ui/Paper'; import Paper from 'material-ui/Paper';
import {MenuItem} from 'material-ui/Menu';
import Select from 'material-ui/Select';
import {FormControl} from 'material-ui/Form';
import classNames from 'classnames'; import classNames from 'classnames';
class SearchBar extends React.Component { class SearchBar extends React.Component {
...@@ -18,7 +21,8 @@ class SearchBar extends React.Component { ...@@ -18,7 +21,8 @@ class SearchBar extends React.Component {
this.state = { this.state = {
isFocused: false, isFocused: false,
isMobileOpen: false, isMobileOpen: false,
value: '' value: '',
campus: 'fairfax'
}; };
} }
...@@ -26,7 +30,16 @@ class SearchBar extends React.Component { ...@@ -26,7 +30,16 @@ class SearchBar extends React.Component {
this.setState({ this.setState({
value: e.target.value, value: e.target.value,
}); });
this.props.setSearchTerm(e.target.value)
this.props.setSearchTerm(e.target.value);
};
handleRegionChange = (e) => {
this.setState({
campus: e.target.value
});
this.props.setCampusRegion(e.target.value);
}; };
handleFocus = () => { handleFocus = () => {
...@@ -93,6 +106,16 @@ class SearchBar extends React.Component { ...@@ -93,6 +106,16 @@ class SearchBar extends React.Component {
<IconButton onClick={this.clear} disableRipple className={'search-bar-close-btn'}> <IconButton onClick={this.clear} disableRipple className={'search-bar-close-btn'}>
<CloseIcon/> <CloseIcon/>
</IconButton> </IconButton>
<FormControl className={'search-bar-campus-control'}>
<Select
value={this.state.campus}
onChange={this.handleRegionChange}>
<MenuItem value={'fairfax'}>Fairfax</MenuItem>
<MenuItem value={'arlington'}>Arlington</MenuItem>
<MenuItem value={'prince william county science and technology'}>Prince William</MenuItem>
<MenuItem value={'mason korea'}>Korea</MenuItem>
</Select>
</FormControl>
</Paper> </Paper>
); );
} }
...@@ -103,4 +126,4 @@ SearchBar.propTypes = { ...@@ -103,4 +126,4 @@ SearchBar.propTypes = {
onSearchCollapse: PropTypes.func onSearchCollapse: PropTypes.func
}; };
export default connect(null, {setSearchTerm})(SearchBar); export default connect(null, {setSearchTerm, setCampusRegion})(SearchBar);
\ No newline at end of file \ No newline at end of file
import { import {
TOGGLE_SIDEBAR, SET_SELECTED_FACILITY, SET_SEARCH_TERM, SET_FILTERED_LIST, TOGGLE_SIDEBAR, SET_SELECTED_FACILITY, SET_SEARCH_TERM, SET_CAMPUS_REGION,
ADD_FAVORITE_FACILITY, REMOVE_FAVORITE_FACILITY, SET_ALL_FAVORITES, TOGGLE_SIDEBAR_MAP, SET_SIDEBAR, ADD_FAVORITE_FACILITY, REMOVE_FAVORITE_FACILITY, SET_ALL_FAVORITES, TOGGLE_SIDEBAR_MAP, SET_SIDEBAR,
} from '../actions/action-types' } from '../actions/action-types'
const selectedFacility = (state = {}, action) => { const selectedFacility = (state = {}, action) => {
...@@ -37,8 +37,9 @@ const sidebar = (state=sidebarDefault,action) => { ...@@ -37,8 +37,9 @@ const sidebar = (state=sidebarDefault,action) => {
}; };
const searchbarState = { const searchbarState = {
term:'', term: '',
filteredList:[], campusRegion: 'fairfax',
filteredList: [],
}; };
const filterList = (state) =>{ const filterList = (state) =>{
...@@ -50,6 +51,10 @@ const search = (state=searchbarState,facilities=[],action) =>{ ...@@ -50,6 +51,10 @@ const search = (state=searchbarState,facilities=[],action) =>{
return Object.assign({},state,{ return Object.assign({},state,{
term:action.term, term:action.term,
}); });
case SET_CAMPUS_REGION:
return Object.assign({}, state, {
campusRegion: action.campusRegion
});
default: default:
return state; return state;
} }
......
...@@ -40,6 +40,11 @@ ...@@ -40,6 +40,11 @@
display: none !important; display: none !important;
} }
.search-bar-campus-control {
width: 150px;
justify-content: center;
}
.search-bar-has-value { .search-bar-has-value {
.search-bar-close-btn { .search-bar-close-btn {
display: inline-flex !important; display: inline-flex !important;
...@@ -75,11 +80,19 @@ ...@@ -75,11 +80,19 @@
width: 0 !important; width: 0 !important;
} }
.search-bar-campus-control {
display: none !important;
}
.search-bar-mobile-open { .search-bar-mobile-open {
.search-bar-input { .search-bar-input {
width: 100% !important; width: 100% !important;
} }
.search-bar-campus-control {
display: inline-flex !important;
}
.search-bar-search-btn { .search-bar-search-btn {
display: none !important; display: none !important;
} }
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment