From 1f7bd5a85343f9062dc310bb1047b78ea885323f Mon Sep 17 00:00:00 2001
From: Valentin Kaelin <kalanehd@gmail.com>
Date: Sat, 1 Feb 2020 17:14:03 +0100
Subject: [PATCH] feat: update layout to add season select

---
 client/src/components/Match/Match.vue         |  8 ++-
 .../src/components/Summoner/FilterSeason.vue  | 48 +++++++++++++++
 .../src/components/Summoner/HeaderLoader.vue  |  2 +-
 .../Summoner/Overview/OverviewLoader.vue      |  5 +-
 client/src/layouts/Default.vue                | 60 +++++++++++--------
 client/src/store/modules/summoner.js          |  3 +
 client/src/views/Summoner.vue                 |  3 +-
 client/src/views/SummonerChampions.vue        |  2 +-
 client/src/views/SummonerRecords.vue          |  4 +-
 client/tailwind.config.js                     |  2 +-
 10 files changed, 102 insertions(+), 35 deletions(-)
 create mode 100644 client/src/components/Summoner/FilterSeason.vue

diff --git a/client/src/components/Match/Match.vue b/client/src/components/Match/Match.vue
index bd2695d..f490d33 100644
--- a/client/src/components/Match/Match.vue
+++ b/client/src/components/Match/Match.vue
@@ -3,8 +3,8 @@
     <Ripple
       @click.native="displayDetails"
       color="rgba(43, 108, 176, 0.7)"
-      :class="[data.result, showDetails ? 'rounded-t-lg' : 'rounded-lg']"
-      class="match relative mt-4 bg-blue-800 text-white text-base cursor-pointer hover:shadow-xl"
+      :class="[data.result, showDetails ? 'rounded-t-lg' : 'rounded-lg', {'mt-4': indexMatch !== 0 }]"
+      class="match relative bg-blue-800 text-white text-base cursor-pointer hover:shadow-xl"
     >
       <div class="relative flex flex-wrap px-5 py-3">
         <div class="first w-4/12 text-left">
@@ -169,6 +169,10 @@ export default {
       type: Object,
       required: true
     },
+    indexMatch: {
+      type: Number,
+      default: -1,
+    }
   },
 
   data() {
diff --git a/client/src/components/Summoner/FilterSeason.vue b/client/src/components/Summoner/FilterSeason.vue
new file mode 100644
index 0000000..108665d
--- /dev/null
+++ b/client/src/components/Summoner/FilterSeason.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="relative group self-end inline-block text-blue-200 leading-none">
+    <select
+      v-model="season"
+      @change="filterSeason"
+      dir="rtl"
+      class="block appearance-none bg-transparent w-full px-4 pr-8 rounded-md cursor-pointer focus:outline-none group-hover:text-white"
+    >
+      <option v-for="(s, index) in seasons" :key="index" :value="s" class="bg-blue-800">Season {{ s }}</option>
+    </select>
+    <div
+      class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"
+    >
+      <svg class="w-4 h-4 text-blue-200 group-hover:text-white">
+        <use xlink:href="#caret-down" />
+      </svg>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  data() {
+    return {
+      season: null
+    }
+  },
+
+  computed: {
+    ...mapState({
+      currentseason: state => state.summoner.basic.currentSeason,
+      seasons: state => state.summoner.basic.seasons,
+    }),
+  },
+
+  created() {
+    this.season = this.currentseason
+  },
+
+  methods: {
+    filterSeason() {
+      console.log('filter season', this.season)
+    }
+  }
+}
+</script>
diff --git a/client/src/components/Summoner/HeaderLoader.vue b/client/src/components/Summoner/HeaderLoader.vue
index e5da336..168afa1 100644
--- a/client/src/components/Summoner/HeaderLoader.vue
+++ b/client/src/components/Summoner/HeaderLoader.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="text-white">
+  <div class="text-white pb-2">
     <div class="flex justify-between">
       <div style="width: 520px; height: 239px;">
         <content-loader
diff --git a/client/src/components/Summoner/Overview/OverviewLoader.vue b/client/src/components/Summoner/Overview/OverviewLoader.vue
index ae1a237..37e0d85 100644
--- a/client/src/components/Summoner/Overview/OverviewLoader.vue
+++ b/client/src/components/Summoner/Overview/OverviewLoader.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="mt-3 flex text-center">
-    <div class="mt-4 w-3/12">
+    <div class="w-3/12">
       <div class="bg-blue-850 rounded-lg" style="width: 300px; height: 339px;">
         <content-loader
           :height="339"
@@ -191,7 +191,8 @@
       <div
         v-for="index in 10"
         :key="index"
-        class="mt-4 ml-4 bg-blue-850 rounded-lg"
+        :class="{'mt-4': index !== 1}"
+        class="ml-4 bg-blue-850 rounded-lg"
         style="width: 884px; height: 144px;"
       >
         <content-loader
diff --git a/client/src/layouts/Default.vue b/client/src/layouts/Default.vue
index 2701105..d7182f0 100644
--- a/client/src/layouts/Default.vue
+++ b/client/src/layouts/Default.vue
@@ -62,33 +62,41 @@
               <RecentActivity :matches="basic.matchList" />
             </div>
           </div>
-          <!-- NAVIGATION -->
-          <router-link
-            :to="{ name: 'summoner', params: { region: $route.params.region, name: $route.params.name }}"
-            :class="isRouteActive('summoner')"
-            class="pb-2 border-b-2 border-transparent text-blue-300 cursor-pointer hover:text-blue-100"
-            exact
-          >overview</router-link>
-          <router-link
-            :to="{ name: 'summonerChampions', params: { region: $route.params.region, name: $route.params.name }}"
-            :class="isRouteActive('summonerChampions')"
-            class="ml-4 pb-2 border-b-2 border-transparent text-blue-300 cursor-pointer hover:text-blue-100"
-            exact
-          >champions</router-link>
-          <router-link
-            :to="{ name: 'summonerRecords', params: { region: $route.params.region, name: $route.params.name }}"
-            :class="isRouteActive('summonerRecords')"
-            class="ml-4 pb-2 border-b-2 border-transparent text-blue-300 cursor-pointer hover:text-blue-100"
-            exact
-          >records</router-link>
-          <router-link
-            :to="{ name: 'summonerLive', params: { region: $route.params.region, name: $route.params.name }}"
-            :class="isRouteActive('summonerLive')"
-            class="ml-4 pb-2 border-b-2 border-transparent text-blue-300 cursor-pointer hover:text-blue-100"
-            exact
-          >live game</router-link>
+          <div class="flex items-center justify-between">
+            <!-- NAVIGATION -->
+            <div class="pb-2">
+              <router-link
+                :to="{ name: 'summoner', params: { region: $route.params.region, name: $route.params.name }}"
+                :class="isRouteActive('summoner')"
+                class="pb-2 border-b-2 border-transparent text-blue-300 cursor-pointer hover:text-blue-100"
+                exact
+              >overview</router-link>
+              <router-link
+                :to="{ name: 'summonerChampions', params: { region: $route.params.region, name: $route.params.name }}"
+                :class="isRouteActive('summonerChampions')"
+                class="ml-4 pb-2 border-b-2 border-transparent text-blue-300 cursor-pointer hover:text-blue-100"
+                exact
+              >champions</router-link>
+              <router-link
+                :to="{ name: 'summonerRecords', params: { region: $route.params.region, name: $route.params.name }}"
+                :class="isRouteActive('summonerRecords')"
+                class="ml-4 pb-2 border-b-2 border-transparent text-blue-300 cursor-pointer hover:text-blue-100"
+                exact
+              >records</router-link>
+              <router-link
+                :to="{ name: 'summonerLive', params: { region: $route.params.region, name: $route.params.name }}"
+                :class="isRouteActive('summonerLive')"
+                class="ml-4 pb-2 border-b-2 border-transparent text-blue-300 cursor-pointer hover:text-blue-100"
+                exact
+              >live game</router-link>
+            </div>
+
+            <!-- Select Season -->
+            <FilterSeason />
+          </div>
         </template>
         <!-- View -->
+        
         <transition :name="tabTransition">
           <slot></slot>
         </transition>
@@ -110,6 +118,7 @@
 
 <script>
 import { mapState, mapActions, mapGetters } from 'vuex'
+import FilterSeason from '@/components/Summoner/FilterSeason.vue'
 import LazyBackground from '@/components/LazyBackgroundImage.vue'
 import MainFooter from '@/components/MainFooter.vue'
 import RecentActivity from '@/components/Summoner/RecentActivity.vue'
@@ -119,6 +128,7 @@ import SummonerRanked from '@/components/Summoner/SummonerRanked.vue'
 
 export default {
   components: {
+    FilterSeason,
     LazyBackground,
     MainFooter,
     RecentActivity,
diff --git a/client/src/store/modules/summoner.js b/client/src/store/modules/summoner.js
index 7fc9da9..f89b52e 100644
--- a/client/src/store/modules/summoner.js
+++ b/client/src/store/modules/summoner.js
@@ -6,8 +6,10 @@ export const namespaced = true
 export const state = {
   basic: {
     account: {},
+    currentSeason: 10,
     matchList: [],
     ranked: {},
+    seasons: [],
     status: '',
   },
   overview: {
@@ -79,6 +81,7 @@ export const mutations = {
     state.basic.account = infos.account
     state.basic.matchList = infos.matchList
     state.basic.ranked = infos.ranked
+    state.basic.seasons = infos.seasons
     state.basic.status = 'found'
     state.live.match = infos.current
     state.live.playing = infos.playing
diff --git a/client/src/views/Summoner.vue b/client/src/views/Summoner.vue
index a9712ce..1fd1494 100644
--- a/client/src/views/Summoner.vue
+++ b/client/src/views/Summoner.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="overviewLoaded" key="overview" class="mt-3 flex text-center">
-    <div class="mt-4 w-3/12">
+    <div class="w-3/12">
       <SummonerChampions />
       <SummonerStats />
       <SummonerMates />
@@ -15,6 +15,7 @@
             v-for="(match, index) in overview.matches"
             :key="index"
             :data="overview.matches[index]"
+            :index-match="index"
           />
         </ul>
         <LoadingButton
diff --git a/client/src/views/SummonerChampions.vue b/client/src/views/SummonerChampions.vue
index 360f1cb..997717e 100644
--- a/client/src/views/SummonerChampions.vue
+++ b/client/src/views/SummonerChampions.vue
@@ -1,6 +1,6 @@
 <template>
   <div key="champions" class="mt-3">
-    <div class="mt-4 flex items-center">
+    <div class="flex items-center">
       <ChampionsSearch @search-champions="updateSearch" />
       <FilterQueue @filter-queue="filterByQueue" :choices="queues" class="ml-4" />
     </div>
diff --git a/client/src/views/SummonerRecords.vue b/client/src/views/SummonerRecords.vue
index 81bd6f1..9ec4c2f 100644
--- a/client/src/views/SummonerRecords.vue
+++ b/client/src/views/SummonerRecords.vue
@@ -1,7 +1,7 @@
 <template>
-  <div key="records" class="mt-3">
+  <div key="records" class="">
     <template v-if="!recordsLoaded || (recordsLoaded && records.maxKda)">
-      <div class="mt-4">
+      <div class="">
         <div class="mx-4 text-blue-200 text-2xl border-b-2 border-blue-800 blue-900">basics</div>
         <div class="-mx-2 flex flex-wrap">
           <template v-if="recordsLoaded">
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index f70218d..fd24e08 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -488,7 +488,7 @@ module.exports = {
     stroke: ['responsive'],
     tableLayout: ['responsive'],
     textAlign: ['responsive'],
-    textColor: ['responsive', 'hover', 'focus'],
+    textColor: ['responsive', 'hover', 'focus', 'group-hover'],
     textDecoration: ['responsive', 'hover', 'focus'],
     textTransform: ['responsive'],
     userSelect: ['responsive'],