Affichage des restrictions ✨

MTES-MCT · Apr 8, 2024 · b9b39bb · b9b39bb
1 parent 91a6b41
commit b9b39bb
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 42 deletions.
diff --git a/client/api/index.ts b/client/api/index.ts
@@ -29,41 +29,20 @@ const index = {
     });
   },
 
-  searchReglementationByAdress(address: Address, profile: string): Promise<any> {
-    const runtimeConfig = useRuntimeConfig();
-    let options = ['municipality'].includes(address.properties.type) ?
-      `/reglementation?commune=${address.properties.citycode}` :
-      `/reglementation?lon=${address.geometry.coordinates[0]}&lat=${address.geometry.coordinates[1]}&commune=${address.properties.citycode}`;
-    options += `&profil=${profile}`;
-    return useFetch(options, {
-      method: 'GET',
-      baseURL: runtimeConfig.public.apiSecheresseUrl
-    });
-  },
-
-  searchReglementationByGeo(geo: Geo, profile: string): Promise<any> {
-    const runtimeConfig = useRuntimeConfig();
-    return useFetch(`/reglementation?commune=${geo.code}&profil=${profile}`, {
-      method: 'GET',
-      baseURL: runtimeConfig.public.apiSecheresseUrl
-    });
-  },
-
-  searchZonesByAdress(address: Address, profile: string): Promise<any> {
+  searchZonesByAdress(address: Address): Promise<any> {
     const runtimeConfig = useRuntimeConfig();
     let options = ['municipality'].includes(address.properties.type) ?
       `/zones?commune=${address.properties.citycode}` :
-      `/zones?lon=${address.geometry.coordinates[0]}&lat=${address.geometry.coordinates[1]}&commune=${address.properties.citycode}`;
-    options += `&profil=${profile}`;
+      `/zones?lon=${address.geometry.coordinates[0]}&lat=${address.geometry.coordinates[1]}&commune=${address.properties.citycode}`
     return useFetch(options, {
       method: 'GET',
       baseURL: runtimeConfig.public.apiSecheresseUrl
     });
   },
 
-  searchZonesByGeo(geo: Geo, profile: string): Promise<any> {
+  searchZonesByGeo(geo: Geo): Promise<any> {
     const runtimeConfig = useRuntimeConfig();
-    return useFetch(`/zones?commune=${geo.code}&profil=${profile}`, {
+    return useFetch(`/zones?commune=${geo.code}`, {
       method: 'GET',
       baseURL: runtimeConfig.public.apiSecheresseUrl
     });

diff --git a/client/components/situation/Restrictions.vue b/client/components/situation/Restrictions.vue
@@ -1,16 +1,15 @@
 <script setup lang="ts">
 import { Ref } from 'vue';
-import { TagProps } from '@gouvminint/vue-dsfr/types/components/DsfrTag/DsfrTag.vue';
 import { Zone } from '../../dto/zone.dto';
 import { Usage } from '~/client/dto/usage.dto';
 
 const props = defineProps<{
+  usages: Usage[],
   zone: Zone,
   profile: string
 }>();
 
 const selectedTagIndex: Ref<number> = ref(0);
-// const expandedIndex: Ref<string | null> = ref(props.zones.length > 1 ? null : '0');
 const thematiqueTags: Ref<TagProps[]> = ref([{
   label: 'Arroser',
   icone: 'eau-goutte-arrosoir-interdiction',
@@ -56,11 +55,11 @@ const thematiqueTags: Ref<TagProps[]> = ref([{
 }]);
 
 const thematiqueTagsFiltered = computed<TagProps[]>(() => {
-  return thematiqueTags.value.filter(t => props.zone.usages.findIndex(u => u.thematique === t.label) >= 0);
+  return thematiqueTags.value.filter(t => props.usages.findIndex(u => u.thematique === t.label) >= 0);
 });
 
-const usagesFiltered = (zone: Zone): Usage[] => {
-  return props.zone.usages.filter(u => u.thematique === thematiqueTagsFiltered.value[selectedTagIndex.value].label);
+const usagesFiltered = (): Usage[] => {
+  return props.usages.filter(u => u.thematique === thematiqueTagsFiltered.value[selectedTagIndex.value].label);
 };
 
 const title = computed<string>(() => {
@@ -96,8 +95,8 @@ const title = computed<string>(() => {
             <DsfrTabContent v-for="(thematique, index) in thematiqueTagsFiltered"
                             :selected="selectedTagIndex === index">
               <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--center fr-p-2w">
-                <template v-if="usagesFiltered(zone).length > 0">
-                  <div v-for="usage in usagesFiltered(zone)"
+                <template v-if="usagesFiltered().length > 0">
+                  <div v-for="usage in usagesFiltered()"
                        class="fr-col-12 fr-col-md-4">
                     <SituationRestrictionCard :usage="usage"
                                               :thematique="thematique"
@@ -116,6 +115,15 @@ const title = computed<string>(() => {
               </div>
             </DsfrTabContent>
           </DsfrTabs>
+          <div v-if="thematiqueTagsFiltered.length === 0" class="fr-grid-row fr-grid-row--gutters fr-grid-row--center fr-p-2w">
+            <div class="fr-col-12 fr-col-md-4">
+              <div class="eau-card fr-p-2w">
+                <div class="eau-card__desc">
+                  Aucune restriction
+                </div>
+              </div>
+            </div>
+          </div>
           <div class="fr-grid-row fr-grid-row--center">
             <b>Le respect des restrictions est obligatoire sous peine de recevoir une amende de 1500€</b>
             <div class="fr-mt-4w">

diff --git a/client/components/situation/Status.vue b/client/components/situation/Status.vue
@@ -9,7 +9,7 @@ import utils from '../../utils';
 const addressStore = useAddressStore();
 const zoneStore = useZoneStore();
 const { profile, typeEau } = storeToRefs(addressStore);
-const { zones }: Ref<Zone> = storeToRefs(zoneStore);
+const { zones } = storeToRefs(zoneStore);
 const { resetAddress, adressString } = addressStore;
 const { resetZones } = zoneStore;
 const links: Ref<any[]> = ref([{ to: '/', text: 'Accueil' }, { text: 'Votre situation' }]);
@@ -18,22 +18,55 @@ const addressToUse: Ref<any> = ref(adressString());
 
 const typesEauOptions = [
   {
-    text: 'Eau potable',
+    text: 'eau potable',
     value: 'AEP',
   },
   {
-    text: 'Eau superficielle',
+    text: 'eau superficielle',
     value: 'SUP',
   }, {
-    text: 'Eau souterraine',
+    text: 'eau souterraine',
     value: 'SOU',
   },
 ];
+const profileOptions = [
+  {
+    value: 'particulier',
+    text: 'particulier'
+  },
+  {
+    value: 'entreprise',
+    text: 'professionnel'
+  },
+  {
+    value: 'collectivite',
+    text: 'collectivité'
+  },
+  {
+    value: 'exploitation',
+    text: 'exploitation agricole'
+  }
+];
 
 const zoneTypeEau = computed(() => {
   return zones.value.find(z => z.type === typeEau.value);
 });
 
+const usagesByProfile = computed(() => {
+  return zoneTypeEau.value.usages.filter(u => {
+    switch (profile.value) {
+      case 'particulier':
+        return u.concerneParticulier;
+      case 'enteprise':
+        return u.concerneEntreprise;
+      case 'collectivite':
+        return u.concerneCollectivite;
+      case 'exploitation':
+        return u.concerneExploitation;
+    }
+  });
+});
+
 onBeforeUnmount(() => {
   resetAddress();
   resetZones();
@@ -47,22 +80,37 @@ onBeforeUnmount(() => {
       <DsfrBreadcrumb class="fr-mb-0" :links='links' />
     </div>
     <div class="fr-col-12  fr-container fr-grid-row fr-grid-row--center fr-grid-row--middle fr-mb-1w">
-      <h6 class="fr-mr-1w fr-mb-0">Vous pouvez choisir d’afficher les restrictions sur l’eau provenant</h6>
+      <h6 class="fr-mr-1w fr-mb-0">Vous pouvez choisir d’afficher les restrictions sur l’eau provenant de l'</h6>
       <DsfrSelect id="type_eau"
                   v-model="typeEau"
                   :options="typesEauOptions" />
+      <h6 class="fr-mx-1w fr-mb-0">en tant que</h6>
+      <DsfrSelect id="profile"
+                  v-model="profile"
+                  :options="profileOptions" />
     </div>
     <SituationHeader :address="addressToUse"
                      :typeEau="typeEau"
                      :zone="zoneTypeEau" />
     <SituationRestrictions v-if="utils.showRestrictions(zoneTypeEau)"
                            :profile="profile"
-                           :zone="zoneTypeEau" />
+                           :zone="zoneTypeEau"
+                           :usages="usagesByProfile" />
   </div>
 </template>
 
-<style scoped lang="scss">
-.section-title {
-  text-align: left;
+<style lang="scss">
+.situation-status {
+  .fr-select {
+    width: fit-content;
+
+    &-group {
+      margin-bottom: 0;
+    }
+  }
+
+  h6 {
+    font-size: 1rem;
+  }
 }
 </style>
diff --git a/client/dto/usage.dto.ts b/client/dto/usage.dto.ts
@@ -3,4 +3,8 @@ export interface Usage {
   nom: string;
   description: string;
   erreur: string;
+  concerneParticulier: boolean;
+  concerneEntreprise: boolean;
+  concerneCollectivite: boolean;
+  concerneExploitation: boolean;
 }
diff --git a/client/utils/index.ts b/client/utils/index.ts
@@ -113,7 +113,7 @@ const index = {
 
     if (loadingRestrictions) loadingRestrictions.value = true;
 
-    const { data, error } = address ? await api.searchZonesByAdress(address, profile) : await api.searchZonesByGeo(geo, profile);
+    const { data, error } = address ? await api.searchZonesByAdress(address) : await api.searchZonesByGeo(geo);
 
     // STATS MATOMO
     try {