95 lines
3.9 KiB
TypeScript
95 lines
3.9 KiB
TypeScript
import React, { useCallback } from "react";
|
|
import { Edition } from "@/data/edition";
|
|
import { Nullable } from "@/helpers";
|
|
import { useTranslation } from "react-i18next";
|
|
import { FieldProps, useFormikContext, Field } from "formik";
|
|
import { identityTransformer, Transformer } from "@/serialization";
|
|
import { Grid, TextField, Typography } from "@material-ui/core";
|
|
import { useSpacing } from "@/styles";
|
|
import { Moment } from "moment-timezone";
|
|
import { KeyboardDatePicker as DatePicker } from "@material-ui/pickers";
|
|
import { TextField as TextFieldFormik } from "formik-material-ui";
|
|
import { Course } from "@/data";
|
|
import { Autocomplete } from "@material-ui/lab";
|
|
import { useAsync } from "@/hooks";
|
|
import api from "@/management/api";
|
|
|
|
export type EditionFormValues = Nullable<Edition>;
|
|
export const initialEditionFormValues: EditionFormValues = {
|
|
course: null,
|
|
endDate: null,
|
|
minimumInternshipHours: 80,
|
|
proposalDeadline: null,
|
|
reportingEnd: null,
|
|
reportingStart: null,
|
|
startDate: null
|
|
}
|
|
|
|
export const editionFormValuesTransformer: Transformer<Edition, EditionFormValues> = identityTransformer;
|
|
|
|
export const CoursePickerField = ({ field, form, meta, ...props}: FieldProps<Course>) => {
|
|
const courses = useAsync(useCallback(() => api.course.all(), []));
|
|
const { t } = useTranslation("management");
|
|
|
|
return <Autocomplete
|
|
options={ courses.isLoading ? [] : courses.value as Course[] }
|
|
renderInput={ props => <TextField { ...props } label={ t("edition.field.course") } fullWidth/> }
|
|
getOptionLabel={ course => course.name }
|
|
value={ field.value }
|
|
onChange={ field.onChange }
|
|
onBlur={ field.onBlur }
|
|
/>
|
|
}
|
|
|
|
export const DatePickerField = ({ field, form, meta, ...props }: FieldProps<Moment>) => {
|
|
const { value, onChange, onBlur } = field;
|
|
|
|
return <DatePicker value={ value }
|
|
onChange={ onChange }
|
|
onBlur={ onBlur }
|
|
{ ...props }
|
|
format="DD.MM.yyyy"
|
|
disableToolbar fullWidth
|
|
variant="inline"
|
|
/>
|
|
}
|
|
|
|
export const EditionForm = () => {
|
|
const { t } = useTranslation("management");
|
|
const spacing = useSpacing(2);
|
|
|
|
return <div className={ spacing.vertical }>
|
|
<Typography variant="subtitle1">{ t("edition.fields.basic") }</Typography>
|
|
<Grid container>
|
|
<Grid item xs={ 12 } md={ 6 }>
|
|
<Field name="startDate" component={ DatePickerField } label={ t("edition.field.start") } />
|
|
</Grid>
|
|
<Grid item xs={ 12 } md={ 6 }>
|
|
<Field name="endDate" component={ DatePickerField } label={ t("edition.field.end") } />
|
|
</Grid>
|
|
<Grid item xs={ 12 } md={ 6 }>
|
|
<Field name="course" component={ CoursePickerField } label={ t("edition.field.course") } />
|
|
</Grid>
|
|
<Grid item xs={ 12 } md={ 6 }>
|
|
</Grid>
|
|
<Grid item xs={ 12 } md={ 6 }>
|
|
<Field name="minimumInternshipHours" component={ TextFieldFormik } label={ t("edition.field.minimumInternshipHours") } />
|
|
</Grid>
|
|
</Grid>
|
|
<Typography variant="subtitle1">{ t("edition.fields.deadlines") }</Typography>
|
|
<Grid container>
|
|
<Grid item xs={ 12 } md={ 6 }>
|
|
<Field name="proposalDeadline" component={ DatePickerField } label={ t("edition.field.proposalDeadline") } />
|
|
</Grid>
|
|
<Grid item xs={ 12 } md={ 6 }>
|
|
</Grid>
|
|
<Grid item xs={ 12 } md={ 6 }>
|
|
<Field name="reportingStart" component={ DatePickerField } label={ t("edition.field.reportingStart") } />
|
|
</Grid>
|
|
<Grid item xs={ 12 } md={ 6 }>
|
|
<Field name="reportingEnd" component={ DatePickerField } label={ t("edition.field.reportingEnd") } />
|
|
</Grid>
|
|
</Grid>
|
|
</div>
|
|
}
|