system-praktyk/system-praktyk-front
2
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

Allow overriding of state for testing purposes.

Browse Source
This commit is contained in:
Kacper Donat 2020-11-11 15:04:59 +01:00
parent 0ff80a454d
commit c13d880baa
12 changed files with 130 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/api/dto/internship-registration.ts
View File

@ -6,6 +6,7 @@ import { InternshipTypeDTO, internshipTypeDtoTransformer } from "@/api/dto/type"
import { Moment } from "moment-timezone";
import { sampleStudent } from "@/provider/dummy";
import { UploadType } from "@/api/upload";
import { ProgramEntryDTO, programEntryDtoTransformer } from "@/api/dto/edition";
export enum SubmissionState {
Draft = "Draft",
@ -48,6 +49,7 @@ export interface InternshipRegistrationDTO extends Identifiable {
company: Company,
branchAddress: Office,
declaredHours: number,
subjects: { subject: ProgramEntryDTO }[],
}
export interface InternshipDocument extends Identifiable {
@ -99,7 +101,7 @@ export const internshipRegistrationDtoTransformer: OneWayTransformer<InternshipR
hours: dto.declaredHours,
isAccepted: dto.state === SubmissionState.Accepted,
lengthInWeeks: 0,
program: [],
program: dto.subjects.map(subject => programEntryDtoTransformer.transform(subject.subject)),
intern: sampleStudent, // fixme
};
}

37
src/api/internship.ts
View File

@ -1,14 +1,43 @@
import { InternshipInfoDTO, InternshipRegistrationUpdate } from "@/api/dto/internship-registration";
import { InternshipInfoDTO, InternshipRegistrationUpdate, SubmissionState } from "@/api/dto/internship-registration";
import { axios } from "@/api/index";
import { Nullable } from "@/helpers";
const INTERNSHIP_REGISTRATION_ENDPOINT = '/internshipRegistration';
const INTERNSHIP_ENDPOINT = '/internship';
export async function update(internship: Nullable<InternshipRegistrationUpdate>): Promise<boolean> {
await axios.put(INTERNSHIP_REGISTRATION_ENDPOINT, internship);
export type ValidationMessage = {
key: string;
parameters: { [name: string]: string },
}
return true;
export class ValidationError extends Error {
public readonly messages: ValidationMessage[];
constructor(messages: ValidationMessage[], message: string = "There were validation errors.") {
super(message);
Object.setPrototypeOf(this, ValidationError.prototype);
this.messages = messages;
}
}
interface UpdateResponse {
status: SubmissionState;
errors?: string[];
}
export async function update(internship: Nullable<InternshipRegistrationUpdate>): Promise<SubmissionState> {
const response = (await axios.put<UpdateResponse>(INTERNSHIP_REGISTRATION_ENDPOINT, internship)).data;
if (response.status == SubmissionState.Draft) {
throw new ValidationError(
response.errors?.map(
msg => ({ key: msg, parameters: {} })
) || []
);
}
return response.status;
}
export async function get(): Promise<InternshipInfoDTO> {

2
src/app.tsx
View File

@ -88,7 +88,7 @@ function App() {
<nav className="header__bottom">
<ul className="header__menu header__menu--main">
<li><Link to={ route("home") }>{ t("pages.my-internship.header") }</Link></li>
<li><Link to="/regulamin">Regulamin</Link></li>
<li><Link to="/regulations">Regulamin</Link></li>
</ul>
</nav>
</div>

13
src/components/proposalPreview.tsx
View File

@ -1,12 +1,13 @@
import { Internship } from "@/data";
import React from "react";
import { Typography } from "@material-ui/core";
import { List, Typography, ListItem, ListItemIcon, ListItemText } from "@material-ui/core";
import { useTranslation } from "react-i18next";
import classNames from "classnames";
import { useVerticalSpacing } from "@/styles";
import moment from "moment-timezone";
import { Label, Section } from "@/components/section";
import { StudentPreview } from "@/pages/user/profile";
import { Check, StickerCheck } from "mdi-material-ui";
export type ProposalPreviewProps = {
proposal: Internship;
@ -42,6 +43,16 @@ export const ProposalPreview = ({ proposal }: ProposalPreviewProps) => {
<Typography className="proposal__primary">{ proposal.type.label.pl }</Typography>
</Section>
<Section>
<Label>{ t('internship.sections.program') }</Label>
<List>
{ proposal.program.map(subject => <ListItem key={ subject.id }>
<ListItemIcon><StickerCheck /></ListItemIcon>
<ListItemText>{ subject.description }</ListItemText>
</ListItem>) }
</List>
</Section>
<Section>
<Label>{ t('internship.sections.duration') }</Label>
<Typography className="proposal__primary">

71
src/forms/internship.tsx
View File

@ -1,16 +1,16 @@
import React, { HTMLProps, useEffect, useMemo, useState } from "react";
import React, { HTMLProps, useEffect, useMemo, useRef, useState } from "react";
import {
Button,
Checkbox,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
FormControlLabel,
FormGroup,
Grid,
TextField,
Typography,
FormGroup,
FormControlLabel,
Checkbox
Typography
} from "@material-ui/core";
import { KeyboardDatePicker as DatePicker } from "@material-ui/pickers";
import { CompanyForm } from "@/forms/company";
@ -18,11 +18,11 @@ import { StudentForm } from "@/forms/student";
import { sampleStudent } from "@/provider/dummy/student";
import { Company, Internship, InternshipProgramEntry, InternshipType, Office, Student } from "@/data";
import { Nullable } from "@/helpers";
import moment, { Moment } from "moment-timezone";
import { Moment } from "moment-timezone";
import { computeWorkingHours } from "@/utils/date";
import { Autocomplete } from "@material-ui/lab";
import { Alert, AlertTitle, Autocomplete } from "@material-ui/lab";
import { emptyInternship } from "@/provider/dummy/internship";
import { useDispatch } from "@/state/actions";
import { InternshipProposalActions, useDispatch } from "@/state/actions";
import { useTranslation } from "react-i18next";
import { useSelector } from "react-redux";
import { AppState } from "@/state/reducer";
@ -38,7 +38,7 @@ import { useCurrentEdition, useCurrentStudent, useInternshipTypes, useUpdateEffe
import { internshipRegistrationUpdateTransformer } from "@/api/dto/internship-registration";
import api from "@/api";
import FormLabel from "@material-ui/core/FormLabel";
import { CheckBox } from "@material-ui/icons";
import { ValidationError, ValidationMessage } from "@/api/internship";
export type InternshipFormValues = {
startDate: Moment | null;
@ -145,7 +145,7 @@ const InternshipProgramForm = () => {
{ possibleProgramEntries.map(
entry => <FormControlLabel
control={ <Checkbox /> }
checked={ selectedProgramEntries.includes(entry) }
checked={ selectedProgramEntries.find(cur => entry.id == cur.id) !== undefined }
onChange={ handleProgramEntryChange(entry) }
label={ entry.description }
key={ entry.id }
@ -182,17 +182,21 @@ const InternshipDurationForm = () => {
return (
<Grid container>
<Grid item md={ 6 }>
<DatePicker value={ startDate } onChange={ value => setFieldValue("startDate", value) }
format="DD MMMM yyyy"
<DatePicker value={ startDate }
onChange={ value => setFieldValue("startDate", value) }
format="DD.MM.yyyy"
disableToolbar fullWidth
variant="inline" label={ t("forms.internship.fields.start-date") }
variant="inline"
label={ t("forms.internship.fields.start-date") }
/>
</Grid>
<Grid item md={ 6 }>
<DatePicker value={ endDate } onChange={ value => setFieldValue("endDate", value) }
format="DD MMMM yyyy"
<DatePicker value={ endDate }
onChange={ value => setFieldValue("endDate", value) }
format="DD.MM.yyyy"
disableToolbar fullWidth
variant="inline" label={ t("forms.internship.fields.end-date") }
variant="inline"
label={ t("forms.internship.fields.end-date") }
minDate={ startDate }
/>
</Grid>
@ -287,7 +291,12 @@ const converter: Transformer<Nullable<Internship>, InternshipFormValues, Interns
}
export const InternshipForm: React.FunctionComponent = () => {
const student = useCurrentStudent();
const student = useCurrentStudent();
const history = useHistory();
const root = useRef<HTMLElement>(null);
const dispatch = useDispatch();
const [errors, setErrors] = useState<ValidationMessage[]>([]);
const initialInternship = useSelector<AppState, Nullable<Internship>>(state => getInternshipProposal(state.proposal) || {
...emptyInternship,
@ -336,17 +345,25 @@ export const InternshipForm: React.FunctionComponent = () => {
const values = converter.transform(initialInternship);
const handleSubmit = (values: InternshipFormValues) => {
const handleSubmit = async (values: InternshipFormValues) => {
setConfirmDialogOpen(false);
const internship = converter.reverseTransform(values, { internship: initialInternship as Internship });
const update = internshipRegistrationUpdateTransformer.transform(internship);
console.log(update);
try {
await api.internship.update(update);
dispatch({ type: InternshipProposalActions.Send });
api.internship.update(update);
// history.push(route("home"))
history.push(route("home"))
} catch (error) {
if (error instanceof ValidationError) {
setErrors(error.messages);
root.current?.scrollIntoView({ behavior: "smooth" })
} else {
throw error;
}
}
}
const InnerForm = () => {
@ -366,10 +383,16 @@ export const InternshipForm: React.FunctionComponent = () => {
setConfirmDialogOpen(false);
}
return <Form>
return <Form ref={ root as any }>
{ errors.length > 0 && <Alert severity="warning">
<AlertTitle>{ t('internship.validation.has-errors') }</AlertTitle>
<ul style={{ paddingLeft: 0 }}>
{ errors.map(message => <li key={ message.key }>{ t(`internship.validation.${message.key}`, message.parameters) }</li>) }
</ul>
</Alert> }
<Typography variant="h3" className="section-header">{ t('internship.sections.intern-info') }</Typography>
<StudentForm />
<Typography variant="h3" className="section-header">{ t('internship.sections.kind' )}</Typography>
<Typography variant="h3" className="section-header">{ t('internship.sections.kind') }</Typography>
<InternshipProgramForm />
<Typography variant="h3" className="section-header">{ t('internship.sections.duration') }</Typography>
<InternshipDurationForm />

20
src/pages/fallback.tsx
View File

@ -5,6 +5,8 @@ import React, { useMemo } from "react";
import { route } from "@/routing";
import { useAsync } from "@/hooks";
import api from "@/api";
import { Loading } from "@/components/loading";
import { useSpacing } from "@/styles";
export const FallbackPage = () => {
const location = useLocation();
@ -13,23 +15,23 @@ export const FallbackPage = () => {
const { isLoading, value, error } = useAsync(promise);
console.log({ isLoading, value, error, location });
if (isLoading) {
return <CircularProgress />
return <div style={{ marginTop: "2rem" }}><Loading size="8rem"/></div>
}
if (error) {
return <Page title="Strona nie została znaleziona">
<Container>
<Typography variant="h1">404</Typography>
<Typography variant="h2">Strona nie została znaleziona</Typography>
<Box my={4}>
<Typography variant="h1">404</Typography>
<Typography variant="h2">Strona nie została znaleziona</Typography>
<Box my={ 4 }>
<Divider variant="fullWidth"/>
<Box my={ 4 }>
<Divider variant="fullWidth"/>
</Box>
<Button to={ route("home") } color="primary" component={ RouterLink }>strona główna</Button>
</Box>
<Button to={ route("home") } color="primary" component={ RouterLink }>strona główna</Button>
</Container>
</Page>
}

2
src/pages/internship/proposal.tsx
View File

@ -156,7 +156,7 @@ export const InternshipProposalPreviewPage = () => {
<DialogTitle>{ t("internship.accept.title") }</DialogTitle>
<DialogContent className={ classes.root }>
<Typography variant="body1">{ t("internship.accept.info") }</Typography>
<TextField multiline value={ comment } onChange={ ev => setComment(ev.target.value) } fullWidth label={ t("comments") }/>
<TextField multiline value={ comment } onChange={ ev => setComment(ev.target.value) } fullWidth label={ t("comments") } rows={3}/>
<DialogActions>
<Button onClick={ handleAcceptModalClose }>

1
src/state/actions/proposal.ts
View File

@ -17,7 +17,6 @@ export enum InternshipProposalActions {
}
export interface SendProposalAction extends SendSubmissionAction<InternshipProposalActions.Send> {
internship: Internship;
}
export interface ReceiveProposalApproveAction extends ReceiveSubmissionApproveAction<InternshipProposalActions.Approve> {

6
src/state/reducer/plan.ts
View File

@ -10,6 +10,7 @@ import {
import { Reducer } from "react";
import { SubmissionAction } from "@/state/actions/submission";
import { InternshipDocument, SubmissionState as ApiSubmissionState } from "@/api/dto/internship-registration";
import { Api } from "mdi-material-ui";
export type InternshipPlanState = SubmissionState & MayRequireDeanApproval & {
document: Serializable<InternshipDocument> | null;
@ -40,9 +41,14 @@ const internshipPlanReducer = (state: InternshipPlanState = defaultInternshipPla
document: action.document,
}
case InternshipPlanActions.Receive:
if (state.overwritten) {
return state;
}
return {
...state,
accepted: action.state === ApiSubmissionState.Accepted,
declined: action.state === ApiSubmissionState.Rejected,
sent: [
ApiSubmissionState.Accepted,
ApiSubmissionState.Rejected,

6
src/state/reducer/proposal.ts
View File

@ -42,12 +42,16 @@ const internshipProposalReducer = (state: InternshipProposalState = defaultInter
case InternshipProposalActions.Send:
return {
...state,
proposal: internshipSerializationTransformer.transform(action.internship),
}
case InternshipProposalActions.Receive:
if (state.overwritten) {
return state;
}
return {
...state,
accepted: action.state === ApiSubmissionState.Accepted,
declined: action.state === ApiSubmissionState.Rejected,
sent: [
ApiSubmissionState.Accepted,
ApiSubmissionState.Rejected,

5
src/state/reducer/submission.ts
View File

@ -12,6 +12,7 @@ export type SubmissionState = {
sentOn: string | null;
declined: boolean;
comment: string | null;
overwritten: boolean;
}
export type MayRequireDeanApproval = {
@ -24,6 +25,7 @@ export const defaultSubmissionState: SubmissionState = {
sentOn: null,
declined: false,
comment: null,
overwritten: false,
}
export const defaultDeanApprovalsState: MayRequireDeanApproval = {
@ -56,6 +58,7 @@ export function createSubmissionReducer<TState, TActionType, TAction extends Act
accepted: true,
declined: false,
comment: (action as ReceiveSubmissionApproveAction<any>).comment,
overwritten: true,
}
case SubmissionAction.Decline:
return {
@ -63,6 +66,7 @@ export function createSubmissionReducer<TState, TActionType, TAction extends Act
accepted: false,
declined: true,
comment: (action as ReceiveSubmissionDeclineAction<any>).comment,
overwritten: true,
}
case SubmissionAction.Send:
return {
@ -72,6 +76,7 @@ export function createSubmissionReducer<TState, TActionType, TAction extends Act
accepted: false,
declined: false,
comment: null,
overwritten: false,
}
default:
return state;

6
translations/pl.yaml
View File

@ -114,6 +114,11 @@ submission:
draft: "wersja robocza"
internship:
validation:
has-errors: "W formularzu zostały znalezione błędy"
error:
declared_hours:
empty: "Brak zadeklarowanej długości praktyki."
intern:
semester: semestr {{ semester, roman }}
album: "numer albumu {{ album }}"
@ -135,6 +140,7 @@ internship:
place: "Miejsce odbywania praktyki"
kind: "Rodzaj i program praktyki"
mentor: "Zakładowy opiekun praktyki"
program: "Realizowane punkty programu praktyki"
discard:
title: "Odrzuć zgłoszenie praktyki"
info: "Poniższa informacja zostanie przekazana praktykantowi w celu poprawy zgłoszenia."