system-praktyk-front/src/management/course/edit.tsx

48 lines
2.0 KiB
TypeScript

import { Button, Dialog, DialogActions, DialogContent, DialogProps, DialogTitle } from "@material-ui/core";
import React from "react";
import { Form, Formik } from "formik";
import { initialStaticPageFormValues, StaticPageForm, StaticPageFormValues, staticPageFormValuesTransformer } from "@/management/page/form";
import { Actions } from "@/components";
import { Save } from "@material-ui/icons";
import { useTranslation } from "react-i18next";
import { Cancel } from "mdi-material-ui";
import { useSpacing } from "@/styles";
import { initialCourseFormValues, CourseForm, CourseFormValues, courseFormValuesTransformer } from "@/management/course/form";
import { Course } from "@/data";
export type EditCourseDialogProps = {
onSave?: (page: Course) => void;
value?: Course;
} & DialogProps;
export function EditCourseDialog({ onSave, value, ...props }: EditCourseDialogProps) {
const { t } = useTranslation("management");
const spacing = useSpacing(3);
const handleSubmit = (values: CourseFormValues) => {
onSave?.(courseFormValuesTransformer.reverseTransform(values));
};
const initialValues = value
? courseFormValuesTransformer.transform(value)
: initialCourseFormValues;
return <Dialog { ...props } maxWidth="lg">
<Formik initialValues={ initialValues } onSubmit={ handleSubmit }>
<Form className={ spacing.vertical }>
<DialogTitle>{ t(value ? "type.edit.title" : "type.create.title") }</DialogTitle>
<DialogContent>
<CourseForm />
</DialogContent>
<DialogActions>
<Actions>
<Button variant="contained" color="primary" startIcon={ <Save /> } type="submit">{ t("save") }</Button>
<Button startIcon={ <Cancel /> } onClick={ ev => props.onClose?.(ev, "escapeKeyDown") }>{ t("cancel") }</Button>
</Actions>
</DialogActions>
</Form>
</Formik>
</Dialog>
}