97 lines
2.9 KiB
TypeScript
97 lines
2.9 KiB
TypeScript
import React from "react";
|
|
import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
|
|
import Accordion from "@material-ui/core/Accordion";
|
|
import AccordionDetails from "@material-ui/core/AccordionDetails";
|
|
import AccordionSummary from "@material-ui/core/AccordionSummary";
|
|
import Typography from "@material-ui/core/Typography";
|
|
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
|
|
import Divider from "@material-ui/core/Divider";
|
|
import {
|
|
CandidatePosition,
|
|
getIconForPosition,
|
|
} from "./CandidatePositionLegend";
|
|
import { QuestionAnswerResponse } from "../backend/queries/answer";
|
|
import EditAnswerSection from "./EditAnswerSection";
|
|
|
|
const useStyles = makeStyles((theme: Theme) =>
|
|
createStyles({
|
|
root: {
|
|
width: "100%",
|
|
marginBottom: theme.spacing(1),
|
|
},
|
|
heading: {
|
|
fontSize: theme.typography.pxToRem(15),
|
|
flexGrow: 1,
|
|
},
|
|
secondaryHeading: {
|
|
fontSize: theme.typography.pxToRem(15),
|
|
color: theme.palette.text.secondary,
|
|
},
|
|
details: {
|
|
flexDirection: "column",
|
|
},
|
|
questionDetails: {
|
|
marginBottom: theme.spacing(2),
|
|
},
|
|
positionIcon: {
|
|
marginLeft: theme.spacing(2),
|
|
},
|
|
})
|
|
);
|
|
|
|
interface AccordionQuestionAnswerProps {
|
|
loggedInPersonRowId: number;
|
|
question: QuestionAnswerResponse;
|
|
}
|
|
|
|
export default function AccordionQuestionAnswer(
|
|
props: AccordionQuestionAnswerProps
|
|
): React.ReactElement {
|
|
const {
|
|
rowId: questionRowId,
|
|
title: questionTitle,
|
|
description: questionDetails,
|
|
} = props.question;
|
|
const position = props.question.answersByQuestionRowId.nodes[0]?.position;
|
|
const questionCategory = props.question.categoryByCategoryRowId?.title;
|
|
const classes = useStyles();
|
|
const answerPosition =
|
|
position !== undefined ? position : CandidatePosition.skipped;
|
|
|
|
return (
|
|
<div className={classes.root} key={questionRowId}>
|
|
<Accordion>
|
|
<AccordionSummary
|
|
expandIcon={<ExpandMoreIcon />}
|
|
aria-controls="panel1c-content"
|
|
id="panel1c-header"
|
|
>
|
|
<div className={classes.heading}>
|
|
<Typography>{questionTitle}</Typography>
|
|
</div>
|
|
<div className={classes.secondaryHeading}>
|
|
<Typography>{questionCategory}</Typography>
|
|
</div>
|
|
<div className={classes.positionIcon}>
|
|
{getIconForPosition(answerPosition)}
|
|
</div>
|
|
</AccordionSummary>
|
|
<AccordionDetails className={classes.details}>
|
|
<Typography
|
|
className={classes.questionDetails}
|
|
color="textSecondary"
|
|
style={{ whiteSpace: "pre-line" }}
|
|
>
|
|
{questionDetails}
|
|
</Typography>
|
|
<Divider />
|
|
<EditAnswerSection
|
|
loggedInPersonRowId={props.loggedInPersonRowId}
|
|
question={props.question}
|
|
/>
|
|
</AccordionDetails>
|
|
</Accordion>
|
|
</div>
|
|
);
|
|
}
|