From 0b67f95dbf8b0b182ad879c7dc41b7d97bf56073 Mon Sep 17 00:00:00 2001 From: Kacper Donat Date: Sun, 14 Jun 2020 18:13:07 +0200 Subject: [PATCH] Add mentor information to form --- public/index.html | 2 +- src/data/index.ts | 1 - src/data/internship.ts | 10 +++++++ src/data/student.ts | 2 +- src/forms/Internship.tsx | 7 ++--- src/forms/company.tsx | 45 +++++++++++++++++++++++++++----- src/forms/helpers.ts | 13 ++++++--- src/provider/dummy/company.ts | 14 +++------- src/provider/dummy/internship.ts | 11 +++++++- 9 files changed, 79 insertions(+), 26 deletions(-) diff --git a/public/index.html b/public/index.html index 6def50f..6482fd8 100644 --- a/public/index.html +++ b/public/index.html @@ -6,7 +6,7 @@ - React App + Zgłoszenie praktyki studenckiej diff --git a/src/data/index.ts b/src/data/index.ts index 226b401..cfd65af 100644 --- a/src/data/index.ts +++ b/src/data/index.ts @@ -3,4 +3,3 @@ export * from './company' export * from './course' export * from './internship' export * from './student' -export { emptyInternship } from "@/provider/dummy/internship"; diff --git a/src/data/internship.ts b/src/data/internship.ts index 7d0b973..b80258f 100644 --- a/src/data/internship.ts +++ b/src/data/internship.ts @@ -2,6 +2,7 @@ import { Moment } from "moment"; import { Identifiable } from "./common"; import { countWorkingWeeksInRange } from "@/utils/date"; import { Student } from "@/data/student"; +import { Company } from "@/data/company"; export enum InternshipType { FreeInternship = "FreeInternship", @@ -61,4 +62,13 @@ export interface Internship extends Identifiable { endDate: Moment; isAccepted: boolean; lengthInWeeks: number; + mentor: Mentor; + company: Company; +} + +export interface Mentor { + name: string; + surname: string; + email: string; + phone: string | null; } diff --git a/src/data/student.ts b/src/data/student.ts index 36c1e6b..5fb3221 100644 --- a/src/data/student.ts +++ b/src/data/student.ts @@ -3,7 +3,7 @@ import { Identifiable } from "./common"; export type Semester = number; -export interface Student extends Identifiable{ +export interface Student extends Identifiable { name: string; surname: string; email: string; diff --git a/src/forms/Internship.tsx b/src/forms/Internship.tsx index 9292098..56a5800 100644 --- a/src/forms/Internship.tsx +++ b/src/forms/Internship.tsx @@ -1,4 +1,4 @@ -import React, { ChangeEvent, HTMLProps, useMemo, useState } from "react"; +import React, { HTMLProps, useMemo, useState } from "react"; import { FormControl, Grid, @@ -17,12 +17,13 @@ import { KeyboardDatePicker as DatePicker } from "@material-ui/pickers"; import { CompanyForm } from "@/forms/company"; import { StudentForm } from "@/forms/student"; import { sampleStudent } from "@/provider/dummy/student"; -import { Company, Course, emptyInternship, Internship, InternshipType, internshipTypeLabels } from "@/data"; +import { Course, Internship, InternshipType, internshipTypeLabels } from "@/data"; import { Nullable } from "@/helpers"; import moment, { Moment } from "moment"; import { computeWorkingHours } from "@/utils/date"; import { Autocomplete } from "@material-ui/lab"; import { formFieldProps } from "@/forms/helpers"; +import { emptyInternship } from "@/provider/dummy/internship"; export type InternshipFormProps = {} @@ -150,7 +151,7 @@ export const InternshipForm: React.FunctionComponent = prop Czas trwania praktyki Miejsce odbywania praktyki - + ) diff --git a/src/forms/company.tsx b/src/forms/company.tsx index 2319dc2..c3fd10f 100644 --- a/src/forms/company.tsx +++ b/src/forms/company.tsx @@ -1,11 +1,14 @@ import React, { HTMLProps, useEffect, useMemo, useState } from "react"; -import { BranchOffice, Company, emptyAddress, emptyBranchOffice, emptyCompany, formatAddress } from "@/data"; +import { BranchOffice, Company, Course, emptyAddress, emptyBranchOffice, emptyCompany, formatAddress, Mentor } from "@/data"; import { sampleCompanies } from "@/provider/dummy"; -import { Autocomplete } from "@material-ui/lab"; -import { Grid, TextField, Typography } from "@material-ui/core"; -import { formFieldProps } from "./helpers"; +import { Alert, Autocomplete } from "@material-ui/lab"; +import { Button, Grid, TextField, Typography } from "@material-ui/core"; +import { BoundProperty, formFieldProps } from "./helpers"; +import { InternshipFormSectionProps } from "@/forms/Internship"; +import { sampleCourse } from "@/provider/dummy/student"; +import { emptyMentor } from "@/provider/dummy/internship"; -export type CompanyFormProps = {} +export type CompanyFormProps = {} & InternshipFormSectionProps; export type BranchOfficeProps = { company: Company, @@ -95,10 +98,38 @@ export const BranchForm: React.FC = ({ company, disabled = fa ) } -export const CompanyForm: React.FunctionComponent = props => { +export const MentorForm = ({ mentor, onMentorChange }: BoundProperty) => { + const fieldProps = formFieldProps(mentor, onMentorChange) + + return ( + <> + + + + + + + + + + + + + + + + ); +} + +export const CompanyForm: React.FunctionComponent = ({ internship, onChange }) => { const [company, setCompany] = useState(emptyCompany); + const [mentor, setMentor] = useState(emptyMentor); + const canEdit = useMemo(() => !company.id, [company.id]); + useEffect(() => onChange({ ...internship, mentor }), [ mentor ]); + useEffect(() => onChange({ ...internship, company }), [ company ]); + const fieldProps = formFieldProps(company, setCompany) const handleCompanyChange = (event: any, value: Company | string | null) => { @@ -133,6 +164,8 @@ export const CompanyForm: React.FunctionComponent = props => { {/* */} {/**/} + Zakładowy opiekun praktyki + Oddział diff --git a/src/forms/helpers.ts b/src/forms/helpers.ts index 4767e1e..96fdbde 100644 --- a/src/forms/helpers.ts +++ b/src/forms/helpers.ts @@ -2,22 +2,29 @@ import { DOMEvent } from "@/helpers"; type UpdatingEvent = "onBlur" | "onChange" | "onInput"; type FormFieldHelperOptions = { - event: UpdatingEvent + event: UpdatingEvent, + property: string, } export function formFieldProps(subject: T, update: (value: T) => void, options: Partial> = {}) { const { - event = "onChange" + event = "onChange", + property = "value", } = options; return

( field: P, extractor: (...args: TArgs) => T[P] = ((event: DOMEvent) => event.target.value as unknown as T[P]) as any ) => ({ - value: subject[field], + [property]: subject[field], [event]: (...args: TArgs) => update({ ...subject, [field]: extractor(...args), } as T) }) } + + +export type BoundProperty = + { [property in TProperty]: T; } & + { [event in TEvent]: (value: T) => void; } diff --git a/src/provider/dummy/company.ts b/src/provider/dummy/company.ts index df684dd..a1c0848 100644 --- a/src/provider/dummy/company.ts +++ b/src/provider/dummy/company.ts @@ -4,9 +4,8 @@ import { makeIdSequence } from "./helpers"; const companySequence = makeIdSequence(); const officeSequence = makeIdSequence(); -export const sampleCompanies: Company[] = [ +export const sampleCompanies: Company[] = companySequence.assignIds([ { - id: companySequence(), name: "Intel", url: "https://www.intel.com/content/www/us/en/jobs/locations/poland.html", nip: "9570752316", @@ -22,7 +21,6 @@ export const sampleCompanies: Company[] = [ }] }, { - id: companySequence(), name: "IHS Markit", url: "http://ihsgdansk.com/", nip: "5842068320", @@ -38,12 +36,10 @@ export const sampleCompanies: Company[] = [ }] }, { - id: companySequence(), name: "Asseco Poland", url: "http://pl.asseco.com/", nip: "5842068320", - offices: [{ - id: officeSequence(), + offices: officeSequence.assignIds([{ address: { city: "Gdynia", street: "ul. Podolska", @@ -52,7 +48,6 @@ export const sampleCompanies: Company[] = [ country: "Poland" } }, { - id: officeSequence(), address: { city: "Łódź", street: "al. Marszałka Józefa Piłsudskiego", @@ -61,7 +56,6 @@ export const sampleCompanies: Company[] = [ country: "Poland" } }, { - id: officeSequence(), address: { city: "Wrocław", street: "Traugutta", @@ -69,6 +63,6 @@ export const sampleCompanies: Company[] = [ postalCode: "50-449", country: "Poland" } - }] + }]) } -] +]) diff --git a/src/provider/dummy/internship.ts b/src/provider/dummy/internship.ts index 99ab50f..9d86cc1 100644 --- a/src/provider/dummy/internship.ts +++ b/src/provider/dummy/internship.ts @@ -1,5 +1,12 @@ import { Nullable } from "@/helpers"; -import { Internship, InternshipType } from "@/data"; +import { emptyCompany, Internship, Mentor } from "@/data"; + +export const emptyMentor: Mentor = { + phone: null, + email: "", + name: "", + surname: "" +} export const emptyInternship: Nullable = { intern: null, @@ -9,4 +16,6 @@ export const emptyInternship: Nullable = { program: null, isAccepted: false, lengthInWeeks: 0, + mentor: emptyMentor, + company: emptyCompany, }