Rajout fly carte + text filtre ✨

Author: vincentlaine

client/components/carte/Map.vue

@@ -324,23 +324,28 @@ watch(() => props.area, () => {
   let deps = [];
   let territoire = null;
   let idTerritoire = null;
-  let centreTerritoire = null;
   if (props.area) {
     territoire = props.area.split('=')[0];
     idTerritoire = props.area.split('=')[1];
   }
   if (territoire === 'bassinVersant' && idTerritoire) {
-    console.log(refDataStore.bassinVersant);
+    const bassinVersantDeps = refDataStore.bassinsVersants.find((r: any) => r.id === +idTerritoire)?.departements;
+    deps = refDataStore.departements.filter((d: any) => bassinVersantDeps.some(bvd => bvd.id === d.id));
   } else if (territoire === 'region' && idTerritoire) {
-    console.log(refDataStore.region);
+    const regionDeps = refDataStore.regions.find((r: any) => r.id === +idTerritoire)?.departements;
+    deps = refDataStore.departements.filter((d: any) => regionDeps.some(rd => rd.id === d.id));
   } else if (territoire === 'departement' && idTerritoire) {
-    console.log(refDataStore.departements);
-    // depsId = refDataStore.departements.filter((d: any) => d.id === +idTerritoire);
+    deps = refDataStore.departements.filter((d: any) => d.id === +idTerritoire);
   }
-  if (centreTerritoire) {
+  if (deps && deps.length > 0) {
     const llb = new maplibregl.LngLatBounds();
-    llb.extend(centreTerritoire);
-    map.value?.fitBounds(llb);
+    deps.forEach((d: any) => {
+      llb.extend([d.bounds.minLat, d.bounds.minLong]);
+      llb.extend([d.bounds.maxLat, d.bounds.maxLong]);
+    });
+    map.value?.fitBounds(llb, {
+      padding: 30,
+    });
   }
 });
 </script>

client/components/carte/Table.vue

@@ -7,6 +7,7 @@ const props = defineProps<{
   date: string,
   area: string,
   light: boolean,
+  filterText: string,
 }>();
 
 const headers = ['N° Département', 'Département', 'Niveau de gravité'];
@@ -74,6 +75,13 @@ function filterDepartments() {
   componentKey.value += 1;
 }
 
+const tableTitle = computed(() => {
+  if (props.light) {
+    return '';
+  }
+  return `Niveau de gravité maximal observé par département ${props.filterText ? '(' + props.filterText + ')' : ''}`
+});
+
 watch(() => props, () => {
   const date = new Date(props.date);
   if (!date) {
@@ -112,7 +120,7 @@ watch(() => props, () => {
                        buttonText="Rechercher"
                        ref="input"
                        @search="checkKeyboardNav({key: 'search'})" />
-        <DsfrTable :title="light ? 'Niveau de gravité maximal observé par département' : ''"
+        <DsfrTable :title="tableTitle"
                    :headers="headers"
                    :rows="rowsFiltered"
                    :pagination="true"

client/components/donnees/ArretesRestrictionsTable.vue

@@ -5,6 +5,7 @@ import utils from '../../utils';
 const props = defineProps<{
   date: string,
   area: string,
+  filterText: string,
 }>();
 
 const headers = ['Numéro', 'Département', 'Niveau de gravité maximum', 'Ressources concernées',
@@ -30,6 +31,10 @@ async function loadData() {
   loading.value = false;
 }
 
+const tableTitle = computed(() => {
+  return `Arrêtés de restrictions ${props.filterText ? '(' + props.filterText + ')' : ''}`;
+});
+
 watch(() => props, () => {
   const date = new Date(props.date);
   if (!date) {
@@ -42,7 +47,7 @@ watch(() => props, () => {
 <template>
   <div>
     <template v-if="!loading">
-      <DsfrTable title="Arrêtés de restrictions"
+      <DsfrTable :title="tableTitle"
                  :headers="headers"
                  :rows="rows"
                  :pagination="true"

client/components/donnees/Filter.vue

@@ -16,9 +16,11 @@ const area = ref('');
 const areaOptions = ref([]);
 
 const loadData = (() => {
+  const areaText = areaOptions.value.find(a => a.value === area.value)?.text
   emit('filterChange', {
     date: date.value,
     area: area.value,
+    areaText: areaText,
   });
 });
 

client/layouts/basic.vue

@@ -59,6 +59,9 @@ onMounted(() => {
 
   watch(() => route.path, newPath => {
       quickLinks = newPath === '/situation' ? [{
+        label: 'Données sécheresse',
+        to: '/donnees',
+      }, {
         label: 'Effectuer une nouvelle recherche',
         icon: 'ri-search-line',
         to: '/',
@@ -67,7 +70,10 @@ onMounted(() => {
         icon: 'ri-survey-line',
         button: true,
         onclick: utils.openTally,
-      }] : [];
+      }] : [{
+        label: 'Données sécheresse',
+        to: '/donnees',
+      }];
       key.value++;
     }, { immediate: true },
   );

client/pages/donnees/index.vue

@@ -15,6 +15,7 @@ useHead({
 const links: Ref<any[]> = ref([{ 'to': '/', 'text': 'Accueil' }, { 'text': 'Données sécheresse' }]);
 const refDataStore = useRefDataStore();
 const filterData: any = ref(null);
+const filterText: any = ref(null);
 
 // LOAD REF DATA
 const { data, error } = await api.getRefData();
@@ -26,6 +27,11 @@ if (data.value) {
 
 const setFilterData = (data: any) => {
   filterData.value = JSON.parse(JSON.stringify(data));
+  if(filterData.value.date && filterData.value.areaText) {
+    filterText.value = `${filterData.value.areaText} au ${new Date(filterData.value.date).toLocaleDateString()}`;
+  } else {
+    filterText.value = null;
+  }
 };
 </script>
 
@@ -42,7 +48,7 @@ const setFilterData = (data: any) => {
   <div class="background-blue fr-py-2w">
     <div class="fr-container">
       <DonneesFilter @filterChange="setFilterData($event)" />
-      <h2 class="fr-h4 fr-mt-2w">Carte et historique des restrictions</h2>
+      <h2 class="fr-h4 fr-mt-2w">Carte et historique des restrictions <span v-if="filterText">({{ filterText}})</span></h2>
       <template v-if="filterData">
         <div style="position: relative;">
           <CarteMap :embedded="false"
@@ -51,10 +57,12 @@ const setFilterData = (data: any) => {
                     :area="filterData.area" />
         </div>
         <DonneesArretesRestrictionsTable :date="filterData.date"
-                                         :area="filterData.area" />
+                                         :area="filterData.area"
+                                         :filterText="filterText"/>
         <CarteTable :light="true"
                     :date="filterData.date"
-                    :area="filterData.area" />
+                    :area="filterData.area"
+                    :filterText="filterText" />
       </template>
     </div>
   </div>