Merge branch 'dev'

package.json

@@ -78,6 +78,7 @@
   "dependencies": {
     "axios": "0.12.0",
     "draft-js": "0.7.0",
+    "json-loader": "^0.5.4",
     "lodash": "4.13.1",
     "moment": "2.13.0",
     "normalize.css": "4.2.0",

src/commons/Button.jsx

@@ -22,7 +22,7 @@ import React, { PropTypes } from 'react';
 */
 
 const createClasses = (props) => {
-    const classes = ['ui', 'button'];
+    const classes = ['large', 'ui', 'button'];
     if (props.fluid) classes.push('fluid');
     if (props.loading) classes.push('loading');
     if (props.right) classes.push('right floated');

src/commons/DropdownComponent/DropdownItem.jsx

@@ -21,12 +21,21 @@ const createClasses = (props) => {
     return classes;
 };
 
+const createIconClassnames = elem => {
+    if (elem && elem.indexOf('flag') !== -1) return elem;
+    else if (elem) return `${elem} icon`;
+    return '';
+};
+
 const DropdownItem = (props) => (
     <div
         onClick={() => props.handleSelect(props.item)}
         className={createClasses(props).join(' ')}
     >
-        {props.icon && <i className={`${props.item.icon || props.icon} icon`}></i>}
+        {props.icon ?
+            <i className={createIconClassnames(props.icon)}></i> :
+            <i className={createIconClassnames(props.item.icon)}></i>
+        }
         {props.item[props.label]}
     </div>
 );

src/commons/DropdownComponent/index.jsx

@@ -26,6 +26,13 @@ import './dropdown.scss';
 * onSelect - function: called when selected value is changed
 */
 
+const createIconClassnames = elem => {
+    if (elem && elem.indexOf('flag') !== -1) return elem;
+    else if (elem) return `${elem} icon`;
+    return '';
+};
+
+
 class Dropdown extends Component {
     constructor(props) {
         super(props);
@@ -35,23 +42,56 @@ class Dropdown extends Component {
             visible: false,
             active: false,
             search: '',
-            selected: null
+            selected: this.getIntialValue(props),
+            initialValue: props.initialValue,
+            initialValueSat: false
         };
     }
 
     componentDidMount() {
         window.addEventListener('keydown', this.handleKeyPress);
     }
 
+    componentWillReceiveProps(props) {
+        if (!this.state.initialValueSat) {
+            if (props.initialValue !== this.state.initialValue) {
+                const selected = this.getIntialValue(props);
+                this.setState({
+                    selected,
+                    initialValue: props.initialValue,
+                    initialValueSat: true
+                });
+            }
+        }
+        if (!props.value) {
+            const selectNullValue = (props.value === null);
+            if (!selectNullValue) this.setState({ selected: null });
+        }
+    }
+
     componentWillUnmount() {
         window.removeEventListener('keydown', this.handleKeyPress);
     }
 
+    getIntialValue(props) {
+        let selected = null;
+        if (props.noInitalValue) return null;
+        if (props.initialValue) {
+            selected = _.filter(props.children, data =>
+                (data.props.item[props.valueKey] === props.initialValue));
+        }
+        if (selected) {
+            if (selected.length) selected = selected[0].props.item;
+        }
+        return selected;
+    }
+
     toggleMenu() {
         const focus = !this.state.active;
         this.setState({
             visible: !this.state.visible,
             active: !this.state.active,
+            placeholder: false,
             search: ''
         });
         if (focus) ReactDOM.findDOMNode(this.refs.searchInput).focus();
@@ -89,8 +129,8 @@ class Dropdown extends Component {
     }
 
     handleSelect(selected) {
-        this.props.onSelect(selected[this.props.valueKey]);
         this.setState({ selected });
+        this.props.onSelect(selected[this.props.valueKey]);
         this.toggleMenu();
     }
 
@@ -101,7 +141,7 @@ class Dropdown extends Component {
         if (!this.state.selected) {
             selected = _.last(items);
         } else {
-            selected = items[items.indexOf(this.state.selected.id) - 1];
+            selected = items[items.indexOf(this.state.selected[this.props.valueKey]) - 1];
             if (!selected) selected = _.last(items);
         }
         selected = _.filter(this.props.children, data =>
@@ -117,7 +157,7 @@ class Dropdown extends Component {
         if (!this.state.selected) {
             selected = _.head(items);
         } else {
-            selected = items[items.indexOf(this.state.selected.id) + 1];
+            selected = items[items.indexOf(this.state.selected[this.props.valueKey]) + 1];
             if (!selected) selected = _.head(items);
         }
         selected = _.filter(this.props.children, data =>
@@ -183,15 +223,18 @@ class Dropdown extends Component {
                     <div
                         className={this.state.search.length > 0 ? 'text filtered' : 'text'}
                     >
-                        {this.props.icon && <i className={`${this.props.icon} icon`}></i>}
+                        {this.state.selected.icon &&
+                            <i className={createIconClassnames(this.state.selected.icon)}></i>}
+                        {(this.props.icon && !this.state.selected.icon) &&
+                            <i className={createIconClassnames(this.props.icon)}></i>}
                         {this.state.selected[this.props.label]}
                     </div>}
                 {!this.state.selected &&
                     <div
                         className={this.state.search.length > 0 ? 'text filtered' : 'text'}
                     >
                         {(this.props.icon && !this.props.button) &&
-                            <i className={`${this.props.icon} icon`} />}
+                            <i className={createIconClassnames(this.props.icon)} />}
                         {this.props.placeholder}
                     </div>}
                 <div
@@ -217,8 +260,10 @@ Dropdown.propTypes = {
     search: PropTypes.bool,
     button: PropTypes.bool,
     placeholder: PropTypes.string,
+    initialValue: PropTypes.string,
     label: PropTypes.string,
     error: PropTypes.bool,
+    noInitalValue: PropTypes.bool,
     disabled: PropTypes.bool,
     onSelect: PropTypes.func,
     fluid: PropTypes.bool,

src/commons/Form/SelectField.jsx

@@ -21,6 +21,11 @@ import DropdownItem from '../DropdownComponent/DropdownItem';
 *
 */
 
+const addNullValue = (props) => {
+    if (!props.allowNullValue) return props.values;
+    return [...props.values, { [props.valueKey]: null, [props.valueLabel]: props.nullValue }];
+};
+
 const SelectField = (props) => (
     <div className="field">
         <label>
@@ -31,15 +36,18 @@ const SelectField = (props) => (
             fluid
             search
             selection
+            noInitalValue={props.noInitalValue}
+            value={props.children.value}
             disabled={props.disabled}
             placeholder={props.placeholder}
             error={props.children.touched && props.children.error}
             label={props.valueLabel}
             icon={props.icon}
+            initialValue={props.children.initialValue}
             valueKey={props.valueKey}
             onSelect={props.children.onChange}
         >
-        {props.values.map(value => (
+        {addNullValue(props).map(value => (
             <DropdownItem
                 item={value}
                 key={value[props.valueKey]}
@@ -52,14 +60,14 @@ const SelectField = (props) => (
     </div>
 );
 
-
 SelectField.propTypes = {
     children: PropTypes.object.isRequired,
     values: PropTypes.array.isRequired,
     valueKey: PropTypes.string.isRequired,
     valueLabel: PropTypes.string.isRequired,
     allowNullValue: PropTypes.bool,
     search: PropTypes.bool,
+    noInitalValue: PropTypes.bool,
     label: PropTypes.string.isRequired,
     disabled: PropTypes.bool,
     placeholder: PropTypes.string,

src/commons/NotificationContainer.jsx

@@ -6,16 +6,16 @@ import { pushNotification } from '../actions/notificationActions';
 
 const colours = {
     success: '97, 184, 50',
-    error: '#cb020c',
-    warning: '#fb8c1b',
-    info: '#2d5c89'
+    error: '203, 2, 12',
+    warning: '251, 140, 27',
+    info: '45, 92, 137'
 };
 
 const createStyle = (isMobile) => {
     const style = {
         Containers: {
             DefaultStyle: {
-                padding: '0',
+                padding: '0px',
                 width: 'auto'
             },
             tc: {
@@ -27,9 +27,9 @@ const createStyle = (isMobile) => {
         },
         NotificationItem: {
             DefaultStyle: {
-                borderRadius: '0',
+                borderRadius: '0px',
                 fontSize: '18px',
-                margin: '0',
+                margin: '0px',
                 padding: '22px 50px',
                 opacity: '0.95',
                 minHeight: '63px'
@@ -70,7 +70,11 @@ const createStyle = (isMobile) => {
         Dismiss: {
             DefaultStyle: {
                 top: '24px',
-                right: '15px'
+                right: '15px',
+                backgroundColor: 'rgba(1,1,1, 0.3)',
+                width: '16px',
+                height: '16px',
+                paddingTop: '1px'
             }
         }
     };
@@ -95,8 +99,14 @@ class NotificationContainer extends Component {
     componentWillReceiveProps(newProps) {
         if (newProps.isMobile === this.state.isMobile) {
             const { message, level } = newProps.notification;
+
+            let notificationIcon = 'info';
+            if (level === 'error') notificationIcon = 'remove';
+            else if (level === 'success') notificationIcon = 'checkmark';
+            else if (level === 'warning') notificationIcon = 'warning';
+
             this.notificationSystem.addNotification({
-                message: `<i class="info icon"></i> ${message}`,
+                message: `<i class="${notificationIcon} icon"></i> ${message}`,
                 level,
                 position: 'tc',
                 autoDismiss: 7

src/commons/Segment.jsx

@@ -5,6 +5,7 @@ const createClasses = (props) => {
     const classes = ['ui', 'segment'];
     if (props.clearing) classes.push('clearing');
     if (props.blue) classes.push('blue');
+    if (props.center) classes.push('center aligned');
     return classes;
 };
 
@@ -19,6 +20,7 @@ const Segment = (props) => (
 Segment.propTypes = {
     clearing: PropTypes.bool,
     blue: PropTypes.bool,
+    center: PropTypes.bool,
     children: PropTypes.object,
     loading: PropTypes.bool
 };

src/commons/adminTripTable/index.jsx

@@ -42,7 +42,7 @@ class AdminTripTable extends Component {
                     userId={this.props.userId}
                     destinationId={this.props.destinationId}
                     role={this.props.role}
-                    requestsOnly={this.props.requestsOnly}
+                    statuses={this.props.statuses}
                 />
             </Segment>
         );
@@ -59,7 +59,7 @@ AdminTripTable.propTypes = {
     userId: PropTypes.number,
     destinationId: PropTypes.number,
     role: PropTypes.string,
-    requestsOnly: PropTypes.bool
+    statuses: PropTypes.array
 };
 
 export default connect(mapStateToProps)(AdminTripTable);