# HG changeset patch
# User Arnaud Vergnet <arnaud.vergnet@logilab.fr>
# Date 1706714876 -3600
#      Wed Jan 31 16:27:56 2024 +0100
# Node ID 09227a84fcdd7c051a3386421475bd0623bca1f3
# Parent  809edabc2731c7757b0d763d44bd64eec6d0a74d
feat(frontend): add recipe creation form modal

diff --git a/frontend/src/app/project/[eid]/page.tsx b/frontend/src/app/project/[eid]/page.tsx
--- a/frontend/src/app/project/[eid]/page.tsx
+++ b/frontend/src/app/project/[eid]/page.tsx
@@ -10,8 +10,17 @@
 import { RecipeCard } from "@/components/cards/RecetteCard";
 import { IMPORT_PROCESSES, PROJECT, RECIPES } from "@/constants/constants";
 import { useLoad } from "@/hooks/useLoad";
-import { Box, Container, Stack, Typography } from "@mui/material";
+import {
+  Box,
+  Button,
+  Container,
+  Divider,
+  Stack,
+  Typography,
+} from "@mui/material";
 import { useState } from "react";
+import AddIcon from "@mui/icons-material/Add";
+import { RecipeModal } from "@/components/RecipeModal";
 
 export default function Project({
   params: _params,
@@ -27,6 +36,7 @@
     text?: string;
     eid?: number;
   }>({ visible: false });
+  const [recipeModalOpen, setRecipeModalOpen] = useState(false);
 
   if (loading) {
     return <LoadingScreen />;
@@ -45,11 +55,24 @@
         <Box width={"80%"} minWidth={300}>
           <ProjectForm project={data} />
         </Box>
-        <Stack width="100%">
-          <Typography variant="h4">Recettes</Typography>
-          <Typography>
-            Cliquez sur une recette pour filtrer les import process
-          </Typography>
+        <Divider sx={{ width: "100%" }} />
+        <Stack width="100%" direction={"row"} alignItems={"center"}>
+          <Box flex={1}>
+            <Stack>
+              <Typography variant="h4">Recettes</Typography>
+              <Typography>
+                Cliquez sur une recette pour filtrer les import process
+              </Typography>
+            </Stack>
+          </Box>
+          <Box>
+            <Button
+              startIcon={<AddIcon />}
+              onClick={() => setRecipeModalOpen(true)}
+            >
+              Ajouter
+            </Button>
+          </Box>
         </Stack>
         <CardList loading={false} emptyText="Aucune recette">
           {RECIPES.map((d, i) => (
@@ -88,6 +111,10 @@
           });
         }}
       />
+      <RecipeModal
+        open={recipeModalOpen}
+        onClose={() => setRecipeModalOpen(false)}
+      />
     </Container>
   );
 }
diff --git a/frontend/src/components/RecipeModal.tsx b/frontend/src/components/RecipeModal.tsx
new file mode 100644
--- /dev/null
+++ b/frontend/src/components/RecipeModal.tsx
@@ -0,0 +1,85 @@
+import { DATA_SERVICES } from "@/constants/constants";
+import { DataService } from "@/types";
+import {
+  Autocomplete,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Stack,
+  TextField,
+} from "@mui/material";
+import { useEffect, useState } from "react";
+
+interface RecipeModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export function RecipeModal({ open, onClose }: RecipeModalProps) {
+  const [data, setData] = useState<Array<DataService> | undefined>();
+  const [loading, setLoading] = useState<boolean>(true);
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    if (open) {
+      setLoading(true);
+      setTimeout(() => {
+        setLoading(false);
+        setData(DATA_SERVICES);
+      }, 1000);
+    } else {
+      setData(undefined);
+    }
+  }, [open]);
+
+  async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    // TODO send data
+    onClose();
+    setSaving(false);
+  }
+
+  return (
+    <Dialog
+      open={open}
+      onClose={() => {
+        if (!saving) {
+          onClose();
+        }
+      }}
+      PaperProps={{
+        component: "form",
+        onSubmit: onSubmit,
+      }}
+      aria-labelledby="form-dialog-title"
+      aria-describedby="form-dialog-description"
+      fullWidth
+    >
+      <DialogTitle id="form-dialog-title">Création recette</DialogTitle>
+      <DialogContent>
+        <Stack paddingTop={1} spacing={2}>
+          <Autocomplete
+            options={data ?? []}
+            loading={loading}
+            renderInput={(params) => (
+              <TextField {...params} label="Data service" />
+            )}
+            getOptionLabel={(option) => option.name}
+          />
+          <Autocomplete
+            options={[{ label: "default" }, { label: "default-dry-run" }]}
+            renderInput={(params) => (
+              <TextField {...params} label="Process type" />
+            )}
+          />
+        </Stack>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>Annuler</Button>
+        <Button type="submit">Valider</Button>
+      </DialogActions>
+    </Dialog>
+  );
+}