86 lines
3.6 KiB
TypeScript
86 lines
3.6 KiB
TypeScript
import { useSelector } from "react-redux";
|
|
import { AppState } from "@/state/reducer";
|
|
import { getSubmissionStatus, SubmissionState, SubmissionStatus } from "@/state/reducer/submission";
|
|
import { useTranslation } from "react-i18next";
|
|
import React, { HTMLProps } from "react";
|
|
import { InternshipProposalState } from "@/state/reducer/proposal";
|
|
import { Alert, AlertTitle } from "@material-ui/lab";
|
|
import { Box, Button, ButtonProps, StepProps } from "@material-ui/core";
|
|
import { Deadlines, Edition, getEditionDeadlines } from "@/data/edition";
|
|
import { Actions, Step } from "@/components";
|
|
import { route } from "@/routing";
|
|
import { Link as RouterLink } from "react-router-dom";
|
|
import { ClipboardEditOutline, FileFind } from "mdi-material-ui/index";
|
|
import { ContactAction, Status } from "@/pages/steps/common";
|
|
|
|
const ProposalActions = () => {
|
|
const status = useSelector<AppState, SubmissionStatus>(state => getSubmissionStatus(state.proposal));
|
|
const { t } = useTranslation();
|
|
|
|
const ReviewAction = (props: ButtonProps) =>
|
|
<Button startIcon={ <FileFind/> }
|
|
component={ RouterLink } to={ route("internship_proposal_preview") }
|
|
{ ...props as any }>
|
|
{ t('review') }
|
|
</Button>
|
|
|
|
const FormAction = ({ children = t('steps.internship-proposal.form'), ...props }: ButtonProps) =>
|
|
<Button to={ route("internship_proposal") } variant="contained" color="primary" component={ RouterLink }
|
|
startIcon={ <ClipboardEditOutline/> } { ...props as any }>
|
|
{ children }
|
|
</Button>
|
|
|
|
switch (status) {
|
|
case "awaiting":
|
|
return <Actions>
|
|
<ReviewAction/>
|
|
</Actions>
|
|
case "accepted":
|
|
return <Actions>
|
|
<ReviewAction/>
|
|
<FormAction variant="outlined" color="secondary">{ t('make-changes') }</FormAction>
|
|
</Actions>
|
|
case "declined":
|
|
return <Actions>
|
|
<FormAction>{ t('fix-errors') }</FormAction>
|
|
<ContactAction />
|
|
</Actions>
|
|
case "draft":
|
|
return <Actions>
|
|
<FormAction color="primary">{ t('steps.internship-proposal.action') }</FormAction>
|
|
</Actions>
|
|
default:
|
|
return <Actions/>
|
|
}
|
|
}
|
|
|
|
export const ProposalComment = (props: HTMLProps<HTMLDivElement>) => {
|
|
const { comment, declined } = useSelector<AppState, InternshipProposalState>(state => state.proposal);
|
|
const { t } = useTranslation();
|
|
|
|
return comment ? <Alert severity={ declined ? "error" : "warning" } { ...props as any }>
|
|
<AlertTitle>{ t('comments') }</AlertTitle>
|
|
{ comment }
|
|
</Alert> : null
|
|
}
|
|
|
|
export const ProposalStep = (props: StepProps) => {
|
|
const { t } = useTranslation();
|
|
|
|
const submission = useSelector<AppState, SubmissionState>(state => state.proposal);
|
|
const status = useSelector<AppState, SubmissionStatus>(state => getSubmissionStatus(state.proposal));
|
|
const deadlines = useSelector<AppState, Deadlines>(state => getEditionDeadlines(state.edition as Edition)); // edition cannot be null at this point
|
|
|
|
const { sent, declined, comment } = submission;
|
|
|
|
return <Step { ...props }
|
|
label={ t('steps.internship-proposal.header') }
|
|
active={ true } completed={ sent } declined={ declined } waiting={ status == "awaiting" }
|
|
until={ deadlines.proposal }
|
|
state={ <Status submission={ submission } /> }>
|
|
<p>{ t(`steps.internship-proposal.info.${ status }`) }</p>
|
|
{ comment && <Box pb={ 2 }><ProposalComment/></Box> }
|
|
<ProposalActions/>
|
|
</Step>;
|
|
}
|