Skip to content

Commit bddf0db

Browse files
marcodearaujomarcodearaujo
committed
Merge branch 'feature/update_client_view' into develop
2 parents eabe153 + d4f377d commit bddf0db

File tree

19 files changed

+579
-421
lines changed

19 files changed

+579
-421
lines changed

‎app/App.js‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,21 @@
1-
import React from 'react';
2-
import ReactDOM from 'react-dom';
1+
import React from 'react'
2+
import ReactDOM from 'react-dom'
33
import { Router, Route, IndexRoute, hashHistory } from 'react-router'
44
import 'bulma/css/bulma.css'
55
import 'font-awesome-webpack'
66

7-
import iClientComponent from 'components/IClient/IClient';
8-
import HomeComponent from 'components/Home/Home';
9-
import ClientComponent from 'components/Client/Client';
10-
import AreaComponent from 'components/Area/Area';
7+
import iClientComponent from 'components/IClient/IClient'
8+
import HomeComponent from 'components/Home/Home'
9+
import AreaComponent from 'components/Area/Area'
10+
import ListClientComponent from 'components/Client/List/Client'
11+
import ProfileClientComponent from 'components/Client/Profile/Client'
1112

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

‎app/components/Area/Area.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ class Area extends React.Component
2727
areas: this.generate(response.data.visits)
2828
});
2929
}).catch((error) => {
30-
if (error.response) {
30+
if (typeof error.response.data.error !== 'undefined') {
3131
this.setState({error: error.response.data.error});
3232
}
3333
});

‎app/components/Client/Client.js‎

Lines changed: 0 additions & 69 deletions
This file was deleted.

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

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import React from 'react';
2+
import { Link } from 'react-router'
3+
4+
import ClientService from 'services/Client'
5+
import Error from 'components/Error/Error'
6+
7+
class Client extends React.Component
8+
{
9+
constructor(props) {
10+
super(props);
11+
this.state = {
12+
clients : null,
13+
error : ''
14+
};
15+
this.getClients();
16+
}
17+
18+
getClients() {
19+
ClientService.getClients().then((response) => {
20+
this.setState({clients: response.data.clients});
21+
}).catch((error) => {
22+
this.setState({error: 'Error Found: Trying get client'});
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.clients) {
34+
return <div>Loading...</div>;
35+
}
36+
const clientList = this.state.clients.map((client, key) => {
37+
let line = ((key % 2) ? 'is-success' : 'is-info');
38+
return (
39+
<tr key={key}>
40+
<td>
41+
{ client.name }
42+
</td>
43+
<td>
44+
{ client.address } - { client.city }
45+
</td>
46+
<td className="is-icon">
47+
<Link to={ `/client/${client._id}` } >
48+
<i className="fa fa-address-card"></i>
49+
</Link>
50+
</td>
51+
52+
<td className="is-icon">
53+
<Link to={ `#` } >
54+
<i className="fa fa-check"></i>
55+
</Link>
56+
</td>
57+
58+
<td className="is-icon">
59+
<Link to={ `#` } >
60+
<i className="fa fa-calendar"></i>
61+
</Link>
62+
</td>
63+
64+
<td className="is-icon">
65+
<Link to={ `#` } >
66+
<i className="fa fa-close"></i>
67+
</Link>
68+
</td>
69+
</tr>
70+
);
71+
});
72+
73+
return (
74+
<table className="table">
75+
<tbody>
76+
{ clientList }
77+
</tbody>
78+
</table>
79+
);
80+
}
81+
}
82+
83+
export default Client;
84+

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

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
import React from 'react';
2+
import { CardStack, Card } from 'react-cardstack';
3+
import { Link } from 'react-router'
4+
5+
import ClientService from 'services/Client'
6+
import Error from 'components/Error/Error'
7+
import styles from 'components/Client/Profile/styles.css'
8+
9+
class Client extends React.Component
10+
{
11+
constructor(props) {
12+
super(props);
13+
this.state = {
14+
client : null,
15+
error : ''
16+
};
17+
this.getClient(this.props.params.id);
18+
}
19+
20+
getClient(id) {
21+
ClientService.getClient(id).then((response) => {
22+
this.setState({client: response.data.client.shift()});
23+
}).catch((error) => {
24+
this.setState({error: 'Error Found: Trying get client'});
25+
if (typeof error.response.data.error !== 'undefined') {
26+
this.setState({error: error.response.data.error});
27+
}
28+
});
29+
}
30+
31+
render() {
32+
if (this.state.error) {
33+
return (<Error error={this.state.error} />);
34+
}
35+
if (!this.state.client) {
36+
return <div>Loading...</div>;
37+
}
38+
39+
return (
40+
<div className="container column is-12">
41+
<div className="section profile-heading profile-heading-color">
42+
<div className="columns">
43+
<div className="column is-2">
44+
<div className="image is-128x128 avatar">
45+
<img src="https://placehold.it/256x256" />
46+
</div>
47+
</div>
48+
<div className="column is-6 name">
49+
<p>
50+
<span className="title is-bold color-black">
51+
<strong>{this.state.client.name}</strong>
52+
</span>
53+
</p>
54+
<p className="tagline">
55+
{this.state.client.address}
56+
</p>
57+
<p>
58+
<strong>{this.state.client.city}</strong>
59+
</p>
60+
</div>
61+
<div className="column is-4 followers has-text-centered">
62+
<p className="stat-val">Area</p>
63+
<p className="stat-key"><strong>{this.state.client.area._id}</strong></p>
64+
</div>
65+
</div>
66+
</div>
67+
<div className="profile-options">
68+
<nav className="nav">
69+
<div className="nav-center nav-menu is-active">
70+
<span className="nav-item">
71+
<a className="button" >
72+
<span className="icon">
73+
<i className="fa fa-check"></i>
74+
</span>
75+
<span>Visited</span>
76+
</a>
77+
<a className="button" href="#">
78+
<span className="icon">
79+
<i className="fa fa-pencil"></i>
80+
</span>
81+
<span>Update</span>
82+
</a>
83+
</span>
84+
<span className="nav-item">
85+
<a className="button" >
86+
<span className="icon">
87+
<i className="fa fa-calendar"></i>
88+
</span>
89+
<span>Schedule</span>
90+
</a>
91+
<a className="button is-danger" href="#">
92+
<span className="icon">
93+
<i className="fa fa-close"></i>
94+
</span>
95+
<span>Delete</span>
96+
</a>
97+
</span>
98+
</div>
99+
</nav>
100+
</div>
101+
</div>
102+
);
103+
}
104+
}
105+
106+
export default Client;
107+

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

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
body {
2+
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
3+
}
4+
.container.profile {
5+
margin-top:50px;
6+
}
7+
.profile-heading {
8+
margin: 20px 0;
9+
padding-bottom: 30px;
10+
}
11+
.profile-heading .name {
12+
border-right: 1px solid #f1f1f1;
13+
margin:-30px 0;
14+
padding: 40px 30px 0 30px;
15+
}
16+
.profile-heading .followers, .profile-heading .following {
17+
border-right: 1px solid #f1f1f1;
18+
margin:-30px 0;
19+
padding: 70px 30px;
20+
}
21+
.profile-heading .likes {
22+
margin:-30px 0;
23+
padding: 70px 30px;
24+
}
25+
.profile-heading .stat-key {
26+
font-size: 20px;
27+
font-weight: 200;
28+
}
29+
.profile-heading .stat-val {
30+
font-size: 35px;
31+
font-weight: bold;
32+
}
33+
.profile-options {
34+
background-color: #f1f1f1;
35+
margin:-20px 0 20px 0;
36+
}
37+
.profile-options .link a {
38+
padding:18px;
39+
font-size: 18px;
40+
}
41+
.profile-options .link .icon {
42+
font-size: 16px;
43+
padding-top:2px;
44+
}
45+
.tagline {
46+
padding:20px 0;
47+
font-size: 16px;
48+
line-height: 1.4;
49+
}
50+
.avatar {
51+
float: right;
52+
}
53+
.follow {
54+
float: right;
55+
}
56+
.avatar img {
57+
border-radius: 200px;
58+
}
59+
p.title.is-bold {
60+
font-weight: bold;
61+
}
62+
.card .timestamp {
63+
float:right;
64+
color:#bbb;
65+
}
66+
.profile-heading-color {
67+
color: #333;
68+
}
69+
.color-black {
70+
color: black !important;
71+
}

‎app/components/IClient/IClient.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import React from 'react';
22

3-
import LoginComponent from 'components/Login/Login';
4-
import MenuComponent from 'components/Menu/Menu';
3+
import LoginComponent from 'components/Login/Login'
4+
import MenuComponent from 'components/Menu/Menu'
5+
6+
import styles from 'components/IClient/styles.css'
57

68
class IClient extends React.Component
79
{
@@ -14,7 +16,7 @@ class IClient extends React.Component
1416
return (
1517
<div>
1618
<MenuComponent />
17-
<section className="hero is-fullheight is-primary">
19+
<section className="body-primary">
1820
{this.props.children}
1921
</section>
2022
</div>

‎app/components/IClient/styles.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.body-primary {
2+
min-height: 100vh;
3+
background-color: #00d1b2;
4+
color: #333;
5+
}

0 commit comments

Comments
 (0)