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

Edition program form

Browse Source
This commit is contained in:
Kacper Donat 2021-01-04 22:41:11 +01:00
parent 2c8bb5b1ba
commit 1deaebda3d
2 changed files with 20 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/management/edition/form.tsx
View File

@ -27,7 +27,7 @@ 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 { AccountCheck, ArrowDown, ArrowUp, ShieldCheck, TrashCan } from "mdi-material-ui";
import { Actions } from "@/components";
import { Add } from "@material-ui/icons";
@ -53,9 +53,8 @@ function toggleValueInArray<T extends Identifiable>(array: T[], value: T, compar
: array.filter(other => !comparator(other, value));
}
export const ProgramField = ({ remove, push, form, name, ...props }: FieldArrayRenderProps) => {
export const ProgramField = ({ remove, swap, 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");
@ -64,13 +63,17 @@ export const ProgramField = ({ remove, push, form, name, ...props }: FieldArrayR
<CardHeader
subheader={ t('edition.program.entry', { index: index + 1 }) }
action={ <>
<IconButton onClick={ () => remove(index) }>
<TrashCan />
</IconButton>
{ index < value.length - 1 && <IconButton onClick={ () => swap(index, index + 1) }><ArrowDown /></IconButton> }
{ index > 0 && <IconButton onClick={ () => swap(index, index - 1) }><ArrowUp /></IconButton> }
<IconButton onClick={ () => remove(index) }><TrashCan /></IconButton>
</> }
/>
<CardContent>
{ JSON.stringify(entry) }
<Field component={ TextFieldFormik }
label={ t('edition.program.field.description') }
name={`${name}[${index}].description`}
fullWidth
/>
</CardContent>
</Card>) }
<Actions>

12
src/management/edition/settings.tsx
View File

@ -1,7 +1,7 @@
import React, { useCallback } from "react";
import { Page } from "@/pages/base";
import { Management } from "@/management/main";
import { Container, Dialog, Typography } from "@material-ui/core";
import { Container, Divider, Typography, Button } from "@material-ui/core";
import { Async } from "@/components/async";
import { useTranslation } from "react-i18next";
import { useRouteMatch } from "react-router-dom";
@ -11,13 +11,16 @@ import api from "@/management/api";
import { Form, Formik } from "formik";
import { useSpacing } from "@/styles";
import { EditionForm } from "@/management/edition/form";
import { Actions } from "@/components";
import { Save } from "@material-ui/icons";
import { Cancel } from "mdi-material-ui";
const title = "edition.settings.title";
export function EditionSettings() {
const { t } = useTranslation("management");
const { params } = useRouteMatch();
const spacing = useSpacing();
const spacing = useSpacing(2);
const edition = useAsync<Edition>(useCallback(() => api.edition.details(params.edition), [params.edition]))
@ -36,6 +39,11 @@ export function EditionSettings() {
<Formik initialValues={ edition } onSubmit={ handleSubmit }>
<Form className={ spacing.vertical }>
<EditionForm />
<Divider />
<Actions>
<Button variant="contained" color="primary" type="submit" startIcon={ <Save /> }>{ t("save") }</Button>
<Button startIcon={ <Cancel /> }>{ t("cancel") }</Button>
</Actions>
</Form>
</Formik>
}