Feat/add insee multiselect and licence groups

udata_front/theme/gouvfr/assets/js/components/MultiSelect/MultiSelect.vue

@@ -58,7 +58,7 @@
             :data-description="option.description"
             :data-show-icon="option.recommended"
           >
-            {{ option.value }}
+            {{ option.label }}
           </option>
         </template>
       </select>
@@ -174,6 +174,14 @@ export default defineComponent({
       type: [String, Array],
       default: null
     },
+    helperDescriptions: {
+      type: [String, String],
+      default: null
+    },
+    onSuggest: {
+      type: Function,
+      default: null
+    }
   },
   setup(props, { emit }) {
     const { t } = useI18n();
@@ -357,27 +365,51 @@ export default defineComponent({
 
       currentRequest.value = generateCancelToken();
       return api
-        .get(props.suggestUrl, {
+      .get(props.suggestUrl, {
           params: { q, size: maxOptionsCount },
           cancelToken: currentRequest.value.token,
-        })
-        .then((resp) => {
-          /** @type {Array<Suggestion>} */
-          const suggestions = resp.data;
+      })
+      .then((resp) => {
+        return props.onSuggest ? props.onSuggest(resp.data) : resp.data;
+      })
+      .then((suggestions) => {
           const addQToSuggestion = props.addNewOption && !suggestions.some(suggestion => suggestion.text === q);
-          if(addQToSuggestion) {
-            suggestions.push({text: q});
+          if (addQToSuggestion) {
+              suggestions.push({ text: q });
           }
           return mapToOption(suggestions);
-        })
-        .catch((error) => {
+      })
+      .catch((error) => {
           if (!axios.isCancel(error)) {
-            toast.error(t("Error getting {type}.", {type: props.placeholder}));
+              toast.error(t("Error getting {type}.", { type: props.placeholder }));
           }
-          return /** @type {Array<import("../../types").MultiSelectOption>} */([]);
-        });
+          return /** @type {Array<import("../../types").MultiSelectOption>} */ ([]);
+      });
     };
 
+    /*const onSuggest = (data) => {
+      const suggestions = data.map(item => {
+        if (props.helperDescriptions) {
+          const matchingHelperDescription = props.helperDescriptions.find(helperDescription => helperDescription.id === item.level);
+          if (matchingHelperDescription) {
+              return {
+                  ...item,
+                  description: matchingHelperDescription.name,
+              };
+          } else {
+              return {
+                  ...item,
+              };
+          }
+        } else {
+          return {
+            ...item
+          }
+        }
+    });
+    return suggestions;
+    };*/
+
     const suggestAndMapToOption = (q = '') => suggest(q).then(addAllOptionAndMapToOption);
     const suggestMapAndSetOption = (q = '') => suggestAndMapToOption(q).then(setOptions);
 

udata_front/theme/gouvfr/assets/js/pages/PublishingForm/PublishingForm.vue

@@ -9,6 +9,7 @@
       v-else-if="currentStep === 1"
       :originalDataset="dataset"
       :steps="steps"
+      :granularities="granularities"
       @next="updateDatasetAndMoveToNextStep"
     />
     <template v-else-if="currentStep === 2">
@@ -39,9 +40,10 @@
   </div>
 </template>
 <script>
-import { computed, defineComponent, ref, toValue } from 'vue';
+import { computed, defineComponent, onMounted, ref, toValue } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { templateRef, useEventListener } from '@vueuse/core';
+import {api} from "../../plugins/api";
 import Step1PublishingType from "./Step1PublishingType.vue";
 import Step2DescribeDataset from './Step2DescribeDataset.vue';
 import Step3AddFiles from './Step3AddFiles.vue';
@@ -72,6 +74,8 @@ export default defineComponent({
 
     const { files, updateFiles, uploadFiles } = useFilesUpload();
 
+    const granularities = ref([]);
+
     const steps = [t("Publish data on {site}", {site: title}), t("Describe your dataset"), t("Add files"), t("Complete your publishing")];
 
     const currentStep = ref(0);
@@ -167,6 +171,16 @@ export default defineComponent({
       }
     };
 
+    onMounted(() => {
+      api.get("/spatial/granularities/")
+        .then(resp => {
+          granularities.value = resp.data;
+        })
+        .catch(error => {
+          console.error("Error fetching granularities:", error);
+        });
+    });
+
     /**
      *
      * @param {import("vue").MaybeRefOrGetter<import("../../types").NewDataset>} updatedDataset
@@ -282,6 +296,7 @@ export default defineComponent({
       editedFile,
       errors,
       files,
+      granularities,
       loading,
       moveToStep,
       publishing_form_feedback_url,

udata_front/theme/gouvfr/assets/js/pages/PublishingForm/Step2DescribeDataset.stories.js

@@ -43,6 +43,60 @@ const originalDataset = {
 const args = {
   originalDataset,
   steps: Stepper.StepperOnSecondStep.args.steps,
+  granularities: [
+    {
+      'id': 'country-group',
+      'name': 'Groupement de pays'
+    },
+    {
+      'id': 'country',
+      'name': 'Pays'
+    },
+    {
+      "id": "country-subset",
+      "name": "Sous-ensemble de pays"
+    },
+    {
+      "id": "fr:region",
+      "name": "Région française"
+    },
+    {
+      "id": "fr:departement",
+      "name": "Département français"
+    },
+    {
+      "id": "fr:arrondissement",
+      "name": "Arrondissement français"
+    },
+    {
+      "id": "fr:commune",
+      "name": "Commune française"
+    },
+    {
+      "id": "fr:iris",
+      "name": "Iris (quartiers INSEE)"
+    },
+    {
+      "id": "fr:canton",
+      "name": "Canton français"
+    },
+    {
+      "id": "fr:collectivite",
+      "name": "Collectivités d'outre-mer françaises"
+    },
+    {
+      "id": "fr:epci",
+      "name": "Intercommunalité française (EPCI)"
+    },
+    {
+      "id": "poi",
+      "name": "Point d'Intérêt"
+    },
+    {
+      "id": "other",
+      "name": "Autre"
+    }
+  ]
 };
 
 export const Step2 = {

udata_front/theme/gouvfr/assets/js/pages/PublishingForm/Step2DescribeDataset.vue

@@ -284,13 +284,14 @@
                     :addAllOption="false"
                     :multiple="true"
                     helperLabel="Insee : "
+                    :onSuggest="formatSpatialZones"
                   />
                 </div>
                 <div class="fr-col-12">
                   <MultiSelect
                     :placeholder="$t('Spatial granularity')"
                     :searchPlaceholder="$t('Search a granularity...')"
-                    listUrl="/spatial/granularities/"
+                    :initialOptions="granularities"
                     :values="dataset.spatial.granularity"
                     @change="(value) => dataset.spatial.granularity = value"
                     :hasWarning="fieldHasWarning('spatial_information')"
@@ -327,7 +328,7 @@ import Stepper from '../../components/Form/Stepper/Stepper.vue';
 import Well from "../../components/Ui/Well/Well.vue";
 import useUid from "../../composables/useUid";
 import useFunctionalState from '../../composables/form/useFunctionalState';
-import editIcon from "svg/illustrations/edit.svg";
+import editIcon from "../../../../templates/svg/illustrations/edit.svg";
 import { license_groups_options, quality_description_length, title } from "../../config";
 import { useI18n } from 'vue-i18n';
 import { getLicensesUrl } from '../../api/licenses';
@@ -345,6 +346,11 @@ export default defineComponent({
     steps: {
       type: Array,
       required: true,
+    },
+    granularities: {
+      /** @type {import("vue").PropType<import("../../types").SpatialGranularities>} */
+      type: Object,
+      required: true
     }
   },
   setup(props, { emit }) {
@@ -367,6 +373,23 @@ export default defineComponent({
       values
     }));
 
+    const formatSpatialZones = (data) => {
+      const suggestions = data.map(item => {
+      const matchingGranularity = props.granularities.find(granularity => granularity.id === item.level);
+      if (matchingGranularity) {
+        return {
+          ...item,
+          description: matchingGranularity.name,
+        };
+      } else {
+        return {
+          ...item,
+        };
+      }
+    });
+    return suggestions;
+    }
+
     const notUnknown = not(t("The value must be different than unknown."), sameAs("unknown"));
     const tagsRequired = requiredWithCustomMessage(t("Adding tags helps improve the SEO of your data."));
     const temporalCoverageRequired = requiredWithCustomMessage(t("You did not provide the temporal coverage."));
@@ -446,6 +469,7 @@ export default defineComponent({
       state,
       fieldHasError,
       fieldHasWarning,
+      formatSpatialZones,
       getErrorText,
       getWarningText,
       submit,

udata_front/theme/gouvfr/assets/js/types.ts

@@ -128,4 +128,17 @@ metrics: { discussions: number; followers: number; reuses: number; views: number
 
 export type AxisAlignment = "start" | "center" | "end";
 
+export type SpatialZones = {
+code: string;
+id: string;
+level: string;
+name: string;
+uri: string;
+};
+
+export type SpatialGranularities = {
+id: string;
+name: string
+};
+
 export default {};