Merge pull request #321 from opendatateam/feat/bouquet-draft

feat: bouquet en mode brouillon (private)

configs/ecospheres/config.yaml

@@ -152,6 +152,13 @@ themes:
       - name: La transition juste et les mesures d’accompagnement, pour ne laisser personne au bord du chemin
       - name: La sobriété des usages et des ressources
 
+bouquets:
+  steps:
+    - Description du bouquet de données
+    - Informations du bouquet de données
+    - Composition du bouquet de données
+    - Récapitulatif du bouquet de données
+
 # FIXME: Obsolete. Kept as a reference used to populate our universe.
 # list of organisations' ids that should be handled by the portal
 # to find an id go to https://www.data.gouv.fr/fr/organizations/ministere-de-la-transition-ecologique/

src/custom/ecospheres/components/forms/bouquet/BouquetContentFieldGroup.vue

@@ -42,8 +42,11 @@ export default {
     }
   },
   watch: {
-    isValid(newValue) {
-      this.$emit('updateValidation', newValue)
+    isValid: {
+      handler(newValue) {
+        this.$emit('updateValidation', newValue)
+      },
+      immediate: true
     }
   },
   methods: {

src/custom/ecospheres/components/forms/bouquet/BouquetPropertiesFieldGroup.vue

@@ -68,8 +68,11 @@ export default {
     }
   },
   watch: {
-    isValid(newValue) {
-      this.$emit('updateValidation', newValue)
+    isValid: {
+      handler(newValue) {
+        this.$emit('updateValidation', newValue)
+      },
+      immediate: true
     }
   }
 }

src/custom/ecospheres/components/forms/bouquet/BouquetThemeFieldGroup.vue

@@ -84,13 +84,17 @@ export default {
     }
   },
   watch: {
-    isValid(newValue) {
-      this.$emit('updateValidation', newValue)
+    isValid: {
+      handler(newValue) {
+        this.$emit('updateValidation', newValue)
+      },
+      immediate: true
     }
   },
   methods: {
     switchTheme(event: Event) {
       this.$emit('update:theme', (event.target as HTMLSelectElement).value)
+      this.$emit('update:subtheme', NoOptionSelected)
     },
     switchSubtheme(event: Event) {
       this.$emit('update:subtheme', (event.target as HTMLSelectElement).value)

src/custom/ecospheres/views/bouquets/BouquetAddView.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import type { Ref, ComputedRef } from 'vue'
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+
+import config from '@/config'
+import BouquetPropertiesFieldGroup from '@/custom/ecospheres/components/forms/bouquet/BouquetPropertiesFieldGroup.vue'
+import type { Bouquet, BouquetCreationData } from '@/model'
+import { useTopicStore } from '@/store/TopicStore'
+
+const router = useRouter()
+
+const bouquet: Ref<Partial<Bouquet>> = ref({})
+const isStepValid: Ref<boolean> = ref(false)
+const errorMsg: Ref<string | null> = ref(null)
+const steps = config.bouquets.steps
+
+const bouquetCreationData: ComputedRef<BouquetCreationData> = computed(() => {
+  return {
+    name: bouquet.value.name ?? '',
+    description: bouquet.value.description ?? '',
+    tags: [config.universe.name],
+    private: true
+  }
+})
+
+const createTopic = async () => {
+  return useTopicStore().create(bouquetCreationData.value)
+}
+
+const submit = () => {
+  createTopic()
+    .then((response) => {
+      router.push({
+        name: 'bouquet_edit',
+        params: { bid: response.id }
+      })
+    })
+    .catch((error) => {
+      errorMsg.value = `Quelque chose s'est mal passé, merci de réessayer. (${error.code})`
+    })
+}
+</script>
+
+<template>
+  <div class="fr-container fr-mt-4w fr-mb-4w">
+    <form class="fr-col-12 fr-col-lg-7">
+      <div class="fr-grid-row">
+        <DsfrStepper :steps="steps" :current-step="1" />
+      </div>
+      <div class="fr-mt-4v">
+        <DsfrAlert v-if="errorMsg" type="warning" :title="errorMsg" />
+      </div>
+      <BouquetPropertiesFieldGroup
+        v-model:bouquetName="bouquet.name"
+        v-model:bouquetDescription="bouquet.description"
+        @update-validation="(isValid: boolean) => isStepValid = isValid"
+      />
+      <div class="fit fr-mt-3w fr-ml-auto">
+        <DsfrButton
+          type="button"
+          class="fr-mt-2w"
+          label="Suivant"
+          :disabled="!isStepValid"
+          @click.prevent="submit()"
+        />
+      </div>
+    </form>
+  </div>
+</template>