feat(frontend): allow creating projects

Cannot send files for now. Will come later.

frontend/src/api/cubicweb.ts

 import { client } from "@/constants/cubicweb";
+import { Project } from "@/types";
 import { useRouter } from "next/navigation";
 
 export function login(login: string, password: string) {
@@ -14,3 +15,9 @@
 
   return logout;
 }
+
+export async function createProject(data: Omit<Project, "eid">) {
+  const rql =
+    "INSERT ImportProcedure X: X name %(name)s, X sparql_endpoint %(sparql_endpoint)s, X activated %(activated)s";
+  return client.execute(rql, data);
+}

frontend/src/components/ProjectForm.tsx

@@ -9,8 +9,13 @@
 import SaveIcon from "@mui/icons-material/Save";
 import CloudUploadIcon from "@mui/icons-material/CloudUpload";
 import { Project } from "@/types";
+import { Controller, SubmitHandler, useForm } from "react-hook-form";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { LoadingButton } from "@mui/lab";
+import { createProject } from "@/api/cubicweb";
 
 export interface ProjectFormProps {
   project?: Project;
 }
 
@@ -12,6 +17,12 @@
 
 export interface ProjectFormProps {
   project?: Project;
 }
 
+interface FormData {
+  name: string;
+  sparql_endpoint: string;
+  activated: boolean;
+}
+
 export function ProjectForm({ project }: ProjectFormProps) {
@@ -17,2 +28,17 @@
 export function ProjectForm({ project }: ProjectFormProps) {
+  const [loading, setLoading] = useState(false);
+  const { handleSubmit, control } = useForm<FormData>({
+    defaultValues: project,
+  });
+
+  const router = useRouter();
+
+  const onSubmit: SubmitHandler<FormData> = async (data) => {
+    setLoading(true);
+    const result = await createProject(data);
+    const eid = result[0][0];
+    setLoading(false);
+    router.push(`/project/${eid}`);
+  };
+
   return (
@@ -18,14 +44,72 @@
   return (
-    <Stack spacing={2}>
-      {!project ? <TextField label="Nom" fullWidth /> : null}
-      <Stack direction={"row"}>
-        <FormControlLabel
-          control={<Switch />}
-          label={project?.activated ? "Actif" : "Inactif"}
-        />
-        <TextField
-          label="SPARQL endpoint"
-          value={project?.sparql_endpoint}
-          fullWidth
-        />
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Stack spacing={2}>
+        {!project ? (
+          <Controller
+            name="name"
+            control={control}
+            rules={{ required: true }}
+            render={({ field, fieldState: { error } }) => (
+              <TextField
+                label="Nom"
+                required={true}
+                disabled={loading}
+                {...field}
+                error={error !== undefined}
+                helperText={
+                  error?.type === "required" ? "Champ requis" : error?.message
+                }
+              />
+            )}
+          />
+        ) : null}
+        <Stack direction={"row"}>
+          <Controller
+            name="activated"
+            control={control}
+            rules={{ required: true }}
+            render={({ field }) => (
+              <Box width={150} display={"flex"} alignItems={"center"}>
+                <FormControlLabel
+                  control={<Switch {...field} disabled={loading} />}
+                  label={field.value ? "Actif" : "Inactif"}
+                />
+              </Box>
+            )}
+          />
+          <Controller
+            name="sparql_endpoint"
+            control={control}
+            rules={{ required: true }}
+            render={({ field, fieldState: { error } }) => (
+              <TextField
+                label="SPARQL endpoint"
+                required={true}
+                disabled={loading}
+                {...field}
+                error={error !== undefined}
+                helperText={
+                  error?.type === "required" ? "Champ requis" : error?.message
+                }
+                fullWidth
+              />
+            )}
+          />
+        </Stack>
+        <Button fullWidth startIcon={<CloudUploadIcon />}>
+          Ontologie
+        </Button>
+        <Button fullWidth startIcon={<CloudUploadIcon />}>
+          SHACL
+        </Button>
+        <Box display={"flex"} flexDirection={"row-reverse"}>
+          <LoadingButton
+            variant="contained"
+            startIcon={<SaveIcon />}
+            type="submit"
+            loading={loading}
+          >
+            {project ? "Sauvegarder" : "Ajouter"}
+          </LoadingButton>
+        </Box>
       </Stack>
@@ -31,15 +115,4 @@
       </Stack>
-      <Button fullWidth startIcon={<CloudUploadIcon />}>
-        Ontologie
-      </Button>
-      <Button fullWidth startIcon={<CloudUploadIcon />}>
-        SHACL
-      </Button>
-      <Box display={"flex"} flexDirection={"row-reverse"}>
-        <Button variant="contained" startIcon={<SaveIcon />}>
-          {project ? "Sauvegarder" : "Ajouter"}
-        </Button>
-      </Box>
-    </Stack>
+    </form>
   );
 }