diff --git a/src/components/main/header/Header.jsx b/src/components/main/header/Header.jsx
index 639131093..d709ab035 100644
--- a/src/components/main/header/Header.jsx
+++ b/src/components/main/header/Header.jsx
@@ -26,6 +26,8 @@ const Header = () => {
background: COLORS.BRAND.MAIN,
height: '60px',
boxShadow: '0 2px 4px rgba(0, 0, 0, 0.5)',
+ // Really high z-index here to ensure Header is on top of modal
+ zIndex: '20000',
}}
>
diff --git a/src/components/main/menu/DateSelector/CustomDateInput.jsx b/src/components/main/menu/DateSelector/CustomDateInput.jsx
new file mode 100644
index 000000000..3cd7d4150
--- /dev/null
+++ b/src/components/main/menu/DateSelector/CustomDateInput.jsx
@@ -0,0 +1,76 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'proptypes';
+import classNames from 'classnames';
+
+// NOTE: This component is not currently 100% working and is not in use.
+// To be completed after MVP.
+
+const CustomDateInput = ({
+ value,
+ onClick,
+ onChange,
+ color,
+ size,
+ rounded,
+ hovered,
+ focused,
+ loading,
+ disabled,
+ readOnly,
+ isStatic,
+}, ref) => {
+ const inputClassName = classNames('input', {
+ [`is-${color}`]: color,
+ [`is-${size}`]: size,
+ 'is-rounded': rounded,
+ 'is-hovered': hovered,
+ 'is-focused': focused,
+ 'is-loading': loading,
+ 'is-static': isStatic,
+ });
+
+ return (
+ <>
+
+
+ );
+};
+
+export default forwardRef(CustomDateInput);
+
+CustomDateInput.propTypes = {
+ value: PropTypes.string,
+ onClick: PropTypes.func.isRequired,
+ onChange: PropTypes.func.isRequired,
+ color: PropTypes.oneOf(['primary', 'info', 'success', 'warning', 'danger']),
+ size: PropTypes.oneOf([undefined, 'small', 'medium', 'large']),
+ rounded: PropTypes.bool,
+ hovered: PropTypes.bool,
+ focused: PropTypes.bool,
+ loading: PropTypes.bool,
+ disabled: PropTypes.bool,
+ readOnly: PropTypes.bool,
+ isStatic: PropTypes.bool,
+};
+
+CustomDateInput.defaultProps = {
+ value: '',
+ color: 'primary',
+ size: undefined,
+ rounded: false,
+ hovered: false,
+ focused: false,
+ loading: false,
+ disabled: false,
+ readOnly: false,
+ isStatic: false,
+};
diff --git a/src/components/main/menu/DateSelector/DateRangePicker.jsx b/src/components/main/menu/DateSelector/DateRangePicker.jsx
new file mode 100644
index 000000000..97f6da8a9
--- /dev/null
+++ b/src/components/main/menu/DateSelector/DateRangePicker.jsx
@@ -0,0 +1,219 @@
+import React, { useState } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'proptypes';
+import moment from 'moment';
+import DatePicker from 'react-datepicker';
+
+import {
+ updateStartDate,
+ updateEndDate,
+} from '../../../../redux/reducers/data';
+
+import Button from '../../../common/Button';
+import Icon from '../../../common/Icon';
+
+import 'react-datepicker/dist/react-datepicker.css';
+import COLORS from '../../../../styles/COLORS';
+
+const cardStyle = {
+ height: '299px',
+ width: '400px',
+ overflow: 'visible',
+ boxShadow: '0px 6px 5px rgba(0, 0, 0, 0.5)',
+};
+
+const headerStyle = {
+ height: '50px',
+ background: COLORS.BACKGROUND,
+ color: COLORS.FONTS,
+ fontWeight: 'bold',
+ fontSize: '20px',
+ border: 'none',
+ borderRadius: '0',
+};
+
+const textStyle = {
+ fontSize: '16px',
+};
+
+const inputSpanStyle = {
+ display: 'inline-block',
+ width: '100px',
+ color: headerStyle.color,
+ ...textStyle,
+};
+
+const containerDivStyle = {
+ height: '42px',
+ width: '317px',
+ display: 'flex',
+ alignItems: 'center',
+};
+
+const DateRangePicker = ({
+ id,
+ title,
+ style,
+ handleClick,
+ updateStart,
+ updateEnd,
+}) => {
+ const [startDate, updateLocalStart] = useState();
+ const [endDate, updateLocalEnd] = useState();
+
+ const handleDateChange = (updateStartOrEndDate, date) => {
+ updateStartOrEndDate(date);
+ };
+
+ return (
+
+ {/* ---------- Modal Card Header ---------- */}
+
+
+ {/* ---------- Modal Card Body - main content ---------- */}
+
+
+
+
+
+ Start Date
+
+ handleDateChange(updateLocalStart, date)}
+ placeholderText="MM/DD/YYYY"
+ />
+
+
+
+
+ End Date
+
+ handleDateChange(updateLocalEnd, date)}
+ placeholderText="MM/DD/YYYY"
+ />
+
+
+
+ {/* ---------- Modal Card Footer - button(s) ---------- */}
+
+
+ );
+};
+
+const mapDispatchToProps = (dispatch) => ({
+ updateStart: (newStartDate) => dispatch(updateStartDate(newStartDate)),
+ updateEnd: (newEndDate) => dispatch(updateEndDate(newEndDate)),
+});
+
+export default connect(
+ null,
+ mapDispatchToProps,
+)(DateRangePicker);
+
+DateRangePicker.propTypes = {
+ id: PropTypes.string.isRequired,
+ title: PropTypes.string,
+ style: PropTypes.shape({}),
+ handleClick: PropTypes.func.isRequired,
+ updateStart: PropTypes.func.isRequired,
+ updateEnd: PropTypes.func.isRequired,
+};
+
+DateRangePicker.defaultProps = {
+ title: undefined,
+ style: undefined,
+};
diff --git a/src/components/main/menu/DateSelector/DateSelector.jsx b/src/components/main/menu/DateSelector/DateSelector.jsx
new file mode 100644
index 000000000..9b7524f39
--- /dev/null
+++ b/src/components/main/menu/DateSelector/DateSelector.jsx
@@ -0,0 +1,159 @@
+import React, { useState, useEffect } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'proptypes';
+import moment from 'moment';
+import {
+ updateStartDate,
+ updateEndDate,
+} from '../../../../redux/reducers/data';
+
+import Dropdown from '../../../common/Dropdown';
+import Modal from '../../../common/Modal';
+import DateRangePicker from './DateRangePicker';
+
+import COLORS from '../../../../styles/COLORS';
+
+const getDates = (dateOptionValue) => {
+ let newStartDate;
+ const newEndDate = moment().format('MM/DD/YYYY');
+ const formatPriorDate = (num, timeInterval) => moment().subtract(num, timeInterval).format('MM/DD/YYYY');
+
+ switch (dateOptionValue) {
+ case 'LAST_WEEK':
+ newStartDate = formatPriorDate(1, 'week');
+ break;
+ case 'LAST_MONTH':
+ newStartDate = formatPriorDate(1, 'month');
+ break;
+ case 'LAST_6_MONTHS':
+ newStartDate = formatPriorDate(6, 'months');
+ break;
+ case 'LAST_12_MONTHS':
+ newStartDate = formatPriorDate(12, 'months');
+ break;
+ case 'YEAR_TO_DATE':
+ newStartDate = moment().startOf('year').format('MM/DD/YYYY');
+ break;
+
+ // comment below circumvents eslint(default-case)
+ // no default
+ }
+ return { newStartDate, newEndDate };
+};
+
+const DateSelector = ({
+ style,
+ startDate,
+ endDate,
+ updateStart,
+ updateEnd,
+}) => {
+ const placeHolder = 'MM/DD/YYYY';
+ const dateRangeOptions = [
+ { label: 'Last Week', value: 'LAST_WEEK' },
+ { label: 'Last Month', value: 'LAST_MONTH' },
+ { label: 'Last 6 Months', value: 'LAST_6_MONTHS' },
+ { label: 'Last 12 months', value: 'LAST_12_MONTHS' },
+ { label: 'Year to Date', value: 'YEAR_TO_DATE' },
+ { label: 'Custom Date Range', value: 'CUSTOM_DATE_RANGE' },
+ ];
+ const [modalOpen, setModalOpen] = useState(false);
+
+ useEffect(() => {
+ const handleEscapeClick = (e) => {
+ if (e.keyCode !== 27) {
+ return;
+ }
+ setModalOpen(false);
+ };
+
+ if (modalOpen) {
+ document.addEventListener('keydown', handleEscapeClick);
+ } else {
+ document.removeEventListener('keydown', handleEscapeClick);
+ }
+
+ return () => {
+ document.removeEventListener('keydown', handleEscapeClick);
+ };
+ }, [modalOpen]);
+
+ return (
+
+
+
+ Date Range Selection
+
+
+
+
+ {`Start ${startDate || placeHolder} To ${endDate || placeHolder}`}
+
+
+
+ {
+ if (dateOption !== 'CUSTOM_DATE_RANGE') {
+ const { newStartDate, newEndDate } = getDates(dateOption);
+ updateStart(newStartDate);
+ updateEnd(newEndDate);
+ } else {
+ setModalOpen(true);
+ }
+ }}
+ />
+
+
setModalOpen(false)}
+ />
+ )}
+ />
+
+ );
+};
+
+const mapStateToProps = (state) => ({
+ startDate: state.data.startDate,
+ endDate: state.data.endDate,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+ updateStart: (newStartDate) => dispatch(updateStartDate(newStartDate)),
+ updateEnd: (newEndDate) => dispatch(updateEndDate(newEndDate)),
+});
+
+export default connect(
+ mapStateToProps,
+ mapDispatchToProps,
+)(DateSelector);
+
+DateSelector.propTypes = {
+ updateStart: PropTypes.func.isRequired,
+ updateEnd: PropTypes.func.isRequired,
+ style: PropTypes.shape({}),
+ startDate: PropTypes.string,
+ endDate: PropTypes.string,
+};
+
+DateSelector.defaultProps = {
+ style: undefined,
+ startDate: undefined,
+ endDate: undefined,
+};
diff --git a/src/components/main/menu/Menu.jsx b/src/components/main/menu/Menu.jsx
index 923c5b0fc..49c752134 100644
--- a/src/components/main/menu/Menu.jsx
+++ b/src/components/main/menu/Menu.jsx
@@ -1,6 +1,13 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
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}'`;
@@ -24,11 +31,10 @@ const Menu = () => {
return (
{
styles={{
bmMenu: {
background: 'white',
- boxShadow: '0 4px 5px grey',
+ boxShadow: '0px 4px 5px rgba(108, 108, 108, 0.3)',
},
}}
>
-
diff --git a/src/components/main/menu/NCSelector.jsx b/src/components/main/menu/NCSelector.jsx
new file mode 100644
index 000000000..37639235d
--- /dev/null
+++ b/src/components/main/menu/NCSelector.jsx
@@ -0,0 +1,170 @@
+import React, { useState } from 'react';
+import { connect } from 'react-redux';
+import propTypes from 'proptypes';
+
+import { updateNC } from '../../../redux/reducers/data';
+
+import { COUNCILS } from '../../common/CONSTANTS';
+import Checkbox from '../../common/Checkbox';
+
+const NCSelector = ({
+ updateNCList,
+}) => {
+ const [searchValue, setSearchValue] = useState('');
+ const [filteredCouncilList, setFilteredCouncilList] = useState(COUNCILS);
+ const [selectedCouncilList, setSelectedCouncilList] = useState(
+ COUNCILS.reduce((acc, council) => {
+ acc[council] = false;
+ return acc;
+ }, { all: false }),
+ );
+
+ const selectRowStyle = {
+ margin: '0 0 7px 0',
+ };
+
+ const selectRowTextStyle = {
+ width: '280px',
+ };
+
+ const handleSearch = (e) => {
+ const term = e.target.value;
+ const searchFilter = new RegExp(term, 'i');
+ const searchList = COUNCILS.filter((council) => searchFilter.test(council));
+ setFilteredCouncilList(searchList);
+ setSearchValue(e.target.value);
+ };
+
+ const handleSelectCouncil = (council) => {
+ const newSelectedCouncilList = { ...selectedCouncilList };
+
+ switch (council) {
+ case 'all': {
+ let value = true;
+
+ if (newSelectedCouncilList.all) {
+ newSelectedCouncilList.all = false;
+ value = false;
+ }
+
+ Object.keys(newSelectedCouncilList).forEach((c) => {
+ newSelectedCouncilList[c] = value;
+ });
+ break;
+ }
+ default:
+ newSelectedCouncilList.all = false;
+ newSelectedCouncilList[council] = !newSelectedCouncilList[council];
+ break;
+ }
+
+ const newNCList = Object.keys(newSelectedCouncilList).filter((c) => newSelectedCouncilList[c] && c !== 'all');
+
+ setSelectedCouncilList(newSelectedCouncilList);
+ updateNCList(newNCList);
+ };
+
+ return (
+
+
+
+
+ Neighborhood Council (NC) Selection
+
+
+
+
+
+
+
+
+
+
+
+
+ handleSelectCouncil('all')}
+ checked={selectedCouncilList?.all ?? false}
+ />
+
+
+
+
+ {filteredCouncilList.map((council) => (
+
+
+
+
+ handleSelectCouncil(council)}
+ checked={selectedCouncilList?.[council] ?? false}
+ />
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+ {`${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) }
+
+
+