feat(field-trip): add daily report feature; improve perf

Author: landonreed

lib/components/admin/field-trip-list.js

@@ -1,19 +1,28 @@
+import memoize from 'lodash.memoize'
+import moment from 'moment'
 import React, { Component } from 'react'
-import { Badge } from 'react-bootstrap'
+import { Badge, Button } from 'react-bootstrap'
 import { connect } from 'react-redux'
 
 import * as fieldTripActions from '../../actions/field-trip'
-import DraggableWindow from './draggable-window'
 import Icon from '../narrative/icon'
 import Loading from '../narrative/loading'
-import {FieldTripRecordButton, WindowHeader} from './styled'
 import {getVisibleRequests, TABS} from '../../util/call-taker'
 import {FETCH_STATUS} from '../../util/constants'
 
+import {FieldTripRecordButton, WindowHeader} from './styled'
+import DraggableWindow from './draggable-window'
+
 /**
  * Displays a searchable list of field trip requests in a draggable window.
  */
 class FieldTripList extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      date: moment().startOf('day').format('YYYY-MM-DD')
+    }
+  }
   _onClickFieldTrip = (request) => {
     const {callTaker, fetchFieldTripDetails, setActiveFieldTrip} = this.props
     if (request.id === callTaker.fieldTrip.activeId) {
@@ -30,6 +39,12 @@ class FieldTripList extends Component {
     this.props.setActiveFieldTrip(null)
   }
 
+  _getReportUrl = () => {
+    const {date} = this.state
+    const [year, month, day] = date.split('-')
+    return `${this.props.datastoreUrl}/fieldtrip/opsReport?month=${month}&day=${day}&year=${year}`
+  }
+
   /**
    * Change search input selectively. This is to prevent excessive rendering
    * each time the search input changes (on TriMet's production instance there
@@ -51,13 +66,40 @@ class FieldTripList extends Component {
     this.props.setFieldTripFilter({tab: e.currentTarget.name})
   }
 
+  _updateReportDate = evt => this.setState({ date: evt.target.value })
+
   render () {
     const {callTaker, style, toggleFieldTrips, visibleRequests} = this.props
     const {fieldTrip} = callTaker
     const {activeId, filter} = fieldTrip
     const {search} = filter
+    const {date} = this.state
     return (
       <DraggableWindow
+        footer={
+          <>
+            <input
+              className='datetime-slim'
+              onChange={this._updateReportDate}
+              style={{
+                border: 'none',
+                fontSize: '14px',
+                lineHeight: '1em',
+                outline: 'none',
+                width: '106px'
+              }}
+              type='date'
+              value={date}
+            />
+            <Button
+              bsSize='xsmall'
+              href={this._getReportUrl()}
+              target='_blank'
+            >
+              View report
+            </Button>
+          </>
+        }
         header={
           <>
             <WindowHeader>
@@ -83,27 +125,14 @@ class FieldTripList extends Component {
                 />
               </span>
             </WindowHeader>
-            {TABS.map(tab => {
-              const active = tab.id === filter.tab
-              const style = {
-                backgroundColor: active ? 'navy' : undefined,
-                borderRadius: 5,
-                color: active ? 'white' : undefined,
-                padding: '2px 3px'
-              }
-              const requestCount = fieldTrip.requests.data.filter(tab.filter).length
-              return (
-                <button
-                  className='clear-button-formatting'
-                  key={tab.id}
-                  name={tab.id}
-                  onClick={this._onTabChange}
-                  style={style}
-                >
-                  {tab.label} <Badge>{requestCount}</Badge>
-                </button>
-              )
-            })}
+            {TABS.map(tab =>
+              <Tab
+                data={fieldTrip.requests.data}
+                filter={filter}
+                key={tab.id}
+                onClick={this._onTabChange}
+                tab={tab} />
+            )}
           </>
         }
         onClickClose={toggleFieldTrips}
@@ -127,6 +156,32 @@ class FieldTripList extends Component {
   }
 }
 
+class Tab extends Component {
+  getCount = memoize((data, filter) => data.filter(filter).length)
+
+  render () {
+    const {data, filter, onClick, tab} = this.props
+    const active = tab.id === filter.tab
+    const style = {
+      backgroundColor: active ? 'navy' : undefined,
+      borderRadius: 5,
+      color: active ? 'white' : undefined,
+      padding: '2px 3px'
+    }
+    return (
+      <button
+        className='clear-button-formatting'
+        key={tab.id}
+        name={tab.id}
+        onClick={onClick}
+        style={style}
+      >
+        {tab.label} <Badge>{this.getCount(data, tab.filter)}</Badge>
+      </button>
+    )
+  }
+}
+
 class FieldTripRequestRecord extends Component {
   _onClick = () => {
     const {onClick, request} = this.props
@@ -151,8 +206,10 @@ class FieldTripRequestRecord extends Component {
       schoolName,
       startLocation,
       teacherName,
-      timeStamp
+      timeStamp,
+      travelDate
     } = request
+    const formattedDate = travelDate.split(' ').splice(0, 3).join(' ')
     return (
       <li
         className='list-unstyled'
@@ -174,11 +231,11 @@ class FieldTripRequestRecord extends Component {
               {this._getStatusIcon(outboundTripStatus)} Outbound
             </span>
           </span>
-          <span style={{display: 'block'}}>
+          <span style={{display: 'block', fontSize: '.9em'}}>
             Submitted by {teacherName} on {timeStamp}
           </span>
-          <span style={{display: 'block'}}>
-            {startLocation} to {endLocation}
+          <span style={{display: 'block', fontSize: '.9em'}}>
+            {startLocation} to {endLocation} on <strong>{formattedDate}</strong>
           </span>
         </FieldTripRecordButton>
       </li>
@@ -190,6 +247,7 @@ const mapStateToProps = (state, ownProps) => {
   return {
     callTaker: state.callTaker,
     currentQuery: state.otp.currentQuery,
+    datastoreUrl: state.otp.config.datastoreUrl,
     searches: state.otp.searches,
     visibleRequests: getVisibleRequests(state)
   }

lib/components/form/call-taker/date-time-options.js

@@ -184,6 +184,7 @@ export default class DateTimeOptions extends Component {
             trigger={['focus', 'hover']}
           >
             <input
+              className='datetime-slim'
               onChange={this.handleTimeChange}
               onFocus={this.handleTimeFocus}
               onKeyDown={onKeyDown}
@@ -199,6 +200,7 @@ export default class DateTimeOptions extends Component {
           </OverlayTrigger>
         </span>
         <input
+          className='datetime-slim'
           onChange={this.handleDateChange}
           onKeyDown={onKeyDown}
           style={{

lib/components/form/form.css

@@ -65,17 +65,17 @@
 /* Date/Time selectors */
 
 /* Remove up/down arrows on date/time input (to save on width) */
-.otp .search-options input[type="date"]::-webkit-inner-spin-button {
+.otp input[type="date"].datetime-slim::-webkit-inner-spin-button {
   -webkit-appearance: none;
 }
 
 /* Prevent the calendar picker from having a white margin that covers the date */
-.otp .search-options input[type="date"]::-webkit-calendar-picker-indicator {
+.otp input[type="date"].datetime-slim::-webkit-calendar-picker-indicator {
   background-color: rgba(0, 0, 0, 0.0);
   margin-left: 0px;
 }
 
-.otp .search-options input[type="time"]::-webkit-inner-spin-button {
+.otp input[type="time"].datetime-slim::-webkit-inner-spin-button {
   -webkit-appearance: none;
 }