Upstream sync

package.json

@@ -57,9 +57,8 @@
     "react": "^15.5.4",
     "react-cookie": "^2.1.2",
     "react-data-components": "^1.1.1",
-    "react-dialog": "^1.0.2",
     "react-dom": "^15.5.4",
-    "react-draggable": "^2.2.6",
+    "react-draggable": "^3.0.5",
     "react-geosuggest": "^2.5.0",
     "react-geosuggest-sw": "^1.4.13",
     "react-google-maps": "^7.2.0",
@@ -68,10 +67,8 @@
     "react-imgix": "^7.1.1",
     "react-jquery-datatables": "^0.7.1",
     "react-materialui-notifications": "^0.5.1",
-    "react-onclickoutside": "^5.10.0",
     "react-places-autocomplete": "^5.4.2",
     "react-redux": "^5.0.5",
-    "react-resizable": "^1.7.1",
     "react-router": "^3.0.4",
     "react-router-redux": "^4.0.8",
     "react-tap-event-plugin": "^2.0.1",

src/client.js

@@ -8,6 +8,10 @@ import { Router, hashHistory, browserHistory } from 'react-router';
 import { syncHistoryWithStore, routerMiddleware } from 'react-router-redux';
 import reducers from './reducers';
 import Instance from './components/Connection';
+import {
+  loggedUser,
+  visitReporter,
+} from 'utils/authorization';
 
 const middleware = routerMiddleware(hashHistory);
 const store = createStore(
@@ -55,7 +59,15 @@ const rootRoute = {
     onChange: requireAuth,
     onEnter: requireAuth,
     component: require('./containers/App'),
-    indexRoute: { onEnter: (nextState, replace) => replace('/app/table/rides') },
+    indexRoute: {
+      onEnter: (nextState, replace) => {
+        if (loggedUser.anyOf(visitReporter)) {
+          replace('/app/form/visit/' + loggedUser.useruuid)
+        } else {
+          replace('/app/table/rides');
+        }
+      }
+    },
     childRoutes: [
       require('./routes/app'),
       require('./routes/404'),

src/components/Header/NavRightList.js

@@ -4,6 +4,13 @@ import MenuItem from 'material-ui/MenuItem';
 import IconButton from 'material-ui/IconButton/IconButton';
 import { hashHistory } from 'react-router';
 
+import {
+  loggedUser,
+  planScheduler,
+  providerScheduler,
+  visitReporter,
+} from 'utils/authorization';
+
 const ImgIconButtonStyle = {
   width: '60px',
   height: '60px'
@@ -28,6 +35,7 @@ class NavRightList extends React.Component {
   handleChange = (event, value) => {
     hashHistory.push(value);
   }
+
   componentDidMount() {
     const user = JSON.parse(localStorage.getItem('loggedUser'));
     if (user) {
@@ -40,6 +48,8 @@ class NavRightList extends React.Component {
       <ul className="list-unstyled float-right">
         <li>
 
+
+
           <IconMenu
 
             iconButtonElement={<IconButton style={ImgIconButtonStyle}><img src="assets/images/ic_account_circle_white_48dp_1x.png" alt="" className="rounded-circle img30_30" /></IconButton>}
@@ -48,33 +58,48 @@ class NavRightList extends React.Component {
             targetOrigin={{ horizontal: 'right', vertical: 'top' }}
             menuStyle={{ minWidth: '150px' }}
           >
-            <MenuItem
+            {!loggedUser.anyOf(visitReporter) &&
-              onTouchTap={(e) => this.handleChange(e, `/app/authorizedusers/${this.state.useruuid}`)}
+              <MenuItem
-              primaryText="Profile"
+                onTouchTap={(e) => this.handleChange(e, `/app/authorizedusers/${this.state.useruuid}`)}
-              style={{ fontSize: '14px', lineHeight: '48px' }}
+                primaryText="Profile"
-              innerDivStyle={listItemStyle}
+                style={{ fontSize: '14px', lineHeight: '48px' }}
-              leftIcon={<i className="material-icons">account_circle</i>}
+                innerDivStyle={listItemStyle}
-            />
+                leftIcon={<i className="material-icons">account_circle</i>}
-            <MenuItem
+              />
-              onTouchTap={(e) => this.handleChange(e, `/app/form/steppers/${this.state.useruuid}`)}
+            }
-              primaryText="Book Ride"
+            {loggedUser.anyOf(visitReporter) &&
-              innerDivStyle={listItemStyle}
+              <MenuItem
-              style={{ fontSize: '14px', lineHeight: '48px' }}
+                onTouchTap={(e) => this.handleChange(e, `/app/form/visit/${this.state.useruuid}`)}
-              leftIcon={<i className="material-icons">mode_edit</i>}
+                primaryText="Create Visit"
-            />
+                innerDivStyle={listItemStyle}
-            <MenuItem
+                style={{ fontSize: '14px', lineHeight: '48px' }}
-              onTouchTap={(e) => this.handleChange(e, `/login`)}
+                leftIcon={<i className="material-icons">mode_edit</i>}
-              primaryText="Log Out"
+              />
-              innerDivStyle={listItemStyle}
+            }
-              style={{ fontSize: '14px', lineHeight: '48px' }}
+
-              leftIcon={<i className="material-icons">forward</i>}
+            {!loggedUser.anyOf(visitReporter) &&
-            />
+              <MenuItem
+                onTouchTap={(e) => this.handleChange(e, `/app/form/steppers/${this.state.useruuid}`)}
+                primaryText="Book Ride"
+                innerDivStyle={listItemStyle}
+                style={{ fontSize: '14px', lineHeight: '48px' }}
+                leftIcon={<i className="material-icons">mode_edit</i>}
+              />
+            }
+
+              <MenuItem
+                onTouchTap={(e) => this.handleChange(e, `/login`)}
+                primaryText="Log Out"
+                innerDivStyle={listItemStyle}
+                style={{ fontSize: '14px', lineHeight: '48px' }}
+                leftIcon={<i className="material-icons">forward</i>}
+              />
           </IconMenu>
         </li>
-        <li style={{ marginRight: '10px' }}><h6>{this.state.name}</h6></li>
+          <li style={{ marginRight: '10px' }}><h6>{this.state.name}</h6></li>
       </ul>
-    );
+        );
-  }
+      }
-}
+    }
-
+    
-module.exports = NavRightList;
+    module.exports = NavRightList;

src/components/Shared/ValidationErrorsInfoDialog.js

@@ -1,66 +1,68 @@
 import React, { Component } from 'react';
+import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
-import Dialog from './draggable-dialog';
-
-import './draggable-dialog/css/index.css';
-
-const defaultDialogHeight = 100; //px
-const dialogHeightPerLine = 25; //px
 
 export class ValidationErrorsInfoDialog extends React.Component {
-
+  constructor(props) {
-    state = {
+    super(props)
+    this.props = props;
+    this.state = {
       open: this.props.open,
-    }
+      title: "Errors",
-  
-    componentWillReceiveProps(newProps){
-      this.setState({open: newProps.open});
-    }
-  
-    handleOpen = () => {
-      this.setState({ open: true });
-    };
-  
-    handleClose = () => {
-      this.setState({ open: false });
-      this.props.onDismiss();
-    };
-  
-    render() {
-
-      const actions = [
-        <FlatButton
-          label="Dismiss"
-          primary={true}
-          onClick={this.handleClose}
-        />,
-      ];
-  
-      return (
-        <div className="container">
-            {
-                this.state.open &&
-                <Dialog
-                    title={this.props.title ? this.props.title : 'Error'}
-                    isDraggable={this.props.draggable ? this.props.draggable : false}
-                    buttons={actions}
-                    hasCloseIcon={false}
-                    modal={this.props.modal ? this.props.modal : false}
-                    height={defaultDialogHeight + this.props.errorMessages.length * dialogHeightPerLine}
-                >
-                    {this.props.errorMessages.map(errorMessage => {
-                      return (
-                        <div>
-                          <a>{errorMessage.message}</a>
-                          <br/>
-                        </div>
-                      );})
-                    }
-                </Dialog>
-            }
-        </div>
-      );
     }
   }
 
-  module.exports = ValidationErrorsInfoDialog;
+  componentWillReceiveProps(newProps) {
+    let title = this.state.title;
+    if (newProps.errorTitle) {
+      title = newProps.errorTitle;
+    }
+
+    this.setState({ open: newProps.open, title: title });
+  }
+
+  handleOpen = () => {
+    this.setState({ open: true });
+  };
+
+  handleClose = () => {
+    this.setState({ open: false });
+    this.props.onDismiss();
+  };
+
+  render() {
+
+    const actions = [
+      <FlatButton
+        label="Dismiss"
+        primary={true}
+        keyboardFocused={true}
+        onClick={this.handleClose}
+      />,
+    ];
+
+    return (
+      <div>
+        <Dialog
+          title={this.state.title}
+          actions={actions}
+          modal={this.props.modal ? this.props.modal : false}
+          open={this.state.open}
+          onRequestClose={this.handleClose}
+          overlayStyle={{ backgroundColor: 'transparent' }}
+        >
+          {this.props.errorMessages.map(errorMessage => {
+            return (
+              <div>
+                <a>{errorMessage.message}</a>
+                <br />
+              </div>
+            );
+          })}
+        </Dialog>
+      </div>
+    );
+  }
+}
+
+module.exports = ValidationErrorsInfoDialog;

src/components/Shared/draggable-dialog/DialogBody.js

@@ -1,18 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-
-class DialogBody extends React.Component {
-    render() {
-        return (
-            <div className="ui-dialog-content" style={{ "overflowY": "auto" }}>
-                {this.props.children}
-            </div>
-        );
-    }
-}
-
-DialogBody.propTypes = {
-    children: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
-};
-
-export default DialogBody;

src/components/Shared/draggable-dialog/DialogFooter.js

@@ -1,43 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import cs from "classnames";
-
-const DialogFooter = (props) => {
-    const buttons = props.buttons;
-    if (!buttons || buttons.length == 0) {
-        return false;
-    }
-
-    const dialogButtons = buttons.map(function (button, index) {
-        if (React.isValidElement(button)) {
-            return button;
-        }
-
-        const { text, onClick, className } = button;
-
-        return (
-            <button
-                key={`button-${index}`}
-                type="button"
-                className={cs("button", className)}
-                onClick={onClick}>
-                {text}
-            </button>
-        );
-    }, this);
-
-    return (
-        <div className="ui-dialog-buttonpane">
-            <div className="ui-dialog-buttonset">
-                {dialogButtons}
-            </div>
-        </div>
-    );
-};
-
-DialogFooter.propTypes = {
-    buttons: PropTypes.array,
-    onClose: PropTypes.func.isRequired
-};
-
-export default DialogFooter;

src/components/Shared/draggable-dialog/DialogTitle.js

@@ -1,65 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-
-const DialogTitle = ({ title, hasCloseIcon, onClose, allowMinimize, isMinimized, onMinimize, allowMaximize, isMaximized, onMaximize, onRestore }) => {
-    let closeIcon;
-    if (hasCloseIcon !== false) {
-        closeIcon = (
-            <i className="icon icon-close" onClick={onClose}></i>
-        );
-    }
-
-    let minimizeIcon;
-    if (allowMinimize) {
-        if (isMinimized) {
-            minimizeIcon = (
-                <i className="icon icon-restore" onClick={onRestore}></i>
-            );
-        } else {
-            minimizeIcon = (
-                <i className="icon icon-minimize" onClick={onMinimize}></i>
-            );
-        }
-    }
-
-    let maximizeIcon;
-    if (allowMaximize) {
-        if (isMaximized) {
-            maximizeIcon = (
-                <i className="icon icon-restore" onClick={onRestore}></i>
-            );
-        } else {
-            maximizeIcon = (
-                <i className="icon icon-maximize" onClick={onMaximize}></i>
-            );
-        }
-    }
-
-    return (
-        <header className="ui-dialog-titlebar">
-            <div className="title">
-                {title}
-            </div>
-            <div className="action-items">
-                {minimizeIcon}
-                {maximizeIcon}
-                {closeIcon}
-            </div>
-        </header>
-    );
-};
-
-DialogTitle.propTypes = {
-    hasCloseIcon: PropTypes.bool,
-    allowMinimize: PropTypes.bool,
-    allowMaximize: PropTypes.bool,
-    isMinimized: PropTypes.bool,
-    isMaximized: PropTypes.bool,
-    title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-    onClose: PropTypes.func.isRequired,
-    onMinimize: PropTypes.func,
-    onMaximize: PropTypes.func,
-    onRestore: PropTypes.func
-};
-
-export default DialogTitle;

src/components/Shared/draggable-dialog/css/index.css

@@ -1,167 +0,0 @@
-body {
-    width: 100%;
-    min-height: 700px;
-}
-
-a {
-    cursor: pointer;
-    text-decoration: underline;
-}
-
-.ui-dialog-overlay {
-    background: #aaaaaa;
-    opacity: .3;
-    filter: Alpha(Opacity=30);
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 100;
-}
-
-.ui-dialog {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    outline: 0 none;
-    padding: 0 !important;;
-    z-index: 101;
-    background-color: white;
-    border: 1px solid #f6f6f6;
-}
-
-.ui-dialog.maximized{
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100% !important;
-    height: 100% !important;
-}
-
-.ui-dialog.minimized{
-    position: fixed;
-    bottom: 0;
-    right: 0;
-}
-
-.ui-dialog .ui-dialog-titlebar {
-    position: relative;
-    font-size: 1em;
-    border-radius: 3px;
-    padding: 0.5em;
-    height: 35px;
-    /*border-bottom: 1px solid #f6f6f6;*/
-}
- 
-.ui-dialog.react-draggable .ui-dialog-titlebar{
-    cursor: move;
-}
-
-.ui-dialog.react-draggable .ui-dialog-content{
-    cursor: move;
-}
-
-.ui-dialog.react-draggable .ui-dialog-buttonpane {
-    cursor: move;
-}
-
-
-.ui-dialog .ui-dialog-titlebar .action-items {
-    float: right;
-    position: relative;
-}
-
-.ui-dialog .ui-dialog-titlebar .title {
-    float: left;
-    margin-right: .5em;
-    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
-    font-size: 1.3125em;
-    font-weight: 500;
-    line-height: 0.2em;
-    padding : 24px 0px 0px 19px;
-}
-
-.icon {
-    width: 24px;
-    height: 24px;
-    display: block;
-    float: left;
-    margin: 5px;
-    cursor: pointer;
-    background-size: cover;
-}
-
-.icon.icon-close {
-    width: 20px;
-    height: 20px;
-    background-image: url("./img/close.png");
-}
-
-.icon.icon-minimize {
-    background-image: url("./img/minimize.png");
-}
-
-.icon.icon-maximize {
-    background-image: url("./img/maximize.png");
-}
-
-.icon.icon-restore {
-    background-image: url("./img/restore.png");
-}
-
-.ui-dialog .ui-dialog-content {
-    background: none repeat scroll 0 0 transparent;
-    border: 0 none;
-    overflow: auto;
-    position: relative;
-    font-size: 1rem;
-    font-weight: 400;
-    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
-    line-height: 1.5em;
-    color:rgba(0, 0, 0, 0.54);
-    padding : 24px 24px 24px 24px;
-}
-
-.ui-dialog .ui-dialog-buttonpane {
-    position: absolute;
-    width: 100%;
-    bottom: 0;
-    text-align: right;
-    border-width: 1px 0 0 0;
-    /*border-top: 1px solid #f6f6f6;*/
-}
-
-.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset{
-    padding: 0.5em;
-}
-
-.ui-dialog .ui-dialog-buttonpane button {
-	margin: 0 .5em 0 .5em;
-    cursor: pointer;
-    background-color: #f6f6f6;
-    padding: 0.5em 1em;
-    outline: none;
-    border: 1px solid #CCCCCC;
-    border-radius: 3px;
-}
-
-.ui-dialog .ui-dialog-buttonpane button:hover{
-    background-color: #CCCCCC;
-    border: 1px solid #BBBBBB;
-}
-
-.ui-dialog .react-resizable-handle {
-    position: absolute;
-    width: 20px;
-    height: 20px;
-    bottom: 0;
-    right: 0;
-    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+');
-    background-position: bottom right;
-    padding: 0 3px 3px 0;
-    background-repeat: no-repeat;
-    background-origin: content-box;
-    box-sizing: border-box;
-    cursor: se-resize;
-}

src/components/Shared/draggable-dialog/index.js

@@ -1,171 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import cs from "classnames";
-import Draggable from "react-draggable";
-import { Resizable } from "react-resizable";
-import DialogTitle from "./DialogTitle";
-import DialogBody from "./DialogBody";
-import DialogFooter from "./DialogFooter";
-import EventStack from "active-event-stack";
-
-class Dialog extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            height: props.height,
-            width: props.width,
-            isMinimized: false,
-            isMaximized: false
-        };
-    }
-
-    componentWillMount() {
-        /**
-         * This is done in the componentWillMount instead of the componentDidMount
-         * because this way, a modal that is a child of another will have register
-         * for events after its parent
-         */
-        this.eventToken = EventStack.addListenable([
-            ["keydown", this.handleGlobalKeydown]
-        ]);
-    }
-
-    componentWillUnmount = () => {
-        EventStack.removeListenable(this.eventToken);
-    }
-
-    handleGlobalKeydown = (e) => {
-        if (this.props.closeOnEscape && e.keyCode == 27) {
-            e.stopPropagation();
-            this.onClose();
-        }
-
-        return false;
-    }
-
-    onClose = () => {
-        if (this.props.onClose) {
-            this.props.onClose();
-        }
-    }
-
-    onMinimize = () => {
-        this.setState({ isMinimized: true, isMaximized: false });
-    }
-
-    onMaximize = () => {
-        this.setState({ isMinimized: false, isMaximized: true });
-    }
-
-    onRestore = () => {
-        this.setState({ isMinimized: false, isMaximized: false });
-    }
-
-    onResize = (event, { element, size }) => {
-        this.setState({ width: size.width, height: size.height });
-    }
-
-    getDialogTitle = () => {
-        return (
-            <DialogTitle
-                title={this.props.title}
-                hasCloseIcon={this.props.hasCloseIcon}
-                allowMinimize={this.props.allowMinimize}
-                allowMaximize={this.props.allowMaximize}
-                isMinimized={this.state.isMinimized}
-                isMaximized={this.state.isMaximized}
-                onMinimize={this.onMinimize}
-                onMaximize={this.onMaximize}
-                onRestore={this.onRestore}
-                onClose={this.onClose}
-            />
-        );
-    }
-
-    render() {
-        const { height, width, isMinimized, isMaximized } = this.state;
-        const { modal, isDraggable, isResizable, buttons, children, position } = this.props;
-        const { x = -width / 2, y = -height / 2 } = position;
-
-        let dialog = (
-            <div style={{ height: height, width, transform: `translate(${x}px, ${y}px)` }} className={cs("ui-dialog", { "minimized": isMinimized, "maximized": isMaximized })}>
-                {this.getDialogTitle()}
-                {
-                    !isMinimized && <DialogBody>{children}</DialogBody>
-                }
-                {
-                    !isMinimized && <DialogFooter buttons={buttons} onClose={this.onClose}></DialogFooter>
-                }
-
-            </div>
-        );
-
-        if (!isMinimized && !isMaximized && isResizable) {
-            dialog = (
-                <Resizable className="box" height={height} width={width} onResize={this.onResize}>
-                    {dialog}
-                </Resizable>
-            );
-        }
-
-        if (!isMinimized && !isMaximized && isDraggable !== false) {
-            dialog = (
-                <Draggable handle=".ui-dialog" bounds="body" defaultPosition={{ x, y }}>
-                    {dialog}
-                </Draggable>
-            );
-        }
-
-        return (
-            <div
-                className={cs("ui-dialog-container", { "": modal })}>
-                {dialog}
-                {modal && <div className="ui-dialog-overlay"></div>}
-            </div>
-        );
-    }
-}
-
-Dialog.propTypes = {
-    height: PropTypes.number,
-    width: PropTypes.number,
-    modal: PropTypes.bool,
-    position: PropTypes.shape({
-        x: PropTypes.number,
-        y: PropTypes.number
-    }),
-    hasCloseIcon: PropTypes.bool,
-    allowMinimize: PropTypes.bool,
-    allowMaximize: PropTypes.bool,
-    isResizable: PropTypes.bool,
-    title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-    closeOnEscape: PropTypes.bool,
-    onClose: PropTypes.func,
-    children: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.element]).isRequired,
-    buttons: PropTypes.oneOfType([
-        PropTypes.arrayOf(PropTypes.shape({
-            text: PropTypes.string,
-            onClick: PropTypes.func
-        })),
-        PropTypes.arrayOf(PropTypes.element)
-    ])
-};
-
-Dialog.defaultProps = {
-    height: 200,
-    width: 600,
-    modal: false,
-    closeOnEscape: true,
-    isDraggable: false,
-    isResizable: false,
-    title: '',
-    hasCloseIcon: true,
-    allowMinimize: false,
-    allowMaximize: false,
-    onClose: null,
-    buttons: null,
-    position: { x: -250, y: -150 }
-};
-
-export default Dialog;

src/components/Sidenav/SidenavContent.js

@@ -102,9 +102,17 @@ class SidebarContent extends React.Component {
     return (
       <ul className="nav" ref={(c) => { this.nav = c; }}>
         {loggedUser.anyOf(visitReporter) &&
-          <li><FlatButton className="prepend-icon" href={"#/app/form/visit/" + this.state.user.useruuid}><span>Create Visit</span></FlatButton></li>
+          <li>
+            <FlatButton href="#/app/chart"><i className="nav-icon material-icons">schedule</i><span className="nav-text">Visits</span></FlatButton>
+            <ul>
+              <li><FlatButton className="prepend-icon" href={"#/app/form/visit/" + this.state.user.useruuid}><span>Add Visit</span></FlatButton></li>
+            </ul>
+          </li>
         }
+
+
         {!loggedUser.anyOf(visitReporter) &&
+
           <li>
             <FlatButton href="#/app/form"><i className="nav-icon material-icons cyan-text text-lighter-4">directions_car</i><span className="nav-text">Rides</span></FlatButton>
             <ul>
@@ -158,6 +166,8 @@ class SidebarContent extends React.Component {
         }
 
         <li className="nav-divider" />
+        <li><FlatButton className="prepend-icon" href={"#/login"}><span>Log Out</span></FlatButton></li>
+
       </ul>
     );
   }

src/routes/app/components/MainApp.js

@@ -5,6 +5,10 @@ import Footer from 'components/Footer';
 import Notifications from 'components/Notifications';
 import Notification from 'components/Shared/Notification';
 import GeolocationService from './Geolocation';
+import {
+  loggedUser,
+  visitReporter,
+} from 'utils/authorization';
 
 class MainApp extends React.Component {
   constructor(props) {
@@ -53,8 +57,9 @@ class MainApp extends React.Component {
             <Footer />
           </div>
         </section>
-        <Notifications user={this.state.user} onRideUpdate={this.handleRide} />
+        {!loggedUser.anyOf(visitReporter) &&
-        {/* <Notification user={this.state.user} onRideUpdate={this.handleRide} /> */}
+          <Notifications user={this.state.user} onRideUpdate={this.handleRide} />
+        }
       </div>
     );
   }

src/routes/app/components/NEMTLocation.js

@@ -151,7 +151,9 @@ export class NEMTLocation extends React.Component {
         long: 0,
         name: '',
         address: '',
-      }
+      },
+      searchingProvider: false,
+      providerList: [],
     }
 
     this.addCustomLabel = this.addCustomLabel.bind(this);
@@ -257,7 +259,7 @@ export class NEMTLocation extends React.Component {
             return p;
           });
 
-          this.setState(Object.assign(this.state, { nearbyPlaces: nearByPlaces, providers: providers }));
+          this.setState(Object.assign(this.state, { nearbyPlaces: nearByPlaces, providers: providers, providerList: nearByPlaces }));
         }
       });
     } else {
@@ -343,7 +345,7 @@ export class NEMTLocation extends React.Component {
         buttonText = buttonText.substring(0, self.state.textSize);
         buttonText += '...';
       }
-      self.setState(Object.assign(self.state, { buttonValue: buttonText, inputValue: name.address }));
+      self.setState(Object.assign(self.state, { buttonValue: buttonText, inputValue: name.address, searchingProvider: false, providerList: [] }));
     }).catch(console.error);
   }
 
@@ -569,7 +571,7 @@ export class NEMTLocation extends React.Component {
 
   updateTextSearch(searchText, dtSource, params) {
     let self = this;
-    self.setState(Object.assign(self.state, { inputValue: searchText }));
+    self.setState(Object.assign(self.state, { inputValue: searchText, searchingProvider: true }));
     if (searchText.length >= 3) {
       let lat = 0;
       let long = 0;
@@ -618,9 +620,11 @@ export class NEMTLocation extends React.Component {
                 clickResult.npi = p.fivePartKeyGroups[0].providerNum;
               }
 
-              return p;
+              var listItem = (<ListItem primaryText={p.providerName} secondaryText={clickResult.address} key={p.mukId} rightIcon={<MapsLocalHospital />} onClick={(event) => this.handlePlaceChanged(clickResult)} />)
+              return listItem;
             });
-            this.setState(Object.assign(this.state, { providers: providers }));
+
+            this.setState(Object.assign(this.state, { providerList: providers }));
             dtSource = self.state.providers;
           }
         });
@@ -1331,14 +1335,14 @@ export class NEMTLocation extends React.Component {
           {customAddresses}
           <ListItem primaryText="Add Custom Shortcut" rightIcon={<ArrowDropRight />} leftIcon={<MapsLocalHospital />} onClick={(e) => this.handleAddAddress(e, 'custom')} />
         </List>)
-      autosuggest = (<AutoComplete dataSourceConfig={datasourceConfig} dataSource={this.state.providers} filter={this.filterResults} maxSearchResults={5} onUpdateInput={this.updateTextSearch} fullWidth={true} floatingLabelText="Enter the Provider's name or address" onNewRequest={this.handleAutocomplete} searchText={this.state.inputValue} />)
+      autosuggest = (<AutoComplete dataSourceConfig={datasourceConfig} dataSource={this.state.providers} filter={this.filterResults} maxSearchResults={50} onUpdateInput={this.updateTextSearch} fullWidth={true} floatingLabelText="Enter the Provider's name or address" onNewRequest={this.handleAutocomplete} searchText={this.state.inputValue} />)
     } else {
-      autosuggest = (<AutoComplete dataSourceConfig={datasourceConfig} dataSource={this.state.providers} filter={this.filterResults} maxSearchResults={5} onUpdateInput={this.updateTextSearch} fullWidth={true} floatingLabelText="Enter the Member's address or a nearby intersection or public place" onNewRequest={this.handleAutocomplete} searchText={this.state.inputValue} />)
+      autosuggest = (<AutoComplete dataSourceConfig={datasourceConfig} dataSource={this.state.providers} filter={this.filterResults} maxSearchResults={50} onUpdateInput={this.updateTextSearch} fullWidth={true} floatingLabelText="Enter the Member's address or a nearby intersection or public place" onNewRequest={this.handleAutocomplete} searchText={this.state.inputValue} />)
     }
 
     let listItem = (
       <div className="" id="container">
-        <AutoComplete dataSourceConfig={datasourceConfig} dataSource={this.state.locations} filter={this.filterResults} maxSearchResults={5} onUpdateInput={this.updateLocationValue} fullWidth={true} floatingLabelText="Center Location" onNewRequest={this.handleAutoCompleteLocation} searchText={this.state.locationValue} />
+        <AutoComplete dataSourceConfig={datasourceConfig} dataSource={this.state.locations} filter={this.filterResults} maxSearchResults={50} onUpdateInput={this.updateLocationValue} fullWidth={true} floatingLabelText="Center Location" onNewRequest={this.handleAutoCompleteLocation} searchText={this.state.locationValue} />
         {autosuggest}
         <List>
           {this.state.currentLocation}
@@ -1352,8 +1356,21 @@ export class NEMTLocation extends React.Component {
         <List style={customListStyle}>
           {this.state.nearbyPlaces}
         </List>
-      </div >
+      </div>
     )
+
+    if (this.state.searchingProvider) {
+      listItem = (
+        <div className="" id="container">
+          <AutoComplete dataSourceConfig={datasourceConfig} dataSource={this.state.locations} filter={this.filterResults} maxSearchResults={50} onUpdateInput={this.updateLocationValue} fullWidth={true} floatingLabelText="Center Location" onNewRequest={this.handleAutoCompleteLocation} searchText={this.state.locationValue} />
+          {autosuggest}
+          <List style={customListStyle}>
+            {this.state.providerList}
+          </List>
+        </div>
+      )
+    }
+
     if (this.state.addLocation) {
       listItem = (
         <div className="" id="container">

src/routes/app/routes/forms/routes/steppers/components/VerticalNonLinear.js

@@ -405,8 +405,8 @@ class VerticalNonLinear extends React.Component {
       },
       return_time: new Date(),
       pickupTimeHide: false,
-      showValidationErrors:false,
+      showValidationErrors: false,
-      validationErrors:[]
+      validationErrors: [],
     };
   }
 
@@ -524,8 +524,8 @@ class VerticalNonLinear extends React.Component {
           if (error.response.status === 422) {
             //Unprocessable Entity (validation failed)
             self.setState(Object.assign(self.state, {
-              showValidationErrors:true,
+              showValidationErrors: true,
-              validationErrors:error.response.data.data
+              validationErrors: error.response.data.data
             }));
           }
         });
@@ -896,8 +896,8 @@ class VerticalNonLinear extends React.Component {
           <div className="box-body padding-xs">
 
             <div style={{ maxWidth: 380, margin: 'auto' }}>
-            <ValidationErrorsInfoDialog title={'Errors'} open = {this.state.showValidationErrors} draggable={true} modal={false} errorMessages = {this.state.validationErrors} onDismiss={this.handleValidationErrosDialogDismiss.bind(this)}/>         
+              <ValidationErrorsInfoDialog open={this.state.showValidationErrors} errorMessages={this.state.validationErrors} onDismiss={this.handleValidationErrosDialogDismiss.bind(this)} />
-              
+
               <Stepper
                 activeStep={this.state.stepIndex}
                 linear={false}

src/routes/app/routes/forms/routes/visit/components/VerticalNonLinear.js

@@ -715,18 +715,42 @@ class VerticalNonLinear extends React.Component {
             "gender": self.state.user.gender,
             "member": self.state.user.member,
             "birthdate": self.state.user.birthdate,
-            "type": self.state.user.type,
+            "type": "S",
             "email": self.state.user.email,
             "phonenumber": self.state.user.phonenumber
           },
           "visit_datetime": self.state.visitTime,
           "pickup_datetime": self.state.pickupTime,
           "external_id": self.state.visit_external_id,
-          "provider": self.state.destination.raw
+          "raw_provider": self.state.destination.raw
         };
 
         Instance.getRawConn().post('/v1/nemt/visits/', visit).then(function (res) {
-          window.location.href = '/#/app/table/visits';
+          const returnMessage = [
+            {
+              message: `Member: ${res.data.user.name} (${res.data.user.member}`
+            },
+            {
+              message: `Gender: ${res.data.user.gender}`
+            },
+            {
+              message: `Birth date: ${visit.user.type}`
+            },
+            {
+              message: `Member Type: ${res.data.user.birthdate}`
+            },
+            {
+              message: `Provider: ${res.data.provider.name}`
+            },
+            {
+              message: `Date: ${res.data.visit_datetime}`
+            }]
+
+          self.setState(Object.assign(self.state, {
+            showValidationErrors: true,
+            validationErrors: returnMessage,
+            errorTitle: "Visit Added"
+          }));
         }).catch(console.error);
         break;
       default:
@@ -860,7 +884,7 @@ class VerticalNonLinear extends React.Component {
         )}
         {step === 2 && (
           <RaisedButton
-            label="Confirm"
+            label="Add Visit"
             disableTouchRipple
             disableFocusRipple
             primary
@@ -1093,7 +1117,7 @@ class VerticalNonLinear extends React.Component {
           <div className="box-body padding-xs">
 
             <div style={{ maxWidth: 380, margin: 'auto' }}>
-              <ValidationErrorsInfoDialog open={this.state.showValidationErrors} errorMessages={this.state.validationErrors} onDismiss={this.handleValidationErrosDialogDismiss.bind(this)} />
+              <ValidationErrorsInfoDialog open={this.state.showValidationErrors} errorMessages={this.state.validationErrors} onDismiss={this.handleValidationErrosDialogDismiss.bind(this)} errorTitle={this.state.errorTitle} />
               <Stepper
                 activeStep={this.state.stepIndex}
                 linear={false}
@@ -1156,7 +1180,7 @@ class VerticalNonLinear extends React.Component {
 
 
                     {/* <TabsSection /> */}
-                    {this.renderStepActions(1, this)}
+                    {this.renderStepActions(2, this)}
                   </StepContent>
                 </Step>
 

src/routes/app/routes/pages/routes/eligibility/components/eligibility.js

@@ -192,7 +192,7 @@ class SignUp extends React.Component {
     return (
       <form className="">
         <fieldset>
-          <ValidationErrorsInfoDialog open = {this.state.showValidationErrors} errorMessages = {this.state.validationErrors} draggable={false} modal={true} onDismiss={this.handleValidationErrosDialogDismiss.bind(this)}/>         
+          <ValidationErrorsInfoDialog open = {this.state.showValidationErrors} errorMessages = {this.state.validationErrors} modal={true} onDismiss={this.handleValidationErrosDialogDismiss.bind(this)}/>         
           <div className="form-group">
             <TextField
               floatingLabelText="First Name"

src/routes/app/routes/pages/routes/map/components/Services.js

@@ -50,6 +50,7 @@ import FloatingActionButton from 'material-ui/FloatingActionButton';
 import ContentAdd from 'material-ui/svg-icons/content/add';
 import moment from 'moment';
 import { Card, CardActions, CardHeader, CardMedia, CardTitle, CardText } from 'material-ui/Card';
+import Draggable, { DraggableCore } from 'react-draggable'; // Both at the same time
 import Imgix from 'react-imgix'
 import Paper from 'material-ui/Paper';
 

src/routes/app/routes/tables/routes/visits/components/Datatable.js

@@ -40,7 +40,7 @@ const getDTList = function (member) {
   member.forEach((r, i) => {
     let bookRide = '';
     if (r.trip_type.key === 'no_trip') {
-      bookRide = (<a href={`/#/app/form/visitride/${r.visit_uuid}`}>Book Ride</a>)
+      bookRide = (<a href={`/#/app/form/visitride/${r.visit_uuid}`}>Book Ride </a>)
     }
 
     list.push(
@@ -48,8 +48,8 @@ const getDTList = function (member) {
         <td>{moment(r.visit_datetime).format('MM/DD/YYYY - h:mm a')}</td>
         <td><a href={""}>{r.provider.name}</a></td>
         <td><a href={"/#/app/member/" + r.user.useruuid}>{r.user.name}</a></td>
-        <td>{bookRide}</td>
+
-        <td><RoadTripLink rides={r.rides} isOpened={false} currentRide={null} visit={r} onRideClick={handleRide} /></td>
+        <td> <RoadTripLink rides={r.rides} isOpened={false} currentRide={null} visit={r} onRideClick={handleRide} /> {bookRide} </td>
         <td><a href={"/#/app/member/" + r.user.useruuid}>{r.user.member}</a></td>
         <td>{r.provider.provider_uuid}</td>
         <td>{r.visit_uuid}</td>
@@ -236,7 +236,7 @@ class DatatableComponent extends React.Component {
             <th>Visit Time</th>
             <th>Provider</th>
             <th>Member </th>
-            <th>Ride</th>
+            {/* <th>Ride</th> */}
             <th>Rides </th>
             <th>Subscriber ID</th>
             <th>Provider ID</th>

src/routes/login/components/Login.js

@@ -8,6 +8,10 @@ import Dialog from 'material-ui/Dialog';
 
 import Instance from '../../../components/Connection';
 
+import {
+  loggedUser
+} from 'utils/authorization';
+
 class Login extends React.Component {
   constructor(props) {
     super(props);
@@ -75,9 +79,10 @@ class Login extends React.Component {
         let auth = res.data;
         state.setCookie('token', auth.token, auth.valid_time);
         localStorage.setItem('loggedUser', JSON.stringify(auth.user));
-
         Instance.setToken(auth.token);
 
+        loggedUser.update();
+
         location.href = '/#/';
       }).catch(function (err) {
         state.setState(Object.assign(state.state, {

src/utils/authorization/loggedUser.js

@@ -3,11 +3,11 @@ import { contains } from 'ramda';
 
 import normalizeRoles from './normalizeRoles';
 
-const loggedUser = JSON.parse(window.localStorage.getItem('loggedUser'));
+const loggedUser = () => {
+  let user = JSON.parse(window.localStorage.getItem('loggedUser'));
 
-if (loggedUser) {
+  const anyOf = (...profiles) => {
-  loggedUser.anyOf = (...profiles) => {
+    const userRole = user.profiles[0];
-    const userRole = loggedUser.profiles[0];
     const userOrgType = userRole.organization.type.key;
     const roles = normalizeRoles(profiles);
 
@@ -22,7 +22,18 @@ if (loggedUser) {
     }
 
     return false;
-  };
+  }
+
+  const update = () => {
+    user = JSON.parse(window.localStorage.getItem('loggedUser'));
+    return user;
+  }
+
+  return {
+    user,
+    anyOf: anyOf,
+    update: update,
+  }
 }
 
-export default loggedUser;
+export default loggedUser();