Merge pull request #312 from opendatateam/fix/bouquet-edit-desc

fix: refactor: BouquetEditView markdown desc and availability

src/custom/ecospheres/components/BouquetDatasetAvailability.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { DatasetProperties } from '@/model'
+import { isAvailable, Availability } from '@/model'
+
+const missingData = 'Donnée manquante'
+const notFoundData = 'Donnée non disponible'
+
+const props = defineProps({
+  datasetProperties: {
+    type: Object as () => DatasetProperties,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <DsfrTag
+    v-if="!isAvailable(props.datasetProperties.availability)"
+    class="fr-mb-2w uppercase bold"
+    :label="`${
+      props.datasetProperties.availability === Availability.NOT_AVAILABLE
+        ? missingData
+        : props.datasetProperties.availability === Availability.MISSING
+        ? notFoundData
+        : ''
+    }`"
+  />
+</template>

src/custom/ecospheres/components/BouquetDatasetList.vue

@@ -4,27 +4,22 @@
   </div>
   <div v-else>
     <DsfrAccordionsGroup>
-      <li v-for="(dataset, index) in datasets">
+      <li v-for="(dataset, index) in datasets" :key="index">
         <DsfrAccordion
-          :title="dataset.title"
           :id="getAccordeonId(index)"
+          :title="dataset.title"
           :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>
+          <BouquetDatasetAvailability :dataset-properties="dataset" />
+          <!-- eslint-disable-next-line vue/no-v-html -->
+          <div v-html="markdown(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)"
+              @click.prevent="$emit('removeDataset', index)"
             />
             <a
               v-if="!isAvailable(dataset)"
@@ -49,11 +44,10 @@
 
 <script lang="ts">
 import config from '@/config'
-import {
-  type DatasetProperties,
-  Availability,
-  isAvailable as isAvailableTest
-} from '@/model'
+import { type DatasetProperties, isAvailable as isAvailableTest } from '@/model'
+import { fromMarkdown } from '@/utils'
+
+import BouquetDatasetAvailability from './BouquetDatasetAvailability.vue'
 
 export const getDatasetListTitle = function (
   datasets: DatasetProperties[]
@@ -75,16 +69,17 @@ export const getDatasetListTitle = function (
 
 export default {
   name: 'BouquetDatasetList',
-  emits: ['removeDataset'],
+  components: { BouquetDatasetAvailability },
   props: {
     datasets: {
       type: Array<DatasetProperties>,
       default: []
     }
   },
+  emits: ['removeDataset'],
   data() {
     return {
-      isExpanded: {}
+      isExpanded: {} as { [key: string]: boolean }
     }
   },
   computed: {
@@ -101,6 +96,9 @@ export default {
     },
     isAvailable(dataset: DatasetProperties): boolean {
       return isAvailableTest(dataset.availability)
+    },
+    markdown(value: string) {
+      return fromMarkdown(value)
     }
   }
 }

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

@@ -2,12 +2,12 @@
   <h4>{{ getDatasetListTitle() }}</h4>
   <BouquetDatasetList
     class="fr-mt-4w fr-mb-4w"
-    @removeDataset="removeDataset"
     :datasets="datasets"
+    @remove-dataset="removeDataset"
   />
   <DatasetPropertiesForm
-    @addDataset="addDataset"
-    :alreadySelectedDatasets="datasets"
+    :already-selected-datasets="datasets"
+    @add-dataset="addDataset"
   />
 </template>
 
@@ -21,30 +21,31 @@ import { getDatasetListTitle } from '../../BouquetDatasetList.vue'
 export default {
   name: 'BouquetContentFieldGroup',
   components: {
-    DatasetPropertiesForm: DatasetPropertiesForm,
-    BouquetDatasetList: BouquetDatasetList
+    DatasetPropertiesForm,
+    BouquetDatasetList
   },
   props: {
     currentDatasets: {
       type: Array<DatasetProperties>,
       default: []
     }
   },
+  emits: ['updateValidation', 'update:datasets'],
   data() {
     return {
       datasets: this.currentDatasets
     }
   },
-  watch: {
-    isValid(newValue) {
-      this.$emit('updateValidation', newValue)
-    }
-  },
   computed: {
     isValid(): boolean {
       return this.datasets.length > 0
     }
   },
+  watch: {
+    isValid(newValue) {
+      this.$emit('updateValidation', newValue)
+    }
+  },
   methods: {
     addDataset(datasetProperties: DatasetProperties) {
       this.datasets.push(datasetProperties)

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

@@ -1,13 +1,17 @@
 <template>
   <div class="fr-mt-1w fr-mb-4w">
-    <label class="fr-label" for="bouquet_name">Sujet du bouquet</label>
+    <label class="fr-label" for="bouquet_name"
+      >Sujet du bouquet <span class="required">&nbsp;*</span></label
+    >
     <input
+      id="bouquet_name"
       class="fr-input"
       type="text"
-      id="bouquet_name"
       placeholder="Mon bouquet"
       :value="bouquetName"
-      @input="$emit('update:bouquetName', $event.target.value)"
+      @input="
+        $emit('update:bouquetName', ($event.target as HTMLInputElement)?.value)
+      "
     />
   </div>
   <div class="fr-mt-1w">
@@ -20,29 +24,24 @@
       pour mettre en forme votre texte
     </div>
     <textarea
+      id="bouquet_description"
       class="fr-input"
       type="text"
-      id="bouquet_description"
       placeholder="Ajoutez ici l'ensemble des informations nécessaires à la compréhension, l'objectif et l'utilisation du bouquet. N'hésitez pas à indiquer la réglementation ou une documentation liée au bouquet."
       :value="bouquetDescription"
-      @input="$emit('update:bouquetDescription', $event.target.value)"
+      @input="
+        $emit(
+          'update:bouquetDescription',
+          ($event.target as HTMLInputElement)?.value
+        )
+      "
     />
   </div>
 </template>
 
 <script lang="ts">
-import Tooltip from '@/components/Tooltip.vue'
-
 export default {
   name: 'BouquetPropertiesFieldGroup',
-  components: {
-    Tooltip: Tooltip
-  },
-  emits: [
-    'updateValidation',
-    'update:bouquetDescription',
-    'update:bouquetName'
-  ],
   props: {
     bouquetName: {
       type: String,
@@ -53,18 +52,25 @@ export default {
       default: ''
     }
   },
-  watch: {
-    isValid(newValue) {
-      this.$emit('updateValidation', newValue)
-    }
-  },
+  emits: [
+    'updateValidation',
+    'update:bouquetDescription',
+    'update:bouquetName'
+  ],
   computed: {
     isValid() {
-      return this.bouquetName !== '' && this.bouquetDescription !== ''
+      return (
+        this.bouquetName.trim() !== '' && this.bouquetDescription.trim() !== ''
+      )
     },
     errorMsg() {
       return ''
     }
+  },
+  watch: {
+    isValid(newValue) {
+      this.$emit('updateValidation', newValue)
+    }
   }
 }
 </script>

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

@@ -1,12 +1,13 @@
 <template>
   <div class="fr-select-group fr-mt-1w">
     <label class="fr-label" for="select_theme"> Thématique</label>
-    <select class="fr-select" id="select_theme" @change="switchTheme($event)">
+    <select id="select_theme" class="fr-select" @change="switchTheme($event)">
       <option :value="NoOptionSelected" :selected="theme == NoOptionSelected">
         Choisir une thématique
       </option>
       <option
         v-for="option in themeOptions"
+        :key="option.value"
         :value="option.value"
         :selected="option.value === theme"
       >
@@ -18,8 +19,8 @@
   <div class="fr-select-group fr-mt-1w">
     <label class="fr-label" for="select_subtheme"> Chantier</label>
     <select
-      class="fr-select"
       id="select_subtheme"
+      class="fr-select"
       :disabled="theme === NoOptionSelected"
       @change="switchSubtheme($event)"
     >
@@ -31,7 +32,8 @@
       </option>
       <option
         v-for="option in subthemeOptions"
-        v-bind:value="option.value"
+        :key="option.value"
+        :value="option.value"
         :selected="option.value === subtheme"
       >
         {{ option.text }}
@@ -56,11 +58,7 @@ export default {
       default: NoOptionSelected
     }
   },
-  watch: {
-    isValid(newValue) {
-      this.$emit('updateValidation', newValue)
-    }
-  },
+  emits: ['updateValidation', 'update:theme', 'update:subtheme'],
   computed: {
     isValid() {
       return (
@@ -85,12 +83,17 @@ export default {
       return NoOptionSelected
     }
   },
+  watch: {
+    isValid(newValue) {
+      this.$emit('updateValidation', newValue)
+    }
+  },
   methods: {
-    switchTheme(event) {
-      this.$emit('update:theme', event.target.value)
+    switchTheme(event: Event) {
+      this.$emit('update:theme', (event.target as HTMLSelectElement).value)
     },
-    switchSubtheme(event) {
-      this.$emit('update:subtheme', event.target.value)
+    switchSubtheme(event: Event) {
+      this.$emit('update:subtheme', (event.target as HTMLSelectElement).value)
     }
   }
 }

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

@@ -6,12 +6,14 @@ import { useRouter } from 'vue-router'
 
 import DiscussionsList from '@/components/DiscussionsList.vue'
 import config from '@/config'
-import { Availability, isAvailable, type Theme, type Topic } from '@/model'
+import { isAvailable, type Theme, type Topic } from '@/model'
 import { useRouteParamsAsString } from '@/router/utils'
 import { useTopicStore } from '@/store/TopicStore'
 import { useUserStore } from '@/store/UserStore'
 import { descriptionFromMarkdown, fromMarkdown } from '@/utils'
 
+import BouquetDatasetAvailability from '../../components/BouquetDatasetAvailability.vue'
+
 const route = useRouteParamsAsString()
 const router = useRouter()
 
@@ -34,8 +36,6 @@ const breadcrumbLinks = ref([
 const selectedTheme = ref('')
 const url = window.location.href
 
-const missingData = 'Donnée manquante'
-const notFoundData = 'Donnée non disponible'
 const showDiscussions = config.website.discussions.topic.display
 
 const goToCreate = () => {
@@ -179,16 +179,8 @@ onMounted(() => {
               :expanded-id="datasetProperties.id"
               @expand="datasetProperties.id = $event"
             >
-              <DsfrTag
-                v-if="!isAvailable(datasetProperties.availability)"
-                class="fr-mb-2w uppercase bold"
-                :label="`${
-                  datasetProperties.availability === Availability.NOT_AVAILABLE
-                    ? missingData
-                    : datasetProperties.availability === Availability.MISSING
-                    ? notFoundData
-                    : ''
-                }`"
+              <BouquetDatasetAvailability
+                :dataset-properties="datasetProperties"
               />
               <div class="fr-mb-3w">
                 <!-- eslint-disable-next-line vue/no-v-html -->