# HG changeset patch
# User Fabien Amarger <fabien.amarger@logilab.fr>
# Date 1712236947 -7200
#      Thu Apr 04 15:22:27 2024 +0200
# Node ID 61e3a57fa9a5b8b2942eef8a7149e8b785c085de
# Parent  1327a35441b13f0dde2e7f146d617ccac33ed5ef
feat(front): Render content_type field in DataService form

diff --git a/frontend/src/api/cubicweb.ts b/frontend/src/api/cubicweb.ts
--- a/frontend/src/api/cubicweb.ts
+++ b/frontend/src/api/cubicweb.ts
@@ -172,20 +172,21 @@
 export function useApiCreateDataService() {
   const client = useClient();
   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";
+    "INSERT DataService X: X name %(name)s, X data_url %(data_url)s, X refresh_period %(refresh_period)s, X description %(description)s, X content_type %(content_type)s";
   return (data: Omit<DataService, "eid" | "projects">) =>
     client.execute(rql, {
       name: data.name,
       data_url: data.data_url,
       refresh_period: data.refresh_period,
       description: data.description ?? "",
+      content_type: data.content_type,
     });
 }
 
 export function useApiUpdateDataService() {
   const client = useClient();
   const rql =
-    "SET X name %(name)s, X data_url %(data_url)s, X refresh_period %(refresh_period)s, X description %(description)s" +
+    "SET X name %(name)s, X data_url %(data_url)s, X refresh_period %(refresh_period)s, X description %(description)s, X content_type %(content_type)s" +
     "WHERE X is DataService, X eid %(eid)s";
   return (data: DataService) =>
     client.execute(rql, {
@@ -194,6 +195,7 @@
       data_url: data.data_url,
       refresh_period: data.refresh_period,
       description: data.description ?? "",
+      content_type: data.content_type,
     });
 }
 
@@ -414,8 +416,8 @@
 export function useApiGetDataService(): (eid: number) => Promise<DataService> {
   const client = useClient();
   const dataServiceRql =
-    "Any X, ATTR_NAME, ATTR_DATA_URL, ATTR_REFRESH_PERIOD, ATTR_DESCRIPTION " +
-    "WHERE X is DataService, X eid %(eid)s, X name ATTR_NAME, X data_url ATTR_DATA_URL, X refresh_period ATTR_REFRESH_PERIOD, X description ATTR_DESCRIPTION";
+    "Any X, ATTR_NAME, ATTR_DATA_URL, ATTR_REFRESH_PERIOD, ATTR_DESCRIPTION, ATTR_CONTENT_TYPE " +
+    "WHERE X is DataService, X eid %(eid)s, X name ATTR_NAME, X data_url ATTR_DATA_URL, X refresh_period ATTR_REFRESH_PERIOD, X description ATTR_DESCRIPTION, X content_type ATTR_CONTENT_TYPE";
 
   const projectListRql =
     "Any X, ATTR_NAME, ATTR_VIRTUOSO_URL, ATTR_VIRTUOSO_USER, ATTR_VIRTUOSO_PASSWORD, ATTR_ACTIVATED " +
@@ -444,6 +446,7 @@
         refresh_period: r[3],
         description: r[4],
         projects: projectListResultSetToObject(projectListResult),
+        content_type: r[5],
       } as DataService;
     } catch (e) {
       if (e && typeof e === "object" && "title" in e) {
@@ -471,8 +474,8 @@
 export function useApiGetDataServiceList(): () => Promise<Array<DataService>> {
   const client = useClient();
   const rql =
-    "Any X, ATTR_NAME, ATTR_DATA_URL, ATTR_REFRESH_PERIOD, ATTR_DESCRIPTION " +
-    "WHERE X is DataService, X name ATTR_NAME, X data_url ATTR_DATA_URL, X refresh_period ATTR_REFRESH_PERIOD, X description ATTR_DESCRIPTION";
+    "Any X, ATTR_NAME, ATTR_DATA_URL, ATTR_REFRESH_PERIOD, ATTR_DESCRIPTION, ATTR_CONTENT_TYPE " +
+    "WHERE X is DataService, X name ATTR_NAME, X data_url ATTR_DATA_URL, X refresh_period ATTR_REFRESH_PERIOD, X description ATTR_DESCRIPTION, X content_type ATTR_CONTENT_TYPE";
   return async () => {
     const result = await client.execute(rql, {});
 
@@ -484,6 +487,7 @@
           data_url: r[2],
           refresh_period: r[3],
           description: r[4],
+          content_type: r[5],
         }) as DataService,
     );
 
diff --git a/frontend/src/components/DataServiceForm.tsx b/frontend/src/components/DataServiceForm.tsx
--- a/frontend/src/components/DataServiceForm.tsx
+++ b/frontend/src/components/DataServiceForm.tsx
@@ -126,6 +126,31 @@
             <GenerateLinkButton />
           </Stack>
           <Controller
+            name="content_type"
+            rules={{ required: true }}
+            render={({ field, fieldState: { error } }) => (
+              <FormControl fullWidth>
+                <InputLabel id="mimetype-select-label">Mimetype</InputLabel>
+                <Select
+                  labelId="mimetype-select-label"
+                  label="Mimetype"
+                  disabled={loading}
+                  error={error !== undefined}
+                  defaultValue="text/turtle"
+                  {...field}
+                >
+                  <MenuItem value="application/rdf+xml">rdf-xml</MenuItem>
+                  <MenuItem value="text/turtle">turtle</MenuItem>
+                  <MenuItem value="text/n3">n3</MenuItem>
+                  <MenuItem value="application/n-quads">nquads</MenuItem>
+                  <MenuItem value="application/n-triples">nt</MenuItem>
+                  <MenuItem value="application/trig">trig</MenuItem>
+                  <MenuItem value="application/ld+json">json-ld</MenuItem>
+                </Select>
+              </FormControl>
+            )}
+          />
+          <Controller
             name="refresh_period"
             rules={{ required: true }}
             render={({ field, fieldState: { error } }) => (
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -20,6 +20,7 @@
   eid: number;
   name: string;
   data_url: string;
+  content_type: string;
   refresh_period: "daily" | "weekly" | "monthly";
   description?: string;
   projects?: Project[];