Feature/form decomposition

src/assets/main.css

@@ -28,6 +28,7 @@
 
 .multiselect {
   --ms-bg: var(--background-contrast-grey);
+  margin: 8px 0;
 }
 
 .fr-col-sm-45 {
@@ -87,6 +88,15 @@
   }
 }
 
+.fr-fieldset {
+  margin: 30px 0;
+}
+
 .dsfr_alert {
   margin: 20px 0;
+}
+
+textarea {
+  margin: 20px 0;
+  height: 250px;
 }

src/config.ts

@@ -0,0 +1,43 @@
+import config from '@siteConfig/config.yaml'
+
+import type { SelectOption, Theme } from '@/model'
+
+class ConfigUtils {
+  config = config
+
+  public static getThemeOptions() {
+    const options: SelectOption[] = []
+    for (const theme of config.themes) {
+      options.push({
+        value: theme.name,
+        text: theme.name
+      })
+    }
+    return options
+  }
+
+  public static getSubthemeOptions(theme: Theme) {
+    const options: SelectOption[] = []
+    if (theme) {
+      for (const subtheme of theme.subthemes) {
+        options.push({
+          value: subtheme.name,
+          text: subtheme.name
+        })
+      }
+    }
+    return options
+  }
+
+  public static getThemeByName(name: string): Theme | null {
+    for (const theme of config.themes) {
+      if (theme.name === name) {
+        return theme
+      }
+    }
+    return null
+  }
+}
+
+export default config
+export { ConfigUtils }

src/custom/ecospheres/components/BouquetDatasetList.vue

@@ -0,0 +1,107 @@
+<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,
+  isAvailable as isAvailableTest
+} 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: 'BouquetDatasetList',
+  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 isAvailableTest(dataset.availability)
+    }
+  }
+}
+</script>

src/components/TopicList.vue → src/custom/ecospheres/components/BouquetList.vue

@@ -39,13 +39,13 @@
 import { onMounted } from 'vue'
 import { useLoading } from 'vue-loading-overlay'
 
-import type { Topic } from '../model'
-import { NoOptionSelected } from '../model'
-import { useTopicStore } from '../store/TopicStore'
-import Tile from './Tile.vue'
+import Tile from '@/components/Tile.vue'
+import type { Topic } from '@/model'
+import { NoOptionSelected } from '@/model'
+import { useTopicStore } from '@/store/TopicStore'
 
 export default {
-  name: 'TopicList',
+  name: 'BouquetList',
   components: {
     Tile: Tile
   },
@@ -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 → src/custom/ecospheres/components/BouquetSearch.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
-  },
+  name: 'BouquetSearch',
   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/custom/ecospheres/components/forms/bouquet/BouquetContentFieldGroup.vue

@@ -0,0 +1,62 @@
+<template>
+  <h4>{{ getDatasetListTitle() }}</h4>
+  <BouquetDatasetList
+    class="fr-mt-4w fr-mb-4w"
+    @removeDataset="removeDataset"
+    :datasets="datasets"
+  />
+  <DatasetPropertiesForm
+    @addDataset="addDataset"
+    :alreadySelectedDatasets="datasets"
+  />
+</template>
+
+<script lang="ts">
+import BouquetDatasetList from '@/custom/ecospheres/components/BouquetDatasetList.vue'
+import DatasetPropertiesForm from '@/custom/ecospheres/components/forms/dataset/DatasetPropertiesForm.vue'
+import type { DatasetProperties } from '@/model'
+
+import { getDatasetListTitle } from '../../BouquetDatasetList.vue'
+
+export default {
+  name: 'BouquetContentFieldGroup',
+  components: {
+    DatasetPropertiesForm: DatasetPropertiesForm,
+    BouquetDatasetList: BouquetDatasetList
+  },
+  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>