feat: add search input in champions tab

client/src/components/SVGContainer.vue

@@ -17,6 +17,7 @@
     <symbol id="rank-master" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88 88"><path d="M57 25c-7.4269-8.5723-13.5-15-13.5-15S37.4269 16.4277 30 25c3.7607-2.6881 8.4362-4.283 13.5-4.283 5.0638 0 9.7393 1.5949 13.5 4.283z" fill="#A5584E" /><path d="M56.6082 25.3539L85 10c0 15.3572-2.1852 30.7111-2.1852 30.7111l-17.4722 7.8974 15.2902 3.0701c-6.5525 4.3863-16.3812 12.0666-16.3812 20.8393l-12.0139-8.776C52.2377 65.9367 45.6852 78 43.5 78s-8.7377-12.0666-8.7377-14.2581c-1.0156 1.2438-12.0139 8.776-12.0139 8.776 0-8.776-9.8287-16.453-16.38119-20.8393l15.29019-3.0701-17.47215-7.8974S2 25.3539 2 10l28.3918 15.3539c-5.3042 4.0013-8.7344 10.3752-8.7344 17.552 0 8.7924 5.1502 16.3772 12.5873 19.8751 2.811 1.3228 5.9463 2.0599 9.2553 2.0599 12.0631 0 21.8426-9.8224 21.8426-21.9383 0-7.1768-3.4302-13.5474-8.7344-17.552v.0033z" fill="#A5584E" /><path d="M43.5 56C50.9554 56 57 50.1793 57 43s-6.0446-13-13.5-13S30 35.8207 30 43s6.0446 13 13.5 13z" fill="#9D48E0" /></symbol>
     <symbol id="rank-grandmaster" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88 88"><path d="M57.1993 25.3498C49.9397 16.5776 44.0033 10 44.0033 10s-5.9364 6.5776-13.196 15.3498c3.676-2.7507 8.2463-4.3828 13.196-4.3828 4.9498 0 9.52 1.6321 13.196 4.3828zm.0033.0033L88 10c0 15.3564-2.201 30.7096-2.201 30.7096L66 48.6066l17.598 3.07s-5.5008 12.066-23.0988 20.8383l-7.6985-8.7756c0 .0888-.0363.3159-.0891.6581-.3663 2.3098-1.5477 9.7758 2.2901 13.6026h-22c3.8443-3.8334 2.6497-11.3388 2.2867-13.6224-.0528-.329-.0891-.5528-.0891-.635-1.0229 1.2438-7.6985 8.7755-7.6985 8.7755C9.9028 63.7426 4.40198 51.6799 4.40198 51.6799L22 48.6099l-19.79901-7.897S0 25.3564 0 10.0033l30.7974 15.3531C25.4549 29.3576 22 35.7311 22 42.9076c0 8.792 5.1873 16.3764 12.678 19.8742 2.8312 1.3227 5.9892 2.0598 9.322 2.0598 12.15 0 22-9.822 22-21.9373 0-7.1764-3.4549-13.5467-8.7974-17.5512z" fill="#756572" /><path d="M43.5 56C50.4031 56 56 50.4031 56 43.5S50.4031 31 43.5 31 31 36.5969 31 43.5 36.5969 56 43.5 56z" fill="#CD4545" /></symbol>
     <symbol id="rank-challenger" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88 88"><path d="M56 24C49.1233 15.4277 43.5 9 43.5 9S37.8767 15.4277 31 24c3.4821-2.6881 7.8113-4.283 12.5-4.283S52.5179 21.3119 56 24z" fill="#F4C874" /><path d="M56.6025 23.8464L86 9c0 14.8495-2.1009 29.6959-2.1009 29.6959L65 46.3323l16.7981 2.9686s-7.3486 11.6677-22.0489 22.2727l-7.3486-10.605C52.4006 68.0036 46.1009 79 44 79c-2.1009 0-8.4006-11.0186-8.4006-18.0314-.9765 1.2028-7.3486 10.605-7.3486 10.605C13.5505 60.9686 6.20189 49.3009 6.20189 49.3009L23 46.3323 4.10095 38.6959S2 23.8464 2 9l29.3975 14.8464C26.2979 27.7155 23 33.8786 23 40.8182c0 8.5018 4.9516 15.8359 12.1017 19.2182 2.7026 1.2791 5.717 1.9918 8.8983 1.9918 11.5977 0 21-9.4977 21-21.2132 0-6.9395-3.2979-13.0995-8.3975-16.9718v.0032z" fill="#F4C874" /><path d="M44.5 54C51.4031 54 57 48.4031 57 41.5S51.4031 29 44.5 29 32 34.5969 32 41.5 37.5969 54 44.5 54z" fill="#3FBFDD" /></symbol>
+    <symbol id="search" class="fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z" /></symbol>
     <symbol id="time" class="stroke-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></symbol>
   </svg>
 </template>

client/src/components/SearchForm.vue

@@ -59,14 +59,8 @@
         class="absolute right-0 z-30 h-full hover:text-teal-200"
         type="submit"
       >
-        <svg
+        <svg class="absolute vertical-center horizontal-center w-4 h-4">
-          class="absolute vertical-center horizontal-center w-4 h-4 fill-current"
+          <use xlink:href="#search" />
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 512 512"
-        >
-          <path
-            d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
-          />
         </svg>
       </button>
     </div>

client/src/components/Summoner/Champions/ChampionsSearch.vue

@@ -0,0 +1,42 @@
+<template>
+  <Ripple color="rgba(44, 82, 130, 0.7)" class="relative inline-block rounded-lg bg-blue">
+    <input
+      v-model="championName"
+      @input="search"
+      class="input-color px-2 pl-10 py-2 rounded-lg outline-none focus:bg-blue-1000"
+      type="text"
+      placeholder="Search Champions"
+    />
+    <svg class="ml-3 absolute left-0 vertical-center w-4 h-4">
+      <use xlink:href="#search" />
+    </svg>
+  </Ripple>
+</template>
+
+<script>
+import Ripple from '@/components/Ripple.vue'
+
+export default {
+  components: {
+    Ripple,
+  },
+
+  data() {
+    return {
+      championName: ''
+    }
+  },
+
+  methods: {
+    search() {
+      this.$emit('search-champions', this.championName)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.input-color::placeholder {
+  color: #fff;
+}
+</style>

client/src/components/Summoner/Champions/ChampionsTable.vue

@@ -19,12 +19,12 @@
     </thead>
     <tbody class="bg-blue-760">
       <tr
-        v-for="(champion, index) in championsFull"
+        v-for="(champion, index) in championsToDisplay"
         :key="champion._id"
-        :class="{'rounded-b-lg': index === championsFull.length - 1}"
+        :class="{'rounded-b-lg': index === championsToDisplay.length - 1}"
       >
         <td
-          :class="{'rounded-bl-lg': index === championsFull.length - 1}"
+          :class="{'rounded-bl-lg': index === championsToDisplay.length - 1}"
           class="relative px-2 py-3 bg-blue-800 border-t-table border-t-table-70 text-white text-sm"
         >{{ champion.index + 1 }}</td>
         <td class="relative px-2 py-3 bg-blue-800 border-t-table text-white text-sm">
@@ -103,6 +103,10 @@ export default {
     champions: {
       type: Array,
       required: true
+    },
+    search: {
+      type: String,
+      default: ''
     }
   },
 
@@ -163,6 +167,7 @@ export default {
         }
       ],
       championsFull: [],
+      championsToDisplay: [],
       sortProps: 'index',
       order: -1
     }
@@ -174,6 +179,14 @@ export default {
     }
   },
 
+  watch: {
+    search() {
+      this.championsToDisplay = this.championsFull.filter(c => {
+        return c.champion.name.toLowerCase().includes(this.search.toLowerCase())
+      })
+    }
+  },
+
   mounted() {
     this.championsFull = this.champions.map((champ, index) => {
       return {
@@ -182,15 +195,18 @@ export default {
         playrate: champ.count * 100 / this.totalGames,
         kda: (champ.kills + champ.assists) / champ.deaths,
         index,
-        lastPlayed: timeDifference(champ.date)
+        lastPlayed: timeDifference(champ.date),
+        show: true
       }
     })
+
+    this.championsToDisplay = this.championsFull
   },
 
   methods: {
     bgColor(champion, rgb, stats) {
       const value = parseFloat(champion[stats])
-      const biggestValue = Math.max(...this.championsFull.map(c => parseFloat(c[stats])), 0)
+      const biggestValue = Math.max(...this.championsToDisplay.map(c => parseFloat(c[stats])), 0)
       const opacity = (value / biggestValue).toFixed(2)
 
       return {
@@ -205,7 +221,7 @@ export default {
         this.order = -1
       }
 
-      this.championsFull.sort((a, b) => {
+      this.championsToDisplay.sort((a, b) => {
         const aProp = props.split('.').reduce((p, c) => p && p[c] || null, a)
         const bProp = props.split('.').reduce((p, c) => p && p[c] || null, b)
         let order = aProp > bProp ? this.order : this.order * -1

client/src/views/SummonerChampions.vue

@@ -1,10 +1,12 @@
 <template>
   <div>
     <div class="mt-3 min-h-screen">
+      <ChampionsSearch @search-champions="updateSearch" class="mt-4" />
       <ChampionsTable
         v-if="champions.length && championsLoaded"
         :champions="champions"
-        class="mt-8"
+        :search="searchChampions"
+        class="mt-6"
       />
     </div>
   </div>
@@ -12,13 +14,21 @@
 
 <script>
 import { mapActions, mapState } from 'vuex'
+import ChampionsSearch from '@/components/Summoner/Champions/ChampionsSearch.vue'
 import ChampionsTable from '@/components/Summoner/Champions/ChampionsTable.vue'
 
 export default {
   components: {
+    ChampionsSearch,
     ChampionsTable,
   },
 
+  data() {
+    return {
+      searchChampions: ''
+    }
+  },
+
   computed: {
     ...mapState({
       champions: state => state.summoner.infos.champions,
@@ -34,6 +44,9 @@ export default {
   },
 
   methods: {
+    updateSearch(search) {
+      this.searchChampions = search
+    },
     ...mapActions('summoner', ['championStats']),
   }
 }