Show option's details

src/main/webapp/assets/js/components/modals/ChoiceDetailsModal.vue

@@ -0,0 +1,39 @@
+<template>
+  <modal-layout>
+    <template v-slot:title>{{ choice.title }}</template>
+
+    <div class="card-image light-color valign-wrapper">
+      <img
+        v-if="choice.img"
+        class="category-picture"
+        v-bind:src="choice.img"
+        alt="image"
+      />
+    </div>
+    <div>
+      <div>
+        <div v-html="choice.description"></div>
+      </div>
+      <div>
+        <a :href="choice.url" target="_blank">{{ choice.url }}</a>
+      </div>
+    </div>
+
+    <template v-slot:footer>
+      <button @click="close()" class="waves-effect waves-green btn-flat">
+        ok
+      </button>
+    </template>
+  </modal-layout>
+</template>
+
+<script>
+module.exports = {
+  mixins: [VueModal],
+  data() {
+    return {
+      choice: false,
+    };
+  },
+};
+</script>

src/main/webapp/assets/js/views/createVoteMajoritaire.vue

@@ -114,7 +114,7 @@
               />
             </button>
             <button @click="saveVoteMajoritaire()" class="create-vote-btn">
-              <span>Créer la vote majoritaire</span>
+              <span>Créer le vote majoritaire</span>
             </button>
           </div>
         </div>
@@ -207,13 +207,6 @@ module.exports = {
           choice_image: "",
           choice_url: "",
         },
-        {
-          choice_title_label: "Choix numéro 2",
-          choice_title: "",
-          choice_description: "",
-          choice_image: "",
-          choice_url: "",
-        },
       ],
     };
   },

src/main/webapp/assets/js/views/votemajoritairedetails.vue

@@ -33,7 +33,9 @@
           </thead>
           <tbody>
             <tr v-for="(choice, k) in currentTheme.choices" :key="k">
-              <td>{{ choice.title }}</td>
+              <td>
+                <span class="choice" @click="OpenDetail(choice)">{{ choice.title }}</span>
+              </td>
               <td class="chek-cell-container">
                 <input
                   type="checkbox"
@@ -97,7 +99,7 @@
           <span>Valider mon choix</span>
         </button>
       </div>
-      <div class="space-top">
+      <div v-if="!showVote" class="space-top">
         <h1 class="vm-header-title">Résultat</h1>
         <div v-if="typeof currentTheme === `object`" id="chart">
           <apexchart
@@ -108,11 +110,17 @@
           ></apexchart>
         </div>
       </div>
+      <template v-slot:addons>
+        <choice-detail-modal ref="ChoiceDetailsModal"> </choice-detail-modal>
+      </template>
     </base-layout>
   </div>
 </template>
 
 <style lang="css" scoped>
+.choice {
+  cursor: pointer;
+}
 .box-container {
   border: 1px solid #a1a3a1;
   border-radius: 10px;
@@ -363,9 +371,14 @@ module.exports = {
         console.error(error);
       }
     },
+    OpenDetail(choice = {}) {
+      this.$refs.ChoiceDetailsModal.choice = choice;
+      this.$refs.ChoiceDetailsModal.open();
+    },
   },
   components: {
     apexchart: VueApexCharts,
+    "choice-detail-modal": vueLoader("components/modals/ChoiceDetailsModal"),
   },
 };
 </script>