Skip to content

Commit

Permalink
Added popup to view all volunteers
Browse files Browse the repository at this point in the history
  • Loading branch information
@GlenDsza
GlenDsza committed Jul 5, 2024
1 parent 09e37e7 commit 707e81c
Show file tree
Hide file tree
Showing 4 changed files with 185 additions and 11 deletions.
32 changes: 32 additions & 0 deletions src/screens/FundCampaignPledge/FundCampaignPledge.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -199,3 +199,35 @@
top: 0px;
right: 0px;
}

.moreContainer {
display: flex;
align-items: center;
}

.moreContainer:hover {
text-decoration: underline;
cursor: pointer;
}

.popup {
z-index: 50;
border-radius: 0.5rem;
font-family: sans-serif;
font-weight: 500;
font-size: 0.875rem;
margin-top: 0.5rem;
padding: 0.75rem;
border: 1px solid #e2e8f0;
background-color: white;
color: #1e293b;
box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 0.15);
display: flex;
flex-direction: column;
gap: 0.5rem;
}

.popupExtra {
max-height: 15rem;
overflow-y: auto;
}
34 changes: 33 additions & 1 deletion src/screens/FundCampaignPledge/FundCampaignPledge.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -279,8 +279,40 @@ describe('Testing Campaign Pledge Screen', () => {
expect(screen.getByTestId('searchVolunteer')).toBeInTheDocument();
});

const image = await screen.findByAltText('volunteer');
const image = await screen.findByTestId('image1');
expect(image).toBeInTheDocument();
expect(image).toHaveAttribute('src', 'img-url');
});

it('should render extraUserDetails in Popup', async () => {
renderFundCampaignPledge(link1);
await waitFor(() => {
expect(screen.getByTestId('searchVolunteer')).toBeInTheDocument();
});

expect(screen.getByText('John Doe')).toBeInTheDocument();
expect(screen.getByText('John Doe2')).toBeInTheDocument();
expect(screen.queryByText('John Doe3')).toBeNull();
expect(screen.queryByText('John Doe4')).toBeNull();

const moreContainer = await screen.findAllByTestId('moreContainer');
userEvent.click(moreContainer[0]);

await waitFor(() => {
expect(screen.getByText('John Doe3')).toBeInTheDocument();
expect(screen.getByText('John Doe4')).toBeInTheDocument();
expect(screen.getByTestId('extra1')).toBeInTheDocument();
expect(screen.getByTestId('extra2')).toBeInTheDocument();
expect(screen.getByTestId('extraAvatar8')).toBeInTheDocument();
const image = screen.getByTestId('extraImage1');
expect(image).toBeInTheDocument();
expect(image).toHaveAttribute('src', 'img-url3');
});

userEvent.click(moreContainer[0]);
await waitFor(() => {
expect(screen.queryByText('John Doe3')).toBeNull();
expect(screen.queryByText('John Doe4')).toBeNull();
});
});
});
76 changes: 66 additions & 10 deletions src/screens/FundCampaignPledge/FundCampaignPledge.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { useQuery, type ApolloQueryResult } from '@apollo/client';
import { Search, Sort, WarningAmberRounded } from '@mui/icons-material';
import { FUND_CAMPAIGN_PLEDGE } from 'GraphQl/Queries/fundQueries';
import Loader from 'components/Loader/Loader';
import { Unstable_Popup as BasePopup } from '@mui/base/Unstable_Popup';
import dayjs from 'dayjs';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { Button, Dropdown, Form } from 'react-bootstrap';
Expand Down Expand Up @@ -101,6 +102,10 @@ const fundCampaignPledge = (): JSX.Element => {
[ModalState.DELETE]: false,
});

const [anchor, setAnchor] = useState<null | HTMLElement>(null);
const [extraUsers, setExtraUsers] = useState<InterfacePledgeVolunteer[]>([]);
const open = Boolean(anchor);
const id = open ? 'simple-popup' : undefined;
const [pledgeModalMode, setPledgeModalMode] = useState<'edit' | 'create'>(
'create',
);
Expand Down Expand Up @@ -192,6 +197,14 @@ const fundCampaignPledge = (): JSX.Element => {
[openModal],
);

const handleClick = (
event: React.MouseEvent<HTMLElement>,
users: InterfacePledgeVolunteer[],
): void => {
setExtraUsers(users);
setAnchor(anchor ? null : event.currentTarget);
};

if (pledgeLoading) return <Loader size="xl" />;
if (pledgeError) {
return (
Expand All @@ -212,7 +225,7 @@ const fundCampaignPledge = (): JSX.Element => {
{
field: 'volunteers',
headerName: 'Volunteers',
flex: 2,
flex: 3,
minWidth: 50,
align: 'left',
headerAlign: 'center',
Expand All @@ -221,13 +234,15 @@ const fundCampaignPledge = (): JSX.Element => {
renderCell: (params: GridCellParams) => {
return (
<div className="d-flex flex-wrap gap-1" style={{ maxHeight: 120 }}>
{params.row.users.map(
(user: InterfacePledgeVolunteer, index: number) => (
{params.row.users
.slice(0, 2)
.map((user: InterfacePledgeVolunteer, index: number) => (
<div className={styles.volunteerContainer} key={index}>
{user.image ? (
<img
src={user.image}
alt="volunteer"
data-testid={`image${index + 1}`}
className={styles.TableImage}
/>
) : (
Expand All @@ -244,7 +259,16 @@ const fundCampaignPledge = (): JSX.Element => {
{user.firstName + ' ' + user.lastName}
</span>
</div>
),
))}
{params.row.users.length > 2 && (
<div
className={styles.moreContainer}
aria-describedby={id}
data-testid="moreContainer"
onClick={(e) => handleClick(e, params.row.users.slice(2))}
>
<span>+{params.row.users.length - 2} more...</span>
</div>
)}
</div>
);
Expand Down Expand Up @@ -394,7 +418,6 @@ const fundCampaignPledge = (): JSX.Element => {
</Link>
<Typography color="text.primary">{t('pledges')}</Typography>
</Breadcrumbs>

<div className={styles.overviewContainer}>
<div className={styles.titleContainer}>
<h3>{campaignInfo?.name}</h3>
Expand All @@ -413,7 +436,6 @@ const fundCampaignPledge = (): JSX.Element => {
</div>
</div>
</div>

<div className={`${styles.btnsContainer} gap-4 flex-wrap`}>
<div className={`${styles.input} mb-1`}>
<Form.Control
Expand Down Expand Up @@ -488,10 +510,9 @@ const fundCampaignPledge = (): JSX.Element => {
</div>
</div>
</div>

<DataGrid
disableColumnMenu
columnBuffer={6}
columnBuffer={7}
hideFooter={true}
getRowId={(row) => row._id}
components={{
Expand All @@ -516,7 +537,6 @@ const fundCampaignPledge = (): JSX.Element => {
columns={columns}
isRowSelectable={() => false}
/>

{/* Update Pledge ModalState */}
<PledgeModal
isOpen={modalState[ModalState.SAME]}
Expand All @@ -528,14 +548,50 @@ const fundCampaignPledge = (): JSX.Element => {
endDate={pledgeData?.getFundraisingCampaignById.endDate as Date}
mode={pledgeModalMode}
/>

{/* Delete Pledge ModalState */}
<PledgeDeleteModal
isOpen={modalState[ModalState.DELETE]}
hide={() => closeModal(ModalState.DELETE)}
pledge={pledge}
refetchPledge={refetchPledge}
/>
<BasePopup
id={id}
open={open}
anchor={anchor}
disablePortal
className={`${styles.popup} ${extraUsers.length > 4 ? styles.popupExtra : ''}`}
>
{extraUsers.map((user: InterfacePledgeVolunteer, index: number) => (
<div
className={styles.volunteerContainer}
key={index}
data-testid={`extra${index + 1}`}
>
{user.image ? (
<img
src={user.image}
alt="volunteer"
data-testid={`extraImage${index + 1}`}
className={styles.TableImage}
/>
) : (
<div className={styles.avatarContainer}>
<Avatar
key={user._id + '1'}
avatarStyle={styles.TableImage}
name={user.firstName + ' ' + user.lastName}
alt={user.firstName + ' ' + user.lastName}
dataTestId={`extraAvatar${index + 1}`}
/>
</div>
)}
<span key={user._id + '2'}>
{user.firstName + ' ' + user.lastName}
</span>
</div>
))}
</BasePopup>
</div>
);
};
Expand Down
54 changes: 54 additions & 0 deletions src/screens/FundCampaignPledge/PledgesMocks.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,60 @@ export const MOCKS = [
lastName: 'Doe',
image: 'img-url',
},
{
_id: '2',
firstName: 'John',
lastName: 'Doe2',
image: 'img-url2',
},
{
_id: '3',
firstName: 'John',
lastName: 'Doe3',
image: 'img-url3',
},
{
_id: '4',
firstName: 'John',
lastName: 'Doe4',
image: 'img-url4',
},
{
_id: '5',
firstName: 'John',
lastName: 'Doe5',
image: 'img-url5',
},
{
_id: '6',
firstName: 'John',
lastName: 'Doe6',
image: 'img-url6',
},
{
_id: '7',
firstName: 'John',
lastName: 'Doe7',
image: 'img-url7',
},
{
_id: '8',
firstName: 'John',
lastName: 'Doe8',
image: 'img-url8',
},
{
_id: '9',
firstName: 'John',
lastName: 'Doe9',
image: 'img-url9',
},
{
_id: '10',
firstName: 'John',
lastName: 'Doe10',
image: null,
},
],
},
{
Expand Down

0 comments on commit 707e81c

Please sign in to comment.