Skip to content

Commit c5cb610

Browse files
marcodearaujomarcodearaujo
committed
Start create client screen
1 parent 4af6f7d commit c5cb610

File tree

5 files changed

+167
-14
lines changed

5 files changed

+167
-14
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: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
import React from 'react';
2+
import { Link } from 'react-router'
3+
4+
import Error from 'components/Error/Error'
5+
import styles from 'components/Client/Profile/styles.css'
6+
7+
class Client extends React.Component
8+
{
9+
constructor(props, context) {
10+
super(props, context);
11+
super(props);
12+
this.handleSubmit = this.handleSubmit.bind(this);
13+
this.state = {
14+
client : null,
15+
error : ''
16+
};
17+
}
18+
19+
handleSubmit(e) {
20+
e.preventDefault();
21+
22+
for (let i in this.refs) {
23+
console.log(this.refs[i].value);
24+
}
25+
26+
}
27+
28+
render() {
29+
if (this.state.error) {
30+
return (<Error error={this.state.error} />);
31+
}
32+
33+
return (
34+
<div className="container">
35+
<div className="columns is-vcentered">
36+
<div className="column is-4 is-offset-4">
37+
<h1 className="title">
38+
Register a Client
39+
</h1>
40+
<form onSubmit={this.handleSubmit}>
41+
<div className="box">
42+
<label className="label">Name</label>
43+
<p className="control has-icon">
44+
<input
45+
ref='name'
46+
className="input"
47+
type="text"
48+
placeholder="John Smith"
49+
/>
50+
<i className="fa fa-id-card-o" aria-hidden="true" />
51+
</p>
52+
<label className="label">Phone</label>
53+
<p className="control has-icon">
54+
<input
55+
ref='phone'
56+
className="input"
57+
type="text"
58+
placeholder="21 99999-00000"
59+
/>
60+
<i className="fa fa-phone" aria-hidden="true" />
61+
</p>
62+
<label className="label">Address</label>
63+
<p className="control has-icon">
64+
<input
65+
ref='address'
66+
className="input"
67+
type="text"
68+
placeholder="Street 32 - Nª 23"
69+
/>
70+
<i className="fa fa-address-card" aria-hidden="true" />
71+
</p>
72+
<label className="label">City</label>
73+
<p className="control has-icon">
74+
<input
75+
ref='city'
76+
className="input"
77+
type="text"
78+
placeholder="London"
79+
/>
80+
<i className="fa fa-address-book" aria-hidden="true" />
81+
</p>
82+
<label className="label">Area</label>
83+
<p className="control has-icon">
84+
<input
85+
ref='area'
86+
className="input"
87+
type="text"
88+
placeholder="Center"
89+
/>
90+
<i className="fa fa-map-marker" aria-hidden="true" />
91+
</p>
92+
<label className="label">Frequency</label>
93+
<p className="control has-icon">
94+
<input
95+
ref='frequency'
96+
className="input"
97+
type="number"
98+
placeholder="10"
99+
/>
100+
<i className="fa fa-calendar-check-o" aria-hidden="true" />
101+
</p>
102+
<label className="label">Ability</label>
103+
<p className="control has-icon">
104+
<input
105+
ref='ability'
106+
className="input"
107+
type="number"
108+
placeholder="200"
109+
/>
110+
<i className="fa fa-shopping-basket" aria-hidden="true" />
111+
</p>
112+
<hr />
113+
<p className="control">
114+
<button className="button is-primary">Register</button>
115+
<Link to='/clients' className="button">
116+
<span>Cancel</span>
117+
</Link>
118+
</p>
119+
</div>
120+
</form>
121+
</div>
122+
</div>
123+
</div>
124+
);
125+
}
126+
}
127+
128+
export default Client;
129+
130+

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

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -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
}

0 commit comments

Comments
 (0)