Skip to content

Commit a7f6218

Browse files
uriroturirot
authored
Merge pull request #169 from CodeForPhilly/issue-166-360Page
Search results link to 360 view page
2 parents 10cb8fd + 19b3c50 commit a7f6218

File tree

2 files changed

+110
-64
lines changed

2 files changed

+110
-64
lines changed

‎src/client/src/pages/DataView360/DataView360.js

Lines changed: 102 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,15 @@ import {
44
Paper,
55
Container,
66
Box,
7+
Button,
8+
Grid,
79
Table,
810
TableBody,
911
TableCell,
1012
TableContainer,
1113
TableHead,
12-
TableRow
14+
TableRow,
15+
Typography
1316
} from '@material-ui/core';
1417
import CircularProgress from '@material-ui/core/CircularProgress';
1518
import styles from "./styles/DataView360.module.css";
@@ -33,6 +36,20 @@ const customStyles = theme => ({
3336
table: {
3437
minWidth: 700
3538
},
39+
tableRowEven: {
40+
backgroundColor: "#FFFFFF",
41+
"&:hover": {
42+
backgroundColor: "#E6F7FF",
43+
cursor: "pointer"
44+
}
45+
},
46+
tableRowOdd: {
47+
backgroundColor: "#E8E8E8",
48+
"&:hover": {
49+
backgroundColor: "#CCEEFF",
50+
cursor: "pointer"
51+
}
52+
},
3653
headerCell: {
3754
fontWeight: "bold",
3855
minWidth: 60,
@@ -49,80 +66,88 @@ class DataView360 extends Component {
4966

5067
this.state = {
5168
search_participant: '',
52-
participantData: undefined,
69+
participantData: {},
5370
isDataBusy: false,
5471
participantList: [],
55-
participantTable: undefined
72+
participantTable: undefined,
73+
showParticipant: false,
74+
showTable: true,
75+
showSearchBar: true
5676
}
5777

58-
//this.handleGetParticipant = this.handleGetParticipant.bind(this);
78+
this.handleGetParticipant = this.handleGetParticipant.bind(this);
5979
this.handleSearchChange = this.handleSearchChange.bind(this);
6080
}
6181

62-
/*
63-
async handleGetParticipant(event) {
64-
const participant = _.get(event, "target.value");
65-
this.setState({participant: participant});
66-
this.setState({isDataBusy: true});
82+
async handleGetParticipant(matching_id) {
83+
this.setState({isDataBusy: true, showSearchBar: false});
6784

6885
await new Promise(resolve => setTimeout(resolve, 1000));
69-
let response = await fetch(`/api/360/${participant}`);
86+
let response = await fetch(`/api/360/${matching_id}`);
7087
response = await response.json();
7188

72-
this.setState({participantData: response});
73-
this.setState({isDataBusy: false});
89+
this.setState({
90+
participantData: response.result,
91+
isDataBusy: false,
92+
showParticipant: true,
93+
showTable: false,
94+
showSearchBar: false
95+
});
7496
}
75-
*/
7697

7798
renderParticipantsTable() {
7899
const {classes} = this.props;
79-
const tableRowColors = ["#FFFFFF", "#E8E8E8"]
100+
const tableRowColors = [classes.tableRowEven, classes.tableRowOdd]
80101

81102
let participantListGrouped = _.groupBy(this.state.participantList, "matching_id");
82103
participantListGrouped = _.reverse(_.sortBy(participantListGrouped, matching_group => {
83104
return _.size(matching_group);
84105
}));
85106

86107
return (
87-
<Paper className={classes.tableCard}>
88-
<TableContainer className={classes.container}>
89-
<Table className={classes.table} size="small" stickyHeader aria-label="sticky table">
90-
<TableHead>
91-
<TableRow>
92-
<TableCell align="left" className={classes.headerCell}>Match ID</TableCell>
93-
<TableCell align="left" className={classes.headerCell}>First Name</TableCell>
94-
<TableCell align="left" className={classes.headerCell}>Last Name</TableCell>
95-
<TableCell align="left" className={classes.headerCell}>Email</TableCell>
96-
<TableCell align="left" className={classes.headerCell}>Mobile</TableCell>
97-
<TableCell align="left" className={classes.headerCell}>Source</TableCell>
98-
<TableCell align="left" className={classes.headerCell}>ID in Source</TableCell>
99-
</TableRow>
100-
</TableHead>
101-
<TableBody>
102-
{
103-
_.map(participantListGrouped, (row_group, index) => {
104-
return _.map(row_group, row => {
105-
return <TableRow key={row.source_id}
106-
style={{backgroundColor: tableRowColors[index % _.size(tableRowColors)]}}>
107-
<TableCell align="left">{row.matching_id}</TableCell>
108-
<TableCell align="left">{row.first_name}</TableCell>
109-
<TableCell align="left">{row.last_name}</TableCell>
110-
<TableCell align="left">{row.email}</TableCell>
111-
<TableCell align="left">{row.mobile}</TableCell>
112-
<TableCell align="left">{row.source_type}</TableCell>
113-
<TableCell align="left">{row.source_id}</TableCell>
114-
</TableRow>
108+
<Container>
109+
<Typography paragraph={true}>You searched for <b>{this.state.search_participant}</b></Typography>
110+
<Paper className={classes.tableCard}>
111+
<TableContainer className={classes.container}>
112+
<Table className={classes.table} size="small" stickyHeader aria-label="sticky table">
113+
<TableHead>
114+
<TableRow>
115+
<TableCell align="left" className={classes.headerCell}>Match ID</TableCell>
116+
<TableCell align="left" className={classes.headerCell}>First Name</TableCell>
117+
<TableCell align="left" className={classes.headerCell}>Last Name</TableCell>
118+
<TableCell align="left" className={classes.headerCell}>Email</TableCell>
119+
<TableCell align="left" className={classes.headerCell}>Mobile</TableCell>
120+
<TableCell align="left" className={classes.headerCell}>Source</TableCell>
121+
<TableCell align="left" className={classes.headerCell}>ID in Source</TableCell>
122+
</TableRow>
123+
</TableHead>
124+
<TableBody>
125+
{
126+
_.map(participantListGrouped, (row_group, index) => {
127+
return _.map(row_group, row => {
128+
return <TableRow key={row.source_id}
129+
className={tableRowColors[index % _.size(tableRowColors)]}
130+
onClick={() => this.handleGetParticipant(row.matching_id)}>
131+
<TableCell align="left">{row.matching_id}</TableCell>
132+
<TableCell align="left">{row.first_name}</TableCell>
133+
<TableCell align="left">{row.last_name}</TableCell>
134+
<TableCell align="left">{row.email}</TableCell>
135+
<TableCell align="left">{row.mobile}</TableCell>
136+
<TableCell align="left">{row.source_type}</TableCell>
137+
<TableCell align="left">{row.source_id}</TableCell>
138+
</TableRow>
139+
})
115140
})
116-
})
117-
}
118-
</TableBody>
119-
</Table>
120-
</TableContainer>
121-
</Paper>)
141+
}
142+
</TableBody>
143+
</Table>
144+
</TableContainer>
145+
</Paper>
146+
</Container>)
122147
}
123148

124149
async handleSearchChange(search_participant) {
125-
this.setState({isDataBusy: true});
150+
this.setState({isDataBusy: true, search_participant: search_participant});
126151

127152
await new Promise(resolve => setTimeout(resolve, 1000));
128153
let response = await fetch(`/api/contacts/${search_participant}`);
@@ -131,27 +156,47 @@ class DataView360 extends Component {
131156
await this.setState({participantList: response.result})
132157

133158
this.state.participantTable = this.renderParticipantsTable();
134-
this.setState({isDataBusy: false});
159+
this.setState({
160+
isDataBusy: false,
161+
showParticipant: false,
162+
showTable: true
163+
});
135164
}
136165

137166
render() {
138167
const {classes} = this.props;
139168
return (
140169
<Container>
141-
<SearchBar participant={this.state.participant}
170+
{this.state.showSearchBar &&
171+
(<SearchBar participant={this.state.participant}
142172
handleParticipantChange={this.handleGetParticipant}
143173
handleSearchChange={this.handleSearchChange}/>
144-
{(_.isEmpty(this.state.participantTable) !== true && this.state.isDataBusy !== true) && (
174+
)}
175+
{(_.isEmpty(this.state.participantTable) !== true &&
176+
this.state.isDataBusy !== true &&
177+
this.state.showTable === true &&
178+
this.state.showParticipant === false) && (
145179
<Container className={styles.main} elevation={1} style={{"padding": "1em"}}>
146180
{this.state.participantTable}
147181
</Container>
148182
)}
149-
{(_.isEmpty(this.state.participantData) !== true && this.state.isDataBusy !== true) && (
183+
{(_.isEmpty(this.state.participantData) !== true &&
184+
this.state.isDataBusy !== true &&
185+
this.state.showParticipant === true) && (
150186
<Paper className={styles.main} elevation={1} style={{"padding": "1em"}}>
151-
<ContactInfo participant={_.get(this.state, "participantData.salesforcecontacts")}/>
152-
<Donations donations={_.get(this.state, 'participantData.salesforcedonations')}/>
153-
<Adoptions adoptions={_.get(this.state, 'participantData.shelterluvpeople')}/>
154-
<Volunteer volunteer={_.get(this.state, 'participantData.volgistics.json')}
187+
<ContactInfo participant={_.get(this.state, 'participantData.contact_details')}/>
188+
<Container>
189+
<Grid container direction="row" justify="center" alignItems="center" style={{"margin-top": "1em"}}>
190+
<Button variant="contained" color="primary"
191+
onClick={() => {
192+
this.setState({showParticipant: false, showTable: true, showSearchBar: true })
193+
}}>Back to Results
194+
</Button>
195+
</Grid>
196+
</Container>
197+
<Donations donations={_.get(this.state, 'participantData.donations')}/>
198+
<Adoptions adoptions={_.get(this.state, 'participantData.adoptions')}/>
199+
<Volunteer volunteer={_.get(this.state, 'participantData.shifts')}
155200
volunteerShifts={_.get(this.state, 'participantData.volgistics_shifts_results')}/>
156201

157202
</Paper>)}

‎src/client/src/pages/DataView360/components/ContactInfo.js

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,16 +16,17 @@ const StyledContact = withStyles((theme)=>({
1616

1717
class ContactInfo extends Component {
1818
render() {
19-
const phoneStr = _.get(this.props, "participant.phone");
19+
const participantArray = _.get(this.props, "participant")
20+
const participant = participantArray[0]
21+
const phoneStr = participant.mobile;
2022
let phone = _.isEmpty(phoneStr) ? '-' : phoneStr.split(" ").join("");
21-
2223
return (<Container className={styles.contact_info}>
2324
<Paper variant='outlined' className={styles.contact_info_main} style={{padding:'1em'}}>
2425
<div className={styles.contact_container}>
2526
<Typography className={styles.contact_info_name}>
2627
<span>
27-
{_.get(this.props, "participant.first_name")}{'\t'}
28-
{_.get(this.props, "participant.last_name")}
28+
{participant.first_name}{'\t'}
29+
{participant.last_name}
2930
</span>
3031
</Typography>
3132
<StyledContact className={styles.contact_info_phone}>
@@ -35,13 +36,13 @@ class ContactInfo extends Component {
3536
</StyledContact>
3637
<Typography className={styles.contact_info_email}>
3738
<span>
38-
{_.get(this.props, "participant.email")}
39+
{participant.email}
3940
</span>
4041
</Typography>
4142
<Typography className={styles.contact_info_address}>
4243
<span style={{"textTransform":"uppercase"}}>
43-
{_.get(this.props, "participant.mailing_street")}{'\t'}
44-
{_.get(this.props, "participant.mailing_city")}{'\t'}
44+
{participant.street_and_number}{'\t'}
45+
{participant.city}{'\t'}
4546
</span>
4647
</Typography>
4748
</div>

0 commit comments

Comments
 (0)