diff --git a/src/components/common/CONSTANTS.js b/src/components/common/CONSTANTS.js
index f96f3c2fc..16e0e631b 100644
--- a/src/components/common/CONSTANTS.js
+++ b/src/components/common/CONSTANTS.js
@@ -23,6 +23,69 @@ export const MONTHS = [
'December',
];
+export const REQUEST_TYPES = [
+ {
+ type: 'Dead Animal',
+ abbrev: 'DAN',
+ color: '#4FEFEF',
+ },
+ {
+ type: 'Homeless Encampment',
+ abbrev: 'HLE',
+ color: '#ECB800',
+ },
+ {
+ type: 'Single Streetlight',
+ abbrev: 'SSL',
+ color: '#AD7B56',
+ },
+ {
+ type: 'Multiple Streetlight',
+ abbrev: 'MSL',
+ color: '#F7ADAD',
+ },
+ {
+ type: 'Feedback',
+ abbrev: 'FBK',
+ color: '#FFE6B7',
+ },
+ {
+ type: 'Bulky Items',
+ abbrev: 'BLK',
+ color: '#FF0000',
+ },
+ {
+ type: 'E-Waste',
+ abbrev: 'EWT',
+ color: '#DDEC9F',
+ },
+ {
+ type: 'Metal/Household Appliances',
+ abbrev: 'MHA',
+ color: '#B8D0FF',
+ },
+ {
+ type: 'Graffiti',
+ abbrev: 'GFT',
+ color: '#2368D0',
+ },
+ {
+ type: 'Illegal Dumping',
+ abbrev: 'ILD',
+ color: '#6A8011',
+ },
+ {
+ type: 'Other',
+ abbrev: 'OTH',
+ color: '#6D7C93',
+ },
+
+ /*
+ * Is 'Report Water Waste' still a valid request type?
+ * If so, we're missing it on the front end mockups.
+ */
+];
+
export const REQUESTS = [
'Bulky Items',
'Dead Animal Removal',
diff --git a/src/components/common/Checkbox.jsx b/src/components/common/Checkbox.jsx
index 92785a8f0..8a20b676f 100644
--- a/src/components/common/Checkbox.jsx
+++ b/src/components/common/Checkbox.jsx
@@ -10,6 +10,7 @@ const Checkbox = ({
name,
value,
checked,
+ style,
/*
* Props below correspond with Bulma modifiers.
* wikiki.github.io/form/checkradio/
@@ -48,7 +49,7 @@ const Checkbox = ({
checked={checked}
disabled={disabled}
/>
-
+
+
diff --git a/src/components/main/menu/RequestTypeSelector.jsx b/src/components/main/menu/RequestTypeSelector.jsx
new file mode 100644
index 000000000..e0e221c67
--- /dev/null
+++ b/src/components/main/menu/RequestTypeSelector.jsx
@@ -0,0 +1,191 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'proptypes';
+import {
+ updateRequestType,
+ selectAllRequestTypes,
+ deselectAllRequestTypes,
+} from '../../../redux/reducers/data';
+
+import Checkbox from '../../common/Checkbox';
+import Icon from '../../common/Icon';
+
+import { REQUEST_TYPES } from '../../common/CONSTANTS';
+import COLORS from '../../../styles/COLORS';
+
+const typeContainerStyle = {
+ padding: '2px 0 2px 0',
+ fontSize: '14px',
+};
+
+const checkboxStyle = {
+ display: 'inline-block',
+ paddingRight: '3px',
+ paddingLeft: '3px',
+};
+
+const midIndex = ((list) => {
+ if (list.length / 2 === 0) {
+ return (list.length / 2);
+ }
+ return Math.floor(list.length / 2);
+})(REQUEST_TYPES);
+
+const leftColumnItems = REQUEST_TYPES.slice(0, midIndex);
+const rightColumnItems = REQUEST_TYPES.slice(midIndex);
+
+const RequestItem = ({
+ type,
+ abbrev,
+ selected,
+ color,
+ handleClick,
+}) => (
+
+
+
+
+
+
+ {`${type} [${abbrev}]`}
+
+
+);
+
+const RequestTypeSelector = ({
+ requestTypes,
+ selectType,
+ selectAll,
+ deselectAll,
+}) => {
+ const handleItemClick = (e) => {
+ const type = e.target.value;
+ selectType(type);
+ };
+
+ const renderRequestItems = (items) => items.map((item) => (
+
+ ));
+
+ return (
+
+ {/* ---------- Title ---------- */}
+
+
+ Request Type Selection
+
+
+
+
+
+ {/* ---------- Select/Deselect All ---------- */}
+
+
+
+
+
+ Select/Deselect All
+
+
+ { renderRequestItems(leftColumnItems) }
+
+
+ { renderRequestItems(rightColumnItems) }
+
+
+
+ );
+};
+
+const mapStateToProps = (state) => ({
+ requestTypes: state.data.requestTypes,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+ selectType: (type) => dispatch(updateRequestType(type)),
+ selectAll: () => dispatch(selectAllRequestTypes()),
+ deselectAll: () => dispatch(deselectAllRequestTypes()),
+});
+
+export default connect(
+ mapStateToProps,
+ mapDispatchToProps,
+)(RequestTypeSelector);
+
+RequestItem.propTypes = {
+ type: PropTypes.string,
+ abbrev: PropTypes.string,
+ color: PropTypes.string,
+ selected: PropTypes.bool,
+ handleClick: PropTypes.func,
+};
+
+RequestItem.defaultProps = {
+ type: null,
+ abbrev: null,
+ color: null,
+ selected: false,
+ handleClick: () => null,
+};
+
+RequestTypeSelector.propTypes = {
+ requestTypes: PropTypes.shape({
+ All: PropTypes.bool,
+ }),
+ selectType: PropTypes.func,
+ selectAll: PropTypes.func,
+ deselectAll: PropTypes.func,
+};
+
+RequestTypeSelector.defaultProps = {
+ requestTypes: null,
+ selectType: () => null,
+ selectAll: () => null,
+ deselectAll: () => null,
+};
diff --git a/src/redux/reducers/data.js b/src/redux/reducers/data.js
index 693d2975e..83a69cf4a 100644
--- a/src/redux/reducers/data.js
+++ b/src/redux/reducers/data.js
@@ -5,6 +5,8 @@ const types = {
UPDATE_END_DATE: 'UPDATE_END_DATE',
UPDATE_REQUEST_TYPE: 'UPDATE_REQUEST_TYPE',
UPDATE_NEIGHBORHOOD_COUNCIL: 'UPDATE_NEIGHBORHOOD_COUNCIL',
+ SELECT_ALL_REQUEST_TYPES: 'SELECT_ALL_REQUEST_TYPES',
+ DESELECT_ALL_REQUEST_TYPES: 'DESELECT_ALL_REQUEST_TYPES',
};
export const updateStartDate = (newStartDate) => ({
@@ -22,6 +24,14 @@ export const updateRequestType = (requestType) => ({
payload: requestType,
});
+export const selectAllRequestTypes = () => ({
+ type: types.SELECT_ALL_REQUEST_TYPES,
+});
+
+export const deselectAllRequestTypes = () => ({
+ type: types.DESELECT_ALL_REQUEST_TYPES,
+});
+
export const updateNC = (council) => ({
type: types.UPDATE_NEIGHBORHOOD_COUNCIL,
payload: council,
@@ -30,8 +40,36 @@ export const updateNC = (council) => ({
const initialState = {
startDate: null,
endDate: null,
- requestType: 'Bulky Items',
councils: [],
+ requestTypes: {
+ All: false,
+ 'Dead Animal': false,
+ 'Homeless Encampment': false,
+ 'Single Streetlight': false,
+ 'Multiple Streetlight': false,
+ 'Bulky Items': false,
+ 'E-Waste': false,
+ 'Metal/Household Appliances': false,
+ 'Illegal Dumping': false,
+ Graffiti: false,
+ Feedback: false,
+ Other: false,
+ },
+};
+
+const allRequestTypes = {
+ All: true,
+ 'Dead Animal': true,
+ 'Homeless Encampment': true,
+ 'Single Streetlight': true,
+ 'Multiple Streetlight': true,
+ 'Bulky Items': true,
+ 'E-Waste': true,
+ 'Metal/Household Appliances': true,
+ 'Illegal Dumping': true,
+ Graffiti: true,
+ Feedback: true,
+ Other: true,
};
export default (state = initialState, action) => {
@@ -51,7 +89,21 @@ export default (state = initialState, action) => {
case types.UPDATE_REQUEST_TYPE:
return {
...state,
- requestType: action.payload,
+ requestTypes: {
+ ...state.requestTypes,
+ // Flips boolean value for selected request type
+ [action.payload]: !state.requestTypes[action.payload],
+ },
+ };
+ case types.SELECT_ALL_REQUEST_TYPES:
+ return {
+ ...state,
+ requestTypes: allRequestTypes,
+ };
+ case types.DESELECT_ALL_REQUEST_TYPES:
+ return {
+ ...state,
+ requestTypes: initialState.requestTypes
};
case types.UPDATE_NEIGHBORHOOD_COUNCIL:
return {