intégration des question 9 à 20 sur hpFB

src/situations/cafe_de_la_place/data/parcours_haut.js

@@ -346,6 +346,7 @@ const HPfb2 = {
   nom_technique: 'hpfb_2',
   type: 'champ-saisie',
   sous_type: 'texte',
+  scrollEffectue: false,
   extensionVue: 'email_HPfb_a_trous',
   illustration: telephoneEMail,
   reponse: {
@@ -359,6 +360,7 @@ const HPfb3 = {
   nom_technique: 'hpfb_3',
   type: 'champ-saisie',
   sous_type: 'texte',
+  scrollEffectue: false,
   extensionVue: 'email_HPfb_a_trous',
   illustration: telephoneEMail,
   reponse: {
@@ -372,6 +374,7 @@ const HPfb4 = {
   nom_technique: 'hpfb_4',
   type: 'champ-saisie',
   sous_type: 'texte',
+  scrollEffectue: false,
   extensionVue: 'email_HPfb_a_trous',
   illustration: telephoneEMail,
   reponse: {
@@ -385,6 +388,7 @@ const HPfb5 = {
   nom_technique: 'hpfb_5',
   type: 'champ-saisie',
   sous_type: 'texte',
+  scrollEffectue: false,
   extensionVue: 'email_HPfb_a_trous',
   illustration: telephoneEMail,
   reponse: {
@@ -398,6 +402,7 @@ const HPfb6 = {
   nom_technique: 'hpfb_6',
   type: 'champ-saisie',
   sous_type: 'texte',
+  scrollEffectue: false,
   extensionVue: 'email_HPfb_a_trous',
   illustration: telephoneEMail,
   reponse: {
@@ -411,6 +416,7 @@ const HPfb7 = {
   nom_technique: 'hpfb_7',
   type: 'champ-saisie',
   sous_type: 'texte',
+  scrollEffectue: false,
   extensionVue: 'email_HPfb_a_trous',
   illustration: telephoneEMail,
   reponse: {
@@ -424,6 +430,7 @@ const HPfb8 = {
   nom_technique: 'hpfb_8',
   type: 'champ-saisie',
   sous_type: 'texte',
+  scrollEffectue: false,
   extensionVue: 'email_HPfb_a_trous',
   illustration: telephoneEMail,
   reponse: {
@@ -432,6 +439,174 @@ const HPfb8 = {
   }
 };
 
+const HPfb9 = {
+  id: 'HPfb9',
+  nom_technique: 'hpfb_9',
+  type: 'champ-saisie',
+  sous_type: 'texte',
+  scrollEffectue: true,
+  extensionVue: 'email_HPfb_a_trous',
+  illustration: telephoneEMail,
+  reponse: {
+    nom_technique: 'roses',
+    textes: ['roses']
+  }
+};
+
+const HPfb10 = {
+  id: 'HPfb10',
+  nom_technique: 'hpfb_10',
+  type: 'champ-saisie',
+  sous_type: 'texte',
+  scrollEffectue: true,
+  extensionVue: 'email_HPfb_a_trous',
+  illustration: telephoneEMail,
+  reponse: {
+    nom_technique: 'sentaient',
+    textes: ['sentaient']
+  }
+};
+
+const HPfb11 = {
+  id: 'HPfb11',
+  nom_technique: 'hpfb_11',
+  type: 'champ-saisie',
+  sous_type: 'texte',
+  scrollEffectue: true,
+  extensionVue: 'email_HPfb_a_trous',
+  illustration: telephoneEMail,
+  reponse: {
+    nom_technique: 'parfum',
+    textes: ['parfum']
+  }
+};
+
+const HPfb12 = {
+  id: 'HPfb12',
+  nom_technique: 'hpfb_12',
+  type: 'champ-saisie',
+  sous_type: 'texte',
+  scrollEffectue: true,
+  extensionVue: 'email_HPfb_a_trous',
+  illustration: telephoneEMail,
+  reponse: {
+    nom_technique: 'catalogue',
+    textes: ['catalogue']
+  }
+};
+
+const HPfb13 = {
+  id: 'HPfb13',
+  nom_technique: 'hpfb_13',
+  type: 'champ-saisie',
+  sous_type: 'texte',
+  scrollEffectue: true,
+  extensionVue: 'email_HPfb_a_trous',
+  illustration: telephoneEMail,
+  reponse: {
+    nom_technique: 'bras',
+    textes: ['bras']
+  }
+};
+
+const HPfb14 = {
+  id: 'HPfb14',
+  nom_technique: 'hpfb_14',
+  type: 'champ-saisie',
+  sous_type: 'texte',
+  scrollEffectue: true,
+  extensionVue: 'email_HPfb_a_trous',
+  illustration: telephoneEMail,
+  reponse: {
+    nom_technique: 'cyclistes',
+    textes: ['cyclistes']
+  }
+};
+
+const HPfb15 = {
+  id: 'HPfb15',
+  nom_technique: 'hpfb_15',
+  type: 'champ-saisie',
+  sous_type: 'texte',
+  scrollEffectue: true,
+  extensionVue: 'email_HPfb_a_trous',
+  illustration: telephoneEMail,
+  reponse: {
+    nom_technique: 'bananier',
+    textes: ['bananier']
+  }
+};
+
+const HPfb16 = {
+  id: 'HPfb16',
+  nom_technique: 'hpfb_16',
+  type: 'champ-saisie',
+  sous_type: 'texte',
+  scrollEffectue: true,
+  extensionVue: 'email_HPfb_a_trous',
+  illustration: telephoneEMail,
+  reponse: {
+    nom_technique: 'alcoolique',
+    textes: ['alcoolique']
+  }
+};
+
+const HPfb17 = {
+  id: 'HPfb17',
+  nom_technique: 'hpfb_17',
+  type: 'champ-saisie',
+  sous_type: 'texte',
+  scrollEffectue: true,
+  extensionVue: 'email_HPfb_a_trous',
+  illustration: telephoneEMail,
+  reponse: {
+    nom_technique: 'intervention',
+    textes: ['intervention']
+  }
+};
+
+const HPfb18 = {
+  id: 'HPfb18',
+  nom_technique: 'hpfb_18',
+  type: 'champ-saisie',
+  sous_type: 'texte',
+  scrollEffectue: true,
+  extensionVue: 'email_HPfb_a_trous',
+  illustration: telephoneEMail,
+  reponse: {
+    nom_technique: 'remboursement',
+    textes: ['remboursement']
+  }
+};
+
+const HPfb19 = {
+  id: 'HPfb19',
+  nom_technique: 'hpfb_19',
+  type: 'champ-saisie',
+  sous_type: 'texte',
+  scrollEffectue: true,
+  extensionVue: 'email_HPfb_a_trous',
+  illustration: telephoneEMail,
+  reponse: {
+    nom_technique: 'marchandises',
+    textes: ['marchandises']
+  }
+};
+
+const HPfb20 = {
+  id: 'HPfb20',
+  nom_technique: 'hpfb_20',
+  type: 'champ-saisie',
+  sous_type: 'texte',
+  scrollEffectue: true,
+  extensionVue: 'email_HPfb_a_trous',
+  illustration: telephoneEMail,
+  reponse: {
+    nom_technique: 'hate',
+    textes: ['hâte']
+  }
+};
+
 const parcoursHaut1 = {
   series: [
     { cartes: [ sousConsigneHPar1 ] },
@@ -464,7 +639,7 @@ const parcoursHaut2 = {
     {
       cartes: [ sousConsigneHPfb1, sousConsigneHPfb2 ]
     },
-    { cartes: [ HPfb1, HPfb2, HPfb3, HPfb4, HPfb5, HPfb6, HPfb7, HPfb8 ] }
+    { cartes: [ HPfb1, HPfb2, HPfb3, HPfb4, HPfb5, HPfb6, HPfb7, HPfb8, HPfb9, HPfb10, HPfb11, HPfb12, HPfb13, HPfb14, HPfb15, HPfb16, HPfb17, HPfb18, HPfb19, HPfb20 ] }
   ]
 };
 

src/situations/cafe_de_la_place/styles/email_HPfb_a_trous.scss

@@ -1,25 +1,15 @@
 @import 'commun/styles/variables.scss';
 
 .email-fleurs-bibelots {
-  padding: 1.5rem;
-  position: absolute;
-  width: 23.75rem;
-  left: 8.5rem;
-  top: 0.5rem;
   font-family: $font-sarabun;
 
   hr {
     border: 0.9px solid $bleu-gris;
   }
 
   p {
-    margin: 0.875rem 0;
-  }
-
-  &__ascenseur {
-    position: absolute;
-    right: 0.5rem;
-    top: 1.75rem;
+    margin: 0;
+    margin-bottom: 0.875rem;
   }
 
   &__destinataire {
@@ -32,7 +22,22 @@
   }
 
   &__message {
-    padding-top: 0.625rem;
+    padding-top: 1.5rem;
   }
 }
 
+.zone-scroll {
+  position: absolute;
+  display: flex;
+  justify-content: end;
+  padding: 1.5rem;
+  width: 23.75rem;
+  top: 0.5rem;
+  left: 8.5rem;
+
+  &__ascenseur {
+    position: absolute;
+    right: 0.5rem;
+    top: 1.75rem;
+  }
+}

src/situations/cafe_de_la_place/vues/components/email_HPfb_a_trous.vue

@@ -1,34 +1,47 @@
 <template>
-  <div class="email-fleurs-bibelots">
-    <svg class="email-fleurs-bibelots__ascenseur" width="8" height="100" viewBox="0 0 8 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <div class="zone-scroll">
+    <div class="email-fleurs-bibelots">
+      <component :is="messageEmail"/>
+    </div>
+    <svg
+      class="zone-scroll__ascenseur"
+      :style="{ 'margin-top': topPositionScrollBar }"
+      width="8"
+      height="100"
+      viewBox="0 0 8 100"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
       <rect width="8" height="100" rx="4" fill="#D6DAEC"/>
     </svg>
-    <div class="email-fleurs-bibelots__destinataire">
-      Destinataire&nbsp;:
-      <div class="nom">
-        Charles Perrac <u>&lt;[email protected]&gt;</u>
-      </div>
-    </div>
-    <hr>
-    <strong>Objet&nbsp;: Détail des articles non conformes</strong>
-    <hr>
-    <div class="email-fleurs-bibelots__message">
-      <p>Bonjour mon ami&nbsp;!</p>
-      <p>J'espère que tu vas bien.</p>
-      <p>Comme convenu, je vais te décrire<br>les problèmes que j'ai eus hier, le 10 <trou-a-completer idQuestion="HPfb1"/>,<br>quand je t'ai remplacé à la boutique.</p>
-      <p>Une commande est arrivée et elle ne correspondait pas à ta <trou-a-completer idQuestion="HPfb2"/>.</p>
-      <p>Le <trou-a-completer idQuestion="HPfb3"/> d'<trou-a-completer idQuestion="HPfb4"/> était en <trou-a-completer idQuestion="HPfb5"/> avec la commande. Mais certains étaient dans un mauvais <trou-a-completer idQuestion="HPfb6"/> ou ne <trou-a-completer idQuestion="HPfb7"/> pas à ce qu'on attendait.</p>
-      <p>Les dahlias, couleur bleu azuré, étaient en fait de couleur <trou-a-completer idQuestion="HPfb8"/>.</p>
-      <p>Les <trou-a-completer idQuestion="HPfb9"/> de Chine ne <trou-a-completer idQuestion="HPfb10"/> aucun <trou-a-completer idQuestion="HPfb11"/> contrairement à ce qui était annoncé dans le <trou-a-completer idQuestion="HPfb12"/>.</p>
-    </div>
   </div>
 </template>
 
 <script>
 import 'cafe_de_la_place/styles/email_HPfb_a_trous.scss';
 import TrouACompleter from 'cafe_de_la_place/vues/components/trou_a_completer.vue';
+import emailPartie1 from 'cafe_de_la_place/vues/components/email_partie_1.vue';
+import emailPartie2 from 'cafe_de_la_place/vues/components/email_partie_2.vue';
 
 export default {
-  components: { TrouACompleter },
+  components: { TrouACompleter, emailPartie1, emailPartie2 },
+
+  props: {
+    question: {
+      type: Object,
+      required: true
+    },
+  },
+
+  computed: {
+    topPositionScrollBar() {
+      return this.question.scrollEffectue ? '25.625rem' : '0rem';
+    },
+
+    messageEmail () {
+      if (this.question.scrollEffectue) return emailPartie2;
+      return emailPartie1;
+    },
+  }
 };
 </script>

src/situations/cafe_de_la_place/vues/components/email_partie_1.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <div class="email-fleurs-bibelots__destinataire">
+      Destinataire&nbsp;:
+      <div class="nom">
+        Charles Perrac <u>&lt;[email protected]&gt;</u>
+      </div>
+    </div>
+    <hr>
+    <strong>Objet&nbsp;: Détail des articles non conformes</strong>
+    <hr>
+    <div class="email-fleurs-bibelots__message">
+      <p>Bonjour mon ami&nbsp;!</p>
+      <p>J'espère que tu vas bien.</p>
+      <p>Comme convenu, je vais te décrire<br>les problèmes que j'ai eus hier, le 10 <trou-a-completer idQuestion="HPfb1"/>,<br>quand je t'ai remplacé à la boutique.</p>
+      <p>Une commande est arrivée et elle ne correspondait pas à ta <trou-a-completer idQuestion="HPfb2"/>.</p>
+      <p>Le <trou-a-completer idQuestion="HPfb3"/> d'<trou-a-completer idQuestion="HPfb4"/> était en <trou-a-completer idQuestion="HPfb5"/> avec la commande. Mais certains étaient dans un mauvais <trou-a-completer idQuestion="HPfb6"/> ou ne <trou-a-completer idQuestion="HPfb7"/> pas à ce qu'on attendait.</p>
+      <p>Les dahlias, couleur bleu azuré, étaient en fait de couleur <trou-a-completer idQuestion="HPfb8"/>.</p>
+      <p>Les <trou-a-completer/> de Chine ne <trou-a-completer/> aucun <trou-a-completer/> contrairement à ce qui était annoncé dans le <trou-a-completer/>.</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import TrouACompleter from 'cafe_de_la_place/vues/components/trou_a_completer.vue';
+
+export default {
+  components: { TrouACompleter }
+};
+</script>