Merge pull request #110 from ecolabdata/step2-add-chantier-and-themat…

…ique

feat(bouquet): crée un bouquet avec thématique, chantier, et datasets

configs/ecospheres/config.yaml

@@ -55,6 +55,47 @@ website:
   # display settings
   organizations_list_page_size: 9
 
+# For step 2 of bouquet creation
+themes:
+  - name: Produire
+    subthemes:
+      - name: Nucléaire
+      - name: Tertiaire (incluant les bâtiments publics de l'État et des collectivités, hors logement)
+      - name: Production d'électricité décarbonée (hors nucléaire)
+  - name: Se nourrir
+    subthemes:
+      - name: Alimentation
+      - name: Agriculture et pêche
+  - name: Se loger
+    subthemes:
+      - name: Construction et rénovation des logements
+      - name: Aménagements des villes
+  - name: Se déplacer
+    subthemes:
+      - name: Voitures et infrastructures routières
+      - name: Mobilité courte distance (hors voiture)
+      - name: Mobilité longue distance (avion, train)
+  - name: Préserver
+    subthemes:
+      - name: Eau
+      - name: Sols
+      - name: Océans et mers
+      - name: Forêt
+  - name: Consommer
+    subthemes:
+      - name: Consommation plus durable (ménages)
+      - name: Numérique responsable
+      - name: Achats durables (de l'État, des collectivités et des entreprises)
+  - name: Chantiers transverses
+    subthemes:
+      - name: Le financement qui permet de définir des trajectoires d'investissement crédibles et cohérentes
+      - name: La planification et la différenciation territoriale selon les caractéristiques et les spécificités de chaque territoire, incluant les territoires ultra-marins
+      - name: La transition des filières avec la gestion des emplois, des formations et des compétences
+      - name: Les données environnementales
+      - name: Les services publics exemplaires
+      - 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
+
 # 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/
 # then Informations > ID at the bottom of the page

src/assets/main.css

@@ -1,3 +1,25 @@
 .multiselect {
   --ms-bg: var(--background-contrast-grey);
 }
+
+.fr-col-sm-45 {
+  flex: 0 0 45%;
+  max-width: 45%;
+  width: 45%;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.align-baseline {
+  align-items: baseline;
+}
+
+.align-center {
+  align-items: center;
+}
+
+.block {
+  display: block;
+}

src/components/Tooltip.vue

@@ -8,7 +8,12 @@ const props = defineProps(['title', 'name', 'show', 'text'])
       {{ title }}
       <span class="required">&nbsp;*</span>
     </div>
-    <button @click.prevent="show = !show">
+    <button
+      @mouseover="show = true"
+      @mouseout="show = false"
+      @click.prevent="show = !show"
+      @blur="show = false"
+    >
       <VIcon
         name="ri-question-fill"
         color="var(--blue-france-sun-113-625)"

src/store/TopicStore.js

@@ -95,6 +95,16 @@ export const useTopicStore = defineStore('topic', {
       const idx = this.data.findIndex((b) => b.id === topic_id)
       this.data[idx] = res
       return res
+    },
+    /**
+    * Delete an entity (DELETE)
+    *
+    * @param {string} entityId
+    * @returns {Promise}
+    */
+    async delete(entityId) {
+      return await this.makeRequestAndHandleResponse(
+      `${this.url()}/${entityId}/`,'delete')
     }
   }
 })

src/views/bouquets/BouquetDetailView.vue

@@ -4,7 +4,6 @@ import { useRoute, useRouter } from 'vue-router'
 
 import config from '@/config'
 
-import Tile from '../../components/Tile.vue'
 import { useDatasetStore } from '../../store/DatasetStore'
 import { useTopicStore } from '../../store/TopicStore'
 import { useUserStore } from '../../store/UserStore'
@@ -20,11 +19,11 @@ const datasets = ref([])
 
 const description = computed(() => descriptionFromMarkdown(bouquet))
 
-const goToEdit = () => {
-  router.push({ name: 'bouquet_edit', params: { bid: bouquet.value.slug } })
+const goToCreate = () => {
+  router.push({ name: 'bouquet_add' })
 }
 
-const canEdit = computed(() => {
+const canCreate = computed(() => {
   return (
     userStore.isAdmin() ||
     (userStore.$state.isLoggedIn &&
@@ -44,31 +43,87 @@ onMounted(() => {
 
 <template>
   <div class="fr-container--fluid fr-mt-4w fr-mb-4w">
-    <h1>{{ bouquet.name }}</h1>
-    <div v-html="description"></div>
-
-    <h2 class="fr-mt-2w">Jeux de données</h2>
-    <div v-if="!datasets.length">Pas de jeu de données dans ce bouquet.</div>
-    <ul v-else class="fr-grid-row fr-grid-row--gutters es__tiles__list">
-      <li v-for="d in datasets" class="fr-col-12 fr-col-lg-4">
-        <Tile
-          :link="`/datasets/${d.slug}`"
-          :title="d.title"
-          :description="d.description"
-          :img="d.organization.logo"
-          :is-markdown="true"
-          :notice="
-            bouquet.extras[`${config.universe.name}:${d.id}:description`]
+    <div class="bouquet__header fr-mb-4w">
+      <div class="bouquet__header__left">
+        <h3 class="fr-m-0">{{ bouquet.name }}</h3>
+        <DsfrTag
+          v-if="bouquet.extras"
+          class="fr-ml-3w"
+          :label="
+            bouquet.extras[`${config.universe.name}:informations`][0].subtheme
           "
         />
-      </li>
-    </ul>
-    <DsfrButton
-      v-if="canEdit"
-      class="fr-mt-4w"
-      label="Modifier le bouquet"
-      icon="ri-pencil-line"
-      @click="goToEdit"
-    />
+      </div>
+      <DsfrButton
+        v-if="canCreate"
+        label="Créer un bouquet"
+        icon="ri-pencil-line"
+        @click="goToCreate"
+      />
+    </div>
+    <div class="bouquet__container fr-p-6w">
+      <h5><strong>Objectif du bouquet</strong></h5>
+      <div v-html="description" />
+      <div
+        v-if="
+          bouquet.extras &&
+          bouquet.extras[`${config.universe.name}:datasets_properties`]
+        "
+      >
+        <h5>
+          Données utilisées ({{
+            bouquet.extras[`${config.universe.name}:datasets_properties`]
+              .length
+          }})
+        </h5>
+        <DsfrAccordionsGroup>
+          <li
+            v-for="datasetProperties in bouquet.extras[
+              `${config.universe.name}:datasets_properties`
+            ]"
+          >
+            <DsfrAccordion
+              :title="datasetProperties.libelle"
+              :expanded-id="datasetProperties.id"
+              @expand="datasetProperties.id = $event"
+            >
+              <div class="fr-mb-3w">
+                {{ datasetProperties.raison }}
+              </div>
+              <a
+                v-if="datasetProperties.uri"
+                class="fr-btn fr-btn--secondary block fr-ml-auto"
+                :href="datasetProperties.uri"
+                target="_blank"
+                >Accéder au catalogue</a
+              >
+            </DsfrAccordion>
+          </li>
+        </DsfrAccordionsGroup>
+      </div>
+    </div>
   </div>
 </template>
+
+<style scoped lang="scss">
+.bouquet {
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    &__left {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  &__container {
+    border: 1px solid var(--border-default-grey);
+
+    :deep a {
+      color: var(--text-action-high-blue-france);
+    }
+  }
+}
+</style>