Skip to content

Commit 0dc05f1

Browse files
marcodearaujomarcodearaujo
committed
Create Area
1 parent 533ad95 commit 0dc05f1

File tree

11 files changed

+215
-14
lines changed

11 files changed

+215
-14
lines changed

‎app/App.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import ListClientComponent from 'components/Client/List/Client'
1111
import ProfileClientComponent from 'components/Client/Profile/Client'
1212
import CreateClientComponent from 'components/Client/Create/Client'
1313
import CreateVisitComponent from 'components/Visit/Create/Visit'
14+
import CreateAreaComponent from 'components/Area/Create/Area'
1415

1516
ReactDOM.render(
1617
<Router history={hashHistory} >
@@ -19,10 +20,12 @@ ReactDOM.render(
1920
<Route path="clients" component={ListClientComponent} />
2021
<Route path="client" component={ CreateClientComponent } />
2122
<Route path="client/:id" component={ProfileClientComponent} />
22-
<Route path="area" component={AreaComponent} />
23+
<Route path="areas" component={AreaComponent} />
24+
<Route path="area" component={CreateAreaComponent} />
2325
<Route path="visit/:clientId/" component={CreateVisitComponent} />
2426
<Route path="visit/:id" component={AreaComponent} />
2527
</Route>
2628
</Router>,
2729
document.getElementById('app')
2830
);
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: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
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+
componentWillMount() {
21+
22+
AreaService.getAll().then((response) => {
23+
this.setState({areas: response.data.areas});
24+
}).catch((error) => {
25+
this.setState({error: 'Error Found: Trying get areas'});
26+
if (typeof error.response.data.error !== 'undefined') {
27+
this.setState({error: error.response.data.error});
28+
}
29+
});
30+
}
31+
32+
handleSubmit(e) {
33+
e.preventDefault();
34+
35+
let form = e.target;
36+
let formData = {
37+
_id : this.refs.area.value,
38+
parent: form.querySelector('[name="parent"]').value
39+
};
40+
41+
this.setState({area: formData});
42+
43+
AreaService.save(formData).then((response) => {
44+
this.context.router.push("/clients");
45+
}).catch((error) => {
46+
47+
this.setState({error: 'Error trying create area'});
48+
49+
let responseValid = typeof error.response.data !== 'undefined';
50+
51+
if (responseValid && typeof error.response.data.error !== 'undefined') {
52+
this.setState({error: error.response.data.error});
53+
}
54+
});
55+
}
56+
57+
render() {
58+
if (this.state.error) {
59+
return (<Error error={this.state.error} />);
60+
}
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+
Create a Area
72+
</h1>
73+
<form onSubmit={this.handleSubmit}>
74+
<div className="box">
75+
<label className="label">Area</label>
76+
<p className="control has-icon">
77+
<input
78+
ref='area'
79+
className="input"
80+
type="text"
81+
placeholder="Center"
82+
required="required"
83+
/>
84+
<i className="fa fa-map-marker" />
85+
</p>
86+
<label className="label">Parent</label>
87+
<AreaSelect
88+
name='parent'
89+
/>
90+
<hr />
91+
<p className="control">
92+
<button className="button is-primary">Save</button>
93+
<Link to='/clients' className="button">
94+
<span>Cancel</span>
95+
</Link>
96+
</p>
97+
</div>
98+
</form>
99+
</div>
100+
</div>
101+
</div>
102+
);
103+
}
104+
}
105+
106+
Area.contextTypes = {
107+
router: React.PropTypes.object.isRequired
108+
};
109+
110+
export default Area;
111+

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

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
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+
if (typeof error.response.data.error !== 'undefined') {
24+
this.setState({error: error.response.data.error});
25+
}
26+
});
27+
}
28+
29+
render() {
30+
if (this.state.error) {
31+
return (<Error error={this.state.error} />);
32+
}
33+
if (!this.state.areas) {
34+
return <div>Loading...</div>;
35+
}
36+
37+
return (
38+
<p className="control has-icon">
39+
<span className="select">
40+
<select {...this.props} >
41+
{
42+
this.state.areas.map((area, key) => (
43+
<option value={ area._id } key={ key }>{ area._id}</option>
44+
))
45+
}
46+
</select>
47+
</span>
48+
<i className="fa fa-map-marker" aria-hidden="true" />
49+
</p>
50+
);
51+
}
52+
}
53+
54+
export default Area;
55+

‎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: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,7 @@ class Client extends React.Component
161161
</p>
162162
<hr />
163163
<p className="control">
164-
<button className="button is-primary">Register</button>
164+
<button className="button is-primary">Save</button>
165165
<Link to='/clients' className="button">
166166
<span>Cancel</span>
167167
</Link>

‎app/components/Menu/Menu.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ class Menu extends React.Component{
1414
links: [
1515
[ '/', 'Home'],
1616
['/clients', 'Clients'],
17-
['/area', 'Areas']
17+
['/areas', 'Areas']
1818
]
1919
};
2020
}

‎app/components/Visit/Create/Visit.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ class Visit extends React.Component
4646
this.setState({visit: visit});
4747

4848
VisitService.save(visit).then((response) => {
49-
this.context.router.push("/area");
49+
this.context.router.push("/clients");
5050
}).catch((error) => {
5151

5252
this.setState({error: 'Error trying create visit'});
@@ -104,7 +104,13 @@ class Visit extends React.Component
104104
required="required"
105105
/>
106106
</p>
107-
<button className="button is-primary" >Save</button>
107+
<hr />
108+
<p className="control">
109+
<button className="button is-primary">Save</button>
110+
<Link to='/clients' className="button">
111+
<span>Cancel</span>
112+
</Link>
113+
</p>
108114
</div>
109115
</div>
110116
<div className="card-image">

‎app/services/Area.js‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,24 @@ import axios from 'axios';
22

33
const Area = {
44

5-
getAll() {
6-
let url = [HOST, 'api', 'v1', 'area'];
5+
getEntryPoint() {
6+
return [ HOST, 'api', 'v1', 'area' ];
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+
getAll() {
18+
return axios.get(this.getEntryPoint().join('/'), this.getConfig());
19+
},
20+
21+
save(data) {
22+
return axios.post(this.getEntryPoint().join('/'), data, this.getConfig());
1423
}
1524
};
1625

‎tests/Create.Visit.test.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ describe('Test Create Visit', () => {
5757
let context = {
5858
router: {
5959
push: (arg) => {
60-
expect(arg).toEqual('/area');
60+
expect(arg).toEqual('/clients');
6161
}
6262
}
6363
};
@@ -110,7 +110,7 @@ describe('Test Create Visit', () => {
110110
let context = {
111111
router: {
112112
push: (arg) => {
113-
expect(arg).toEqual('/area');
113+
expect(arg).toEqual('/clients');
114114
}
115115
}
116116
};
@@ -163,7 +163,7 @@ describe('Test Create Visit', () => {
163163
let context = {
164164
router: {
165165
push: (arg) => {
166-
expect(arg).toEqual('/area');
166+
expect(arg).toEqual('/clients');
167167
}
168168
}
169169
};
@@ -224,7 +224,7 @@ describe('Test Create Visit', () => {
224224
expect(component.find('.content p').at(0).text()).toEqual('Name: Test');
225225
expect(component.find('.content p').at(1).text()).toEqual('Address: fdajla');
226226
expect(component.find('.content p').at(2).text()).toEqual('City: fdajlkj');
227-
expect(component.find('.button').text()).toEqual('Save');
227+
expect(component.find('.button').at(0).text()).toEqual('Save');
228228
done();
229229
} catch(e) {
230230
console.log(e);

0 commit comments

Comments
 (0)