fix: frontend

etalab · Jan 17, 2023 · 29362ac · 29362ac
1 parent dbb46e8
commit 29362ac
Show file tree

Hide file tree

Showing 18 changed files with 133 additions and 111 deletions.
diff --git a/client/src/constants.ts b/client/src/constants.ts
@@ -1,5 +1,4 @@
 import type {
-  DataFormat,
   PublicationRestriction,
   UpdateFrequency,
 } from "./definitions/datasets";
@@ -24,24 +23,6 @@ const STATIC_PAGES = [
 
 export const NON_AUTH_GUARDED_PAGES = [...STATIC_PAGES, "/"];
 
-export const DATA_FORMAT_LABELS: { [K in DataFormat]: string } = {
-  file_tabular: "Fichier tabulaire (XLS, XLSX, CSV, ...)",
-  file_gis: "Fichier SIG (Shapefile, ...)",
-  api: "API (REST, GraphQL, ...)",
-  database: "Base de données",
-  website: "Site web",
-  other: "Autre",
-};
-
-export const DATA_FORMAT_SHORT_NAMES: { [K in DataFormat]: string } = {
-  file_tabular: "CSV",
-  file_gis: "SIG",
-  api: "API",
-  database: "BDD",
-  website: "Web",
-  other: "Autre",
-};
-
 export const PUBLICATION_RESTRICTIONS_OPTIONS: {
   [K in PublicationRestriction]: string | TrustedHtml;
 } = {

diff --git a/client/src/definitions/datasets.ts b/client/src/definitions/datasets.ts
@@ -50,7 +50,8 @@ export type DatasetFormData = Omit<
   "id" | "catalogRecord" | "headlines"
 > & { organizationSiret: string };
 
-export type DatasetCreateData = Omit<DatasetFormData, "tags"> & {
+export type DatasetCreateData = Omit<DatasetFormData, "tags" | "formats"> & {
   tagIds: string[];
+  formatIds: number[];
 };
 export type DatasetUpdateData = DatasetCreateData;
diff --git a/client/src/lib/components/DatasetForm/DatasetForm.spec.ts b/client/src/lib/components/DatasetForm/DatasetForm.spec.ts
@@ -6,7 +6,6 @@ import "@testing-library/jest-dom";
 import DatasetForm from "./DatasetForm.svelte";
 import { render, fireEvent } from "@testing-library/svelte";
 import type {
-  DataFormat,
   DatasetFormData,
   DatasetFormInitial,
 } from "src/definitions/datasets";
@@ -51,27 +50,34 @@ describe("Test the dataset form", () => {
   };
 
   test('The "title" field is present', () => {
-    const { getByLabelText } = render(DatasetForm, { catalog });
+    const { getByLabelText } = render(DatasetForm, { catalog, formats: [] });
     const title = getByLabelText("Nom du jeu de données", { exact: false });
     expect(title).toBeInTheDocument();
     expect(title).toBeRequired();
   });
 
   test('The "description" field is present', () => {
-    const { getByLabelText } = render(DatasetForm, { catalog });
+    const { getByLabelText } = render(DatasetForm, { catalog, formats: [] });
     const description = getByLabelText("Description", { exact: false });
     expect(description).toBeInTheDocument();
     expect(description).toBeRequired();
   });
 
   test('The "formats" field is present', async () => {
-    const { getAllByRole } = render(DatasetForm, { catalog });
+    const { getAllByRole } = render(DatasetForm, {
+      catalog, formats: [
+        {
+          id: 55,
+          name: "fichier tabulaire"
+        }
+      ]
+    });
     const checkboxes = getAllByRole("checkbox");
     expect(checkboxes.length).toBeGreaterThan(0);
   });
 
   test('The "geographicalCoverage" field is present', async () => {
-    const { getByLabelText } = render(DatasetForm, { catalog });
+    const { getByLabelText } = render(DatasetForm, { catalog, formats: [] });
     const geographicalCoverage = getByLabelText("Couverture géographique", {
       exact: false,
     });
@@ -80,7 +86,7 @@ describe("Test the dataset form", () => {
   });
 
   test('The "technicalSource" field is present', async () => {
-    const { getByLabelText } = render(DatasetForm, { catalog });
+    const { getByLabelText } = render(DatasetForm, { catalog, formats: [] });
     const technicalSource = getByLabelText("Système d'information source", {
       exact: false,
     });
@@ -89,15 +95,22 @@ describe("Test the dataset form", () => {
   });
 
   test('The "tags" field is present', async () => {
-    const { getByLabelText } = render(DatasetForm, { catalog });
+    const { getByLabelText } = render(DatasetForm, { catalog, formats: [] });
     const tags = getByLabelText("Mot-clés", {
       exact: false,
     });
     expect(tags).toBeInTheDocument();
   });
 
   test("At least one format is required", async () => {
-    const { getAllByRole } = render(DatasetForm, { catalog });
+    const { getAllByRole } = render(DatasetForm, {
+      catalog, formats: [
+        {
+          id: 55,
+          name: "fichier tabulaire"
+        }
+      ]
+    });
     const checkboxes = getAllByRole("checkbox", { checked: false });
     checkboxes.forEach((checkbox) => expect(checkbox).toBeRequired());
     await fireEvent.click(checkboxes[0]);
@@ -109,7 +122,7 @@ describe("Test the dataset form", () => {
   });
 
   test('The "producerEmail" field is present', () => {
-    const { getByLabelText } = render(DatasetForm, { catalog });
+    const { getByLabelText } = render(DatasetForm, { catalog, formats: [] });
     const producerEmail = getByLabelText(
       "Adresse e-mail du service producteur",
       {
@@ -122,7 +135,7 @@ describe("Test the dataset form", () => {
   });
 
   test('The "contact emails" field is present', () => {
-    const { getAllByLabelText } = render(DatasetForm, { catalog });
+    const { getAllByLabelText } = render(DatasetForm, { catalog, formats: [] });
     const inputs = getAllByLabelText(/Contact \d/) as HTMLInputElement[];
     expect(inputs.length).toBe(1);
     expect(inputs[0]).toHaveAttribute("type", "email");
@@ -131,15 +144,15 @@ describe("Test the dataset form", () => {
   });
 
   test('The "contact emails" field requires at least one value', async () => {
-    const { getAllByLabelText } = render(DatasetForm, { catalog });
+    const { getAllByLabelText } = render(DatasetForm, { catalog, formats: [] });
     const inputs = getAllByLabelText(/Contact \d/) as HTMLInputElement[];
     expect(inputs.length).toBe(1);
     await fireEvent.input(inputs[0], { target: { value: "" } });
     expect(inputs[0]).toBeRequired();
   });
 
   test('The "url" field is present', async () => {
-    const { getByLabelText } = render(DatasetForm, { catalog });
+    const { getByLabelText } = render(DatasetForm, { catalog, formats: [] });
     const url = getByLabelText("Lien vers les données", {
       exact: false,
     });
@@ -148,7 +161,7 @@ describe("Test the dataset form", () => {
   });
 
   test('The "license" field is present', async () => {
-    const { getByLabelText } = render(DatasetForm, { catalog });
+    const { getByLabelText } = render(DatasetForm, { catalog, formats: [] });
     const license = getByLabelText("Licence de réutilisation", {
       exact: false,
     });
@@ -159,14 +172,15 @@ describe("Test the dataset form", () => {
   test("Extra fields are present", () => {
     const { getByLabelText } = render(DatasetForm, {
       catalog: catalogWithExtraFields,
+      formats: []
     });
     const extraReferentiel = getByLabelText("Référentiel", { exact: false });
     expect(extraReferentiel).toBeInTheDocument();
     expect(extraReferentiel).not.toBeRequired();
   });
 
   test("The submit button is present", () => {
-    const { getByRole } = render(DatasetForm, { catalog });
+    const { getByRole } = render(DatasetForm, { catalog, formats: [] });
     expect(getByRole("button", { name: /Publier/i })).toBeInTheDocument();
   });
 
@@ -175,6 +189,10 @@ describe("Test the dataset form", () => {
       catalog,
       submitLabel: "Envoyer",
       loadingLabel: "Ça charge...",
+      formats: [{
+        id: 33,
+        name: "Fichier Tabulaire",
+      },]
     };
 
     const { getByRole, rerender } = render(DatasetForm, { props });
@@ -193,7 +211,12 @@ describe("Test the dataset form", () => {
       },
       title: "Titre initial",
       description: "Description initiale",
-      formats: ["website"],
+      formats: [
+        {
+          id: 33,
+          name: "Fichier Tabulaire",
+        },
+      ],
       producerEmail: "[email protected]",
       contactEmails: ["[email protected]"],
       service: "A nice service",
@@ -207,7 +230,12 @@ describe("Test the dataset form", () => {
       extraFieldValues: [{ extraFieldId: "<extraField1Id>", value: "Réponse" }],
       publicationRestriction: "draft",
     };
-    const props = { catalog: catalogWithExtraFields, initial };
+    const props = {
+      catalog: catalogWithExtraFields, initial, formats: [{
+        id: 33,
+        name: "Fichier Tabulaire",
+      },]
+    };
 
     const { getByLabelText, getAllByLabelText, container, getAllByText } =
       render(DatasetForm, { props });
@@ -222,14 +250,9 @@ describe("Test the dataset form", () => {
     }) as HTMLInputElement;
     expect(description.value).toBe("Description initiale");
 
-    const getFormatCheckbox = (value: DataFormat) =>
-      container.querySelector(`input[value='${value}']`);
-    expect(getFormatCheckbox("file_tabular")).not.toBeChecked();
-    expect(getFormatCheckbox("file_gis")).not.toBeChecked();
-    expect(getFormatCheckbox("api")).not.toBeChecked();
-    expect(getFormatCheckbox("database")).not.toBeChecked();
-    expect(getFormatCheckbox("website")).toBeChecked();
-    expect(getFormatCheckbox("other")).not.toBeChecked();
+
+    container.querySelector(`input[value="Fichier Tabulaire"]`);
+
 
     const producerEmail = getByLabelText(
       "Adresse e-mail du service producteur",
@@ -286,7 +309,12 @@ describe("Test the dataset form", () => {
       },
       title: "Titre initial",
       description: "Description initiale",
-      formats: ["website"],
+      formats: [
+        {
+          name: "fichier Tabulaire",
+          id: 55,
+        },
+      ],
       producerEmail: "",
       contactEmails: ["[email protected]"],
       service: "A nice service",
@@ -300,7 +328,14 @@ describe("Test the dataset form", () => {
       extraFieldValues: [{ extraFieldId: "<extraField1Id>", value: "" }],
       publicationRestriction: "draft",
     };
-    const props = { catalog, initial };
+    const props = {
+      catalog, initial, formats: [
+        {
+          name: "fichier Tabulaire",
+          id: 55,
+        },
+      ],
+    };
     const { getByLabelText, getByRole, component } = render(DatasetForm, {
       props,
     });

diff --git a/client/src/lib/components/DatasetForm/DatasetForm.svelte b/client/src/lib/components/DatasetForm/DatasetForm.svelte
@@ -3,15 +3,13 @@
   import { createEventDispatcher } from "svelte";
   import { createForm } from "svelte-forms-lib";
   import type {
-    DataFormat,
     DatasetFormData,
     DatasetFormInitial,
     PublicationRestriction,
     UpdateFrequency,
   } from "src/definitions/datasets";
   import type { Tag } from "src/definitions/tag";
   import {
-    DATA_FORMAT_LABELS,
     PUBLICATION_RESTRICTIONS_OPTIONS,
     UPDATE_FREQUENCY_LABELS,
   } from "src/constants";
@@ -25,19 +23,20 @@
   import TextareaField from "../TextareaField/TextareaField.svelte";
   import { toSelectOptions } from "src/lib/transformers/form";
   import { handleSelectChange } from "src/lib/util/form";
-  import { Maybe } from "$lib/util/maybe";
   import TagSelector from "../TagSelector/TagSelector.svelte";
   import RadioGroupField from "../RadioGroupField/RadioGroupField.svelte";
   import LicenseField from "./_LicenseField.svelte";
   import type { Catalog, ExtraFieldValue } from "src/definitions/catalogs";
   import ExtraField from "./_ExtraField.svelte";
   import Alert from "../Alert/Alert.svelte";
+  import type { DataFormat } from "src/definitions/dataformat";
 
   export let submitLabel = "Publier la fiche de données";
   export let loadingLabel = "Publication en cours...";
   export let loading = false;
   export let catalog: Catalog;
   export let tags: Tag[] = [];
+  export let formats: DataFormat[];
   export let licenses: string[] = [];
   export let geographicalCoverages: string[] = [];
 
@@ -65,17 +64,13 @@
     publicationRestriction: PublicationRestriction;
   };
 
-  const dataFormatChoices = Object.entries(DATA_FORMAT_LABELS).map(
-    ([value, label]: [DataFormat, string]) => ({ value, label })
-  );
-
   const initialValues: DatasetFormValues = {
     organizationSiret: catalog.organization.siret,
     title: initial?.title || "",
     description: initial?.description || "",
     service: initial?.service || "",
-    dataFormats: dataFormatChoices.map(
-      ({ value }) => !!(initial?.formats || []).find((v) => v === value)
+    dataFormats: formats.map(
+      ({ id }) => !!(initial?.formats || []).find((v) => v.id === id)
     ),
     producerEmail: initial?.producerEmail || "",
     contactEmails: initial?.contactEmails || [$account?.email || ""],
@@ -140,11 +135,9 @@
         extraFieldValues: yup.array().of(yup.string()),
       }),
       onSubmit: (values: DatasetFormValues) => {
-        const formats = values.dataFormats
-          .map((checked, index) =>
-            checked ? dataFormatChoices[index].value : null
-          )
-          .filter(Maybe.Some);
+        const updatedFormats = values.dataFormats
+          .map((checked, index) => (checked ? formats[index] : null))
+          .filter((item) => item) as DataFormat[];
 
         // Ensure "" becomes null.
         const producerEmail = values.producerEmail
@@ -174,7 +167,7 @@
 
         const data: DatasetFormData = {
           ...values,
-          formats,
+          formats: updatedFormats,
           producerEmail,
           contactEmails,
           lastUpdatedAt,
@@ -310,20 +303,20 @@
         </span>
       </legend>
       <div class="fr-fieldset__content">
-        {#each dataFormatChoices as { value, label }, index (value)}
-          {@const id = `dataformats-${value}`}
+        {#each formats as { id, name }, index}
+          {@const identifier = `dataformats-${name}`}
           <div class="fr-checkbox-group">
             <input
               type="checkbox"
-              {id}
+              id={identifier}
               name="dataformats"
-              {value}
+              value={id}
               required={dataFormatsValue.every((checked) => !checked)}
               checked={dataFormatsValue[index]}
               on:change={(event) => handleDataformatChange(event, index)}
             />
-            <label for={id}>
-              {label}
+            <label for={identifier}>
+              {name}
             </label>
           </div>
         {/each}

diff --git a/client/src/lib/components/DatasetListItem/DatasetListItem.svelte b/client/src/lib/components/DatasetListItem/DatasetListItem.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
   import type { Dataset } from "src/definitions/datasets";
-  import { DATA_FORMAT_SHORT_NAMES } from "src/constants";
   import paths from "$lib/paths";
   import { Maybe } from "$lib/util/maybe";
   import { capitalize, formatDaysMonthsOrYearsToNow } from "$lib/util/format";

diff --git a/client/src/lib/repositories/dataformat.ts b/client/src/lib/repositories/dataformat.ts
@@ -1,4 +1,4 @@
-import type { DataFormat } from "src/definitions/datasets";
+import type { DataFormat } from "src/definitions/dataformat";
 import type { Fetch } from "src/definitions/fetch";
 import { getApiUrl, getHeaders, makeApiRequestOrFail } from "../fetch";