Feature/form decomposition

src/assets/main.css

@@ -18,6 +18,7 @@
 
 .multiselect {
   --ms-bg: var(--background-contrast-grey);
+  margin: 8px 0;
 }
 
 .fr-col-sm-45 {
@@ -77,6 +78,10 @@
   }
 }
 
+.fr-fieldset {
+  margin: 30px 0;
+}
+
 .dsfr_alert {
   margin: 20px 0;
 }

src/components/DatasetList.vue

@@ -0,0 +1,103 @@
+<template>
+  <div v-if="numberOfDatasets < 1" class="no-dataset">
+    <p>Ce bouquet ne contient pas encore de jeux de données</p>
+  </div>
+  <div v-else>
+    <DsfrAccordionsGroup>
+      <li v-for="(dataset, index) in datasets">
+        <DsfrAccordion
+          :title="dataset.title"
+          :id="getAccordeonId(index)"
+          :expanded-id="isExpanded[getAccordeonId(index)]"
+          @expand="isExpanded[getAccordeonId(index)] = $event"
+        >
+          <DsfrTag
+            v-if="!isAvailable(dataset)"
+            class="fr-mb-2w uppercase bold"
+            :label="`${dataset.availability}`"
+          />
+          <div>
+            {{ dataset.purpose }}
+          </div>
+          <div class="button__wrapper">
+            <DsfrButton
+              icon="ri-delete-bin-line"
+              label="Retirer de la section"
+              class="fr-mr-2w"
+              @click.prevent="this.$emit('removeDataset', index)"
+            />
+            <a
+              v-if="!isAvailable(dataset)"
+              class="fr-btn fr-btn--secondary inline-flex"
+              :href="`mailto:${email}`"
+            >
+              Aidez-nous à trouver la donnée</a
+            >
+            <a
+              v-if="dataset.uri"
+              class="fr-btn fr-btn--secondary inline-flex"
+              :href="dataset.uri"
+              target="_blank"
+              >Accéder au catalogue</a
+            >
+          </div>
+        </DsfrAccordion>
+      </li>
+    </DsfrAccordionsGroup>
+  </div>
+</template>
+
+<script lang="ts">
+import config from '@/config'
+import { type DatasetProperties, Availability } from '@/model'
+
+export const getDatasetListTitle = function (
+  datasets: DatasetProperties[]
+): string {
+  const title = 'Composition du bouquet '
+  const numberOfDatasets = datasets.length
+  switch (numberOfDatasets) {
+    case 0: {
+      return title
+    }
+    case 1: {
+      return title + '( 1 jeu de données )'
+    }
+    default: {
+      return title + `( ${numberOfDatasets} jeux de données )`
+    }
+  }
+}
+
+export default {
+  name: 'DatasetList',
+  emits: ['removeDataset'],
+  props: {
+    datasets: {
+      type: Array<DatasetProperties>,
+      default: []
+    }
+  },
+  data() {
+    return {
+      isExpanded: {}
+    }
+  },
+  computed: {
+    email() {
+      return config.website.contact_email
+    },
+    numberOfDatasets(): number {
+      return this.datasets.length
+    }
+  },
+  methods: {
+    getAccordeonId(index: number): string {
+      return `accordion_${index}`
+    },
+    isAvailable(dataset: DatasetProperties): boolean {
+      return Availability.isAvailable(dataset.availability)
+    }
+  }
+}
+</script>

src/components/TopicList.vue

@@ -103,7 +103,7 @@ export default {
     }
   },
   methods: {
-    isRelevant(topic: Topic, property: string, value): Boolean {
+    isRelevant(topic: Topic, property: string, value: string): Boolean {
       const topicInformations: { subtheme: string; theme: string }[] =
         topic.extras['ecospheres:informations']
       if (topicInformations) {

src/components/TopicSearch.vue

@@ -4,8 +4,8 @@
       <label class="fr-label" for="select_theme"> Thématiques </label>
       <select class="fr-select" id="select_theme" @change="switchTheme($event)">
         <option
-          :value="this.NoOptionSelected"
-          :selected="themeName == this.NoOptionSelected"
+          :value="NoOptionSelected"
+          :selected="themeName == NoOptionSelected"
         >
           Choisir une thématique
         </option>
@@ -27,8 +27,8 @@
         @change="switchSubtheme($event)"
       >
         <option
-          :value="this.NoOptionSelected"
-          :selected="subthemeName == this.NoOptionSelected"
+          :value="NoOptionSelected"
+          :selected="subthemeName == NoOptionSelected"
         >
           Choisir un chantier
         </option>
@@ -47,20 +47,12 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 
-import type { SelectOption } from '@/model'
-
-import config from '../config'
-import { NoOptionSelected } from '../model'
-import Tile from './Tile.vue'
+import { ConfigUtils } from '@/config'
+import { NoOptionSelected } from '@/model'
+import type { SelectOption, Theme } from '@/model'
 
 export default defineComponent({
   name: 'TopicSearch',
-  components: {
-    Tile: Tile
-  },
-  created() {
-    this.NoOptionSelected = NoOptionSelected
-  },
   props: {
     themeName: {
       type: String,
@@ -72,38 +64,19 @@ export default defineComponent({
     }
   },
   computed: {
-    selectedTheme() {
-      for (const theme of this.themeList) {
-        if (theme.name === this.themeName) {
-          return theme
-        }
-      }
-      return null
-    },
-    themeList() {
-      return config.themes
+    selectedTheme(): Theme | null {
+      return ConfigUtils.getThemeByName(this.themeName)
     },
     themeOptions(): SelectOption[] {
-      const options: SelectOption[] = []
-      for (const theme of this.themeList) {
-        options.push({
-          value: theme.name,
-          text: theme.name
-        })
-      }
-      return options
+      return ConfigUtils.getThemeOptions()
     },
     subthemeOptions(): SelectOption[] {
-      const options: SelectOption[] = []
-      if (this.selectedTheme) {
-        for (const subtheme of this.selectedTheme.subthemes) {
-          options.push({
-            value: subtheme.name,
-            text: subtheme.name
-          })
-        }
-      }
-      return options
+      return this.selectedTheme
+        ? ConfigUtils.getSubthemeOptions(this.selectedTheme)
+        : []
+    },
+    NoOptionSelected() {
+      return NoOptionSelected
     }
   },
   methods: {

src/components/forms/bouquet/BouquetContentFieldGroup.vue

@@ -0,0 +1,62 @@
+<template>
+  <h4>{{ getDatasetListTitle() }}</h4>
+  <DatasetList
+    class="fr-mt-4w fr-mb-4w"
+    @removeDataset="removeDataset"
+    :datasets="datasets"
+  />
+  <DatasetPropertiesForm
+    @addDataset="addDataset"
+    :alreadySelectedDatasets="datasets"
+  />
+</template>
+
+<script lang="ts">
+import DatasetList from '@/components/DatasetList.vue'
+import DatasetPropertiesForm from '@/components/forms/dataset/DatasetPropertiesForm.vue'
+import type { DatasetProperties } from '@/model'
+
+import { getDatasetListTitle } from '../../DatasetList.vue'
+
+export default {
+  name: 'BouquetContentFieldGroup',
+  components: {
+    DatasetPropertiesForm: DatasetPropertiesForm,
+    DatasetList: DatasetList
+  },
+  props: {
+    currentDatasets: {
+      type: Array<DatasetProperties>,
+      default: []
+    }
+  },
+  data() {
+    return {
+      datasets: this.currentDatasets
+    }
+  },
+  watch: {
+    isValid(newValue) {
+      this.$emit('updateValidation', newValue)
+    }
+  },
+  computed: {
+    isValid(): boolean {
+      return this.datasets.length > 0
+    }
+  },
+  methods: {
+    addDataset(datasetProperties: DatasetProperties) {
+      this.datasets.push(datasetProperties)
+      this.$emit('update:datasets', this.datasets)
+    },
+    removeDataset(index: number) {
+      this.datasets.splice(index, 1)
+      this.$emit('update:datasets', this.datasets)
+    },
+    getDatasetListTitle() {
+      return getDatasetListTitle(this.datasets)
+    }
+  }
+}
+</script>

src/components/forms/bouquet/BouquetFormRecap.vue

@@ -0,0 +1,98 @@
+<template>
+  <h4>
+    Description du bouquet de données
+    <DsfrButton
+      :icon-only="true"
+      size="sm"
+      icon="ri-pencil-line"
+      title="Editer Étape 1"
+      :tertiary="true"
+      :no-outline="true"
+      @click.prevent="goToStep(1)"
+    />
+  </h4>
+
+  <p class="fr-mb-0"><strong>Sujet du bouquet</strong></p>
+  <p v-html="bouquet.name" />
+  <p class="fr-mb-0"><strong>Objectif du bouquet</strong></p>
+  <p v-html="markdown(bouquet.description)" />
+  <hr />
+
+  <h4>
+    Information du bouquet de données
+    <DsfrButton
+      :icon-only="true"
+      size="sm"
+      icon="ri-pencil-line"
+      title="Editer Étape 2"
+      :tertiary="true"
+      :no-outline="true"
+      @click.prevent="goToStep(2)"
+    />
+  </h4>
+  <p class="fr-mb-0"><strong>Thématique</strong></p>
+  <p v-html="bouquet.theme" />
+  <p class="fr-mb-0"><strong>Chantier</strong></p>
+  <p v-html="bouquet.subtheme" />
+  <hr />
+
+  <h4>
+    {{ getDatasetListTitle() }}
+    <DsfrButton
+      :icon-only="true"
+      size="sm"
+      icon="ri-pencil-line"
+      title="Editer Étape 3"
+      :tertiary="true"
+      :no-outline="true"
+      @click.prevent="goToStep(3)"
+    />
+  </h4>
+  <DatasetList :datasets="bouquet.datasetsProperties" />
+</template>
+
+<script lang="ts">
+import MarkdownIt from 'markdown-it'
+import type { PropType } from 'vue'
+
+import type { Bouquet } from '@/model'
+
+import DatasetList from '../../DatasetList.vue'
+import { getDatasetListTitle } from '../../DatasetList.vue'
+
+export default {
+  name: 'BouquetFormRecap',
+  emits: ['updateStep'],
+  components: {
+    DatasetList: DatasetList
+  },
+  props: {
+    bouquet: {
+      type: Object as PropType<Partial<Bouquet>>,
+      default: ''
+    }
+  },
+  computed: {
+    numberOfDatasets(): number {
+      return this.datasets.length
+    },
+    compositionTitle(): string {
+      const title = ' Composition du bouquet'
+      return this.numberOfDatasets < 1
+        ? title
+        : title + `( ${this.numberOfDatasets} )`
+    }
+  },
+  methods: {
+    goToStep(step: number) {
+      this.$emit('updateStep', step)
+    },
+    getDatasetListTitle() {
+      return getDatasetListTitle(this.bouquet.datasetsProperties)
+    },
+    markdown(text: string) {
+      return MarkdownIt().render(text)
+    }
+  }
+}
+</script>