From b9b63625f1b4e4f7de28a3fd9594de7502d3add2 Mon Sep 17 00:00:00 2001 From: Kacper Donat Date: Wed, 22 Jul 2020 19:45:58 +0200 Subject: [PATCH] Add basic ipp submit form --- package.json | 1 + src/components/actions.tsx | 14 ++++++++++ src/pages/index.ts | 1 + src/pages/internship/plan.tsx | 52 +++++++++++++++++++++++++++++++++++ src/pages/main.tsx | 20 ++++++++------ src/routing.tsx | 2 ++ translations/en.yaml | 2 ++ translations/pl.yaml | 11 ++++++++ yarn.lock | 30 ++++++++++++++++++++ 9 files changed, 125 insertions(+), 8 deletions(-) create mode 100644 src/components/actions.tsx create mode 100644 src/pages/internship/plan.tsx diff --git a/package.json b/package.json index 5fe314f..f1d1f0f 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "html-webpack-plugin": "4.0.0-beta.11", "i18next": "^19.6.0", "i18next-browser-languagedetector": "^5.0.0", + "material-ui-dropzone": "^3.3.0", "moment": "^2.26.0", "node-sass": "^4.14.1", "optimize-css-assets-webpack-plugin": "5.0.3", diff --git a/src/components/actions.tsx b/src/components/actions.tsx new file mode 100644 index 0000000..5fdb03d --- /dev/null +++ b/src/components/actions.tsx @@ -0,0 +1,14 @@ +import React, { HTMLProps } from "react"; +import { makeStyles } from "@material-ui/core/styles"; + +export const Actions = (props: HTMLProps) => { + const classes = makeStyles(theme => ({ + root: { + "& > *": { + marginRight: theme.spacing(1) + } + } + }))(); + + return
+} diff --git a/src/pages/index.ts b/src/pages/index.ts index c5f71a3..538a1bd 100644 --- a/src/pages/index.ts +++ b/src/pages/index.ts @@ -1,3 +1,4 @@ export * from "./internship/proposal"; export * from "./errors/not-found" export * from "./main" +export { Actions } from "@/components/actions"; diff --git a/src/pages/internship/plan.tsx b/src/pages/internship/plan.tsx new file mode 100644 index 0000000..992fd5c --- /dev/null +++ b/src/pages/internship/plan.tsx @@ -0,0 +1,52 @@ +import { Page } from "@/pages/base"; +import { Button, Container, FormHelperText, Grid, Link, Typography } from "@material-ui/core"; +import { Link as RouterLink } from "react-router-dom"; +import { route } from "@/routing"; +import React from "react"; +import { useTranslation } from "react-i18next"; +import { DropzoneArea } from "material-ui-dropzone"; +import { Description as DescriptionIcon } from "@material-ui/icons"; +import { Actions } from "@/components/actions"; + +export const SubmitPlanPage = () => { + const { t } = useTranslation(); + + return + + + { t('sections.my-internship.header') } + { t("steps.plan.submit") } + + { t("steps.plan.submit") } + + + + + { t('forms.plan.instructions') } + + + + + + + { t('forms.plan.dropzone-help') } + + + + + + + + + + + +} + +export default SubmitPlanPage; diff --git a/src/pages/main.tsx b/src/pages/main.tsx index 2e6bb4b..0b773d9 100644 --- a/src/pages/main.tsx +++ b/src/pages/main.tsx @@ -9,6 +9,8 @@ import { useSelector } from "react-redux"; import { AppState } from "@/state/reducer"; import { getMissingStudentData, Student } from "@/data"; import { Deadlines, Edition, getEditionDeadlines } from "@/data/edition"; +import { Description as DescriptionIcon } from "@material-ui/icons" +import { Actions } from "@/components/actions"; type StepProps = StepperStepProps & { until?: Moment; @@ -57,7 +59,7 @@ export const MainPage = () => {

{ t('steps.personal-data.info') }

    - { missingStudentData.map(field =>
  • { t(`student.${field}`) }
    • ) } + { missingStudentData.map(field =>
  • { t(`student.${ field }`) }
    • ) }
- + + + + - + diff --git a/src/routing.tsx b/src/routing.tsx index d2a2274..adb533a 100644 --- a/src/routing.tsx +++ b/src/routing.tsx @@ -3,6 +3,7 @@ import { MainPage } from "@/pages/main"; import { RouteProps } from "react-router-dom"; import { InternshipProposalPage } from "@/pages/internship/proposal"; import { NotFoundPage } from "@/pages/errors/not-found"; +import SubmitPlanPage from "@/pages/internship/plan"; type Route = { name?: string; @@ -13,6 +14,7 @@ export const routes: Route[] = [ { name: "home", path: "/", exact: true, content: () => }, { name: "internship_proposal", path: "/internship/proposal", exact: true, content: () => }, + { name: "internship_plan", path: "/internship/plan", exact: true, content: () => }, // fallback route for 404 pages { name: "fallback", path: "*", content: () => } diff --git a/translations/en.yaml b/translations/en.yaml index fd6824a..ca1e2c6 100644 --- a/translations/en.yaml +++ b/translations/en.yaml @@ -7,6 +7,8 @@ until: until {{ date }} late: late by {{ by }} left: '{{ left }} left' +dropzone: "Drag and drop a file here or click to choose" + student: name: first name surname: last name diff --git a/translations/pl.yaml b/translations/pl.yaml index a08a967..8b9e395 100644 --- a/translations/pl.yaml +++ b/translations/pl.yaml @@ -7,10 +7,21 @@ until: do {{ date }} late: '{{ by }} spóźnienia' left: jeszcze {{ left }} +confirm: zatwierdź +go-back: wstecz + +dropzone: "Przeciągnij i upuść plik bądź kliknij, aby wybrać" + sections: my-internship: header: "Moja praktyka" +forms: + plan: + instructions: > + Wypełnij i zeskanuj Indywidualny Plan Praktyk a następnie wyślij go z pomocą tego formularza. + dropzone-help: Skan dokumentu w formacie PDF + student: name: imię surname: mazwisko diff --git a/yarn.lock b/yarn.lock index a96ad63..bad0fdf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1776,6 +1776,11 @@ atob@^2.1.2: resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9" integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg== +attr-accept@^2.0.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-2.1.0.tgz#a231a854385d36ff7a99647bb77b33c8a5175aee" + integrity sha512-sLzVM3zCCmmDtDNhI0i96k6PUztkotSOXqE4kDGQt/6iDi5M+H0srjeF+QC6jN581l4X/Zq3Zu/tgcErEssavg== + autoprefixer@^9.6.1: version "9.8.0" resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.8.0.tgz#68e2d2bef7ba4c3a65436f662d0a56a741e56511" @@ -3800,6 +3805,13 @@ file-loader@4.3.0: loader-utils "^1.2.3" schema-utils "^2.5.0" +file-selector@^0.1.12: + version "0.1.12" + resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-0.1.12.tgz#fe726547be219a787a9dcc640575a04a032b1fd0" + integrity sha512-Kx7RTzxyQipHuiqyZGf+Nz4vY9R1XGxuQl/hLoJwq+J4avk/9wxxgZyHKtbyIPJmbD4A66DWGYfyykWNpcYutQ== + dependencies: + tslib "^1.9.0" + file-uri-to-path@1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd" @@ -5491,6 +5503,15 @@ map-visit@^1.0.0: dependencies: object-visit "^1.0.0" +material-ui-dropzone@^3.3.0: + version "3.3.0" + resolved "https://registry.yarnpkg.com/material-ui-dropzone/-/material-ui-dropzone-3.3.0.tgz#5adb64e7ad71953eb29c7d0616b0b693904eb412" + integrity sha512-PBOj5IiGbLxEgNybO28xo381/qe0tMF55U715xGs8XLoyfjOFIoC29u4UL3+SWPYsaP/JIFwR4JW+h32xHugIg== + dependencies: + "@babel/runtime" "^7.4.4" + clsx "^1.0.2" + react-dropzone "^10.2.1" + md5.js@^1.3.4: version "1.3.5" resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f" @@ -7360,6 +7381,15 @@ react-dom@^16.13.1: prop-types "^15.6.2" scheduler "^0.19.1" +react-dropzone@^10.2.1: + version "10.2.2" + resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-10.2.2.tgz#67b4db7459589a42c3b891a82eaf9ade7650b815" + integrity sha512-U5EKckXVt6IrEyhMMsgmHQiWTGLudhajPPG77KFSvgsMqNEHSyGpqWvOMc5+DhEah/vH4E1n+J5weBNLd5VtyA== + dependencies: + attr-accept "^2.0.0" + file-selector "^0.1.12" + prop-types "^15.7.2" + react-error-overlay@^6.0.7: version "6.0.7" resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108"