Closes #156 - Request Type Selector

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',

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}
       />
-      <label htmlFor={checkboxId}>
+      <label htmlFor={checkboxId} style={style}>
         {label}
       </label>
     </>
@@ -65,6 +66,7 @@ Checkbox.propTypes = {
   name: PropTypes.string,
   value: PropTypes.string,
   checked: PropTypes.bool,
+  style: PropTypes.shape({}),
   rightToLeft: PropTypes.bool,
   color: PropTypes.string,
   size: PropTypes.oneOf(['small', '', 'medium', 'large']),
@@ -73,7 +75,6 @@ Checkbox.propTypes = {
   hasNoBorder: PropTypes.bool,
   hasBackgroundColor: PropTypes.bool,
   disabled: PropTypes.bool,
-  checked: PropTypes.bool,
 };
 
 Checkbox.defaultProps = {
@@ -83,6 +84,7 @@ Checkbox.defaultProps = {
   name: null,
   value: undefined,
   checked: false,
+  style: undefined,
   rightToLeft: false,
   color: 'primary',
   size: '',
@@ -91,5 +93,4 @@ Checkbox.defaultProps = {
   hasNoBorder: false,
   hasBackgroundColor: false,
   disabled: false,
-  checked: false,
 };

src/components/common/Dropdown.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'proptypes';
 import classNames from 'classnames';
 import DropdownItem from './DropdownItem';
 import Icon from './Icon';
+import COLORS from '../../styles/COLORS';
 
 const Dropdown = ({
   id,
@@ -114,6 +115,7 @@ const Dropdown = ({
             <Icon
               id="dropdown-icon"
               icon={isOpen ? 'angle-up' : 'angle-down'}
+              style={{ color: COLORS.FORMS.STROKE }}
             />
           </span>
         </button>

src/components/common/Icon.jsx

@@ -91,7 +91,7 @@ Icon.propTypes = {
 Icon.defaultProps = {
   label: null,
   handleClick: () => null,
-  color: 'black',
+  color: undefined,
   size: undefined,
   icon: 'home',
   iconSize: undefined,

src/components/main/menu/DateSelector/DateSelector.jsx

@@ -88,12 +88,12 @@ const DateSelector = ({
       }}
     >
       <div className="date-selector-title">
-        <span className="has-text-weight-bold is-size-5">
+        <span className="has-text-weight-bold is-size-6">
           Date Range Selection
         </span>
       </div>
       <div className="date-selector-dates" style={{ padding: '15px 0 10px' }}>
-        <span className="has-text-weight-normal is-size-6">
+        <span className="has-text-weight-normal">
           {`Start ${startDate || placeHolder} To ${endDate || placeHolder}`}
         </span>
       </div>
@@ -103,6 +103,7 @@ const DateSelector = ({
           list={dateRangeOptions}
           title="Select Date Range"
           width="349px"
+          style={{ color: COLORS.FONTS }}
           onClick={(dateOption) => {
             if (dateOption !== 'CUSTOM_DATE_RANGE') {
               const { newStartDate, newEndDate } = getDates(dateOption);

src/components/main/menu/Menu.jsx

@@ -5,7 +5,9 @@ import React, { useState } from 'react';
 import { slide as Sidebar } from 'react-burger-menu';
 
 import Button from '../../common/Button';
+import DateSelector from './DateSelector/DateSelector';
 import NCSelector from './NCSelector';
+import RequestTypeSelector from './RequestTypeSelector';
 
 // const buildDataUrl = () => {
 //   return `https://data.lacity.org/resource/${dataResources[year]}.json?$select=location,zipcode,address,requesttype,status,ncname,streetname,housenumber&$where=date_extract_m(CreatedDate)+between+${startMonth}+and+${endMonth}+and+requesttype='${request}'`;
@@ -98,7 +100,9 @@ const Menu = () => {
                 </strong>
               </p>
             </div>
+            <DateSelector />
             <NCSelector />
+            <RequestTypeSelector />
           </div>
         </div>
       </Sidebar>

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,
+}) => (
+  <div
+    id={`request-type-${type}`}
+    value={type}
+    style={typeContainerStyle}
+  >
+    <span
+      style={checkboxStyle}
+    >
+      <Checkbox
+        id={`request-checkbox-${type}`}
+        value={type}
+        size="small"
+        style={{ paddingLeft: '10px' }}
+        checked={selected}
+        handleClick={handleClick}
+      />
+      <Icon
+        id={`request-icon-${type}`}
+        icon="circle"
+        size="small"
+        style={{ color }}
+      />
+    </span>
+    <span>
+      {`${type} [${abbrev}]`}
+    </span>
+  </div>
+);
+
+const RequestTypeSelector = ({
+  requestTypes,
+  selectType,
+  selectAll,
+  deselectAll,
+}) => {
+  const handleItemClick = (e) => {
+    const type = e.target.value;
+    selectType(type);
+  };
+
+  const renderRequestItems = (items) => items.map((item) => (
+    <RequestItem
+      key={item.type}
+      type={item.type}
+      abbrev={item.abbrev}
+      handleClick={handleItemClick}
+      selected={requestTypes[item.type]}
+      color={item.color}
+    />
+  ));
+
+  return (
+    <div id="type-selector-container" style={{ color: COLORS.FONTS }}>
+      {/* ---------- Title ---------- */}
+      <div
+        className="type-selector-title"
+        style={{ paddingBottom: '15px', paddingTop: '15px' }}
+      >
+        <span
+          className="has-text-weight-bold is-size-6"
+          style={{ paddingRight: '10px' }}
+        >
+          Request Type Selection
+        </span>
+        <Icon
+          id="type-selector-info-icon"
+          icon="info-circle"
+          size="small"
+        />
+      </div>
+      <div className="columns is-0" style={{ width: '475px' }}>
+        <div className="column" style={{ paddingRight: '8px' }}>
+          {/* ---------- Select/Deselect All ---------- */}
+          <div
+            id="request-type-all"
+            value="all"
+            style={typeContainerStyle}
+          >
+            <span style={checkboxStyle}>
+              <Checkbox
+                id="request-checkbox-all"
+                value="all"
+                size="small"
+                style={{ paddingLeft: '10px' }}
+                handleClick={requestTypes.All ? deselectAll : selectAll}
+                checked={requestTypes.All}
+              />
+            </span>
+            <span className="has-text-weight-medium">
+              Select/Deselect All
+            </span>
+          </div>
+          { renderRequestItems(leftColumnItems) }
+        </div>
+        <div className="column" style={{ paddingLeft: '8px' }}>
+          { renderRequestItems(rightColumnItems) }
+        </div>
+      </div>
+    </div>
+  );
+};
+
+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,
+};