From 1626a6de6f16ba0878160b0a7eae9f49b8d34d4f Mon Sep 17 00:00:00 2001
From: =Corey Hulen <corey@hulen.com>
Date: Wed, 23 Sep 2015 12:49:28 -0700
Subject: PLT-349 adding team mgt to admin console

---
 .../components/admin_console/select_team_modal.jsx | 193 +++++++++------------
 1 file changed, 84 insertions(+), 109 deletions(-)

(limited to 'web/react/components/admin_console/select_team_modal.jsx')

diff --git a/web/react/components/admin_console/select_team_modal.jsx b/web/react/components/admin_console/select_team_modal.jsx
index fa30de7b2..343f65131 100644
--- a/web/react/components/admin_console/select_team_modal.jsx
+++ b/web/react/components/admin_console/select_team_modal.jsx
@@ -1,124 +1,99 @@
 // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-export default class SelectTeam extends React.Component {
+var Modal = ReactBootstrap.Modal;
+
+export default class SelectTeamModal extends React.Component {
     constructor(props) {
         super(props);
 
-        this.state = {
-        };
+        this.doSubmit = this.doSubmit.bind(this);
+        this.doCancel = this.doCancel.bind(this);
     }
 
+    doSubmit(e) {
+        e.preventDefault();
+        this.props.onModalSubmit(React.findDOMNode(this.refs.team).value);
+    }
+    doCancel() {
+        this.props.onModalDismissed();
+    }
     render() {
+        if (this.props.teams == null) {
+            return <div/>;
+        }
+
+        var options = [];
+
+        for (var key in this.props.teams) {
+            if (this.props.teams.hasOwnProperty(key)) {
+                var team = this.props.teams[key];
+                options.push(
+                    <option
+                        key={'opt_' + team.id}
+                        value={team.id}
+                    >
+                        {team.name}
+                    </option>
+                );
+            }
+        }
+
         return (
-            <div className='modal fade'
-                id='select-team'
-                tabIndex='-1'
-                role='dialog'
-                aria-labelledby='teamsModalLabel'
+            <Modal
+                show={this.props.show}
+                onHide={this.doCancel}
             >
-                <div className='modal-dialog'
-                    role='document'
+                <Modal.Header closeButton={true}>
+                    <Modal.Title>{'Select Team'}</Modal.Title>
+                </Modal.Header>
+                <form
+                    role='form'
+                    className='form-horizontal'
                 >
-                    <div className='modal-content'>
-                        <div className='modal-header'>
-                            <button
-                                type='button'
-                                className='close'
-                                data-dismiss='modal'
-                                aria-label='Close'
-                            >
-                                <span aria-hidden='true'>&times;</span>
-                            </button>
-                            <h4
-                                className='modal-title'
-                                id='teamsModalLabel'
-                            >
-                                {'Select a team'}
-                            </h4>
-                        </div>
-                        <div className='modal-body'>
-                            <table className='more-channel-table table'>
-                                <tbody>
-                                    <tr>
-                                        <td>
-                                            <p className='more-channel-name'>{'Descartes'}</p>
-                                        </td>
-                                        <td className='td--action'>
-                                            <button className='btn btn-primary'>{'Join'}</button>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <p className='more-channel-name'>{'Grouping'}</p>
-                                        </td>
-                                        <td className='td--action'>
-                                            <button className='btn btn-primary'>{'Join'}</button>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <p className='more-channel-name'>{'Adventure'}</p>
-                                        </td>
-                                        <td className='td--action'>
-                                            <button className='btn btn-primary'>{'Join'}</button>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <p className='more-channel-name'>{'Crossroads'}</p>
-                                        </td>
-                                        <td className='td--action'>
-                                            <button className='btn btn-primary'>{'Join'}</button>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <p className='more-channel-name'>{'Sky scraping'}</p>
-                                        </td>
-                                        <td className='td--action'>
-                                            <button className='btn btn-primary'>{'Join'}</button>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <p className='more-channel-name'>{'Outdoors'}</p>
-                                        </td>
-                                        <td className='td--action'>
-                                            <button className='btn btn-primary'>{'Join'}</button>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <p className='more-channel-name'>{'Microsoft'}</p>
-                                        </td>
-                                        <td className='td--action'>
-                                            <button className='btn btn-primary'>{'Join'}</button>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <p className='more-channel-name'>{'Apple'}</p>
-                                        </td>
-                                        <td className='td--action'>
-                                            <button className='btn btn-primary'>{'Join'}</button>
-                                        </td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-                        <div className='modal-footer'>
-                            <button
-                                type='button'
-                                className='btn btn-default'
-                                data-dismiss='modal'
-                            >
-                                {'Close'}
-                            </button>
+                    <Modal.Body>
+                        <div className='form-group'>
+                            <div className='col-sm-12'>
+                                <select
+                                    ref='team'
+                                    size='10'
+                                    style={{width: '100%'}}
+                                >
+                                    {options}
+                                </select>
+                            </div>
                         </div>
-                    </div>
-                </div>
-            </div>
+                    </Modal.Body>
+                    <Modal.Footer>
+                        <button
+                            type='button'
+                            className='btn btn-default'
+                            onClick={this.doCancel}
+                        >
+                            {'Close'}
+                        </button>
+                        <button
+                            onClick={this.doSubmit}
+                            type='submit'
+                            className='btn btn-primary'
+                            tabIndex='2'
+                        >
+                            {'Select'}
+                        </button>
+                    </Modal.Footer>
+                </form>
+            </Modal>
         );
     }
-}
\ No newline at end of file
+}
+
+SelectTeamModal.defaultProps = {
+    show: false
+};
+
+SelectTeamModal.propTypes = {
+    teams: React.PropTypes.object,
+    show: React.PropTypes.bool.isRequired,
+    onModalSubmit: React.PropTypes.func,
+    onModalDismissed: React.PropTypes.func
+};
-- 
cgit v1.2.3-1-g7c22