add links to members in forecasts vue

pages/previsions.vue

@@ -9,31 +9,32 @@
         <li>{{ wwResult.permutations_nb }} permutations</li>
       </ul>
     </div>
-    <div class="row mb-4">
-      <div class="col">
+    <div class="row">
+      <div class="col-12 text-center mb-4">
         <div class="form-check form-check-inline">
-          <input class="form-check-input" type="radio" id="forecastsByNames" value="forecastsByNames" checked v-model="display">
+          <input class="form-check-input" type="radio" id="forecastsByNames" value="forecastsByNames" checked v-model="display" @change="save">
           <label class="form-check-label" for="forecastsByNames">
             Tri par membres
           </label>
         </div>
         <div class="form-check form-check-inline">
-          <input class="form-check-input" type="radio" id="forecastsByDates" value="forecastsByDates" v-model="display">
+          <input class="form-check-input" type="radio" id="forecastsByDates" value="forecastsByDates" v-model="display" @change="save">
           <label class="form-check-label" for="forecastsByDates">
             Tri par dates
           </label>
         </div>
       </div>
-    </div>
-    <div class="row">
-      <div class="col-lg-6">
+      <div class="col-lg-8 m-auto">
         <div v-if="display=='forecastsByNames'">
           <h3>Prévisions par membres</h3>
           <div class="table-responsive">
-            <table class="table table-striped">
+            <table class="table table-striped table-hover">
               <tbody>
-                <tr v-for="forecast in wwResult.forecastsByNames" :key="forecast.member.uid">
-                  <th scope="row">{{ forecast.member.uid }}</th>
+                <tr v-for="forecast in wwResult.forecastsByNames" :key="forecast.member.uid" @click="$router.push({ path: '/membres/' + forecast.member.hash })">
+                  <th scope="row">
+                    {{ forecast.member.uid }}
+                    <BadgeStatus :membre="forecast.member" />
+                  </th>
                   <td class="p-0">
                     <div class="d-flex justify-content-between p-3" v-for="date in forecast.forecasts" :key="date.date">
                       <div>{{ date.date | formatDateHeure }}</div>
@@ -53,9 +54,11 @@
                 <tr v-for="forecast in wwResult.forecastsByDates" :key="forecast.date">
                   <th scope="row">{{ forecast.date | formatDateHeure }}</th>
                   <td class="p-0">
-                    <div class="d-flex justify-content-between p-3" v-for="member in forecast.forecasts" :key="member.member.uid">
-                      <div>{{ member.member.uid }}</div>
-                      <div>{{ member.proba * 100 }} %</div>
+                    <div class="list-group rounded-0">
+                      <nuxt-link class="list-group-item list-group-item-action border-0 d-flex justify-content-between" :to="'/membres/' + member.member.hash" v-for="member in forecast.forecasts" :key="member.member.uid">
+                        <div>{{ member.member.uid }} <BadgeStatus :membre="member.member" /></div>
+                        <div>{{ member.proba * 100 }} %</div>
+                      </nuxt-link>
                     </div>
                   </td>
                 </tr>
@@ -92,7 +95,9 @@ export default {
   },
   // Fonctions locales
   methods: {
-
+    save() {
+      localStorage.setItem('previsions', this.display)
+    }
   },
   apollo: {
     wwResult : {
@@ -178,6 +183,19 @@ export default {
   mounted () {
     // Mise à jour du fil d'ariane au chargement
     $nuxt.$emit('changeRoute',this.breadcrumb)
+    if (localStorage.previsions) {
+      this.display = localStorage.getItem('previsions')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.list-group-item {
+  background: transparent;
+  &:hover {
+    background: rgba(0, 0, 255, 0.075);
+    color: var(--text-primary-color);
   }
 }
-</script>
\ No newline at end of file
+</style>
\ No newline at end of file