Skip to content

Commit 1dfdcbe

Browse files
GabrielDeveloperGabrielDeveloper
authored
Merge pull request #14 from marcoaraujojunior/develop
Upgrade client
2 parents 63e2c1c + c7de92c commit 1dfdcbe

26 files changed

+1652
-69
lines changed

‎app/App.js‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,23 @@ 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'
13+
import CreateVisitComponent from 'components/Visit/Create/Visit'
14+
import CreateAreaComponent from 'components/Area/Create/Area'
1215

1316
ReactDOM.render(
1417
<Router history={hashHistory} >
1518
<Route path="/" component={iClientComponent} >
1619
<IndexRoute component={HomeComponent} />
17-
<Route path="client" component={ListClientComponent} />
20+
<Route path="clients" component={ListClientComponent} />
21+
<Route path="client" component={ CreateClientComponent } />
1822
<Route path="client/:id" component={ProfileClientComponent} />
19-
<Route path="area" component={AreaComponent} />
23+
<Route path="areas" component={AreaComponent} />
24+
<Route path="area" component={CreateAreaComponent} />
25+
<Route path="visit/:clientId/" component={CreateVisitComponent} />
2026
<Route path="visit/:id" component={AreaComponent} />
2127
</Route>
2228
</Router>,
2329
document.getElementById('app')
2430
);
31+

‎app/components/Area/Area.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,19 @@ class Area extends React.Component
5757
}
5858
return (
5959
<div className="container hello">
60+
<div className="level header">
61+
<div className="level-left">
62+
<h2 className="title is-2">iClient</h2>
63+
</div>
64+
<div className="level-right">
65+
<Link to='/area' className="button is-info is-medium">
66+
<span className="icon">
67+
<i className="fa fa-plus"></i>
68+
</span>
69+
<span>New Area</span>
70+
</Link>
71+
</div>
72+
</div>
6073
{ this.state.areas }
6174
</div>
6275
);

‎app/components/Area/Create/Area.js‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import React from 'react';
2+
import { Link, Router } from 'react-router'
3+
4+
import Error from 'components/Error/Error'
5+
import AreaSelect from 'components/Area/Select/Area'
6+
import ClientService from 'services/Client'
7+
import AreaService from 'services/Area'
8+
9+
class Area extends React.Component
10+
{
11+
constructor(props, context) {
12+
super(props, context);
13+
this.handleSubmit = this.handleSubmit.bind(this);
14+
this.state = {
15+
error : '',
16+
area : {}
17+
};
18+
}
19+
20+
handleSubmit(e) {
21+
e.preventDefault();
22+
23+
let form = e.target;
24+
let formData = {
25+
_id : this.refs.area.value,
26+
parent: form.querySelector('[name="parent"]').value
27+
};
28+
29+
this.setState({area: formData});
30+
31+
AreaService.save(formData).then((response) => {
32+
this.context.router.push("/clients");
33+
}).catch((error) => {
34+
35+
this.setState({error: 'Error trying create area'});
36+
37+
let responseValid = typeof error.response.data !== 'undefined';
38+
39+
if (responseValid && typeof error.response.data.error !== 'undefined') {
40+
this.setState({error: error.response.data.error});
41+
}
42+
});
43+
}
44+
45+
render() {
46+
if (this.state.error) {
47+
return (<Error error={this.state.error} />);
48+
}
49+
50+
return (
51+
<div className="container">
52+
<div className="columns is-vcentered">
53+
<div className="column is-4 is-offset-4">
54+
<h1 className="title">
55+
Create Area
56+
</h1>
57+
<form onSubmit={this.handleSubmit}>
58+
<div className="box">
59+
<label className="label">Area</label>
60+
<p className="control has-icon">
61+
<input
62+
ref='area'
63+
className="input"
64+
type="text"
65+
placeholder="Center"
66+
required="required"
67+
/>
68+
<i className="fa fa-map-marker" />
69+
</p>
70+
<label className="label">Parent</label>
71+
<AreaSelect
72+
select={ { name : 'parent' } }
73+
/>
74+
<hr />
75+
<p className="control">
76+
<button className="button is-primary">Save</button>
77+
<Link to='/clients' className="button">
78+
<span>Cancel</span>
79+
</Link>
80+
</p>
81+
</div>
82+
</form>
83+
</div>
84+
</div>
85+
</div>
86+
);
87+
}
88+
}
89+
90+
Area.contextTypes = {
91+
router: React.PropTypes.object.isRequired
92+
};
93+
94+
export default Area;
95+

‎app/components/Area/Select/Area.js‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import React from 'react';
2+
3+
import Error from 'components/Error/Error'
4+
import AreaService from 'services/Area'
5+
import styles from 'components/Area/Select/styles.css'
6+
7+
class Area extends React.Component
8+
{
9+
constructor(props, context) {
10+
super(props, context);
11+
this.state = {
12+
error : '',
13+
areas : null,
14+
};
15+
}
16+
17+
componentWillMount() {
18+
19+
AreaService.getAll().then((response) => {
20+
this.setState({areas: response.data.areas});
21+
}).catch((error) => {
22+
this.setState({error: 'Error Found: Trying get areas'});
23+
let isValidResponse = typeof error.response.data !== 'undefined';
24+
if (isValidResponse && typeof error.response.data.error !== 'undefined') {
25+
this.setState({error: error.response.data.error});
26+
}
27+
});
28+
}
29+
30+
render() {
31+
if (this.state.error) {
32+
return (<Error error={this.state.error} />);
33+
}
34+
if (!this.state.areas) {
35+
return <div>Loading...</div>;
36+
}
37+
38+
const select = Object.assign({}, this.props.select);
39+
40+
return (
41+
<p className="control has-icon">
42+
<span className="select">
43+
<select {...select} >
44+
{
45+
this.state.areas.map((area, key) => (
46+
<option value={ area._id } key={ key }>{ area._id}</option>
47+
))
48+
}
49+
</select>
50+
</span>
51+
<i className="fa fa-map-marker" aria-hidden="true" />
52+
</p>
53+
);
54+
}
55+
}
56+
57+
export default Area;
58+

‎app/components/Area/Select/styles.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
span.select select {
2+
padding-left: 30px;
3+
}
4+

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

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

‎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+

0 commit comments

Comments
 (0)