tech: ajout transcription graphique linky (#319)

src/components/custom/Linky/LinkyExplicationAleatoire.vue

@@ -7,7 +7,7 @@
       @click="selectionnerInfoAleatoire"
       class="fr-btn fr-btn--tertiary-no-outline fr-btn--icon-left fr-icon-refresh-line"
     >
-      Rafraîchir
+      Autre idée
     </button>
   </div>
 </template>
@@ -30,7 +30,7 @@
   const selectionnerInfoAleatoire = () => {
     afficherAction.value = false;
     const infoActionsQuotidienneSansCelleAffichee = infosActionsQuotidiennes.filter(
-      i => i !== infoActionQuotidienneAffichee.value
+      i => i !== infoActionQuotidienneAffichee.value,
     );
     const randomIndex = Math.floor(Math.random() * infoActionsQuotidienneSansCelleAffichee.length);
     infoActionQuotidienneAffichee.value = infoActionsQuotidienneSansCelleAffichee[randomIndex];

src/components/custom/Linky/LinkyGraphique.vue

@@ -19,35 +19,48 @@
     <ul>
       <li v-for="(item, index) in consos?.commentaires" :key="index" v-html="item" />
     </ul>
-    <Bar
-      v-if="consos?.graphique"
-      id="graphique-consommation-electrique"
-      :options="{
-        responsive: true,
-        scales: {
-          y: {
-            ticks: {
-              callback: value => `${value} kWh`,
+    <div v-if="consos?.graphique">
+      <Bar
+        id="graphique-consommation-electrique"
+        class="fr-mb-4w"
+        :options="{
+          responsive: true,
+          scales: {
+            y: {
+              ticks: {
+                callback: value => `${value} kWh`,
+              },
             },
           },
-        },
-      }"
-      :data="{
-        labels: consos?.graphique.libelles,
-        datasets: [
-          {
-            label: 'année précédente',
-            backgroundColor: consos.couleurValeur1,
-            data: consos?.graphique.valeur_courante,
-          },
-          {
-            label: 'année courante',
-            backgroundColor: consos.couleurValeur2,
-            data: consos?.graphique.valeur_precedente,
-          },
-        ],
-      }"
-    />
+        }"
+        :data="{
+          labels: consos?.graphique.libelles,
+          datasets: [
+            {
+              label: 'année précédente',
+              backgroundColor: consos.couleurValeur1,
+              data: consos?.graphique.valeur_precedente,
+            },
+            {
+              label: 'année courante',
+              backgroundColor: consos.couleurValeur2,
+              data: consos?.graphique.valeur_courante,
+            },
+          ],
+        }"
+      />
+      <Transcription titre="Transcription du graphique" id="graphique-linky" :est-ouvert="false">
+        <Table
+          :tableau-double-legende="true"
+          :titre="`${consos.titre}`"
+          :titres-donnees="['', ...consos?.graphique.libelles]"
+          :donnees="[
+            ['Année précédente', ...consos?.graphique.valeur_precedente_transcription],
+            ['Année courante', ...consos?.graphique.valeur_courante_transcription],
+          ]"
+        />
+      </Transcription>
+    </div>
   </div>
 </template>
 
@@ -63,6 +76,8 @@
   import { ConsommationElectriqueViewModel } from '@/linky/ports/linky.presenter';
   import { ObtenirConsommationElectriqueQuatorzeJoursUsecase } from '@/linky/obtenirConsommationElectriqueQuatorzeJours.usecase';
   import { LinkyPresenterQuatorzeJoursImpl } from '@/linky/adapters/linkyQuatorzeJours.presenter.impl';
+  import Transcription from '@/components/dsfr/Transcription.vue';
+  import Table from '@/components/dsfr/Table.vue';
 
   ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale);
 
@@ -80,31 +95,31 @@
 
   const idUtilisateur = utilisateurStore().utilisateur.id;
   const obtenirConsommationElectriqueUsecaseAnnuelle = new ObtenirConsommationElectriqueAnnuelleUsecase(
-    new LinkyRepositoryAxios()
+    new LinkyRepositoryAxios(),
   );
   const obtenirConsommationElectriqueQuatorzeJoursUsecase = new ObtenirConsommationElectriqueQuatorzeJoursUsecase(
-    new LinkyRepositoryAxios()
+    new LinkyRepositoryAxios(),
   );
 
   async function handleValueChange(value) {
     vueGraphique.value = value;
     if (value === VueGraphique.QUATORZE_JOURS) {
       await obtenirConsommationElectriqueQuatorzeJoursUsecase.execute(
         idUtilisateur,
-        new LinkyPresenterQuatorzeJoursImpl(mapValuesConsommation)
+        new LinkyPresenterQuatorzeJoursImpl(mapValuesConsommation),
       );
     } else {
       await obtenirConsommationElectriqueUsecaseAnnuelle.execute(
         idUtilisateur,
-        new LinkyPresenterAnnuelleImpl(mapValuesConsommation)
+        new LinkyPresenterAnnuelleImpl(mapValuesConsommation),
       );
     }
   }
 
   onMounted(async () => {
     await obtenirConsommationElectriqueQuatorzeJoursUsecase.execute(
       idUtilisateur,
-      new LinkyPresenterQuatorzeJoursImpl(mapValuesConsommation)
+      new LinkyPresenterQuatorzeJoursImpl(mapValuesConsommation),
     );
   });
 </script>

src/components/custom/Linky/ServiceModaleParametreLinky.vue

@@ -52,7 +52,7 @@
       class="fr-pl-1v"
       id="cgu"
       v-model="acceptationCGU"
-      label="Je déclare sur l'honneur être titulaire du point ou être mandaté par celui-ci et j'accepte qu'Agir ait accès à mes données des 2 ans passés et pour les 3 ans à venir. Je peux changer d'avis à tout moment sur mon compte Enedis."
+      label="Je déclare sur l'honneur être titulaire du point ou être mandaté par celui-ci et j'accepte que le service 'Agir' ait accès à mes données des 2 ans passés et pour les 3 ans à venir. Je peux changer d'avis à tout moment sur mon compte Enedis."
     />
     <div class="fr-grid-row fr-grid-row--right fr-pt-6w fr-pb-4w">
       <button class="fr-btn fr-btn--secondary" type="button" :aria-controls="serviceId">Annuler</button>
@@ -73,6 +73,7 @@
   import ModaleActions from '@/components/custom/Modale/ModaleActions';
   import Alert from '@/components/custom/Alert.vue';
   import { useAlerte } from '@/composables/useAlerte';
+  import { ServiceEvent, ServiceEventBusImpl } from '@/services/serviceEventBusImpl';
 
   defineProps<{ serviceId: string; prm: string }>();
 
@@ -86,7 +87,10 @@
 
     parametrerService
       .execute(utilisateurStore().utilisateur.id, serviceId, { prm: parametreDuService.value })
-      .then(() => new ModaleActions(serviceId).close())
+      .then(() => {
+        new ModaleActions(serviceId).close();
+        ServiceEventBusImpl.getInstance().publish(ServiceEvent.SERVICE_INSTALLE); // todo : à sortir dans le usecase
+      })
       .catch(error => afficherAlerte('error', 'Erreur', error.data.message));
   };
 </script>

src/components/dsfr/Table.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="fr-table">
+  <div :class="`fr-table ${tableauDoubleLegende && 'tableauDoubleLegende'}`">
     <table>
       <caption>
         {{
@@ -23,9 +23,18 @@
 </template>
 
 <script setup lang="ts">
+  import '@gouvfr/dsfr/dist/component/table/table.min.css';
+
   defineProps<{
     titre: string;
     titresDonnees: string[];
     donnees: (string | number)[][];
+    tableauDoubleLegende?: boolean;
   }>();
 </script>
+
+<style scoped>
+  .tableauDoubleLegende td:first-child {
+    font-weight: 700;
+  }
+</style>

src/components/dsfr/Transcription.vue

@@ -1,40 +1,73 @@
 <template>
-  <div class="fr-transcription background--white">
-    <button class="fr-transcription__btn" aria-expanded="false" :aria-controls="id">{{ titre }}</button>
-    <div class="fr-collapse" :id="id">
-      <Modale
-        :label="`${id}-transcription-title`"
-        :id="`${id}-modal`"
-        size="m"
-        :radius="false"
-        :is-footer-actions="false"
-      >
-        <h1 :id="id" class="fr-modal__title text--center text--uppercase fr-text--sm text--normal text--gris">
-          {{ titre }}
-        </h1>
-        <slot />
-      </Modale>
+  <div class="fr-transcription" :id="id">
+    <button
+      class="fr-transcription__btn"
+      :aria-expanded="estOuvert"
+      :aria-controls="`fr-transcription-collapse-${id}`"
+      data-fr-js-collapse-button="true"
+    >
+      Transcription
+    </button>
+    <div
+      :class="`fr-collapse ${estOuvert && 'fr-collapse--expanded'}`"
+      :id="`fr-transcription-collapse-${id}`"
+      data-fr-js-collapse="true"
+      style="--collapse-max-height: none; --collapse: -210px"
+    >
       <div class="fr-transcription__footer">
         <div class="fr-transcription__actions-group">
           <button
-            class="fr-btn fr-btn--fullscreen"
-            :aria-controls="`${id}-modal`"
+            class="fr-btn--fullscreen fr-btn"
+            :aria-controls="`fr-transcription-modal-${id}`"
+            aria-label="Agrandir la transcription"
             data-fr-opened="false"
-            :title="titre"
+            id="button-2150"
+            data-fr-js-modal-button="true"
           >
             Agrandir
           </button>
         </div>
       </div>
+      <div
+        :id="`fr-transcription-modal-${id}`"
+        class="fr-modal"
+        :aria-labelledby="`fr-transcription-modal-${id}-title`"
+        data-fr-js-modal="true"
+      >
+        <div class="fr-container fr-container--fluid fr-container-md">
+          <div class="fr-grid-row fr-grid-row--center">
+            <div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
+              <div class="fr-modal__body" data-fr-js-modal-body="true" style="--modal-max-height: 719px">
+                <div class="fr-modal__header">
+                  <button
+                    class="fr-btn--close fr-btn"
+                    :aria-controls="`fr-transcription-modal-${id}`"
+                    id="button-2151"
+                    title="Fermer"
+                    data-fr-js-modal-button="true"
+                  >
+                    Fermer
+                  </button>
+                </div>
+                <div class="fr-modal__content">
+                  <h1 :id="`fr-transcription-modal-${id}-title`" class="fr-modal__title">{{ titre }}</h1>
+                  <slot />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-  import Modale from '@/components/custom/Modale/Modale.vue';
+  import '@gouvfr/dsfr/dist/component/transcription/transcription.min.css';
 
   defineProps<{
     id: string;
     titre: string;
+    estOuvert: boolean;
   }>();
 </script>

src/components/pages/PageLinky.vue

@@ -6,16 +6,21 @@
     />
     <h1 class="fr-h2">Ma consommation électrique</h1>
     <div v-if="isLoading">Chargement ...</div>
-    <div v-else-if="!estConfigure" />
-    <div v-else-if="!estActif">
-      <p>Service en cours de connexion. Revenez plus tard pour consulter vos données</p>
-    </div>
-    <div v-else class="fr-grid-row fr-grid-row--gutters">
+    <div v-else-if="informationCompteurViewModel" class="fr-grid-row fr-grid-row--gutters">
       <div class="fr-col-md-9 fr-col-12">
-        <LinkyGraphique />
+        <p v-if="!informationCompteurViewModel.estConfigure">
+          Service en cours de connexion. Revenez plus tard pour consulter vos données
+        </p>
+        <p v-else-if="!informationCompteurViewModel.estActif">
+          Récupération des données en cours. Revenez plus tard pour les consulter.
+        </p>
+        <p v-else-if="!informationCompteurViewModel.estFonctionnel">
+          Récupération des données en cours. Revenez plus tard pour les consulter.
+        </p>
+        <LinkyGraphique v-else-if="informationCompteurViewModel.estFonctionnel" />
       </div>
       <div class="fr-col-md-3 fr-col-12">
-        <LinkyAside :est-actif="estActif" />
+        <LinkyAside :est-actif="informationCompteurViewModel.estActif" />
       </div>
     </div>
   </div>
@@ -28,7 +33,10 @@
       size="m"
     >
       <template v-slot:contenu>
-        <ServiceModaleParametreLinky service-id="linky" :prm="prm" />
+        <ServiceModaleParametreLinky
+          service-id="linky"
+          :prm="informationCompteurViewModel && informationCompteurViewModel.prm"
+        />
       </template>
     </Modale>
     <button class="fr-btn fr-hidden" data-fr-opened="false" aria-controls="linky">
@@ -48,24 +56,27 @@
   import ModaleActions from '@/components/custom/Modale/ModaleActions';
   import Modale from '@/components/custom/Modale/Modale.vue';
   import ServiceModaleParametreLinky from '@/components/custom/Linky/ServiceModaleParametreLinky.vue';
+  import { InformationCompteurViewModel } from '@/linky/ports/linky.information.presenter';
+  import { LinkyPresenterInformationImpl } from '@/linky/adapters/linkyInformation.presenter.impl';
 
   const isLoading = ref(true);
 
-  const prm = ref<string>('');
-  const estConfigure = ref<boolean>();
-  const estActif = ref<boolean>();
+  const informationCompteurViewModel = ref<InformationCompteurViewModel>();
+
+  function mapValuesInformation(viewModel: InformationCompteurViewModel) {
+    informationCompteurViewModel.value = viewModel;
+  }
 
   onMounted(async () => {
     const obtenirInformationCompteurUsecase = new ObtenirInformationCompteurUsecase(new LinkyRepositoryAxios());
-    const informationCompteur = await obtenirInformationCompteurUsecase.execute(utilisateurStore().utilisateur.id);
-
-    prm.value = informationCompteur.prm;
-    estConfigure.value = informationCompteur.estConfigure;
-    estActif.value = informationCompteur.estActif;
+    await obtenirInformationCompteurUsecase.execute(
+      utilisateurStore().utilisateur.id,
+      new LinkyPresenterInformationImpl(mapValuesInformation),
+    );
 
     isLoading.value = false;
 
-    if (!estConfigure.value) {
+    if (informationCompteurViewModel.value?.doitOuvrirLaModaleDeConfiguration) {
       const modaleActions = new ModaleActions('linky');
       modaleActions.open();
     }

src/linky/adapters/linky.repository.axios.ts

@@ -18,6 +18,7 @@ interface InformationCompteurApiModel {
   is_fully_running: boolean;
   configuration: {
     prm: string;
+    error_code: string;
   };
 }
 
@@ -77,6 +78,7 @@ export class LinkyRepositoryAxios implements LinkyRepository {
       estConfigure: reponse.data.is_configured,
       estActif: reponse.data.is_activated,
       estFonctionnel: reponse.data.is_fully_running,
+      configurationEnErreur: reponse.data.configuration.error_code !== '' ? true : false,
     };
   }
 }