feat(stat-tables): expanded the clicking area of the statistics table

the statistics table will now be able to response to all the clicks in a particular row of object and be able to redirect the user to the specified object's statistics page resolved #4
penguin-statistics · Aug 13, 2019 · 10040c7 · 10040c7
1 parent c1c4ae3
commit 10040c7
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 30 deletions.
diff --git a/src/layouts/StatsLayout.vue b/src/layouts/StatsLayout.vue
@@ -20,4 +20,21 @@
   export default {
     name: "StatsLayout"
   }
-</script>
+</script>
+
+<style>
+  .hovering::after {
+    transition: all 225ms cubic-bezier(0.165, 0.84, 0.44, 1);
+    content: "\232A";
+    font-size: 16px;
+    opacity: 0;
+    margin-left: 5px;
+    margin-top: -4px;
+    transform: translateX(0px);
+  }
+
+  .hovering.hovering--hovered::after {
+    opacity: 1;
+    margin-left: 8px;
+  }
+</style>
diff --git a/src/views/Stats/Item.vue b/src/views/Stats/Item.vue
@@ -95,10 +95,10 @@
         <h1 class="title ma-3">
           <v-layout align-center>
             <Item
-                :item="selected.item"
-                :ratio="0.75"
-                disable-tooltip
-                disable-link
+              :item="selected.item"
+              :ratio="0.75"
+              disable-tooltip
+              disable-link
             />
             <v-flex class="ml-2">
               {{ $t('result.title', {item: selectedItemName}) }}

diff --git a/src/views/Stats/Stage.vue b/src/views/Stats/Stage.vue
@@ -256,7 +256,9 @@
       </v-stepper-content>
 
       <v-stepper-content :step="3">
-        <h1 class="title ma-3">{{ $t('stats.title', {stage: selectedStage.code}) }}</h1>
+        <h1 class="title ma-3">
+          {{ $t('stats.title', {stage: selectedStage.code}) }}
+        </h1>
         <v-data-table
           :headers="tableHeaders"
           :items="stageStats"
@@ -267,31 +269,43 @@
           class="elevation-0 transparentTable"
         >
           <template v-slot:items="props">
-            <td>
-              <v-avatar
-                :size="30"
-                class="mr-1"
+            <v-hover>
+              <tr
+                slot-scope="{ hover }"
+                class="cursor-pointer"
+                @click="redirectItem(props.item.item.itemId)"
               >
-                <Item
-                  :item="props.item.item"
-                  :ratio="0.5"
-                  disable-tooltip
-                />
-              </v-avatar>
-              {{ props.item.item.name }}
-            </td>
-            <td class="text-xs-right">
-              {{ props.item.times }}
-            </td>
-            <td class="text-xs-right">
-              {{ props.item.quantity }}
-            </td>
-            <td class="text-xs-right">
-              {{ props.item.percentageText }}
-            </td>
-            <td class="text-xs-right">
-              {{ props.item.apPPR }}
-            </td>
+                <td
+                  class="hovering"
+                  :class="{ 'hovering--hovered': hover }"
+                >
+                  <v-avatar
+                    :size="30"
+                    class="mr-1"
+                  >
+                    <Item
+                      :item="props.item.item"
+                      :ratio="0.5"
+                      disable-tooltip
+                      disable-link
+                    />
+                  </v-avatar>
+                  {{ props.item.item.name }}
+                </td>
+                <td class="text-xs-right">
+                  {{ props.item.times }}
+                </td>
+                <td class="text-xs-right">
+                  {{ props.item.quantity }}
+                </td>
+                <td class="text-xs-right">
+                  {{ props.item.percentageText }}
+                </td>
+                <td class="text-xs-right">
+                  {{ props.item.apPPR }}
+                </td>
+              </tr>
+            </v-hover>
           </template>
         </v-data-table>
       </v-stepper-content>
@@ -429,6 +443,14 @@
       (this.$route.params.stageId) && (this.selected.stage = this.$route.params.stageId) && (this.step += 1);
     },
     methods: {
+      redirectItem(itemId) {
+        this.$router.push({
+          name: "StatsByItem_SelectedItem",
+          params: {
+            itemId
+          }
+        })
+      },
       storeZoneSelection(zoneId) {
         this.step += 1;
         this.selected.zone = zoneId