Skip to content

Commit 90f8f87

Browse files
marcodearaujomarcodearaujo
committed
Create client
1 parent c5cb610 commit 90f8f87

File tree

6 files changed

+431
-28
lines changed

6 files changed

+431
-28
lines changed

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

Lines changed: 62 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import React from 'react';
2-
import { Link } from 'react-router'
2+
import { Link, Router } from 'react-router'
33

44
import Error from 'components/Error/Error'
5-
import styles from 'components/Client/Profile/styles.css'
5+
import AreaService from 'services/Area'
6+
import ClientService from 'services/Client'
7+
import styles from 'components/Client/Create/styles.css'
68

79
class Client extends React.Component
810
{
@@ -11,24 +13,55 @@ class Client extends React.Component
1113
super(props);
1214
this.handleSubmit = this.handleSubmit.bind(this);
1315
this.state = {
14-
client : null,
15-
error : ''
16+
error : '',
17+
areas : null,
18+
client: {}
1619
};
1720
}
1821

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+
1934
handleSubmit(e) {
2035
e.preventDefault();
2136

37+
let client = {}
2238
for (let i in this.refs) {
23-
console.log(this.refs[i].value);
39+
client[i] = this.refs[i].value;
2440
}
2541

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+
});
2656
}
2757

2858
render() {
2959
if (this.state.error) {
3060
return (<Error error={this.state.error} />);
3161
}
62+
if (!this.state.areas) {
63+
return <div>Loading...</div>;
64+
}
3265

3366
return (
3467
<div className="container">
@@ -42,8 +75,9 @@ class Client extends React.Component
4275
<label className="label">Name</label>
4376
<p className="control has-icon">
4477
<input
78+
required='required'
4579
ref='name'
46-
className="input"
80+
className="input marco"
4781
type="text"
4882
placeholder="John Smith"
4983
/>
@@ -52,26 +86,30 @@ class Client extends React.Component
5286
<label className="label">Phone</label>
5387
<p className="control has-icon">
5488
<input
89+
required='required'
90+
pattern="[\(]\d{2}[\)]\d{4,5}[\-]\d{4}"
5591
ref='phone'
5692
className="input"
5793
type="text"
58-
placeholder="21 99999-00000"
94+
placeholder="(21)99999-00000"
5995
/>
6096
<i className="fa fa-phone" aria-hidden="true" />
6197
</p>
6298
<label className="label">Address</label>
6399
<p className="control has-icon">
64100
<input
101+
required='required'
65102
ref='address'
66103
className="input"
67104
type="text"
68-
placeholder="Street 32 - Nª 23"
105+
placeholder="Street 32 - Nº 23"
69106
/>
70107
<i className="fa fa-address-card" aria-hidden="true" />
71108
</p>
72109
<label className="label">City</label>
73110
<p className="control has-icon">
74111
<input
112+
required='required'
75113
ref='city'
76114
className="input"
77115
type="text"
@@ -81,27 +119,32 @@ class Client extends React.Component
81119
</p>
82120
<label className="label">Area</label>
83121
<p className="control has-icon">
84-
<input
85-
ref='area'
86-
className="input"
87-
type="text"
88-
placeholder="Center"
89-
/>
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>
90131
<i className="fa fa-map-marker" aria-hidden="true" />
91132
</p>
92133
<label className="label">Frequency</label>
93134
<p className="control has-icon">
94135
<input
136+
required='required'
95137
ref='frequency'
96138
className="input"
97139
type="number"
98140
placeholder="10"
99141
/>
100-
<i className="fa fa-calendar-check-o" aria-hidden="true" />
142+
<i className="fa fa-refresh" aria-hidden="true" />
101143
</p>
102144
<label className="label">Ability</label>
103145
<p className="control has-icon">
104146
<input
147+
required='required'
105148
ref='ability'
106149
className="input"
107150
type="number"
@@ -125,6 +168,9 @@ class Client extends React.Component
125168
}
126169
}
127170

128-
export default Client;
171+
Client.contextTypes = {
172+
router: React.PropTypes.object.isRequired
173+
};
129174

175+
export default Client;
130176

‎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: 1 addition & 1 deletion
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

‎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 & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,32 @@ import axios from 'axios';
22

33
const Client = {
44

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

8-
let config = {
9+
getConfig() {
10+
return {
911
headers: {
1012
Authorization : window.localStorage.getItem('token')
1113
}
1214
};
13-
return axios.get(url.join('/'), config);
15+
},
16+
17+
getClients() {
18+
return axios.get(this.getEntryPoint().join('/'), this.getConfig());
1419
},
1520

1621
getClient(id) {
1722

18-
let url = [HOST, 'api', 'v1', 'client'];
23+
let url = this.getEntryPoint();
1924
url.push(id);
2025

21-
let config = {
22-
headers: {
23-
Authorization : window.localStorage.getItem('token')
24-
}
25-
};
26-
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());
2731
}
2832
};
2933

0 commit comments

Comments
 (0)