From 1deaebda3dfcc647f55ba37835cf189179b92e44 Mon Sep 17 00:00:00 2001
From: Kacper Donat <kadet1090@gmail.com>
Date: Mon, 4 Jan 2021 22:41:11 +0100
Subject: [PATCH] Edition program form
---
src/management/edition/form.tsx | 17 ++++++++++-------
src/management/edition/settings.tsx | 12 ++++++++++--
2 files changed, 20 insertions(+), 9 deletions(-)
diff --git a/src/management/edition/form.tsx b/src/management/edition/form.tsx
index e3fdb7b..8996d2e 100644
--- a/src/management/edition/form.tsx
+++ b/src/management/edition/form.tsx
@@ -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>
diff --git a/src/management/edition/settings.tsx b/src/management/edition/settings.tsx
index bb7dc1f..353eec4 100644
--- a/src/management/edition/settings.tsx
+++ b/src/management/edition/settings.tsx
@@ -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>
}