Edition types and program form fields

2021-01-04 00:35:05 +01:00 · 2021-01-04 00:35:05 +01:00 · 2c8bb5b1ba
commit 2c8bb5b1ba
parent 78377a934e
4 changed files with 108 additions and 8 deletions
--- a/src/api/dto/edition.ts
+++ b/src/api/dto/edition.ts
@ -4,6 +4,7 @@ import { OneWayTransformer, Transformer } from "@/serialization";
 import { Edition } from "@/data/edition";
 import moment from "moment-timezone";
 import { Subset } from "@/helpers";
+import { InternshipTypeDTO, internshipTypeDtoTransformer } from "@/api/dto/type";

 export interface ProgramEntryDTO extends Identifiable {
    description: string;
@ -16,6 +17,7 @@ export interface EditionDTO extends Identifiable {
    reportingStart: string,
    course: CourseDTO,
    availableSubjects: ProgramEntryDTO[],
+    availableInternshipTypes: InternshipTypeDTO[],
 }

 export interface EditionTeaserDTO extends Identifiable {
@ -45,7 +47,8 @@ export const editionDtoTransformer: Transformer<EditionDTO, Edition> = {
            editionStart: subject.startDate.toISOString(),
            course: courseDtoTransformer.reverseTransform(subject.course),
            reportingStart: subject.reportingStart.toISOString(),
-            availableSubjects: [],
+            availableSubjects: subject.program.map(entry => programEntryDtoTransformer.reverseTransform(entry)),
+            availableInternshipTypes: subject.types.map(entry => internshipTypeDtoTransformer.reverseTransform(entry))
        };
    },
    transform(subject: EditionDTO, context: undefined): Edition {
@ -59,6 +62,8 @@ export const editionDtoTransformer: Transformer<EditionDTO, Edition> = {
            proposalDeadline: moment(subject.reportingStart),
            reportingStart: moment(subject.reportingStart),
            reportingEnd: moment(subject.reportingStart).add(1, 'month'),
+            program: (subject.availableSubjects || []).map(entry => programEntryDtoTransformer.transform(entry)),
+            types: (subject.availableInternshipTypes || []).map(entry => internshipTypeDtoTransformer.transform(entry))
        };
    }
 }
--- a/src/data/edition.ts
+++ b/src/data/edition.ts
@ -1,6 +1,7 @@
 import { Moment } from "moment-timezone";
 import { Course } from "@/data/course";
 import { Identifiable } from "@/data/common";
+import { InternshipProgramEntry, InternshipType } from "@/data/internship";

 export type Edition = {
    course: Course;
@ -11,6 +12,8 @@ export type Edition = {
    reportingEnd: Moment,
    minimumInternshipHours: number;
    maximumInternshipHours?: number;
+    program: InternshipProgramEntry[];
+    types: InternshipType[];
 } & Identifiable

 export type Deadlines = {
--- a/src/management/edition/form.tsx
+++ b/src/management/edition/form.tsx
@ -2,19 +2,37 @@ 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 { FieldProps, Field, FieldArrayRenderProps, FieldArray, getIn } from "formik";
 import { identityTransformer, Transformer } from "@/serialization";
-import { Grid, TextField, Typography } from "@material-ui/core";
+import {
+    Button, Card, CardContent, CardHeader,
+    Checkbox,
+    Grid, IconButton,
+    List,
+    ListItem,
+    ListItemIcon,
+    ListItemSecondaryAction,
+    ListItemText,
+    Paper,
+    TextField,
+    Tooltip,
+    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 { Course, Identifiable, InternshipProgramEntry, InternshipType } from "@/data";
 import { Autocomplete } from "@material-ui/lab";
 import { useAsync } from "@/hooks";
 import api from "@/management/api";
+import { Async } from "@/components/async";
+import { AccountCheck, ShieldCheck, TrashCan } from "mdi-material-ui";
+import { Actions } from "@/components";
+import { Add } from "@material-ui/icons";

 export type EditionFormValues = Nullable<Edition>;
+
 export const initialEditionFormValues: EditionFormValues = {
    course: null,
    endDate: null,
@ -22,12 +40,76 @@ export const initialEditionFormValues: EditionFormValues = {
    proposalDeadline: null,
    reportingEnd: null,
    reportingStart: null,
-    startDate: null
+    startDate: null,
+    types: [],
+    program: [],
 }

 export const editionFormValuesTransformer: Transformer<Edition, EditionFormValues> = identityTransformer;

-export const CoursePickerField = ({ field, form, meta, ...props}: FieldProps<Course>) => {
+function toggleValueInArray<T extends Identifiable>(array: T[], value: T, comparator: (a: T, b: T) => boolean = (a, b) => a == b): T[] {
+    return array.findIndex(other => comparator(other, value)) === -1
+        ? [ ...array, value ]
+        : array.filter(other => !comparator(other, value));
+}
+
+export const ProgramField = ({ remove, push, form, name, ...props }: FieldArrayRenderProps) => {
+    const value = getIn(form.values, name) as InternshipProgramEntry[];
+    const setValue = (value: InternshipProgramEntry[]) => form.setFieldValue(name, value, false);
+
+    const { t } = useTranslation("management");
+
+    return <>
+        { value.map((entry, index) => <Card>
+            <CardHeader
+                subheader={ t('edition.program.entry', { index: index + 1 }) }
+                action={ <>
+                    <IconButton onClick={ () => remove(index) }>
+                        <TrashCan />
+                    </IconButton>
+                </> }
+            />
+            <CardContent>
+                { JSON.stringify(entry) }
+            </CardContent>
+        </Card>) }
+        <Actions>
+            <Button variant="contained" color="primary" startIcon={ <Add /> } onClick={ () => push({ description: "" }) }>{ t("actions.add") }</Button>
+        </Actions>
+    </>
+}
+
+export const TypesField = ({ field, form, meta, ...props }: FieldProps<InternshipType[]>) => {
+    const { name, value = [] } = field;
+
+    const types = useAsync(useCallback(() => api.type.all(), []));
+    const { t } = useTranslation("management");
+
+    const toggle = (type: InternshipType) => () => form.setFieldValue(name, toggleValueInArray(value, type, (a, b) => a.id == b.id));
+    const isChecked = (type: InternshipType) => value.findIndex(v => v.id == type.id) !== -1;
+
+    return <Async async={ types }>
+        { types => <List>{
+            types.map(type => <ListItem dense button onClick={ toggle(type) }>
+                <ListItemIcon>
+                    <Checkbox edge="start" onChange={ toggle(type) } checked={ isChecked(type) }/>
+                </ListItemIcon>
+                <ListItemText>
+                    <div>{ type.label.pl }</div>
+                    <Typography variant="caption">{ type.description?.pl }</Typography>
+                </ListItemText>
+                <ListItemSecondaryAction>
+                    <div style={{ display: "flex", flexDirection: "column" }}>
+                        { type.requiresDeanApproval && <Tooltip title={ t("type.flag.dean-approval") as string }><AccountCheck/></Tooltip> }
+                        { type.requiresInsurance && <Tooltip title={ t("type.flag.insurance") as string }><ShieldCheck/></Tooltip> }
+                    </div>
+                </ListItemSecondaryAction>
+            </ListItem>)
+        }</List> }
+    </Async>
+}
+
+export const CoursePickerField = ({ field, form, meta, ...props }: FieldProps<Course>) => {
    const courses = useAsync(useCallback(() => api.course.all(), []));
    const { t } = useTranslation("management");

@ -59,7 +141,7 @@ export const EditionForm = () => {
    const spacing = useSpacing(2);

    return <div className={ spacing.vertical }>
-        <Typography variant="subtitle1">{ t("edition.fields.basic") }</Typography>
+        <Typography variant="h5">{ t("edition.fields.basic") }</Typography>
        <Grid container>
            <Grid item xs={ 12 } md={ 6 }>
                <Field name="startDate" component={ DatePickerField } label={ t("edition.field.start") } />
@ -76,7 +158,7 @@ export const EditionForm = () => {
                <Field name="minimumInternshipHours" component={ TextFieldFormik } label={ t("edition.field.minimumInternshipHours") } />
            </Grid>
        </Grid>
-        <Typography variant="subtitle1">{ t("edition.fields.deadlines") }</Typography>
+        <Typography variant="h5">{ t("edition.fields.deadlines") }</Typography>
        <Grid container>
            <Grid item xs={ 12 } md={ 6 }>
                <Field name="proposalDeadline" component={ DatePickerField } label={ t("edition.field.proposalDeadline") } />
@ -90,5 +172,11 @@ export const EditionForm = () => {
                <Field name="reportingEnd" component={ DatePickerField } label={ t("edition.field.reportingEnd") } />
            </Grid>
        </Grid>
+        <Typography variant="h5">{ t("edition.fields.program") }</Typography>
+        <FieldArray name="program" component={ ProgramField as any } />
+        <Typography variant="h5">{ t("edition.fields.types") }</Typography>
+        <Paper elevation={ 2 }>
+            <Field name="types" component={ TypesField } />
+        </Paper>
    </div>
 }
--- a/translations/management.pl.yaml
+++ b/translations/management.pl.yaml
@ -28,6 +28,8 @@ edition:
  fields:
    basic: "Podstawowe"
    deadlines: "Terminy"
+    program: "Ramowy program praktyk"
+    types: "Dostępne typy praktyki"
  report-fields:
    title: "Pola formularza raportu praktyki"
  manage:
@ -35,6 +37,8 @@ edition:
    internships: "Zarządzanie praktykami"
  settings:
    title: "Konfiguracja edycji"
+  program:
+    entry: "Punkt ramowego programu praktyki #{{ index }}"

 report-field:
  preview: Podgląd