106 lines
3.3 KiB
TypeScript
106 lines
3.3 KiB
TypeScript
import Box from "@mui/material/Box";
|
|
import Breadcrumbs from "@mui/material/Breadcrumbs";
|
|
import Button from "@mui/material/Button";
|
|
import Card from "@mui/material/Card";
|
|
import Divider from "@mui/material/Divider";
|
|
import CardContent from "@mui/material/CardContent";
|
|
import Grid from "@mui/material/Grid2";
|
|
import Link from "@mui/material/Link";
|
|
import Typography from "@mui/material/Typography";
|
|
import { Home, Save } from "@mui/icons-material";
|
|
import useTitle from "../../hooks/useTitle";
|
|
import IconButton from "../../components/IconButton";
|
|
import { Back } from "iconsax-react";
|
|
import { useParams } from "react-router";
|
|
import Form from "./Form";
|
|
import { FormEvent, useEffect } from "react";
|
|
import FlashMessage from "../../components/FlashMessage";
|
|
import { useFishboneStore } from "../../stores/fishboneStore";
|
|
import { FishboneRequest } from "../../types/fishbone.types";
|
|
|
|
export default function FishboneCreateOrEdit() {
|
|
useTitle("Fishbone");
|
|
const { pid } = useParams();
|
|
const { update, create, isLoading, find, clearFishbone } = useFishboneStore();
|
|
|
|
const IS_EDIT_PAGE = pid!!;
|
|
|
|
const onSubmit = async (e: FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
const formData = new FormData(e.target as HTMLFormElement);
|
|
|
|
const data = Object.fromEntries(formData.entries()) as unknown as FishboneRequest;
|
|
|
|
if (IS_EDIT_PAGE) {
|
|
await update(pid!!, data);
|
|
} else {
|
|
await create(data);
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (pid!!) {
|
|
(async () => {
|
|
await find(pid!!);
|
|
})()
|
|
} else {
|
|
(async () => {
|
|
await clearFishbone()
|
|
})()
|
|
}
|
|
}, [])
|
|
|
|
return (
|
|
<Box component="main">
|
|
<Grid container spacing={2} alignItems={"center"} mb={4}>
|
|
<Grid size="auto">
|
|
<Box display={"flex"} alignItems={"center"} gap={1}>
|
|
<IconButton variant="dashed" color="primary" href="/fishbone">
|
|
<Back variant="Outline" color="currentColor" />
|
|
</IconButton>
|
|
<Typography variant="h3">{IS_EDIT_PAGE ? `Edit Fishbone - ${pid}` : 'Create Fishbone'}</Typography>
|
|
</Box>
|
|
</Grid>
|
|
<Grid size={12}>
|
|
<Breadcrumbs aria-label="breadcrumb">
|
|
<Link underline="hover" color="inherit" href="/dashboard">
|
|
<Home />
|
|
</Link>
|
|
<Link underline="hover" color="inherit" href="/fishbone">
|
|
<Typography sx={{ color: "text.primary" }}>Fishbone</Typography>
|
|
</Link>
|
|
<Typography sx={{ color: "text.primary" }}>{IS_EDIT_PAGE ? pid : 'Create'}</Typography>
|
|
</Breadcrumbs>
|
|
</Grid>
|
|
</Grid>
|
|
|
|
<FlashMessage store={useFishboneStore} />
|
|
|
|
<Card component="form" onSubmit={onSubmit}>
|
|
<Box
|
|
sx={{ px: 3, py: 1 }}
|
|
display={"flex"}
|
|
justifyContent={"space-between"}
|
|
alignItems={"center"}
|
|
>
|
|
<Typography variant="h5">Fill the form</Typography>
|
|
<Button
|
|
disabled={isLoading}
|
|
type="submit"
|
|
variant="contained"
|
|
size="small"
|
|
startIcon={<Save color="inherit" />}
|
|
>
|
|
{IS_EDIT_PAGE ? "Save Changes" : "Create"}
|
|
</Button>
|
|
</Box>
|
|
<Divider />
|
|
<CardContent>
|
|
<Form />
|
|
</CardContent>
|
|
</Card>
|
|
</Box>
|
|
);
|
|
}
|