Migration Vue DSFR 7 + amélioration carte ✨

client/assets/dsfr.scss

@@ -50,7 +50,7 @@
     }
 
     .fr-tabs__list {
-      display: none;
+      min-height: 0;
     }
 
     .fr-tabs__panel {

client/assets/main.scss

@@ -32,6 +32,10 @@ fieldset {
   width: 100%;
 }
 
+.full-height {
+  height: 100%;
+}
+
 .text-align-center {
   text-align: center;
 }
@@ -72,6 +76,10 @@ fieldset {
   }
 }
 
+.iconify {
+  fill: currentColor;
+}
+
 .situation-level-bg {
   &-4 {
     background-color: #B10026;

client/components/accueil/Faq.vue

@@ -1,12 +1,8 @@
 <script setup lang="ts">
 import faq from '../../data/faq.json'
-import { Ref } from "vue";
 
-const expandedIndex: Ref<string | null> = ref(null);
 const email = useRuntimeConfig().public.email;
-const onAccordionClick = (index: string) => {
-  expandedIndex.value = index !== expandedIndex.value ? index : null;
-}
+const activeAccordion = ref<number>();
 </script>
 
 <template>
@@ -15,14 +11,12 @@ const onAccordionClick = (index: string) => {
       <h2>Les questions fréquemment posées</h2>
     </div>
     <div class="section-title">
-      <DsfrAccordionsGroup>
+      <DsfrAccordionsGroup v-model="activeAccordion">
         <template v-for="(category, x) in faq.categories">
           <h3 class="fr-mt-4w h6">{{ category.name }}</h3>
           <template v-for="(item, y) in category.data">
             <DsfrAccordion :title="item.question"
-                           :expanded-id="expandedIndex"
                            titleTag="h4"
-                           @expand="onAccordionClick(x.toString() + y.toString())"
                            :id="x.toString() + y.toString()">
               <div v-html="item.response"></div>
             </DsfrAccordion>

client/components/accueil/Gestes.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import gestes from '../../data/gestes.json'
 import { Ref } from "vue";
+import { Icon } from '@iconify/vue';
 
 const gesteTags: Ref<any[]> = ref([{
   label: "À la maison",
@@ -43,17 +44,18 @@ const selectedTagIndex: Ref<number> = ref(0);
     <div class="fr-grid-row fr-grid-row--gutters">
       <div class="fr-col-12 fr-grid-row fr-grid-row fr-grid-row--center">
         <DsfrTag v-for="(tag, index) in gesteTags"
-                 :label="tag.label"
                  class="fr-mx-1w tag-lg"
-                 :icon="tag.icon"
                  :aria-pressed="selectedTagIndex === index"
                  @click="selectedTagIndex = index"
-                 tag-name="button"/>
+                 tag-name="button">
+          <Icon :icon="'vigieau:' + tag.icon" class="fr-mr-1w" />
+          {{ tag.label }}
+        </DsfrTag>
       </div>
-      <DsfrTabs class="tabs-light">
+      <DsfrTabs class="tabs-light" v-model="selectedTagIndex">
         <DsfrTabContent v-for="(tag, index) in gesteTags"
-                        tabindex="-1"
-                        :selected="selectedTagIndex === index">
+                        :panel-id="'tab-content-' + index"
+                        :tab-id="'tab-' + index">
           <div class="fr-grid-row fr-grid-row fr-grid-row--gutters fr-grid-row--center">
             <GestesCard v-for="geste in gestesFiltered(tag)"
                         :geste="geste"

client/components/accueil/Presentation.vue

@@ -16,7 +16,7 @@ const updateFormData = (formData: any) => {
 <template>
   <div class="presentation fr-py-4w">
     <div class="fr-container">
-      <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--middle">
+      <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--middle fr-mb-2w">
         <div class="fr-col-12 text-align-center">
           <h1>Suis-je concerné par les restrictions ?</h1>
         </div>
@@ -27,7 +27,6 @@ const updateFormData = (formData: any) => {
                     :hideTypeEau="true"
                     :typeEau="typeEau"
                     :profil="profil"
-                    class="wrap-map"
                     @selectPoint="selectPointOnMap($event)" />
         </div>
 
@@ -74,5 +73,12 @@ const updateFormData = (formData: any) => {
 .wrap-map {
   position: relative;
   width: 100%;
+  height: 455px;
+}
+
+@media screen and (max-width: 767px) {
+  .wrap-map {
+    height: 90vh;
+  }
 }
 </style>

client/components/carte/Map.vue

@@ -2,8 +2,6 @@
 import * as maplibregl from 'maplibre-gl';
 import { Ref } from 'vue';
 import { PMTiles, Protocol } from 'pmtiles';
-import { useAddressStore } from '../../store/address';
-import { storeToRefs } from 'pinia';
 import api from '../../api';
 import niveauxGravite from '../../dto/niveauGravite';
 import { useRefDataStore } from '../../store/refData';
@@ -141,8 +139,19 @@ onMounted(() => {
       return;
     }
     btn.addEventListener('click', async () => {
-      utils.searchZones(dataAddress.value?.features[0] ? dataAddress.value.features[0] : null,
-        dataGeo?.value ? dataGeo.value[0] : null,
+      // On modifie l'objet adresse car au clic sur la carte on veut vraiment le lon / lat exact
+      const address = {
+        geometry: {
+          coordinates: [coordinates.lng, coordinates.lat],
+        },
+        properties: {
+          citycode: dataAddress.value?.features[0]?.properties?.citycode ? dataAddress.value.features[0].properties.citycode :
+            dataGeo.value[0]?.code ? dataGeo.value[0].code : null,
+          label: `${dataGeo.value[0]?.nom}, ${dataGeo.value[0]?.codeDepartement}`,
+        },
+      };
+      utils.searchZones(address,
+        null,
         props.profil,
         selectedTypeEau.value,
         router,
@@ -193,18 +202,24 @@ const typeEauTags: Ref<any[]> = ref([{
   label: 'Eau potable',
   value: 'AEP',
   disabled: false,
+  text: 'du robinet',
 }, {
   label: 'Eau superficielle',
   value: 'SUP',
+  text: `d'un cours d'eau, d'une rivière`,
 }, {
   label: 'Eau souterraine',
   value: 'SOU',
+  text: `des nappes (puits ou forage)`,
 }]);
 const selectedTypeEau: Ref<string> = ref(props.typeEau ? props.typeEau : 'AEP');
-const adressStore = useAddressStore();
 const router = useRouter();
 const expandedId = ref<string>();
 
+const getTypeEauText = computed(() => {
+  return typeEauTags.value.find(t => t.value === selectedTypeEau.value).text;
+});
+
 const flyToLocation = (bounds: any) => {
   map.value?.fitBounds(bounds);
 };
@@ -406,7 +421,7 @@ watch(() => props.area, () => {
 </script>
 
 <template>
-  <div class="full-width" v-if="isMapSupported">
+  <div class="full-width full-height" v-if="isMapSupported">
     <div class="map-pre-actions" data-html2canvas-ignore="true">
       <div v-if="showError"
            class="map-pre-actions-card fr-p-1w fr-m-1w">
@@ -426,7 +441,11 @@ watch(() => props.area, () => {
                          @update:modelValue="selectedTypeEau = $event; updateLayerFilter();"
         />
       </div>
-      <div class="map-pre-actions-card fr-p-1w fr-m-1w">
+      <div v-else
+           class="map-pre-actions-card fr-p-1w fr-m-1w">
+        <h6 class="fr-mb-0">Situation pour l'eau {{ getTypeEauText }}</h6>
+      </div>
+      <div class="map-pre-actions-card fr-p-1w fr-m-1w hide-sm">
         <h6 class="fr-mb-1w fr-mr-2w">Raccourcis :</h6>
         <DsfrTag v-for="tag in mapTags"
                  :label="tag.label"
@@ -436,33 +455,43 @@ watch(() => props.area, () => {
                  tag-name="button" />
       </div>
     </div>
-    <div style="position:relative;"
-         :style="embedded ? 'height: calc(100vh - 125px)' : 'height: 75vh'">
-      <div class="map-wrap" :class="{'map-wrap--loading': loading}">
-        <div class="map" ref="mapContainer"></div>
+    <div class="fr-grid-row map-legend fr-mb-1w show-sm">
+      <template v-for="legend in niveauxGravite">
+        <DsfrTooltip on-hover
+                     :content="legend.description">
+          <DsfrBadge small
+                     class="fr-mr-1w"
+                     :class="legend.class"
+                     type=""
+                     :label="legend.text" />
+        </DsfrTooltip>
+      </template>
+    </div>
+    <div class="map-wrap" :class="{'map-wrap--loading': loading, 'map-wrap--full-actions': !hideTypeEau}">
+      <div class="map" ref="mapContainer"></div>
+    </div>
+    <div class="map-post-actions show-sm" data-html2canvas-ignore="true">
+      <div class="map-post-actions-card fr-p-1w fr-m-1w">
+        <h6 class="fr-mb-1w fr-mr-2w">Raccourcis :</h6>
+        <DsfrTag v-for="tag in mapTags"
+                 :label="tag.label"
+                 class="fr-m-1w"
+                 small
+                 @click="flyToLocation(tag.bounds)"
+                 tag-name="button" />
       </div>
     </div>
-    <div class="fr-grid-row map-legend fr-mt-1w">
-      <DsfrBadge small
-                 no-icon
-                 class="situation-level-bg-0 fr-mr-1w"
-                 label="pas de restrictions" />
-      <DsfrBadge small
-                 no-icon
-                 class="situation-level-bg-1 fr-mr-1w"
-                 label="vigilance" />
-      <DsfrBadge small
-                 no-icon
-                 class="situation-level-bg-2 fr-mr-1w"
-                 label="alerte" />
-      <DsfrBadge small
-                 no-icon
-                 class="situation-level-bg-3 fr-mr-1w"
-                 label="alerte renforcée" />
-      <DsfrBadge small
-                 no-icon
-                 class="situation-level-bg-4"
-                 label="crise" />
+    <div class="fr-grid-row map-legend fr-mt-1w hide-sm">
+      <template v-for="legend in niveauxGravite">
+        <DsfrTooltip on-hover
+                     :content="legend.description">
+          <DsfrBadge small
+                     class="fr-mr-1w"
+                     :class="legend.class"
+                     type=""
+                     :label="legend.text" />
+        </DsfrTooltip>
+      </template>
     </div>
 
     <div v-if="!hideDownloadBtn"
@@ -514,7 +543,7 @@ watch(() => props.area, () => {
   }
 }
 
-.map-pre-actions {
+.map-pre-actions, .map-post-actions {
   position: absolute;
   top: 10px;
   left: 10px;
@@ -532,6 +561,10 @@ watch(() => props.area, () => {
   }
 }
 
+.map-pre-actions-card:first-child {
+  max-width: 180px;
+}
+
 h6 {
   font-size: 16px;
 }
@@ -565,9 +598,17 @@ h6 {
   }
 }
 
+.map-legend :deep(.fr-link) {
+  background: none;
+}
+
 @media screen and (max-width: 767px) {
   .map-wrap {
-    height: 75vh;
+    height: calc(100% - 230px);
+
+    &--full-actions {
+      height: calc(100% - 300px);
+    }
 
     &-embedded {
       height: calc(100vh - 160px);
@@ -584,12 +625,10 @@ h6 {
     .fr-tag {
       display: initial;
     }
-  }
-}
 
-@media screen and (max-width: 991px) {
-  .map-legend {
-    margin-top: 2rem;
+    .map-pre-actions-card:first-child {
+      max-width: initial;
+    }
   }
 }
 </style>