Skip to content

Commit 39f7e36

Browse files
RChandler234RChandler234
authored
Merge pull request #2232 from Northeastern-Electric-Racing/#2227-confirmation-popup
#2227 Attendee Confirmation popup
2 parents c476c04 + 31da0b8 commit 39f7e36

3 files changed

Lines changed: 142 additions & 48 deletions

File tree

‎src/frontend/src/pages/CalendarPage/CalendarPage.tsx‎

Lines changed: 62 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import { useCurrentUser } from '../../hooks/users.hooks';
1717
import { datePipe } from '../../utils/pipes';
1818
import { useAllTeamTypes } from '../../hooks/design-reviews.hooks';
1919
import LoadingIndicator from '../../components/LoadingIndicator';
20+
import { DesignReviewAttendeeModal } from './DesignReviewAttendeeModal';
2021

2122
const CalendarPage = () => {
2223
const theme = useTheme();
@@ -30,6 +31,7 @@ const CalendarPage = () => {
3031
const [displayMonthYear, setDisplayMonthYear] = useState<Date>(new Date());
3132
const { isLoading, isError, error, data: allDesignReviews } = useAllDesignReviews();
3233
const user = useCurrentUser();
34+
const [unconfirmedDesignReview, setUnconfirmedDesignReview] = useState<DesignReview>();
3335

3436
if (isLoading || !allDesignReviews) return <LoadingIndicator />;
3537
if (isError) return <ErrorPage message={error.message} />;
@@ -72,7 +74,9 @@ const CalendarPage = () => {
7274
return {
7375
icon: getTeamTypeIcon(designReview.teamType.name),
7476
title: designReview.wbsName,
75-
onClick: () => {},
77+
onClick: () => {
78+
setUnconfirmedDesignReview(designReview);
79+
},
7680
disabled: false
7781
};
7882
});
@@ -102,54 +106,66 @@ const CalendarPage = () => {
102106
if (allTeamTypesIsError) return <ErrorPage error={allTeamTypesError} message={allTeamTypesError?.message} />;
103107

104108
return (
105-
<PageLayout
106-
title="Design Review Calendar"
107-
headerRight={
108-
<Stack direction="row" justifyContent="flex-end">
109-
<MonthSelector displayMonth={displayMonthYear} setDisplayMonth={setDisplayMonthYear} />
110-
<Box marginLeft={1}>{unconfirmedDRSDropdown}</Box>
111-
</Stack>
112-
}
113-
>
114-
<Grid container>
115-
{EnumToArray(DAY_NAMES).map((day) => (
116-
<Grid item xs={12 / 7}>
117-
<Typography align={'center'} sx={{ fontWeight: 'bold', fontSize: 18 }}>
118-
{day}
119-
</Typography>
120-
</Grid>
121-
))}
122-
</Grid>
123-
<Box sx={{ border: '2px solid grey', borderRadius: 2, bgcolor: theme.palette.background.paper }}>
124-
<Grid container marginBottom={2}>
125-
{startOfEachWeek.map((week) => (
126-
<Grid container>
127-
{daysThisMonth.slice(week, week + 7).map((day) => {
128-
const cardDate = new Date(displayMonthYear.getFullYear(), displayMonthYear.getMonth(), day);
129-
return (
130-
<Grid item xs={12 / 7}>
131-
<Box marginLeft={1.5} marginTop={2} sx={{ justifyContent: 'center', display: 'flex' }}>
132-
{isDayInDifferentMonth(day, week) ? (
133-
<FillerCalendarDayCard day={day} />
134-
) : (
135-
<CalendarDayCard
136-
cardDate={cardDate}
137-
events={
138-
eventDict.get(datePipe(new Date(cardDate.getTime() - cardDate.getTimezoneOffset() * -60000))) ??
139-
[]
140-
}
141-
teamTypes={allTeamTypes}
142-
/>
143-
)}
144-
</Box>
145-
</Grid>
146-
);
147-
})}
109+
<>
110+
{unconfirmedDesignReview && (
111+
<DesignReviewAttendeeModal
112+
open={!!unconfirmedDesignReview}
113+
onHide={() => {
114+
setUnconfirmedDesignReview(undefined);
115+
}}
116+
designReview={unconfirmedDesignReview as DesignReview}
117+
/>
118+
)}
119+
<PageLayout
120+
title="Design Review Calendar"
121+
headerRight={
122+
<Stack direction="row" justifyContent="flex-end">
123+
<MonthSelector displayMonth={displayMonthYear} setDisplayMonth={setDisplayMonthYear} />
124+
<Box marginLeft={1}>{unconfirmedDRSDropdown}</Box>
125+
</Stack>
126+
}
127+
>
128+
<Grid container>
129+
{EnumToArray(DAY_NAMES).map((day) => (
130+
<Grid item xs={12 / 7}>
131+
<Typography align={'center'} sx={{ fontWeight: 'bold', fontSize: 18 }}>
132+
{day}
133+
</Typography>
148134
</Grid>
149135
))}
150136
</Grid>
151-
</Box>
152-
</PageLayout>
137+
<Box sx={{ border: '2px solid grey', borderRadius: 2, bgcolor: theme.palette.background.paper }}>
138+
<Grid container marginBottom={2}>
139+
{startOfEachWeek.map((week) => (
140+
<Grid container>
141+
{daysThisMonth.slice(week, week + 7).map((day) => {
142+
const cardDate = new Date(displayMonthYear.getFullYear(), displayMonthYear.getMonth(), day);
143+
return (
144+
<Grid item xs={12 / 7}>
145+
<Box marginLeft={1.5} marginTop={2} sx={{ justifyContent: 'center', display: 'flex' }}>
146+
{isDayInDifferentMonth(day, week) ? (
147+
<FillerCalendarDayCard day={day} />
148+
) : (
149+
<CalendarDayCard
150+
cardDate={cardDate}
151+
events={
152+
eventDict.get(
153+
datePipe(new Date(cardDate.getTime() - cardDate.getTimezoneOffset() * -60000))
154+
) ?? []
155+
}
156+
teamTypes={allTeamTypes}
157+
/>
158+
)}
159+
</Box>
160+
</Grid>
161+
);
162+
})}
163+
</Grid>
164+
))}
165+
</Grid>
166+
</Box>
167+
</PageLayout>
168+
</>
153169
);
154170
};
155171

‎src/frontend/src/pages/CalendarPage/DesignReviewAttendeeModal.tsx‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import { DesignReview } from 'shared';
2+
import NERModal from '../../components/NERModal';
3+
import { Grid, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography } from '@mui/material';
4+
import ColumnHeader from '../FinancePage/FinanceComponents/ColumnHeader';
5+
import { fullNamePipe } from '../../utils/pipes';
6+
7+
interface DesignReviewAttendeeModalProps {
8+
open: boolean;
9+
onHide: () => void;
10+
designReview: DesignReview;
11+
}
12+
13+
export const DesignReviewAttendeeModal: React.FC<DesignReviewAttendeeModalProps> = ({ open, onHide, designReview }) => {
14+
return (
15+
<NERModal open={open} title={designReview.wbsName} onHide={onHide} hideFormButtons showCloseButton>
16+
<Grid container columnSpacing={8} rowSpacing={2}>
17+
<Grid item>
18+
<TableContainer>
19+
<Table>
20+
<TableHead>
21+
<Typography variant="h6">Required Members</Typography>
22+
<TableRow>
23+
<ColumnHeader leftAlign title="Name" />
24+
<ColumnHeader leftAlign title="Confirmed?" />
25+
</TableRow>
26+
</TableHead>
27+
<TableBody>
28+
{designReview.requiredMembers.map((member) => (
29+
<TableRow key={member.userId}>
30+
<TableCell>
31+
<Typography>{fullNamePipe(member)}</Typography>
32+
</TableCell>
33+
<TableCell>
34+
<Typography>
35+
{designReview.confirmedMembers.some((confirmedMember) => confirmedMember.userId === member.userId)
36+
? 'Yes'
37+
: 'No'}
38+
</Typography>
39+
</TableCell>
40+
</TableRow>
41+
))}
42+
</TableBody>
43+
</Table>
44+
</TableContainer>
45+
</Grid>
46+
<Grid item>
47+
<TableContainer>
48+
<Table>
49+
<TableHead>
50+
<Typography variant="h6">Optional Members</Typography>
51+
<TableRow>
52+
<ColumnHeader leftAlign title="Name" />
53+
<ColumnHeader leftAlign title="Confirmed?" />
54+
</TableRow>
55+
</TableHead>
56+
<TableBody>
57+
{designReview.optionalMembers.map((member) => (
58+
<TableRow key={member.userId}>
59+
<TableCell>
60+
<Typography>{fullNamePipe(member)}</Typography>
61+
</TableCell>
62+
<TableCell>
63+
<Typography>
64+
{designReview.confirmedMembers.some((confirmedMember) => confirmedMember.userId === member.userId)
65+
? 'Yes'
66+
: 'No'}
67+
</Typography>
68+
</TableCell>
69+
</TableRow>
70+
))}
71+
</TableBody>
72+
</Table>
73+
</TableContainer>
74+
</Grid>
75+
</Grid>
76+
</NERModal>
77+
);
78+
};

‎src/frontend/src/pages/FinancePage/FinanceComponents/ColumnHeader.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { TableCell } from '@mui/material';
22

3-
const ColumnHeader = ({ title }: { title: string }) => {
3+
const ColumnHeader = ({ title, leftAlign = false }: { title: string; leftAlign?: boolean }) => {
44
return (
5-
<TableCell align="center" sx={{ fontSize: '16px', fontWeight: 600 }}>
5+
<TableCell align={leftAlign ? 'left' : 'center'} sx={{ fontSize: '16px', fontWeight: 600 }}>
66
{title}
77
</TableCell>
88
);

0 commit comments

Comments
 (0)