Edition program form

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) }>
+                    { index < value.length - 1 && <IconButton onClick={ () => swap(index, index + 1) }><ArrowDown /></IconButton> }
-                        <TrashCan />
+                    { index > 0 && <IconButton onClick={ () => swap(index, index - 1) }><ArrowUp /></IconButton> }
-                    </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>

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>
                 }