Skip to content

Commit c33b898

Browse files
dcstlouisdcstlouis
committed
Search results are now linked to 360 view
1 parent 10cb8fd commit c33b898

File tree

3 files changed

+98
-63
lines changed

3 files changed

+98
-63
lines changed

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

Lines changed: 81 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,15 @@ import {
44
Paper,
55
Container,
66
Box,
7+
Button,
8+
Link,
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";
@@ -49,30 +52,34 @@ class DataView360 extends Component {
4952

5053
this.state = {
5154
search_participant: '',
52-
participantData: undefined,
55+
participantData: {},
5356
isDataBusy: false,
5457
participantList: [],
55-
participantTable: undefined
58+
participantTable: undefined,
59+
showParticipant: false,
60+
showTable: true,
61+
showSearchBar: true
5662
}
5763

58-
//this.handleGetParticipant = this.handleGetParticipant.bind(this);
64+
this.handleGetParticipant = this.handleGetParticipant.bind(this);
5965
this.handleSearchChange = this.handleSearchChange.bind(this);
6066
}
6167

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

6871
await new Promise(resolve => setTimeout(resolve, 1000));
69-
let response = await fetch(`/api/360/${participant}`);
72+
let response = await fetch(`/api/360/${matching_id}`);
7073
response = await response.json();
7174

72-
this.setState({participantData: response});
73-
this.setState({isDataBusy: false});
75+
this.setState({
76+
participantData: response.result,
77+
isDataBusy: false,
78+
showParticipant: true,
79+
showTable: false,
80+
showSearchBar: false
81+
});
7482
}
75-
*/
7683

7784
renderParticipantsTable() {
7885
const {classes} = this.props;
@@ -84,45 +91,48 @@ class DataView360 extends Component {
8491
}));
8592

8693
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>
94+
<Container>
95+
<Typography paragraph={true}>You searched for <b>{this.state.search_participant}</b></Typography>
96+
<Paper className={classes.tableCard}>
97+
<TableContainer className={classes.container}>
98+
<Table className={classes.table} size="small" stickyHeader aria-label="sticky table">
99+
<TableHead>
100+
<TableRow>
101+
<TableCell align="left" className={classes.headerCell}>Match ID</TableCell>
102+
<TableCell align="left" className={classes.headerCell}>First Name</TableCell>
103+
<TableCell align="left" className={classes.headerCell}>Last Name</TableCell>
104+
<TableCell align="left" className={classes.headerCell}>Email</TableCell>
105+
<TableCell align="left" className={classes.headerCell}>Mobile</TableCell>
106+
<TableCell align="left" className={classes.headerCell}>Source</TableCell>
107+
<TableCell align="left" className={classes.headerCell}>ID in Source</TableCell>
108+
</TableRow>
109+
</TableHead>
110+
<TableBody>
111+
{
112+
_.map(participantListGrouped, (row_group, index) => {
113+
return _.map(row_group, row => {
114+
return <TableRow key={row.source_id}
115+
style={{backgroundColor: tableRowColors[index % _.size(tableRowColors)]}}>
116+
<TableCell align="left"><Link href="#" onClick={() => this.handleGetParticipant(row.matching_id)}>{row.matching_id}</Link></TableCell>
117+
<TableCell align="left">{row.first_name}</TableCell>
118+
<TableCell align="left">{row.last_name}</TableCell>
119+
<TableCell align="left">{row.email}</TableCell>
120+
<TableCell align="left">{row.mobile}</TableCell>
121+
<TableCell align="left">{row.source_type}</TableCell>
122+
<TableCell align="left">{row.source_id}</TableCell>
123+
</TableRow>
124+
})
115125
})
116-
})
117-
}
118-
</TableBody>
119-
</Table>
120-
</TableContainer>
121-
</Paper>)
126+
}
127+
</TableBody>
128+
</Table>
129+
</TableContainer>
130+
</Paper>
131+
</Container>)
122132
}
123133

124134
async handleSearchChange(search_participant) {
125-
this.setState({isDataBusy: true});
135+
this.setState({isDataBusy: true, search_participant: search_participant});
126136

127137
await new Promise(resolve => setTimeout(resolve, 1000));
128138
let response = await fetch(`/api/contacts/${search_participant}`);
@@ -131,27 +141,42 @@ class DataView360 extends Component {
131141
await this.setState({participantList: response.result})
132142

133143
this.state.participantTable = this.renderParticipantsTable();
134-
this.setState({isDataBusy: false});
144+
this.setState({
145+
isDataBusy: false,
146+
showParticipant: false,
147+
showTable: true
148+
});
135149
}
136150

137151
render() {
138152
const {classes} = this.props;
139153
return (
140154
<Container>
141-
<SearchBar participant={this.state.participant}
155+
{this.state.showSearchBar &&
156+
(<SearchBar participant={this.state.participant}
142157
handleParticipantChange={this.handleGetParticipant}
143158
handleSearchChange={this.handleSearchChange}/>
144-
{(_.isEmpty(this.state.participantTable) !== true && this.state.isDataBusy !== true) && (
159+
)}
160+
{(_.isEmpty(this.state.participantTable) !== true &&
161+
this.state.isDataBusy !== true &&
162+
this.state.showTable === true &&
163+
this.state.showParticipant === false) && (
145164
<Container className={styles.main} elevation={1} style={{"padding": "1em"}}>
146165
{this.state.participantTable}
147166
</Container>
148167
)}
149-
{(_.isEmpty(this.state.participantData) !== true && this.state.isDataBusy !== true) && (
168+
{(_.isEmpty(this.state.participantData) !== true &&
169+
this.state.isDataBusy !== true &&
170+
this.state.showParticipant === true) && (
150171
<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')}
172+
<ContactInfo participant={_.get(this.state, 'participantData.contact_details')}/>
173+
<Button variant="contained" color="primary" className={styles.back_button}
174+
onClick={() => {
175+
this.setState({showParticipant: false, showTable: true, showSearchBar: true })
176+
}}>Back to Results</Button>
177+
<Donations donations={_.get(this.state, 'participantData.donations')}/>
178+
<Adoptions adoptions={_.get(this.state, 'participantData.adoptions')}/>
179+
<Volunteer volunteer={_.get(this.state, 'participantData.shifts')}
155180
volunteerShifts={_.get(this.state, 'participantData.volgistics_shifts_results')}/>
156181

157182
</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>

‎src/client/src/pages/DataView360/styles/DataView360.module.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,13 @@
77
grid-row-gap: 0px;
88
background-color: initial;
99
box-shadow: none;
10+
}
11+
.back_button{
12+
position: relative;
13+
display: grid;
14+
margin-left: 60px !important;
15+
margin-right: 60px !important;
16+
margin-top: 10px !important;
17+
max-width: 175px;
18+
max-height: 36.5px;
1019
}

0 commit comments

Comments
 (0)