diff --git a/src/client/src/pages/DataView360/View/components/Adoptions.js b/src/client/src/pages/DataView360/View/components/Adoptions.js index 3f98244c..fc6ebd60 100644 --- a/src/client/src/pages/DataView360/View/components/Adoptions.js +++ b/src/client/src/pages/DataView360/View/components/Adoptions.js @@ -8,7 +8,7 @@ import { TableBody, TableRow, TableCell, - Container + Container, } from '@material-ui/core'; import LinkIcon from '@material-ui/icons/Link'; import { withStyles } from '@material-ui/core/styles'; @@ -18,6 +18,7 @@ import Grid from "@material-ui/core/Grid"; import PetsIcon from "@material-ui/icons/Pets"; import DataTableHeader from './DataTableHeader'; import { showAnimalAge } from '../../../../utils/utils' +import NoRecords from './NoRecords'; const customStyles = theme => ({ @@ -89,27 +90,34 @@ class Adoptions extends Component { headerText={headerText + headerAddition} emojiIcon={} > - - - - - + {shelterluvShortId && + + + + + + } - - - - Name - Animal Type - Adoption Date - Age - Photo - - - - {latestPets && this.createRows(latestPets)} - -
+ {latestPets?.length > 0 ? ( + + + + Name + Animal Type + Adoption Date + Age + Photo + + + + {latestPets && this.createRows(latestPets)} + +
+ ) + : ( + + )}
); diff --git a/src/client/src/pages/DataView360/View/components/ContactInfo.js b/src/client/src/pages/DataView360/View/components/ContactInfo.js index 104235dd..99d53826 100644 --- a/src/client/src/pages/DataView360/View/components/ContactInfo.js +++ b/src/client/src/pages/DataView360/View/components/ContactInfo.js @@ -43,6 +43,16 @@ class ContactInfo extends Component { render() { let participantArray = _.get(this.props, "participant"); let participantData = this.populate_participant_data(participantArray); + let { + first_name: firstName, + last_name: lastName, + mobile, + email, + city, + state, + zip, + street_and_number: streetAndNumber, + } = participantData return ( @@ -50,51 +60,63 @@ class ContactInfo extends Component { {participantData.first_name + ' ' + participantData.last_name} + variant={'h6'}>{firstName + ' ' + lastName} - - - - - - {formatPhoneNumber(participantData.mobile)} - - - - - - - - - - {participantData.email} - - - - - + {mobile && ( + - + - - {participantData.street_and_number} + {formatPhoneNumber(mobile)} - + )} + {email && ( + + + + - {participantData.city + ', ' + participantData.state + ' ' + participantData.zip} + {email} - + )} + {(city || state || zip || streetAndNumber) && ( + + {streetAndNumber && ( + + + + + + + {streetAndNumber} + + + + )} + + + + {` + ${city ? city + ", " : ""} + ${state ? state + " " : ""} + ${zip ? zip : ""} + `} + + + + + )} diff --git a/src/client/src/pages/DataView360/View/components/Donations.js b/src/client/src/pages/DataView360/View/components/Donations.js index 30f4f4e1..aa3ddeb3 100644 --- a/src/client/src/pages/DataView360/View/components/Donations.js +++ b/src/client/src/pages/DataView360/View/components/Donations.js @@ -13,6 +13,7 @@ import _ from 'lodash'; import moment from 'moment-timezone'; import AttachMoneyIcon from '@material-ui/icons/AttachMoney'; import DataTableHeader from "./DataTableHeader"; +import NoRecords from './NoRecords'; const ROWS_TO_SHOW = 3 @@ -52,19 +53,25 @@ class Donations extends Component { /> - - - - Date of Donation - Amount - Donation Type - Primary Campaign Source - - - - {this.props.donations && this.createRows(this.props.donations)} - -
+ {this.props.donations?.length > 0 ? ( + + + + Date of Donation + Amount + Donation Type + Primary Campaign Source + + + + {this.props.donations && this.createRows(this.props.donations)} + +
+ ) + : ( + + ) + }
); diff --git a/src/client/src/pages/DataView360/View/components/NoRecords.js b/src/client/src/pages/DataView360/View/components/NoRecords.js new file mode 100644 index 00000000..3a04a5f0 --- /dev/null +++ b/src/client/src/pages/DataView360/View/components/NoRecords.js @@ -0,0 +1,12 @@ +import { Container } from "@material-ui/core"; +import React from "react" + +export default function NoRecords(props) { + const { recordType } = props; + + return ( + + {`No ${recordType} records on file.`} + + ); +} diff --git a/src/client/src/pages/DataView360/View/components/VolunteerActivity.js b/src/client/src/pages/DataView360/View/components/VolunteerActivity.js index 366b32b8..f269aa02 100644 --- a/src/client/src/pages/DataView360/View/components/VolunteerActivity.js +++ b/src/client/src/pages/DataView360/View/components/VolunteerActivity.js @@ -11,6 +11,8 @@ import { } from '@material-ui/core'; import EmojiPeopleIcon from '@material-ui/icons/EmojiPeople'; import DataTableHeader from './DataTableHeader'; +import _ from 'lodash'; +import NoRecords from './NoRecords'; class VolunteerActivity extends Component { @@ -23,24 +25,29 @@ class VolunteerActivity extends Component { emojiIcon={} /> - - - - Volunteer activity start - Life hours - YTD hours - - - - { this.props.volunteer && ( - - {(this.props.volunteer.start_date) ? this.props.volunteer.start_date : "N/A"} - {(this.props.volunteer.life_hours) ? this.props.volunteer.life_hours.toFixed(2) : 0} - {(this.props.volunteer.ytd_hours) ? this.props.volunteer.ytd_hours.toFixed(2) : 0} - - )} - -
+ {!_.isEmpty(this.props.volunteer) ? ( + + + + Volunteer activity start + Life hours + YTD hours + + + + { this.props.volunteer && ( + + {(this.props.volunteer.start_date) ? this.props.volunteer.start_date : "N/A"} + {(this.props.volunteer.life_hours) ? this.props.volunteer.life_hours.toFixed(2) : 0} + {(this.props.volunteer.ytd_hours) ? this.props.volunteer.ytd_hours.toFixed(2) : 0} + + )} + +
+ ) + : ( + + )}
diff --git a/src/client/src/pages/DataView360/View/components/VolunteerHistory.js b/src/client/src/pages/DataView360/View/components/VolunteerHistory.js index d6f5873c..76200183 100644 --- a/src/client/src/pages/DataView360/View/components/VolunteerHistory.js +++ b/src/client/src/pages/DataView360/View/components/VolunteerHistory.js @@ -13,6 +13,7 @@ import _ from 'lodash'; import moment from 'moment-timezone'; import TimelineIcon from '@material-ui/icons/Timeline'; import DataTableHeader from './DataTableHeader'; +import NoRecords from './NoRecords'; const SHIFTS_TO_SHOW = 3; @@ -47,19 +48,24 @@ class VolunteerHistory extends Component { } /> - - - - - Date - Assignment - - - - { this.props.volunteerShifts && this.createShiftRows(this.props.volunteerShifts) } - -
-
+ {!_.isEmpty(this.props.volunteerShifts) ? ( + + + + + Date + Assignment + + + + { this.props.volunteerShifts && this.createShiftRows(this.props.volunteerShifts) } + +
+
+ ) + : ( + + )} );