Skip to content

Commit 38581de

Browse files
walker-seanwalker-sean
committed
#2227 confirmation popup done
1 parent 248bc1e commit 38581de

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} />;
@@ -64,7 +66,9 @@ const CalendarPage = () => {
6466
return {
6567
icon: getTeamTypeIcon(designReview.teamType.name),
6668
title: designReview.wbsName,
67-
onClick: () => {},
69+
onClick: () => {
70+
setUnconfirmedDesignReview(designReview);
71+
},
6872
disabled: false
6973
};
7074
});
@@ -94,54 +98,66 @@ const CalendarPage = () => {
9498
if (allTeamTypesIsError) return <ErrorPage error={allTeamTypesError} message={allTeamTypesError?.message} />;
9599

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

‎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>
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 uncenter title="Name" />
24+
<ColumnHeader uncenter 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 uncenter title="Name" />
53+
<ColumnHeader uncenter 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, uncenter }: { title: string; uncenter?: boolean }) => {
44
return (
5-
<TableCell align="center" sx={{ fontSize: '16px', fontWeight: 600 }}>
5+
<TableCell align={uncenter ? 'left' : 'center'} sx={{ fontSize: '16px', fontWeight: 600 }}>
66
{title}
77
</TableCell>
88
);

0 commit comments

Comments
 (0)