feat(frontend): allow creating data services

frontend/src/api/cubicweb.ts

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

frontend/src/app/page.tsx

@@ -99,8 +99,8 @@
               <DataServiceCard
                 key={i}
                 name={d.name}
-                data_url={d.dataUrl}
-                refresh_prediod={d.refreshPeriod}
+                data_url={d.data_url}
+                refresh_prediod={d.refresh_period}
                 onOpen={() => {
                   router.push("/data-service/" + d.eid);
                 }}

frontend/src/app/project/[eid]/page.tsx

@@ -79,7 +79,7 @@
             <RecipeCard
               key={i}
               name={d.name}
-              processType={d.processType}
+              processType={d.process_type}
               lastProcessDate={new Date()}
               lastProcessSuccess={true}
               onOpen={() => {

frontend/src/components/DataServiceForm.tsx

@@ -6,7 +6,7 @@
   InputLabel,
   Select,
   MenuItem,
-  Button,
+  FormHelperText,
 } from "@mui/material";
 import SaveIcon from "@mui/icons-material/Save";
 import { DataService } from "@/types";
@@ -10,8 +10,13 @@
 } from "@mui/material";
 import SaveIcon from "@mui/icons-material/Save";
 import { DataService } from "@/types";
+import { Controller, SubmitHandler, useForm } from "react-hook-form";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { createDataService } from "@/api/cubicweb";
+import { LoadingButton } from "@mui/lab";
 
 export interface DataServiceFormProps {
   dataService?: DataService;
 }
 
@@ -13,6 +18,13 @@
 
 export interface DataServiceFormProps {
   dataService?: DataService;
 }
 
+interface FormData {
+  name: string;
+  data_url: string;
+  refresh_period: "daily" | "weekly" | "monthly";
+  description: string;
+}
+
 export function DataServiceForm({ dataService }: DataServiceFormProps) {
@@ -18,2 +30,21 @@
 export function DataServiceForm({ dataService }: DataServiceFormProps) {
+  const [loading, setLoading] = useState(false);
+  const { handleSubmit, control } = useForm<FormData>({
+    defaultValues: dataService
+      ? dataService
+      : {
+          refresh_period: "weekly",
+        },
+  });
+
+  const router = useRouter();
+
+  const onSubmit: SubmitHandler<FormData> = async (data) => {
+    setLoading(true);
+    const result = await createDataService(data);
+    const eid = result[0][0];
+    setLoading(false);
+    router.push(`/data-service/${eid}`);
+  };
+
   return (
@@ -19,22 +50,97 @@
   return (
-    <Stack spacing={2}>
-      {!dataService ? <TextField label="Nom" fullWidth /> : null}
-      <Stack direction={"row"} spacing={2}>
-        <TextField label="Url" value={dataService?.dataUrl} fullWidth />
-        <Box minWidth={200}>
-          <FormControl fullWidth>
-            <InputLabel id="update-freq-label">
-              Fréquence de mise à jour
-            </InputLabel>
-            <Select
-              labelId="update-freq-label"
-              value={0}
-              label="Fréquence de mise à jour"
-            >
-              <MenuItem value={0}>Journalier</MenuItem>
-              <MenuItem value={1}>Hebdomadaire</MenuItem>
-              <MenuItem value={2}>Mensuel</MenuItem>
-            </Select>
-          </FormControl>
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Stack spacing={2}>
+        {!dataService ? (
+          <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"} spacing={2}>
+          <Controller
+            name="data_url"
+            control={control}
+            rules={{ required: true }}
+            render={({ field, fieldState: { error } }) => (
+              <TextField
+                label="Data URL"
+                required={true}
+                disabled={loading}
+                {...field}
+                error={error !== undefined}
+                helperText={
+                  error?.type === "required" ? "Champ requis" : error?.message
+                }
+                fullWidth
+              />
+            )}
+          />
+          <Box minWidth={200}>
+            <Controller
+              name="refresh_period"
+              control={control}
+              rules={{ required: true }}
+              render={({ field, fieldState: { error } }) => (
+                <FormControl fullWidth>
+                  <InputLabel id="update-freq-label">
+                    Fréquence de mise à jour
+                  </InputLabel>
+                  <Select
+                    labelId="update-freq-label"
+                    label="Fréquence de mise à jour"
+                    {...field}
+                    error={error !== undefined}
+                    disabled={loading}
+                  >
+                    <MenuItem value={"daily"}>Journalier</MenuItem>
+                    <MenuItem value={"weekly"}>Hebdomadaire</MenuItem>
+                    <MenuItem value={"monthly"}>Mensuel</MenuItem>
+                  </Select>
+                  {error ? (
+                    <FormHelperText error={true}>
+                      {error?.message}
+                    </FormHelperText>
+                  ) : null}
+                </FormControl>
+              )}
+            />
+          </Box>
+        </Stack>
+        <Controller
+          name="description"
+          control={control}
+          render={({ field, fieldState: { error } }) => (
+            <TextField
+              label="Description"
+              disabled={loading}
+              {...field}
+              error={error !== undefined}
+              helperText={error?.message}
+              fullWidth
+            />
+          )}
+        />
+        <Box display={"flex"} flexDirection={"row-reverse"}>
+          <LoadingButton
+            variant="contained"
+            startIcon={<SaveIcon />}
+            loading={loading}
+            type="submit"
+          >
+            {dataService ? "Sauvegarder" : "Ajouter"}
+          </LoadingButton>
         </Box>
       </Stack>
@@ -39,11 +145,5 @@
         </Box>
       </Stack>
-      <TextField label="Description" fullWidth multiline />
-      <Box display={"flex"} flexDirection={"row-reverse"}>
-        <Button variant="contained" startIcon={<SaveIcon />}>
-          {dataService ? "Sauvegarder" : "Ajouter"}
-        </Button>
-      </Box>
-    </Stack>
+    </form>
   );
 }

frontend/src/constants/constants.ts

@@ -28,9 +28,9 @@
   {
     eid: 1,
     name: "Syracuse",
-    dataUrl: "https://syracuse.fr",
-    refreshPeriod: "weekly",
+    data_url: "https://syracuse.fr",
+    refresh_period: "weekly",
   },
   {
     eid: 2,
     name: "Syracuse Preprod",
@@ -33,10 +33,10 @@
   },
   {
     eid: 2,
     name: "Syracuse Preprod",
-    dataUrl: "https://preprod.syracuse.fr",
-    refreshPeriod: "weekly",
+    data_url: "https://preprod.syracuse.fr",
+    refresh_period: "weekly",
   },
   {
     eid: 3,
     name: "ONB",
@@ -39,9 +39,9 @@
   },
   {
     eid: 3,
     name: "ONB",
-    dataUrl: "https://onb.opera.fr",
-    refreshPeriod: "weekly",
+    data_url: "https://onb.opera.fr",
+    refresh_period: "weekly",
   },
 ];
 
@@ -49,8 +49,8 @@
   {
     eid: 1,
     name: "Syracuse",
-    processType: "default",
+    process_type: "default",
   },
   {
     eid: 2,
     name: "Syracuse Preprod",
@@ -53,9 +53,9 @@
   },
   {
     eid: 2,
     name: "Syracuse Preprod",
-    processType: "default-dryrun",
+    process_type: "default-dryrun",
   },
   {
     eid: 3,
     name: "ONB",
@@ -58,11 +58,11 @@
   },
   {
     eid: 3,
     name: "ONB",
-    processType: "default",
+    process_type: "default",
   },
 ];
 
 export const DATA_SERVICE: DataService = {
   eid: 1,
   name: "Syracuse",
@@ -63,11 +63,11 @@
   },
 ];
 
 export const DATA_SERVICE: DataService = {
   eid: 1,
   name: "Syracuse",
-  dataUrl: "https://syracuse.fr",
-  refreshPeriod: "weekly",
+  data_url: "https://syracuse.fr",
+  refresh_period: "weekly",
 };
 
 export const PROJECT: Project = {

frontend/src/types.ts

@@ -8,11 +8,11 @@
 export interface DataService {
   eid: number;
   name: string;
-  dataUrl: string;
-  refreshPeriod: "daily" | "weekly" | "monthly";
+  data_url: string;
+  refresh_period: "daily" | "weekly" | "monthly";
   description?: string;
 }
 
 export interface Recipe {
   eid: number;
   name: string;
@@ -13,8 +13,8 @@
   description?: string;
 }
 
 export interface Recipe {
   eid: number;
   name: string;
-  processType: "default" | "default-dryrun";
+  process_type: "default" | "default-dryrun";
 }