From a3475c5f302950c211720d933acaf9fc050691bd Mon Sep 17 00:00:00 2001 From: Kacper Donat Date: Sun, 2 Aug 2020 23:00:18 +0200 Subject: [PATCH] Add support for different states of proposal --- .babelrc.js | 9 ++++ src/components/step.tsx | 14 +++--- src/components/stepIcon.tsx | 22 ++++++++++ src/pages/internship/proposal.tsx | 2 + src/pages/main.tsx | 72 +++++++++++++++++++++++++++---- src/provider/dummy/internship.ts | 4 +- src/state/actions/proposal.ts | 2 +- src/state/reducer/proposal.ts | 3 +- translations/pl.yaml | 20 ++++++++- 9 files changed, 126 insertions(+), 22 deletions(-) create mode 100644 src/components/stepIcon.tsx diff --git a/.babelrc.js b/.babelrc.js index f605d9b..6e74520 100644 --- a/.babelrc.js +++ b/.babelrc.js @@ -17,6 +17,15 @@ const plugins = [ }, 'core' ], + [ + 'babel-plugin-import', + { + 'libraryName': 'mdi-material-ui', + 'libraryDirectory': '.', + 'camel2DashComponentName': false + }, + 'mdi-material-ui' + ], [ 'babel-plugin-import', { diff --git a/src/components/step.tsx b/src/components/step.tsx index 0cf9cd6..fa08903 100644 --- a/src/components/step.tsx +++ b/src/components/step.tsx @@ -2,6 +2,7 @@ import moment, { Moment } from "moment"; import { Box, Step as StepperStep, StepContent, StepLabel, StepProps as StepperStepProps, Typography } from "@material-ui/core"; import { useTranslation } from "react-i18next"; import React, { ReactChild, useMemo } from "react"; +import { StepIcon } from "@/components/stepIcon"; type StepProps = StepperStepProps & { until?: Moment; @@ -9,24 +10,21 @@ type StepProps = StepperStepProps & { label: string; state?: ReactChild | null; - /** this roughly translates into completed */ - accepted?: boolean; - - /** this roughly translates into error */ + waiting?: boolean; declined?: boolean; - sent?: boolean; } const now = moment(); -export const Step = ({ until, label, completedOn, children, accepted = false, declined = false, completed = false, state = null, ...props }: StepProps) => { +export const Step = (props: StepProps) => { + const { until, label, completedOn, children, completed = false, declined = false, waiting = false, state = null, ...rest } = props; const { t } = useTranslation(); const isLate = useMemo(() => until?.isBefore(completedOn || now), [completedOn, until]); const left = useMemo(() => moment.duration(now.diff(until)), [until]); - return - + return + { label } { until && { state && <> diff --git a/src/components/stepIcon.tsx b/src/components/stepIcon.tsx new file mode 100644 index 0000000..c8b9f8b --- /dev/null +++ b/src/components/stepIcon.tsx @@ -0,0 +1,22 @@ +import { StepIcon as MuiStepIcon, StepIconProps as MuiStepIconProps, Theme } from "@material-ui/core"; +import React from "react"; +import { TimerSand } from "mdi-material-ui"; +import { createStyles, makeStyles } from "@material-ui/core/styles"; + +type StepIconProps = MuiStepIconProps & { + waiting: boolean +} + +const useStyles = makeStyles((theme: Theme) => createStyles({ + root: { + color: theme.palette.primary.main + } +})) + +export const StepIcon = ({ waiting, ...props }: StepIconProps) => { + const classes = useStyles(); + + return waiting + ? + : ; +} diff --git a/src/pages/internship/proposal.tsx b/src/pages/internship/proposal.tsx index a9ef954..e45b4cb 100644 --- a/src/pages/internship/proposal.tsx +++ b/src/pages/internship/proposal.tsx @@ -4,6 +4,7 @@ import { Link as RouterLink } from "react-router-dom"; import { route } from "@/routing"; import { InternshipForm } from "@/forms/internship"; import React from "react"; +import { ProposalComment } from "@/pages"; export const InternshipProposalPage = () => { return @@ -15,6 +16,7 @@ export const InternshipProposalPage = () => { Zgłoszenie praktyki + diff --git a/src/pages/main.tsx b/src/pages/main.tsx index 46a1eaa..97f1016 100644 --- a/src/pages/main.tsx +++ b/src/pages/main.tsx @@ -1,6 +1,6 @@ -import React, { useMemo } from "react"; +import React, { HTMLProps, useMemo } from "react"; import { Page } from "@/pages/base"; -import { Button, Container, Stepper, StepProps, Theme, Typography } from "@material-ui/core"; +import { Box, Button, ButtonProps, Container, Stepper, StepProps, Theme, Typography } from "@material-ui/core"; import { Link as RouterLink } from "react-router-dom"; import { route } from "@/routing"; import { useTranslation } from "react-i18next"; @@ -12,6 +12,8 @@ import { Description as DescriptionIcon } from "@material-ui/icons" import { Actions, Step } from "@/components"; import { getInternshipProposalStatus, InternshipProposalState, InternshipProposalStatus } from "@/state/reducer/proposal"; import { createStyles, makeStyles } from "@material-ui/core/styles"; +import { ClipboardEditOutline, CommentQuestion, FileFind } from "mdi-material-ui"; +import { Alert, AlertTitle } from "@material-ui/lab"; const getColorByStatus = (status: InternshipProposalStatus, theme: Theme) => { @@ -51,18 +53,70 @@ const ProposalStatus = () => { return { t(`proposal.status.${status}`) }; } +const ProposalActions = () => { + const status = useSelector(state => getInternshipProposalStatus(state.proposal)); + const { t } = useTranslation(); + + const ReviewAction = (props: ButtonProps) => + + + const FormAction = ({ children = t('steps.internship-proposal.form'), ...props }: ButtonProps) => + + + const ContactAction = (props: ButtonProps) => + + + switch (status) { + case "awaiting": + return + + + case "accepted": + return + + { t('make-changes') } + + case "declined": + return + { t('fix-errors') } + + + case "draft": + return + { t('steps.internship-proposal.action') } + + default: + return + } +} + +export const ProposalComment = (props: HTMLProps) => { + const { comment, declined } = useSelector(state => state.proposal); + const { t } = useTranslation(); + + return + { t('comments') } + { comment } + +} + const ProposalStep = (props: StepProps) => { const { t } = useTranslation(); - const { sent } = useSelector(state => state.proposal); + const { sent, comment, declined } = useSelector(state => state.proposal); + const status = useSelector(state => getInternshipProposalStatus(state.proposal)); const deadlines = useSelector(state => getEditionDeadlines(state.edition as Edition)); // edition cannot be null at this point - return }> -

{ t('steps.internship-proposal.info') }

- - + return }> +

{ t(`steps.internship-proposal.info.${status}`) }

+ { comment && } + ; } diff --git a/src/provider/dummy/internship.ts b/src/provider/dummy/internship.ts index 9d86cc1..9f10d5b 100644 --- a/src/provider/dummy/internship.ts +++ b/src/provider/dummy/internship.ts @@ -1,5 +1,5 @@ import { Nullable } from "@/helpers"; -import { emptyCompany, Internship, Mentor } from "@/data"; +import { emptyBranchOffice, emptyCompany, Internship, Mentor } from "@/data"; export const emptyMentor: Mentor = { phone: null, @@ -18,4 +18,6 @@ export const emptyInternship: Nullable = { lengthInWeeks: 0, mentor: emptyMentor, company: emptyCompany, + hours: 0, + office: emptyBranchOffice, } diff --git a/src/state/actions/proposal.ts b/src/state/actions/proposal.ts index 8189ec3..9b13c85 100644 --- a/src/state/actions/proposal.ts +++ b/src/state/actions/proposal.ts @@ -14,7 +14,7 @@ export interface SendProposalAction extends Action { - + comment: string | null; } export interface ReceiveProposalDeclineAction extends Action { diff --git a/src/state/reducer/proposal.ts b/src/state/reducer/proposal.ts index 1ccb187..890f543 100644 --- a/src/state/reducer/proposal.ts +++ b/src/state/reducer/proposal.ts @@ -52,7 +52,7 @@ const internshipProposalReducer = (state: InternshipProposalState = defaultInter ...state, accepted: true, declined: false, - comment: "" + comment: action.comment, } case InternshipProposalActions.Decline: return { @@ -74,6 +74,7 @@ const internshipProposalReducer = (state: InternshipProposalState = defaultInter sentOn: momentSerializationTransformer.transform(moment()), accepted: false, declined: false, + comment: null, } default: return state; diff --git a/translations/pl.yaml b/translations/pl.yaml index 7fd75de..e1564df 100644 --- a/translations/pl.yaml +++ b/translations/pl.yaml @@ -12,6 +12,12 @@ left: jeszcze {{ left, humanize }} confirm: zatwierdź go-back: wstecz +make-changes: wprowadź zmiany +review: podgląd +fix-errors: popraw uwagi +contact: skontaktuj się z pełnomocnikiem +comments: Zgłoszone uwagi + dropzone: "Przeciągnij i upuść plik bądź kliknij, aby wybrać" sections: @@ -48,9 +54,19 @@ steps: form: "Uzupełnij dane" internship-proposal: header: "Zgłoszenie praktyki" - info: > - Przed podjęciem praktyki należy ją zgłosić. + info: + draft: > + Przed podjęciem praktyki należy ją zgłosić. + awaiting: > + Twoje zgłoszenie musi zostać zweryfikowane i zatwierdzone. Po weryfikacji zostaniesz poinformowany o + akceptacji bądź konieczności wprowadzenia zmian. + accepted: > + Twoje zgłoszenie zostało zweryfikowane i zaakceptowane. + declined: > + Twoje zgłoszenie zostało zweryfikowane i odrzucone. Popraw zgłoszone uwagi i wyślij zgłoszenie ponownie. W razie + pytań możesz również skontaktować się z pełnomocnikiem ds. praktyk Twojego kierunku. form: "Formularz zgłaszania praktyki" + action: "zgłoś praktykę" plan: header: "Indywidualny Program Praktyki" info: ""