feat: le clique sur une recommandation personnalisée peut être un obj…

…ectif de mission (#265) Co-authored-by: octo-guic <[email protected]>
betagouv · Jan 19, 2024 · a1ea44c · a1ea44c
1 parent 6925dd3
commit a1ea44c
Show file tree

Hide file tree

Showing 26 changed files with 253 additions and 167 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -15,7 +15,6 @@
   const appName = 'Agir ! -';
   router.beforeEach((to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {
     const { title, estPublique } = to.meta;
-    window.scrollTo(0, 0);
 
     if (title) {
       document.title = `${appName} ${title as string}`;

diff --git a/src/components/Coach.vue b/src/components/Coach.vue
@@ -38,7 +38,7 @@
       },
     }"
   >
-    <div class="fr-container" v-if="!isLoading">
+    <div id="recommandations" class="fr-container" v-if="!isLoading">
       <CoachRecommandations
         v-if="recommandationsPersonnaliseesViewModel"
         :recommandations="recommandationsPersonnaliseesViewModel"

diff --git a/src/components/custom/Coach/CoachCardRecommandationHighlight.vue b/src/components/custom/Coach/CoachCardRecommandationHighlight.vue
@@ -4,18 +4,18 @@
       <div class="fr-col-4">
         <div
           class="card-recommandation-highlight__image"
-          :style="`background-image: url('${props.recommandation.image}')`"
+          :style="`background-image: url('${recommandation.image}')`"
           aria-hidden="true"
         ></div>
       </div>
       <div class="fr-col-8">
         <span class="fr-text--bold">L'article à lire !</span>
-        <h3 class="fr-h4 text--gris-dark">{{ props.recommandation.titre }}</h3>
-        <p>{{ props.recommandation.description }}</p>
+        <h3 class="fr-h4 text--gris-dark">{{ recommandation.titre }}</h3>
+        <p>{{ recommandation.description }}</p>
         <router-link
-          :to="props.recommandation.url"
+          @click="recommandationAEteCliquee"
+          :to="recommandation.url"
           class="card-recommandation-highlight__link fr-link"
-          @click="interactionAEteCliquee"
         >
           Continuer la lecture
         </router-link>
@@ -26,17 +26,22 @@
 
 <script setup lang="ts">
   import { RecommandationViewModel } from '@/recommandationsPersonnalisees/adapters/recommandationsPersonnalisees.presenter.impl';
-  import { useInteraction } from '@/composables/interactionAEteCliquee';
+  import { RecommandationPersonnaliseAEteCliqueeUsecase } from '@/recommandationsPersonnalisees/recommandationPersonnaliseAEteCliquee.usecase';
+  import { RecommandationsPersonnaliseesRepositoryAxios } from '@/recommandationsPersonnalisees/adapters/recommandationsPersonnalisees.repository.axios';
+  import { ToDoListEventBusImpl } from '@/toDoList/toDoListEventBusImpl';
+  import { utilisateurStore } from '@/store/utilisateur';
 
-  const props = defineProps<{
+  defineProps<{
     recommandation: RecommandationViewModel;
   }>();
 
-  const { interactionAEteCliquee } = useInteraction({
-    type: props.recommandation.type,
-    nombreDePointsAGagner: props.recommandation.nombreDePointsAGagner,
-    idDuContenu: props.recommandation.contentId,
-  });
+  const recommandationAEteCliquee = () => {
+    const recommandationPersonnaliseAEteCliqueeUsecase = new RecommandationPersonnaliseAEteCliqueeUsecase(
+      new RecommandationsPersonnaliseesRepositoryAxios(),
+      ToDoListEventBusImpl.getInstance()
+    );
+    recommandationPersonnaliseAEteCliqueeUsecase.execute(utilisateurStore().utilisateur.id);
+  };
 </script>
 
 <style scoped>

diff --git a/src/components/custom/Coach/CoachCardRecommandations.vue b/src/components/custom/Coach/CoachCardRecommandations.vue
@@ -1,36 +1,41 @@
 <template>
   <div class="card-recommandation shadow">
     <div class="fr-p-3w">
-      <span class="fr-text--bold fr-text--xs text--black">{{ props.recommandation.thematique }}</span>
+      <span class="fr-text--bold fr-text--xs text--black">{{ recommandation.thematique }}</span>
       <h3 class="card-recommandation__titre fr-text--xl fr-mb-0 text--gris-dark">
         <router-link
-          :to="props.recommandation.url"
+          :to="recommandation.url"
           class="card-recommandation__link"
-          :title="props.recommandation.titre"
-          @click="interactionAEteCliquee"
+          :title="recommandation.titre"
+          @click="recommandationAEteCliquee"
         >
-          {{ props.recommandation.titre }}
+          {{ recommandation.titre }}
         </router-link>
       </h3>
     </div>
-    <img :src="props.recommandation.image" alt="" class="card-recommandation__image" />
+    <img :src="recommandation.image" alt="" class="card-recommandation__image" />
     <span class="fr-icon-arrow-right-line card-recommandation__picto text--bleu shadow" aria-hidden="true"></span>
   </div>
 </template>
 
 <script setup lang="ts">
   import { RecommandationViewModel } from '@/recommandationsPersonnalisees/adapters/recommandationsPersonnalisees.presenter.impl';
-  import { useInteraction } from '@/composables/interactionAEteCliquee';
+  import { RecommandationPersonnaliseAEteCliqueeUsecase } from '@/recommandationsPersonnalisees/recommandationPersonnaliseAEteCliquee.usecase';
+  import { RecommandationsPersonnaliseesRepositoryAxios } from '@/recommandationsPersonnalisees/adapters/recommandationsPersonnalisees.repository.axios';
+  import { ToDoListEventBusImpl } from '@/toDoList/toDoListEventBusImpl';
+  import { utilisateurStore } from '@/store/utilisateur';
 
-  const props = defineProps<{
+  defineProps<{
     recommandation: RecommandationViewModel;
   }>();
 
-  const { interactionAEteCliquee } = useInteraction({
-    type: props.recommandation.type,
-    nombreDePointsAGagner: props.recommandation.nombreDePointsAGagner,
-    idDuContenu: props.recommandation.contentId,
-  });
+  const recommandationAEteCliquee = () => {
+    const recommandationPersonnaliseAEteCliqueeUsecase = new RecommandationPersonnaliseAEteCliqueeUsecase(
+      new RecommandationsPersonnaliseesRepositoryAxios(),
+      ToDoListEventBusImpl.getInstance()
+    );
+    recommandationPersonnaliseAEteCliqueeUsecase.execute(utilisateurStore().utilisateur.id);
+  };
 </script>
 
 <style scoped>

diff --git a/src/components/custom/Coach/CoachCardToDo.vue b/src/components/custom/Coach/CoachCardToDo.vue
@@ -4,8 +4,7 @@
     <div class="fr-col fr-col-md-9">
       <h4 class="fr-m-0">
         <router-link
-          :to="{ path: url }"
-          @click="interactionAEteCliquee"
+          :to="{ path: url, hash: hash }"
           class="todo__link display-block fr-text--bold fr-text--lg text--bleu fr-mb-0"
         >
           {{ titre }}
@@ -26,23 +25,17 @@
 
 <script setup lang="ts">
   import CoachCardTodoProgression from '@/components/custom/Coach/CoachCardTodoProgression.vue';
-  import { useInteraction } from '@/composables/interactionAEteCliquee';
 
-  const props = defineProps<{
+  defineProps<{
     type: string;
     idDuContenu: string;
     nombreDePointsAGagner: number;
     titre: string;
     value: number;
     valueMax: number;
     url: string;
+    hash?: string;
   }>();
-
-  const { interactionAEteCliquee } = useInteraction({
-    type: props.type,
-    idDuContenu: props.idDuContenu,
-    nombreDePointsAGagner: props.nombreDePointsAGagner.toString(),
-  });
 </script>
 
 <style scoped>

diff --git a/src/components/custom/Coach/CoachToDo.vue b/src/components/custom/Coach/CoachToDo.vue
@@ -30,6 +30,7 @@
               :value="todo.progession.etapeCourante"
               :value-max="todo.progession.etapeTotal"
               :url="todo.url"
+              :hash="todo.hash"
             />
           </li>
         </ul>

diff --git a/src/components/custom/PageQuizComposant.vue b/src/components/custom/PageQuizComposant.vue
@@ -27,7 +27,6 @@
 
   defineProps<{
     quizViewModel: QuizViewModel;
-    nombreDePointsAGagner: string;
     idUtilisateur: string;
     isModePrevisualisation: boolean;
     idQuiz: string;

diff --git a/src/components/custom/ScoreHeader.vue b/src/components/custom/ScoreHeader.vue
@@ -126,6 +126,13 @@
     ToDoListEventBusImpl.getInstance().subscribe(subscriberName, ToDoListEvent.TODO_KYC_A_ETE_REPONDU, () => {
       mettreAJourLeScore();
     });
+    ToDoListEventBusImpl.getInstance().subscribe(
+      subscriberName,
+      ToDoListEvent.TODO_RECOMMANDATION_A_ETE_CLIQUEE,
+      () => {
+        mettreAJourLeScore();
+      }
+    );
   });
 
   onUnmounted(() => {
@@ -134,6 +141,7 @@
     ToDoListEventBusImpl.getInstance().unsubscribe(subscriberName, ToDoListEvent.TODO_A_ETE_TERMINEE);
     ToDoListEventBusImpl.getInstance().unsubscribe(subscriberName, ToDoListEvent.TODO_QUIZ_ETE_TERMINE);
     ToDoListEventBusImpl.getInstance().unsubscribe(subscriberName, ToDoListEvent.TODO_KYC_A_ETE_REPONDU);
+    ToDoListEventBusImpl.getInstance().unsubscribe(subscriberName, ToDoListEvent.TODO_RECOMMANDATION_A_ETE_CLIQUEE);
   });
 </script>
 

diff --git a/src/components/pages/PageArticle.vue b/src/components/pages/PageArticle.vue
@@ -6,14 +6,12 @@
   import { useRoute, useRouter } from 'vue-router';
   import { onMounted, ref } from 'vue';
   import { utilisateurStore } from '@/store/utilisateur';
-  import { interactionEnCoursStore } from '@/store/interaction';
   import { Article, RecupererArticleUsecase } from '@/article/recupererArticle.usecase';
   import { ArticleRepositoryAxios } from '@/article/adapters/article.repository.axios';
   import { PasserUnArticleCommeLuUsecase } from '@/article/passerUnArticleCommeLu.usecase';
   import { ToDoListEventBusImpl } from '@/toDoList/toDoListEventBusImpl';
   import { RouteCommuneName } from '@/router';
 
-  const store = interactionEnCoursStore();
   const router = useRouter();
 
   const articleAAfficher = ref<Article>({
@@ -25,18 +23,17 @@
 
   onMounted(async () => {
     const route = useRoute();
-    const idArticle = route.params.id ? route.params.id.toString() : store.interactionEnCours!.idDuContenu;
+    const idArticle = route.params.id.toString();
+
     const articleRepositoryAxios = new ArticleRepositoryAxios();
     new RecupererArticleUsecase(articleRepositoryAxios)
       .execute(idArticle)
       .then(async article => {
         articleAAfficher.value = article;
-        if (!route.params.id) {
-          await new PasserUnArticleCommeLuUsecase(articleRepositoryAxios, ToDoListEventBusImpl.getInstance()).execute(
-            idArticle,
-            utilisateurStore().utilisateur.id
-          );
-        }
+        await new PasserUnArticleCommeLuUsecase(articleRepositoryAxios, ToDoListEventBusImpl.getInstance()).execute(
+          idArticle,
+          utilisateurStore().utilisateur.id
+        );
       })
       .catch(async () => {
         await router.push({ name: RouteCommuneName.NOT_FOUND });

diff --git a/src/components/pages/PageQuiz.vue b/src/components/pages/PageQuiz.vue
@@ -1,10 +1,9 @@
 <template>
   <div v-if="isLoading">Chargement...</div>
-  <div v-else-if="!quizViewModel || !interactionEnCours">Une erreur est survenue</div>
+  <div v-else-if="!quizViewModel">Une erreur est survenue</div>
   <PageQuizComposant
     v-else
     :quiz-view-model="quizViewModel"
-    :nombreDePointsAGagner="interactionEnCours ? interactionEnCours.nombreDePointsAGagner : '0'"
     :id-utilisateur="store.utilisateur.id"
     :is-mode-previsualisation="false"
     :id-quiz="idQuiz"
@@ -18,13 +17,11 @@
   import { ChargementQuizUsecase } from '@/quiz/chargementQuiz.usecase';
   import { ChargementQuizPresenterImpl, QuizViewModel } from '@/quiz/adapters/chargementQuiz.presenter.impl';
   import { utilisateurStore } from '@/store/utilisateur';
-  import { interactionEnCoursStore } from '@/store/interaction';
   import PageQuizComposant from '@/components/custom/PageQuizComposant.vue';
   import { QuizRepositoryAxios } from '@/quiz/adapters/quizRepository.axios';
 
   const quizViewModel = ref<QuizViewModel>();
   const store = utilisateurStore();
-  const interactionEnCours = interactionEnCoursStore().interactionEnCours;
   const route = useRoute();
   const isLoading = ref<boolean>(false);
   const idQuiz = route.params.id.toString();

diff --git a/src/composables/interactionAEteCliquee.ts b/src/composables/interactionAEteCliquee.ts
diff --git a/src/recommandationsPersonnalisees/adapters/recommandationsPersonnalisees.repository.axios.ts b/src/recommandationsPersonnalisees/adapters/recommandationsPersonnalisees.repository.axios.ts
@@ -2,6 +2,7 @@ import { RecommandationsPersonnaliseesRepository } from '@/recommandationsPerson
 import { RecommandationPersonnalisee } from '@/recommandationsPersonnalisees/recommandationsPersonnalisees.usecase';
 import { AxiosFactory, intercept401 } from '@/axios.factory';
 import { InteractionType } from '@/shell/interactionType';
+import axios from 'redaxios';
 
 interface InteractionApiModel {
   type: string;
@@ -14,6 +15,12 @@ interface InteractionApiModel {
   content_id: string;
 }
 export class RecommandationsPersonnaliseesRepositoryAxios implements RecommandationsPersonnaliseesRepository {
+  @intercept401()
+  async recommandationAEteCliquee(idUtilisateur: string): Promise<void> {
+    await axios.post(`/utilisateurs/${idUtilisateur}/events`, {
+      type: 'reco_clickée',
+    });
+  }
   @intercept401()
   async chargerRecommandationsPersonnalisees(idUtilisateur: string): Promise<RecommandationPersonnalisee[]> {
     const axiosInstance = AxiosFactory.getAxios();

diff --git a/src/recommandationsPersonnalisees/ports/recommandationsPersonnalisees.repository.ts b/src/recommandationsPersonnalisees/ports/recommandationsPersonnalisees.repository.ts
@@ -2,4 +2,5 @@ import { RecommandationPersonnalisee } from '@/recommandationsPersonnalisees/rec
 
 export interface RecommandationsPersonnaliseesRepository {
   chargerRecommandationsPersonnalisees(idUtilisateur: string): Promise<RecommandationPersonnalisee[]>;
+  recommandationAEteCliquee(idUtilisateur: string): Promise<void>;
 }
diff --git a/src/recommandationsPersonnalisees/recommandationPersonnaliseAEteCliquee.usecase.ts b/src/recommandationsPersonnalisees/recommandationPersonnaliseAEteCliquee.usecase.ts
@@ -0,0 +1,15 @@
+import { RecommandationsPersonnaliseesRepository } from '@/recommandationsPersonnalisees/ports/recommandationsPersonnalisees.repository';
+import { EventBus } from '@/shell/eventBus';
+import { ToDoListEvent } from '@/toDoList/toDoListEventBusImpl';
+
+export class RecommandationPersonnaliseAEteCliqueeUsecase {
+  constructor(
+    private readonly recommandationsPersonnaliseesRepository: RecommandationsPersonnaliseesRepository,
+    private readonly todoListEventBus: EventBus<ToDoListEvent>
+  ) {}
+
+  async execute(idUtilisateur: string): Promise<void> {
+    await this.recommandationsPersonnaliseesRepository.recommandationAEteCliquee(idUtilisateur);
+    this.todoListEventBus.publish(ToDoListEvent.TODO_RECOMMANDATION_A_ETE_CLIQUEE);
+  }
+}
diff --git a/src/router/index.ts b/src/router/index.ts
@@ -100,6 +100,18 @@ const routes: RouteRecordRaw[] = [
 const router = createRouter({
   history: createWebHistory(),
   routes,
+  scrollBehavior: (to, from, savedPosition) => {
+    if (to.hash) {
+      return {
+        el: to.hash,
+        behavior: 'smooth',
+      };
+    } else if (savedPosition) {
+      return savedPosition;
+    } else {
+      return { left: 0, top: 0 };
+    }
+  },
 });
 
 export default router;
diff --git a/src/shell/interactionType.ts b/src/shell/interactionType.ts
@@ -6,4 +6,5 @@ export enum InteractionType {
   AIDE = 'aide',
   COMPTE = 'profile',
   SERVICE = 'service',
+  RECOMMANDATION = 'recommandations',
 }
diff --git a/src/store/interaction.ts b/src/store/interaction.ts