Skip to content

Commit cd640c7

Browse files
marcodearaujomarcodearaujo
committed
Merge branch 'feature/create_client' into develop
2 parents 63e2c1c + 90f8f87 commit cd640c7

File tree

18 files changed

+611
-51
lines changed

18 files changed

+611
-51
lines changed

‎app/App.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,14 @@ import HomeComponent from 'components/Home/Home'
99
import AreaComponent from 'components/Area/Area'
1010
import ListClientComponent from 'components/Client/List/Client'
1111
import ProfileClientComponent from 'components/Client/Profile/Client'
12+
import CreateClientComponent from 'components/Client/Create/Client'
1213

1314
ReactDOM.render(
1415
<Router history={hashHistory} >
1516
<Route path="/" component={iClientComponent} >
1617
<IndexRoute component={HomeComponent} />
17-
<Route path="client" component={ListClientComponent} />
18+
<Route path="clients" component={ListClientComponent} />
19+
<Route path="client" component={ CreateClientComponent } />
1820
<Route path="client/:id" component={ProfileClientComponent} />
1921
<Route path="area" component={AreaComponent} />
2022
<Route path="visit/:id" component={AreaComponent} />

‎app/components/Client/Create/Client.js‎

Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
import React from 'react';
2+
import { Link, Router } from 'react-router'
3+
4+
import Error from 'components/Error/Error'
5+
import AreaService from 'services/Area'
6+
import ClientService from 'services/Client'
7+
import styles from 'components/Client/Create/styles.css'
8+
9+
class Client extends React.Component
10+
{
11+
constructor(props, context) {
12+
super(props, context);
13+
super(props);
14+
this.handleSubmit = this.handleSubmit.bind(this);
15+
this.state = {
16+
error : '',
17+
areas : null,
18+
client: {}
19+
};
20+
}
21+
22+
componentWillMount() {
23+
24+
AreaService.getAll().then((response) => {
25+
this.setState({areas: response.data.areas});
26+
}).catch((error) => {
27+
this.setState({error: 'Error Found: Trying get areas'});
28+
if (typeof error.response.data.error !== 'undefined') {
29+
this.setState({error: error.response.data.error});
30+
}
31+
});
32+
}
33+
34+
handleSubmit(e) {
35+
e.preventDefault();
36+
37+
let client = {}
38+
for (let i in this.refs) {
39+
client[i] = this.refs[i].value;
40+
}
41+
42+
this.setState({client: client});
43+
44+
ClientService.save(client).then((response) => {
45+
this.context.router.push("/clients");
46+
}).catch((error) => {
47+
48+
this.setState({error: 'Error trying create client'});
49+
50+
let responseValid = typeof error.response.data !== 'undefined';
51+
52+
if (responseValid && typeof error.response.data.error !== 'undefined') {
53+
this.setState({error: error.response.data.error});
54+
}
55+
});
56+
}
57+
58+
render() {
59+
if (this.state.error) {
60+
return (<Error error={this.state.error} />);
61+
}
62+
if (!this.state.areas) {
63+
return <div>Loading...</div>;
64+
}
65+
66+
return (
67+
<div className="container">
68+
<div className="columns is-vcentered">
69+
<div className="column is-4 is-offset-4">
70+
<h1 className="title">
71+
Register a Client
72+
</h1>
73+
<form onSubmit={this.handleSubmit}>
74+
<div className="box">
75+
<label className="label">Name</label>
76+
<p className="control has-icon">
77+
<input
78+
required='required'
79+
ref='name'
80+
className="input marco"
81+
type="text"
82+
placeholder="John Smith"
83+
/>
84+
<i className="fa fa-id-card-o" aria-hidden="true" />
85+
</p>
86+
<label className="label">Phone</label>
87+
<p className="control has-icon">
88+
<input
89+
required='required'
90+
pattern="[\(]\d{2}[\)]\d{4,5}[\-]\d{4}"
91+
ref='phone'
92+
className="input"
93+
type="text"
94+
placeholder="(21)99999-00000"
95+
/>
96+
<i className="fa fa-phone" aria-hidden="true" />
97+
</p>
98+
<label className="label">Address</label>
99+
<p className="control has-icon">
100+
<input
101+
required='required'
102+
ref='address'
103+
className="input"
104+
type="text"
105+
placeholder="Street 32 - Nº 23"
106+
/>
107+
<i className="fa fa-address-card" aria-hidden="true" />
108+
</p>
109+
<label className="label">City</label>
110+
<p className="control has-icon">
111+
<input
112+
required='required'
113+
ref='city'
114+
className="input"
115+
type="text"
116+
placeholder="London"
117+
/>
118+
<i className="fa fa-address-book" aria-hidden="true" />
119+
</p>
120+
<label className="label">Area</label>
121+
<p className="control has-icon">
122+
<span className="select">
123+
<select ref='area' >
124+
{
125+
this.state.areas.map((area, key) => (
126+
<option value={ area._id } key={ key }>{ area._id}</option>
127+
))
128+
}
129+
</select>
130+
</span>
131+
<i className="fa fa-map-marker" aria-hidden="true" />
132+
</p>
133+
<label className="label">Frequency</label>
134+
<p className="control has-icon">
135+
<input
136+
required='required'
137+
ref='frequency'
138+
className="input"
139+
type="number"
140+
placeholder="10"
141+
/>
142+
<i className="fa fa-refresh" aria-hidden="true" />
143+
</p>
144+
<label className="label">Ability</label>
145+
<p className="control has-icon">
146+
<input
147+
required='required'
148+
ref='ability'
149+
className="input"
150+
type="number"
151+
placeholder="200"
152+
/>
153+
<i className="fa fa-shopping-basket" aria-hidden="true" />
154+
</p>
155+
<hr />
156+
<p className="control">
157+
<button className="button is-primary">Register</button>
158+
<Link to='/clients' className="button">
159+
<span>Cancel</span>
160+
</Link>
161+
</p>
162+
</div>
163+
</form>
164+
</div>
165+
</div>
166+
</div>
167+
);
168+
}
169+
}
170+
171+
Client.contextTypes = {
172+
router: React.PropTypes.object.isRequired
173+
};
174+
175+
export default Client;
176+

‎app/components/Client/Create/styles.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
h1.title {
2+
text-align: center;
3+
color: #FFFFFF;
4+
}
5+
span.select select {
6+
padding-left: 30px;
7+
}
8+

‎app/components/Client/List/Client.js‎

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ class Client extends React.Component
5151

5252
<td className="is-icon">
5353
<Link to={ `#` } >
54-
<i className="fa fa-check"></i>
54+
<i className="fa fa-calendar-check-o"></i>
5555
</Link>
5656
</td>
5757

@@ -71,11 +71,28 @@ class Client extends React.Component
7171
});
7272

7373
return (
74-
<table className="table">
75-
<tbody>
76-
{ clientList }
77-
</tbody>
78-
</table>
74+
<section className="">
75+
<div className="container hello">
76+
<div className="level header">
77+
<div className="level-left">
78+
<h2 className="title is-2">iClient</h2>
79+
</div>
80+
<div className="level-right">
81+
<Link to='/client' className="button is-info is-medium">
82+
<span className="icon">
83+
<i className="fa fa-plus"></i>
84+
</span>
85+
<span>New Client</span>
86+
</Link>
87+
</div>
88+
</div>
89+
<table className="table">
90+
<tbody>
91+
{ clientList }
92+
</tbody>
93+
</table>
94+
</div>
95+
</section>
7996
);
8097
}
8198
}

‎app/components/Client/Profile/Client.js‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -44,22 +44,26 @@ class Client extends React.Component
4444
<img src="https://placehold.it/256x256" />
4545
</div>
4646
</div>
47-
<div className="column is-6 name">
47+
<div className="column is-4 name">
4848
<p>
4949
<span className="title is-bold color-black">
5050
<strong>{this.state.client.name}</strong>
5151
</span>
5252
</p>
5353
<p className="tagline">
54-
{this.state.client.address}
54+
<strong>Address: </strong>{this.state.client.address} - {this.state.client.city}
5555
</p>
5656
<p>
57-
<strong>{this.state.client.city}</strong>
57+
<strong>Area: </strong>{this.state.client.area._id}
5858
</p>
5959
</div>
60-
<div className="column is-4 followers has-text-centered">
61-
<p className="stat-val">Area</p>
62-
<p className="stat-key"><strong>{this.state.client.area._id}</strong></p>
60+
<div className="column is-3 followers has-text-centered">
61+
<p className="stat-val"><strong>{this.state.client.frequency}</strong></p>
62+
<p className="stat-key">Frequency</p>
63+
</div>
64+
<div className="column is-3 followers has-text-centered">
65+
<p className="stat-val"><strong>{this.state.client.ability}</strong></p>
66+
<p className="stat-key">Ability</p>
6367
</div>
6468
</div>
6569
</div>

‎app/components/Menu/Menu.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ class Menu extends React.Component{
1313
this.state = {
1414
links: [
1515
[ '/', 'Home'],
16-
['/client', 'Client'],
17-
['/area', 'Area']
16+
['/clients', 'Clients'],
17+
['/area', 'Areas']
1818
]
1919
};
2020
}

‎app/services/Area.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import axios from 'axios';
2+
3+
const Area = {
4+
5+
getAll() {
6+
let url = [HOST, 'api', 'v1', 'area'];
7+
8+
let config = {
9+
headers: {
10+
Authorization : window.localStorage.getItem('token')
11+
}
12+
};
13+
return axios.get(url.join('/'), config);
14+
}
15+
};
16+
17+
export default Area;
18+
19+

‎app/services/Client.js‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,33 @@
11
import axios from 'axios';
22

3-
import { HOST } from 'constants/Server';
4-
53
const Client = {
64

7-
getClients() {
8-
let url = [HOST, 'api', 'v1', 'client'];
5+
getEntryPoint() {
6+
return [ HOST, 'api', 'v1', 'client' ];
7+
},
98

10-
let config = {
9+
getConfig() {
10+
return {
1111
headers: {
1212
Authorization : window.localStorage.getItem('token')
1313
}
1414
};
15-
return axios.get(url.join('/'), config);
15+
},
16+
17+
getClients() {
18+
return axios.get(this.getEntryPoint().join('/'), this.getConfig());
1619
},
1720

1821
getClient(id) {
1922

20-
let url = [HOST, 'api', 'v1', 'client'];
23+
let url = this.getEntryPoint();
2124
url.push(id);
2225

23-
let config = {
24-
headers: {
25-
Authorization : window.localStorage.getItem('token')
26-
}
27-
};
28-
return axios.get(url.join('/'), config);
26+
return axios.get(url.join('/'), this.getConfig());
27+
},
28+
29+
save(client) {
30+
return axios.post(this.getEntryPoint().join('/'), client, this.getConfig());
2931
}
3032
};
3133

‎app/services/User.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import axios from 'axios';
2-
import { HOST } from 'constants/Server';
32

43
const User = {
54
login(username, password) {

‎app/services/Visit.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import axios from 'axios';
22

3-
import { HOST } from 'constants/Server';
4-
53
const Visit = {
64
getGroupByArea() {
75
let config = {

0 commit comments

Comments
 (0)