Merge remote-tracking branch 'origin/issue-166-360Page' into issue-166-360Page

# Conflicts:
#	src/server/api/common_api.py

Author: urirot

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

@@ -124,8 +124,8 @@ class DataView360 extends Component {
                             <TableBody>
                                 {
                                     _.map(participantListGrouped, (row_group, index) => {
-                                        return _.map(row_group, row => {
-                                            return <TableRow key={row.source_id}
+                                        return _.map(row_group, (row, idx) => {
+                                            return <TableRow key={`${row.source_id}${idx}`}
                                                             className={tableRowColors[index % _.size(tableRowColors)]}
                                                             onClick={() => this.handleGetParticipant(row.matching_id)}>
                                                 <TableCell align="left">{row.matching_id}</TableCell>
@@ -185,15 +185,15 @@ class DataView360 extends Component {
                 this.state.showParticipant === true) && (
                     <Paper className={styles.main} elevation={1} style={{"padding": "1em"}}>
                         <ContactInfo participant={_.get(this.state, 'participantData.contact_details')}/>
-                        <Container>
-                            <Grid container direction="row" justify="center" alignItems="center" style={{"margin-top": "1em"}}>
-                                <Button variant="contained" color="primary"
-                                    onClick={() => { 
-                                    this.setState({showParticipant: false, showTable: true, showSearchBar: true }) 
-                                    }}>Back to Results
-                                </Button>
+                            <Grid container direction="row" justify="center">
+                                <Grid item style={{"marginTop": "1em", "position": "fixed"}}>
+                                    <Button variant="contained" color="primary"
+                                        onClick={() => { 
+                                        this.setState({showParticipant: false, showTable: true, showSearchBar: true }) 
+                                        }}>Back to Results
+                                    </Button>
+                                </Grid>
                             </Grid>
-                        </Container>
                         <Donations donations={_.get(this.state, 'participantData.donations')}/>
                         <Adoptions adoptions={_.get(this.state, 'participantData.adoptions')}/>
                         <Volunteer volunteer={_.get(this.state, 'participantData.shifts')}

src/client/src/pages/DataView360/components/Adoptions.js

@@ -41,19 +41,36 @@ class Adoptions extends Component {
     render() {
         // todo: update when we add pet info
         // todo: clean array of animal_id
+        const numAdoptions = _.size(this.props.adoptions);
         return (<Container className={styles.adoptions} style={{"marginTop":"1em"}}>
-                    <Typography className={styles.adoptions_title} variant='h4'>Adoption/Foster Records (Top 3)</Typography>
+                    <Typography className={styles.adoptions_title} variant='h4'>Adoption/Foster Records {(numAdoptions > 3) && "(Showing latest 3 out of " + numAdoptions + ")"}</Typography>
                     <TableContainer className="main_table_container" style={{"marginTop":"1em"}} component={Paper} variant='outlined'>
                         <Table className="main_table">
                             <TableHead>
                                 <TableRow>
-                                    <StyledTableCell align="center">Number of Adoptions</StyledTableCell>
+                                    <StyledTableCell align="center">Name</StyledTableCell>
+                                    <StyledTableCell align="center">Adoption Type</StyledTableCell>
+                                    <StyledTableCell align="center">Adoption Subtype</StyledTableCell>
+                                    <StyledTableCell align="center">Animal Type</StyledTableCell>
+                                    <StyledTableCell align="center">Breed</StyledTableCell>
+                                    <StyledTableCell align="center">Age</StyledTableCell>
+                                    <StyledTableCell align="center">Photo</StyledTableCell>
                                 </TableRow>
                             </TableHead>
                             <TableBody>
-                                <StyledTableRow>
-                                    <TableCell align="center"> {_.size(this.props.adoptions)}</TableCell>
+                                {_.map(this.props.adoptions, (adoptionInfo, index) => {
+                                    const photoLink = adoptionInfo["animal_details"]["Photos"][0]
+                                    const photo = <img src={photoLink} style={{"maxWidth": "100px"}}/>;
+                                    return <StyledTableRow key={adoptionInfo["Time"] + index}>
+                                    <TableCell align="center">{adoptionInfo["animal_details"]["Name"]}</TableCell>
+                                    <TableCell align="center">{adoptionInfo["Type"]}</TableCell>
+                                    <TableCell align="center">{adoptionInfo["Subtype"]}</TableCell>
+                                    <TableCell align="center">{adoptionInfo["animal_details"]["Type"]}</TableCell>
+                                    <TableCell align="center">{adoptionInfo["animal_details"]["Breed"]}</TableCell>
+                                    <TableCell align="center">{(parseInt(adoptionInfo["animal_details"]["Age"])/12).toFixed(2)}</TableCell>
+                                    <TableCell align="center">{photo}</TableCell>
                                 </StyledTableRow>
+                                })}
                             </TableBody>
                         </Table>
                    </TableContainer>

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

@@ -16,8 +16,19 @@ const StyledContact = withStyles((theme)=>({
 
 class ContactInfo extends Component {
     render() {
-        const participantArray = _.get(this.props, "participant")
-        const participant = participantArray[0]
+        // TODO: move to the backend
+        let participantArray = _.get(this.props, "participant");
+        let participant = {};
+        if (participantArray.length === 1) {
+            participant = participantArray[0];
+        } else {
+            participantArray = _.filter(participantArray, function(p) {
+                if (p["source_type"] === "salesforcecontacts") { 
+                    return p;
+                }
+            });
+            participant = participantArray[0];
+        }
         const phoneStr = participant.mobile;
         let phone = _.isEmpty(phoneStr) ? '-' : phoneStr.split(" ").join("");
         return (<Container className={styles.contact_info}>