Merge pull request #16 from highideas/develop

Prepare to release

app/App.js

@@ -1,22 +1,32 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React from 'react'
+import ReactDOM from 'react-dom'
 import { Router, Route, IndexRoute, hashHistory } from 'react-router'
 import 'bulma/css/bulma.css'
 import 'font-awesome-webpack'
 
-import iClientComponent from 'components/IClient/IClient';
-import HomeComponent from 'components/Home/Home';
-import ClientComponent from 'components/Client/Client';
-import AreaComponent from 'components/Area/Area';
+import iClientComponent from 'components/IClient/IClient'
+import HomeComponent from 'components/Home/Home'
+import AreaComponent from 'components/Area/Area'
+import ListClientComponent from 'components/Client/List/Client'
+import ProfileClientComponent from 'components/Client/Profile/Client'
+import SaveClientComponent from 'components/Client/Save/Client'
+import CreateVisitComponent from 'components/Visit/Create/Visit'
+import CreateAreaComponent from 'components/Area/Create/Area'
 
 ReactDOM.render(
     <Router history={hashHistory} >
         <Route path="/" component={iClientComponent} >
             <IndexRoute component={HomeComponent} />
-            <Route path="client" component={ClientComponent} />
-            <Route path="area" component={AreaComponent} />
+            <Route path="clients" component={ListClientComponent} />
+            <Route path="client" component={ SaveClientComponent } />
+            <Route path="client/:id/update" component={ SaveClientComponent } />
+            <Route path="client/:id" component={ProfileClientComponent} />
+            <Route path="areas" component={AreaComponent} />
+            <Route path="area" component={CreateAreaComponent} />
+            <Route path="visit/:clientId/" component={CreateVisitComponent} />
             <Route path="visit/:id" component={AreaComponent} />
         </Route>
     </Router>,
     document.getElementById('app')
 );
+

app/components/Area/Area.js

@@ -27,7 +27,7 @@ class Area extends React.Component
                 areas: this.generate(response.data.visits)
             });
         }).catch((error) => {
-            if (error.response) {
+            if (typeof error.response.data.error !== 'undefined') {
                 this.setState({error: error.response.data.error});
             }
         });
@@ -57,6 +57,19 @@ class Area extends React.Component
         }
         return (
             <div className="container hello">
+                <div className="level header">
+                    <div className="level-left">
+                        <h2 className="title is-2">iClient</h2>
+                    </div>
+                    <div className="level-right">
+                        <Link to='/area' className="button is-info is-medium">
+                            <span className="icon">
+                                <i className="fa fa-plus"></i>
+                            </span>
+                            <span>New Area</span>
+                        </Link>
+                    </div>
+                </div>
                 { this.state.areas }
             </div>
         );

app/components/Area/Create/Area.js

@@ -0,0 +1,95 @@
+import React from 'react';
+import { Link, Router } from 'react-router'
+
+import Error from 'components/Error/Error'
+import AreaSelect from 'components/Area/Select/Area'
+import ClientService from 'services/Client'
+import AreaService from 'services/Area'
+
+class Area extends React.Component
+{
+    constructor(props, context) {
+        super(props, context);
+        this.handleSubmit = this.handleSubmit.bind(this);
+        this.state = {
+            error : '',
+            area : {}
+        };
+    }
+
+    handleSubmit(e) {
+        e.preventDefault();
+
+        let form = e.target;
+        let formData = {
+            _id : this.refs.area.value,
+            parent: form.querySelector('[name="parent"]').value
+        };
+
+        this.setState({area: formData});
+
+        AreaService.save(formData).then((response) => {
+            this.context.router.push("/clients");
+        }).catch((error) => {
+
+            this.setState({error: 'Error trying create area'});
+
+            let responseValid = typeof error.response.data !== 'undefined';
+
+            if (responseValid && typeof error.response.data.error !== 'undefined') {
+                this.setState({error: error.response.data.error});
+            }
+        });
+    }
+
+    render() {
+        if (this.state.error) {
+            return (<Error error={this.state.error} />);
+        }
+
+        return (
+            <div className="container">
+                <div className="columns is-vcentered">
+                    <div className="column is-4 is-offset-4">
+                        <h1 className="title">
+                            Create Area
+                        </h1>
+                        <form onSubmit={this.handleSubmit}>
+                            <div className="box">
+                                <label className="label">Area</label>
+                                <p className="control has-icon">
+                                    <input
+                                        ref='area'
+                                        className="input"
+                                        type="text"
+                                        placeholder="Center"
+                                        required="required"
+                                    />
+                                    <i className="fa fa-map-marker" />
+                                </p>
+                                <label className="label">Parent</label>
+                                <AreaSelect
+                                    select={ { name : 'parent' } }
+                                />
+                                <hr />
+                                <p className="control">
+                                    <button className="button is-primary">Save</button>
+                                    <Link to='/clients' className="button">
+                                        <span>Cancel</span>
+                                    </Link>
+                                </p>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+Area.contextTypes = {
+    router: React.PropTypes.object.isRequired
+};
+
+export default Area;
+

app/components/Area/Select/Area.js

@@ -0,0 +1,58 @@
+import React from 'react';
+
+import Error from 'components/Error/Error'
+import AreaService from 'services/Area'
+import styles from 'components/Area/Select/styles.css'
+
+class Area extends React.Component
+{
+    constructor(props, context) {
+        super(props, context);
+        this.state = {
+            error : '',
+            areas : null,
+        };
+    }
+
+    componentWillMount() {
+
+        AreaService.getAll().then((response) => {
+            this.setState({areas: response.data.areas});
+        }).catch((error) => {
+            this.setState({error: 'Error Found: Trying get areas'});
+            let isValidResponse = typeof error.response.data !== 'undefined';
+            if (isValidResponse && typeof error.response.data.error !== 'undefined') {
+                this.setState({error: error.response.data.error});
+            }
+        });
+    }
+
+    render() {
+        if (this.state.error) {
+            return (<Error error={this.state.error} />);
+        }
+        if (!this.state.areas) {
+            return <div>Loading...</div>;
+        }
+
+        const select = Object.assign({}, this.props.select);
+
+        return (
+            <p className="control has-icon">
+                <span className="select">
+                    <select {...select} >
+                        {
+                            this.state.areas.map((area, key) => (
+                                <option value={ area._id } key={ key }>{ area._id}</option>
+                            ))
+                        }
+                    </select>
+                </span>
+                <i className="fa fa-map-marker" aria-hidden="true" />
+            </p>
+        );
+    }
+}
+
+export default Area;
+

app/components/Area/Select/styles.css

@@ -0,0 +1,4 @@
+span.select select {
+    padding-left: 30px;
+}
+

app/components/Client/List/Client.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import { Link } from 'react-router'
+
+import ClientService from 'services/Client'
+import Error from 'components/Error/Error'
+
+class Client extends React.Component
+{
+    constructor(props) {
+        super(props);
+        this.state = {
+            clients : null,
+            error : ''
+        };
+        this.getClients();
+    }
+
+    getClients() {
+        ClientService.getClients().then((response) => {
+            this.setState({clients: response.data.clients});
+        }).catch((error) => {
+            this.setState({error: 'Error Found: Trying get client'});
+            if (typeof error.response.data.error !== 'undefined') {
+                this.setState({error: error.response.data.error});
+            }
+        });
+    }
+
+    render() {
+        if (this.state.error) {
+            return (<Error error={this.state.error} />);
+        }
+        if (!this.state.clients) {
+            return <div>Loading...</div>;
+        }
+        const clientList = this.state.clients.map((client, key) => {
+            let line = ((key % 2) ? 'is-success' : 'is-info');
+            return (
+                <tr key={key}>
+                    <td>
+                        { client.name }
+                    </td>
+                    <td>
+                        { client.address } - { client.city }
+                    </td>
+                    <td className="is-icon">
+                        <Link to={ `/client/${client._id}` } >
+                            <i className="fa fa-address-card"></i>
+                        </Link>
+                    </td>
+
+                    <td className="is-icon">
+                        <Link to={ `/visit/${client._id}/` } >
+                            <i className="fa fa-calendar-check-o"></i>
+                        </Link>
+                    </td>
+
+                </tr>
+            );
+        });
+
+        return (
+            <section className="">
+                <div className="container hello">
+                    <div className="level header">
+                        <div className="level-left">
+                            <h2 className="title is-2">iClient</h2>
+                        </div>
+                        <div className="level-right">
+                            <Link to='/client' className="button is-info is-medium">
+                                <span className="icon">
+                                    <i className="fa fa-plus"></i>
+                                </span>
+                                <span>New Client</span>
+                            </Link>
+                        </div>
+                    </div>
+                    <table className="table">
+                        <tbody>
+                            { clientList }
+                        </tbody>
+                    </table>
+                </div>
+            </section>
+        );
+    }
+}
+
+export default Client;
+