Skip to content

Commit

Permalink
communication page formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
@lsylcy0307
lsylcy0307 committed Apr 29, 2024
1 parent 7221f32 commit f759be5
Show file tree
Hide file tree
Showing 2 changed files with 75 additions and 85 deletions.
152 changes: 70 additions & 82 deletions client/src/Communications/CommunicationsPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -223,85 +223,78 @@ function CommunicationsPage() {
};

return (
<div>
<Grid container sx={{ m: 3 }} spacing={2}>
<Grid item xs={12}>
<Typography variant="h4" sx={{ fontWeight: 'bold' }}>
Communications
</Typography>
</Grid>
<Grid item xs={12}>
<Typography variant="h7" sx={{ width: '80%', color: '#7C7C7C' }}>
Send emails to individual users, groups of individuals, and mailing
lists. Clicking the “email” button, will open a popup with the
respective emails, which you can then copy and paste into your email
application (i.e. Gmail or Outlook)
</Typography>
</Grid>
<Grid item xs={12}>
<Typography variant="h5" sx={{ fontWeight: 'bold' }}>
Individual Person
</Typography>
</Grid>
<Grid item xs={12}>
<Autocomplete
disablePortal
id="combo-box-demo"
options={donors.map((option) => ({
name: option.contact_name,
id: option._id,
}))}
getOptionLabel={(option) => option.name}
sx={{ width: 300 }}
onChange={handleNameChange}
renderInput={(params) => (
<TextField {...params} label="Search Name" />
)}
/>
</Grid>
<Grid item xs={6}>
<Grid container spacing={2}>
<Grid item xs={8}>
<Typography variant="h5" sx={{ fontWeight: 'bold' }}>
Groups
</Typography>
</Grid>
<Grid item xs={4}>
<Button variant="contained" color="inherit" fullWidth>
Add / Edit Groups
</Button>
</Grid>
<Grid item xs={12}>
<Box paddingTop={2} paddingLeft={4} marginBottom={2}>
<Box>
<Typography
variant="h4"
sx={{ fontWeight: 'bold', marginBottom: '15px' }}
>
Communications
</Typography>
<p style={{ color: '#7C7C7C', marginBottom: '20px', maxWidth: '75%' }}>
Send emails to individual users, groups of individuals, and mailing
lists. Clicking the “email” button, will open a popup with the
respective emails, which you can then copy and paste into your email
application (i.e. Gmail or Outlook)
</p>
<Typography
variant="h5"
sx={{ fontWeight: 'bold', marginBottom: '10px' }}
>
Individual Person
</Typography>
<Autocomplete
disablePortal
id="combo-box-demo"
options={donors.map((option) => ({
name: option.contact_name,
id: option._id,
}))}
getOptionLabel={(option) => option.name}
sx={{ width: 300, marginBottom: '15px' }}
onChange={handleNameChange}
renderInput={(params) => (
<TextField {...params} label="Search Name" />
)}
/>
</Box>
<Box sx={{ width: '40%' }}>
<Typography variant="h5" sx={{ fontWeight: 'bold', marginBottom: '10px' }}>
Groups
</Typography>
<Button
variant="contained"
color="primary"
onClick={handleUnackDonoModalOpen}
size="large"
sx={{ marginBottom: '5px' }}
endIcon={<ArrowForwardIcon />}
fullWidth
style={{ justifyContent: 'flex-start' }}
>
Email Unacknowledged Donations
</Button>
</Grid>
<Grid item xs={12}>

<Button
variant="contained"
color="primary"
size="large"
endIcon={<ArrowForwardIcon />}
fullWidth
sx={{ marginBottom: '10px' }}
style={{ justifyContent: 'flex-start' }}
>
Search All Donors & Sponsors
</Button>
</Grid>
<Grid item xs={12}>
<Button variant="contained" color="inherit" sx={{ marginBottom: '5px' }} fullWidth>
Add / Edit Groups
</Button>
<Stack
spacing={{ xs: 2 }}
spacing={{ xs: 2}}
direction="row"
useFlexGap
flexWrap="wrap"
sx={{ marginBottom: '10px' }}
>
<Autocomplete
disablePortal
Expand All @@ -325,15 +318,13 @@ function CommunicationsPage() {
Add Group
</Button>
</Stack>
</Grid>
<Grid item xs={12}>
<Typography variant="h5" sx={{ fontWeight: 'bold' }}>
Emails
</Typography>
</Grid>

<Grid item xs={12}>
<TableContainer component={Paper}>
</Box>
<Box sx={{ width: '80%' }}>
<Typography variant="h5" sx={{ fontWeight: 'bold', marginBottom: '10px'}}>
Emails
</Typography>
<TableContainer component={Paper} sx={{ marginBottom: '20px' }}>
<Table sx={{ minWidth: 650 }} aria-label="communications table">
<TableHead>
<TableRow>
Expand Down Expand Up @@ -371,28 +362,25 @@ function CommunicationsPage() {
</TableBody>
</Table>
</TableContainer>
</Grid>

<Grid item xs={6}>
<Button
variant="contained"
color="inherit"
onClick={clearItems}
size="large"
>
Clear
</Button>
</Grid>
<Grid item xs={6}>
<Box display="flex" justifyContent="flex-end">
<Button variant="contained" color="primary" size="large">
<Box display="flex" justifyContent="space-between" marginBottom={2}>
<Button
variant="contained"
color="inherit"
onClick={clearItems}
size="large"
>
Clear
</Button>
<Button
variant="contained"
color="primary"
size="large"
style={{ marginLeft: 'auto' }} // This will push the button to the right end
>
Copy All Emails
</Button>
</Box>
</Grid>
</Grid>
</Grid>
</Grid>
</Box>

<Modal
open={unackDonoModalOpen}
Expand All @@ -407,7 +395,7 @@ function CommunicationsPage() {
<Button onClick={handleUnackDonoModalClose}>Close</Button>
</Box>
</Modal>
</div>
</Box>
);
}

Expand Down
8 changes: 5 additions & 3 deletions client/src/Popup/PopupPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,9 @@ function PopupPage() {
setOpenPopup(false);
};

const donorID = '662e7657350953c9287c543c';
const donorID = '65daa67d6c34e8adb9f2d2c4';
const donations = useData(`donation/donor/${donorID}`);
const donor = useData(`donor/id/${donorID}`);
const donor = useData(`donor/${donorID}`);
const [donorData, setDonatorData] = useState<IDonor | null>(null);
const [donationsData, setDonationsData] = useState<any>([]);
const [donationsStats, setDonationsStats] = useState<DonationStats>();
Expand Down Expand Up @@ -137,7 +137,9 @@ function PopupPage() {
// Calculate the average donation per calendar year
const avDonationPerCalendar: BasicDonationStat = {
amount: calendarYearDonations.length
? totalCalendarYearDonationAmount / calendarYearDonations.length
? +(
totalCalendarYearDonationAmount / calendarYearDonations.length
).toFixed(2)
: 0,
count: calendarYearDonations.length,
};
Expand Down

0 comments on commit f759be5

Please sign in to comment.