111 lines
4.4 KiB
TypeScript
111 lines
4.4 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 { Box, Button, ButtonProps, StepProps } from "@material-ui/core";
|
|
import { FileDownloadOutline, FileUploadOutline } from "mdi-material-ui/index";
|
|
import { route } from "@/routing";
|
|
import { Link as RouterLink, useHistory } from "react-router-dom";
|
|
import { Actions, Step } from "@/components";
|
|
import React, { HTMLProps } from "react";
|
|
import { Alert, AlertTitle } from "@material-ui/lab";
|
|
import { ContactAction, Status } from "@/pages/steps/common";
|
|
import { Description as DescriptionIcon } from "@material-ui/icons";
|
|
import { useDeadlines } from "@/hooks";
|
|
import { InternshipDocument } from "@/api/dto/internship-registration";
|
|
import { FileInfo } from "@/components/fileinfo";
|
|
import { useSpacing } from "@/styles";
|
|
import { AcceptanceActions } from "@/components/acceptance-action";
|
|
import { InternshipPlanActions, useDispatch } from "@/state/actions";
|
|
|
|
const PlanActions = () => {
|
|
const status = useSelector<AppState, SubmissionStatus>(state => getSubmissionStatus(state.plan));
|
|
|
|
const { t } = useTranslation();
|
|
const dispatch = useDispatch();
|
|
const history = useHistory();
|
|
|
|
const FormAction = ({ children = t('steps.plan.submit'), ...props }: ButtonProps) =>
|
|
<Button to={ route("internship_plan") } variant="contained" color="primary" component={ RouterLink } startIcon={ <FileUploadOutline /> } { ...props as any }>
|
|
{ children }
|
|
</Button>
|
|
|
|
const TemplateAction = (props: ButtonProps) =>
|
|
<Button href="https://eti.pg.edu.pl/documents/611675/100028367/indywidualny%20program%20praktyk" startIcon={ <DescriptionIcon/> } { ...props }>
|
|
{ t('steps.plan.template') }
|
|
</Button>
|
|
|
|
const handleAccept = (comment?: string) => {
|
|
dispatch({ type: InternshipPlanActions.Approve, comment: comment || null });
|
|
history.push(route("home"));
|
|
}
|
|
|
|
const handleDiscard = (comment: string) => {
|
|
dispatch({ type: InternshipPlanActions.Decline, comment: comment });
|
|
history.push(route("home"));
|
|
}
|
|
|
|
switch (status) {
|
|
case "awaiting":
|
|
return <Actions>
|
|
<AcceptanceActions onAccept={ handleAccept } onDiscard={ handleDiscard } label="plan" />
|
|
</Actions>
|
|
case "accepted":
|
|
return <Actions>
|
|
<FormAction variant="outlined" color="secondary">{ t('send-again') }</FormAction>
|
|
</Actions>
|
|
case "declined":
|
|
return <Actions>
|
|
<FormAction>{ t('fix-errors') }</FormAction>
|
|
<TemplateAction />
|
|
<ContactAction/>
|
|
</Actions>
|
|
case "draft":
|
|
return <Actions>
|
|
<FormAction />
|
|
<TemplateAction />
|
|
</Actions>
|
|
|
|
default:
|
|
return <Actions/>
|
|
}
|
|
}
|
|
|
|
export const PlanComment = (props: HTMLProps<HTMLDivElement>) => {
|
|
const { comment, declined } = useSelector<AppState, SubmissionState>(state => state.plan);
|
|
const { t } = useTranslation();
|
|
|
|
return comment ? <Alert severity={ declined ? "error" : "warning" } { ...props as any }>
|
|
<AlertTitle>{ t('comments') }</AlertTitle>
|
|
{ comment }
|
|
</Alert> : null
|
|
}
|
|
|
|
export const PlanStep = (props: StepProps) => {
|
|
const { t } = useTranslation();
|
|
|
|
const submission = useSelector<AppState, SubmissionState>(state => state.plan);
|
|
const document = useSelector<AppState, InternshipDocument>(state => state.plan.document as InternshipDocument);
|
|
const spacing = useSpacing(2);
|
|
|
|
const status = getSubmissionStatus(submission);
|
|
const deadlines = useDeadlines();
|
|
|
|
const { sent, declined, comment } = submission;
|
|
|
|
return <Step { ...props }
|
|
label={ t('steps.plan.header') }
|
|
active={ true } completed={ sent } declined={ declined } waiting={ status == "awaiting" }
|
|
until={ deadlines.proposal }
|
|
state={ <Status submission={ submission } /> }>
|
|
<div className={ spacing.vertical }>
|
|
<p>{ t(`steps.plan.info.${ status }`) }</p>
|
|
|
|
{ comment && <Box pb={ 2 }><PlanComment/></Box> }
|
|
{ document && <FileInfo document={ document } /> }
|
|
|
|
<PlanActions/>
|
|
</div>
|
|
</Step>;
|
|
}
|