-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
15 Reviewer Step 1: Overview and EOC (#90)
* refactor review progress steps * refactoring the way we get `courseEvaluation` by wrapping from SWR * review steps with description * bootstrap content for all reviewer pages * initial working on the overview and EOC page * installation of MUI lab * EOC ACcordion for Refresher * frontend linting * reviewer bottom navigation * submission to the backend * linting fix * update poetry packages
- Loading branch information
Showing
19 changed files
with
716 additions
and
264 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import React from 'react'; | ||
|
|
||
| import Card from '@mui/material/Card'; | ||
| import CardHeader from '@mui/material/CardHeader'; | ||
| import { getReviewStepsWithState } from '@/components/utils/reviews'; | ||
| import Container from '@mui/material/Container'; | ||
|
|
||
| type Props = { | ||
| stepIndex: number; | ||
| }; | ||
|
|
||
| const AboutStepCard = (props: Props) => { | ||
| const { stepIndex } = props; | ||
| const stepDetails = getReviewStepsWithState()[stepIndex]; | ||
| return ( | ||
| <Container maxWidth="xl" sx={{ mt: 2, mb: 2 }}> | ||
| <Card> | ||
| <CardHeader | ||
| title={`Step ${stepDetails.stepNo}: ${stepDetails.stepName}`} | ||
| subheader={stepDetails.description} | ||
| /> | ||
| </Card> | ||
| </Container> | ||
| ); | ||
| }; | ||
|
|
||
| export default AboutStepCard; |
This file was deleted.
Oops, something went wrong.
68 changes: 68 additions & 0 deletions
68
frontend/components/Reviewer/OverviewAndEOC/EOCAccordionForRefresher.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| import Accordion from '@mui/material/Accordion'; | ||
| import AccordionSummary from '@mui/material/AccordionSummary'; | ||
| import AccordionDetails from '@mui/material/AccordionDetails'; | ||
| import Typography from '@mui/material/Typography'; | ||
| import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; | ||
| import React, { useState } from 'react'; | ||
| import { EocSetEocGeneral } from 'utils/api'; | ||
| import Tab from '@mui/material/Tab'; | ||
| import TabContext from '@mui/lab/TabContext'; | ||
| import TabList from '@mui/lab/TabList'; | ||
| import TabPanel from '@mui/lab/TabPanel'; | ||
| import Box from '@mui/material/Box'; | ||
| import List from '@mui/material/List'; | ||
| import ListItem from '@mui/material/ListItem'; | ||
|
|
||
| type Props = { | ||
| eocGeneral: EocSetEocGeneral; | ||
| }; | ||
|
|
||
| const EOCAccordionForRefresher = ({ eocGeneral }: Props) => { | ||
| const [value, setValue] = useState('0'); | ||
| const handleChange = (event: React.SyntheticEvent, newValue: React.SetStateAction<string>) => { | ||
| setValue(newValue); | ||
| }; | ||
|
|
||
| return ( | ||
| <Accordion> | ||
| <AccordionSummary expandIcon={<ExpandMoreIcon />}> | ||
| <Typography>{`EOC ${eocGeneral.number}: ${eocGeneral.title}`}</Typography> | ||
| </AccordionSummary> | ||
| <AccordionDetails> | ||
| <TabContext value={`${value}`}> | ||
| <Box sx={{ borderBottom: 1, borderColor: 'divider' }}> | ||
| <TabList onChange={handleChange}> | ||
| {eocGeneral.eoc_specifics.map((eocSpecific, index) => ( | ||
| <Tab | ||
| key={eocSpecific.id} | ||
| value={`${index}`} | ||
| label={`EOC ${eocSpecific.general_and_specific_eoc}`} | ||
| /> | ||
| ))} | ||
| </TabList> | ||
| </Box> | ||
| {eocGeneral.eoc_specifics.map((eocSpecific, index) => ( | ||
| <TabPanel key={eocSpecific.id} value={`${index}`}> | ||
| <Typography gutterBottom> | ||
| <strong>Description:</strong> {eocSpecific.description} | ||
| </Typography> | ||
| <Typography> | ||
| <strong>Indicators of Attainment:</strong> | ||
| </Typography> | ||
| <List> | ||
| {eocSpecific.indicators_of_attainment.map((indicator, indicatorIndex) => ( | ||
| // eslint-disable-next-line react/no-array-index-key | ||
| <ListItem key={indicatorIndex} sx={{ display: 'list-item' }}> | ||
| {indicator} | ||
| </ListItem> | ||
| ))} | ||
| </List> | ||
| </TabPanel> | ||
| ))} | ||
| </TabContext> | ||
| </AccordionDetails> | ||
| </Accordion> | ||
| ); | ||
| }; | ||
|
|
||
| export default EOCAccordionForRefresher; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import React from 'react'; | ||
| import Container from '@mui/material/Container'; | ||
| import Button from '@mui/material/Button'; | ||
| import NavigateNextIcon from '@mui/icons-material/NavigateNext'; | ||
| import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore'; | ||
| import { useRouter } from 'next/router'; | ||
|
|
||
| type Props = { | ||
| previousLink?: string; | ||
| nextLink?: string; | ||
| handleSubmit?: () => void; | ||
| }; | ||
| const ReviewerBottomNavigation = (props: Props) => { | ||
| const { previousLink, nextLink, handleSubmit } = props; | ||
|
|
||
| const router = useRouter(); | ||
| const handlePrevious = () => { | ||
| if (previousLink) { | ||
| router.push(previousLink); | ||
| } | ||
| }; | ||
| const handleNext = () => { | ||
| if (nextLink) { | ||
| router.push(nextLink); | ||
| } | ||
| if (handleSubmit) { | ||
| handleSubmit(); | ||
| } | ||
| }; | ||
|
|
||
| // If the previous link is not there, then we have to not show it | ||
| const numberOfItems = previousLink ? 2 : 1; | ||
| return ( | ||
| <Container | ||
| maxWidth="xl" | ||
| sx={{ | ||
| display: 'flex', | ||
| justifyContent: numberOfItems > 1 ? 'space-between' : 'flex-end', | ||
| }} | ||
| > | ||
| {previousLink && ( | ||
| <Button startIcon={<NavigateBeforeIcon />} variant="contained" onClick={handlePrevious}> | ||
| Previous | ||
| </Button> | ||
| )} | ||
| <Button endIcon={<NavigateNextIcon />} variant="contained" onClick={handleNext}> | ||
| {nextLink ? 'Next' : 'Submit'} | ||
| </Button> | ||
| </Container> | ||
| ); | ||
| }; | ||
|
|
||
| ReviewerBottomNavigation.defaultProps = { | ||
| previousLink: '', | ||
| nextLink: '', | ||
| handleSubmit: () => {}, | ||
| }; | ||
|
|
||
| export default ReviewerBottomNavigation; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import { useRouter } from 'next/router'; | ||
| import { | ||
| API_ENDPOINT, | ||
| CourseEvaluationDetailEntry, | ||
| DEFAULT_COURSE_EVALUTION_DETAIL_ENTRY, | ||
| } from 'utils/api'; | ||
| import useSWRAuth from './useSWRAuth'; | ||
|
|
||
| /** | ||
| * Helper hook that pulls out the course evaluation id from the url and returns the SWR value for it | ||
| */ | ||
| const useCourseEvaluation = (overwriteCourseEvalutionId?: string) => { | ||
| const router = useRouter(); | ||
| const courseEvaluationId = (overwriteCourseEvalutionId || router.query?.id || '') as string; | ||
|
|
||
| const swrResult = useSWRAuth( | ||
| courseEvaluationId ? API_ENDPOINT.COURSE_EVALUATION.DETAIL(courseEvaluationId) : '', | ||
| ); | ||
|
|
||
| const courseEvaluation = ((swrResult.response?.data as unknown) || | ||
| DEFAULT_COURSE_EVALUTION_DETAIL_ENTRY) as CourseEvaluationDetailEntry; | ||
| return { courseEvaluation, swr: swrResult }; | ||
| }; | ||
|
|
||
| export default useCourseEvaluation; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| import { useRouter } from 'next/router'; | ||
| import { API_ENDPOINT, DEFAULT_REVIEW_LIST_ENTRY, ReviewListEntry } from 'utils/api'; | ||
| import useSWRAuth from './useSWRAuth'; | ||
|
|
||
| /** | ||
| * Helper hook that pulls out the review id from the url and returns the SWR value for it | ||
| */ | ||
| const useCourseReview = () => { | ||
| const router = useRouter(); | ||
| const reviewId = (router.query?.reviewId || '') as string; | ||
|
|
||
| const swrResult = useSWRAuth(reviewId ? API_ENDPOINT.REVIEWS.DETAIL(reviewId) : ''); | ||
|
|
||
| const courseReview = ((swrResult.response?.data as unknown) || | ||
| DEFAULT_REVIEW_LIST_ENTRY) as ReviewListEntry; | ||
| return { courseReview, swr: swrResult }; | ||
| }; | ||
|
|
||
| export default useCourseReview; |
Oops, something went wrong.