refactor: tidy up vue components folder

client/src/App.vue

@@ -12,8 +12,8 @@
 import { mapActions } from 'vuex'
 import Default from '@/layouts/Default.vue'
 import Home from '@/layouts/Home.vue'
-import NotificationsContainer from '@/components/NotificationsContainer.vue'
+import NotificationsContainer from '@/components/Global/NotificationsContainer.vue'
-import SVGContainer from '@/components/SVGContainer.vue'
+import SVGContainer from '@/components/Global/SVGContainer.vue'
 
 export default {
   components: {

client/src/components/Common/Tooltip.vue

@@ -3,16 +3,16 @@
     <!-- trigger -->
     <div
       ref="trigger"
-      @mouseenter="showDropdown"
+      @mouseenter="showTooltip"
       @mousemove="mousemove"
-      @mouseleave="hideDropdown"
+      @mouseleave="hideTooltip"
       :aria-expanded="isOpen"
       aria-haspopup="true"
     >
       <slot name="trigger"></slot>
     </div>
 
-    <!-- dropdown content -->
+    <!-- tooltip content -->
     <div
       v-show="isOpen"
       ref="content"
@@ -58,7 +58,7 @@ export default {
   },
 
   methods: {
-    checkDropdownVisibility() {
+    checkTooltipVisibility() {
       this.directionChecked = true
       const contentRect = this.$refs.content.getBoundingClientRect()
       const triggerRect = this.$refs.trigger.getBoundingClientRect()
@@ -74,7 +74,7 @@ export default {
     height() {
       return this.$refs.content ? this.$refs.content.clientHeight : 0
     },
-    hideDropdown() {
+    hideTooltip() {
       this.isOpen = false
       this.directionBottom = true
       this.directionRight = true
@@ -86,10 +86,10 @@ export default {
 
       if (!this.directionChecked) {
         await this.$nextTick()
-        this.checkDropdownVisibility()
+        this.checkTooltipVisibility()
       }
     },
-    showDropdown(event) {
+    showTooltip(event) {
       this.left = event.clientX
       this.top = event.clientY
       this.isOpen = true

client/src/components/Form/SearchForm.vue

@@ -69,7 +69,7 @@
 
 <script>
 import { mapActions, mapState } from 'vuex'
-import SearchFormDropdown from '@/components/SearchFormDropdown.vue'
+import SearchFormDropdown from '@/components/Form/SearchFormDropdown.vue'
 
 export default {
   components: {

client/src/components/Form/SearchFormDropdown.vue

@@ -44,7 +44,7 @@
 
 <script>
 import { mapState } from 'vuex'
-import SearchFormDropdownPlayer from '@/components/SearchFormDropdownPlayer.vue'
+import SearchFormDropdownPlayer from '@/components/Form/SearchFormDropdownPlayer.vue'
 
 export default {
   components: {

client/src/components/Global/NotificationsContainer.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import PopupNotification from '@/components/PopupNotification.vue'
+import PopupNotification from '@/components/Global/PopupNotification.vue'
 import { mapState } from 'vuex' 
 
 export default {

client/src/components/Match/DetailedMatch.vue

@@ -29,7 +29,7 @@
 import { mapState } from 'vuex'
 import DetailedMatchGlobalStats from '@/components/Match/DetailedMatchGlobalStats.vue'
 import DetailedMatchTeam from '@/components/Match/DetailedMatchTeam.vue'
-import SwitchToggle from '@/components/SwitchToggle.vue'
+import SwitchToggle from '@/components/Form/SwitchToggle.vue'
 
 export default {
   components: {

client/src/components/Match/DetailedMatchGlobalStats.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="allyTeam ? 'text-left' : 'text-right'">
     <div v-if="team.bans">
-      <Dropdown
+      <Tooltip
         v-for="ban in team.bans"
         :key="'ban-' + ban.pickTurn"
         :class="{'ml-2': ban.pickTurn !== 6 && ban.pickTurn !== 1}"
@@ -27,7 +27,7 @@
             <div>{{ ban.champion.id ? ban.champion.name : 'No ban' }}</div>
           </div>
         </template>
-      </Dropdown>
+      </Tooltip>
     </div>
     <div
       :class="allyTeam ? 'text-left' : 'text-right flex-row-reverse'"
@@ -73,11 +73,11 @@
 </template>
 
 <script>
-import Dropdown from '@/components/Dropdown'
+import Tooltip from '@/components/Common/Tooltip.vue'
 
 export default {
   components: {
-    Dropdown,
+    Tooltip,
   },
 
   props: {

client/src/components/Match/DetailedMatchTeam.vue

@@ -71,7 +71,7 @@
                 </div>
               </div>
               <div class="ml-1 flex flex-col justify-around">
-                <Dropdown>
+                <Tooltip>
                   <template v-slot:trigger>
                     <div
                       :style="{backgroundImage: `url(${player.firstSum ? player.firstSum.icon : null})`}"
@@ -91,8 +91,8 @@
                       </div>
                     </div>
                   </template>
-                </Dropdown>
+                </Tooltip>
-                <Dropdown>
+                <Tooltip>
                   <template v-slot:trigger>
                     <div
                       :style="{backgroundImage: `url(${player.secondSum ? player.secondSum.icon : null})`}"
@@ -114,7 +114,7 @@
                       </div>
                     </div>
                   </template>
-                </Dropdown>
+                </Tooltip>
               </div>
               <div class="ml-2px flex flex-col justify-around">
                 <div
@@ -204,14 +204,14 @@
 
 <script>
 import { mapState } from 'vuex'
-import DotsLoader from '@/components/DotsLoader'
+import DotsLoader from '@/components/Common/DotsLoader.vue'
-import Dropdown from '@/components/Dropdown'
+import Tooltip from '@/components/Common/Tooltip.vue'
-import MatchItems from '@/components/Match/MatchItems'
+import MatchItems from '@/components/Match/MatchItems.vue'
 
 export default {
   components: {
     DotsLoader,
-    Dropdown,
+    Tooltip,
     MatchItems,
   },
 

client/src/components/Match/Match.vue

@@ -127,7 +127,7 @@
           <div class="ml-auto flex flex-col items-center justify-center">
             <img class="w-5 h-5" src="@/assets/img/icons/Stopwatch.svg" alt="Stopwatch" />
             <div class="text-lg text-teal-400 font-medium">{{ data.time|secToTime }}</div>
-            <Dropdown>
+            <Tooltip>
               <template v-slot:trigger>
                 <div class="text-xs text-white font-medium">{{ data.date }}</div>
               </template>
@@ -140,7 +140,7 @@
                   <div>{{ data.fullDate.time }}</div>
                 </div>
               </template>
-            </Dropdown>
+            </Tooltip>
           </div>
         </div>
       </div>
@@ -151,15 +151,15 @@
 
 <script>
 import { mapActions, mapState, mapGetters } from 'vuex'
-import Dropdown from '@/components/Dropdown'
+import Tooltip from '@/components/Common/Tooltip.vue'
-import DetailedMatch from '@/components/Match/DetailedMatch'
+import DetailedMatch from '@/components/Match/DetailedMatch.vue'
-import MatchItems from '@/components/Match/MatchItems'
+import MatchItems from '@/components/Match/MatchItems.vue'
-import Ripple from '@/components/Ripple.vue'
+import Ripple from '@/components/Common/Ripple.vue'
 
 export default {
   components: {
     DetailedMatch,
-    Dropdown,
+    Tooltip,
     MatchItems,
     Ripple,
   },

client/src/components/Match/MatchItems.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="oneRow ? 'ml-2 items-center' : 'items-2-rows flex-wrap'" class="flex">
-    <Dropdown v-for="(item, index) in items" :key="index">
+    <Tooltip v-for="(item, index) in items" :key="index">
       <template v-slot:trigger>
         <div
           :style="{backgroundImage: item ? `url('${item.image}')` : null}"
@@ -24,16 +24,16 @@
           </div>
         </div>
       </template>
-    </Dropdown>
+    </Tooltip>
   </div>
 </template>
 
 <script>
-import Dropdown from '@/components/Dropdown.vue'
+import Tooltip from '@/components/Common/Tooltip.vue'
 
 export default {
   components: {
-    Dropdown
+    Tooltip
   },
 
   props: {

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

@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import Ripple from '@/components/Ripple.vue'
+import Ripple from '@/components/Common/Ripple.vue'
 
 export default {
   components: {

client/src/components/Summoner/Overview/SummonerChampions.vue

@@ -9,7 +9,7 @@
         <use xlink:href="#layers" />
       </svg>
       <div class="absolute right-0 top-0 mt-3 mr-2">
-        <Dropdown>
+        <Tooltip>
           <template v-slot:trigger>
             <svg class="w-4 h-4 cursor-pointer">
               <use xlink:href="#info" />
@@ -27,7 +27,7 @@
               </div>
             </div>
           </template>
-        </Dropdown>
+        </Tooltip>
       </div>
     </div>
     <div v-if="stats.champion.length">
@@ -87,11 +87,11 @@
 
 <script>
 import { mapState } from 'vuex'
-import Dropdown from '@/components/Dropdown.vue'
+import Tooltip from '@/components/Common/Tooltip.vue'
 
 export default {
   components: {
-    Dropdown,
+    Tooltip,
   },
 
   computed: {

client/src/components/Summoner/Overview/SummonerMates.vue

@@ -28,7 +28,7 @@
             >{{ mate.name }}</router-link>
             <div class="w-1/4">{{ mate.wins }} / {{ mate.losses }}</div>
             <div class="w-1/4">
-              <Dropdown>
+              <Tooltip>
                 <template v-slot:trigger>
                   <div class="bg-blue-900 rounded-full h-2 cursor-pointer">
                     <div
@@ -49,7 +49,7 @@
                     </div>
                   </div>
                 </template>
-              </Dropdown>
+              </Tooltip>
             </div>
           </li>
         </ul>
@@ -64,11 +64,11 @@
 
 <script>
 import { mapState } from 'vuex'
-import Dropdown from '@/components/Dropdown.vue'
+import Tooltip from '@/components/Common/Tooltip.vue'
 
 export default {
   components: {
-    Dropdown,
+    Tooltip,
   },
 
   data() {

client/src/components/Summoner/Overview/SummonerStats.vue

@@ -9,7 +9,7 @@
         <use xlink:href="#graph" />
       </svg>
       <div class="absolute right-0 top-0 mt-3 mr-2">
-        <Dropdown>
+        <Tooltip>
           <template v-slot:trigger>
             <svg class="w-4 h-4 cursor-pointer">
               <use xlink:href="#info" />
@@ -27,7 +27,7 @@
               </div>
             </div>
           </template>
-        </Dropdown>
+        </Tooltip>
       </div>
     </div>
     <div class="mt-2 flex items-center py-2">
@@ -36,7 +36,7 @@
         :key="index"
         class="flex flex-col items-center w-1/5"
       >
-        <Dropdown>
+        <Tooltip>
           <template v-slot:trigger>
             <div class="flex flex-col justify-end w-2 h-12 bg-blue-900 rounded-full cursor-pointer">
               <div
@@ -69,7 +69,7 @@
               >{{ calculateWinrate(role.wins, role.count).winrate|round }}%</div>
             </div>
           </template>
-        </Dropdown>
+        </Tooltip>
         <div
           :style="{backgroundImage: `url(${require('@/assets/img/roles/' + role.role + '.png')})`}"
           class="mt-1 w-4 h-4 bg-center bg-cover"
@@ -226,12 +226,12 @@
 
 <script>
 import { mapState } from 'vuex'
-import Dropdown from '@/components/Dropdown.vue'
+import Tooltip from '@/components/Common/Tooltip.vue'
 import { gameModes } from '@/data/data.js'
 
 export default {
   components: {
-    Dropdown,
+    Tooltip,
   },
 
   computed: {

client/src/components/Summoner/RecentActivity.vue

@@ -31,7 +31,7 @@
             class="ml-1 flex flex-col flex-wrap"
             style="width: calc(20px * 15); height: calc(20px * 7)"
           >
-            <Dropdown v-for="(day, index) in gridDays.slice(indexFirstMonday)" :key="day.timestamp">
+            <Tooltip v-for="(day, index) in gridDays.slice(indexFirstMonday)" :key="day.timestamp">
               <template v-slot:trigger>
                 <div
                   :class="[getCaseMargin(index), getCaseColor(day.matches)]"
@@ -46,7 +46,7 @@
                   </div>
                 </div>
               </template>
-            </Dropdown>
+            </Tooltip>
           </div>
         </div>
       </div>
@@ -55,11 +55,11 @@
 </template>
 
 <script>
-import Dropdown from '@/components/Dropdown.vue'
+import Tooltip from '@/components/Common/Tooltip.vue'
 
 export default {
   components: {
-    Dropdown,
+    Tooltip,
   },
 
   props: {

client/src/components/Summoner/Records/RecordCard.vue

@@ -32,6 +32,7 @@
 
 <script>
 import { timeDifference } from '@/helpers/functions.js'
+
 export default {
   props: {
     color: {

client/src/layouts/Default.vue

@@ -127,10 +127,10 @@
 <script>
 import { mapState, mapActions, mapGetters } from 'vuex'
 import FilterSeason from '@/components/Summoner/FilterSeason.vue'
-import LazyBackground from '@/components/LazyBackgroundImage.vue'
+import LazyBackground from '@/components/Common/LazyBackgroundImage.vue'
-import MainFooter from '@/components/MainFooter.vue'
+import MainFooter from '@/components/Layout/MainFooter.vue'
 import RecentActivity from '@/components/Summoner/RecentActivity.vue'
-import SearchForm from '@/components/SearchForm.vue'
+import SearchForm from '@/components/Form/SearchForm.vue'
 import HeaderLoader from '@/components/Summoner/HeaderLoader.vue'
 import SummonerRanked from '@/components/Summoner/SummonerRanked.vue'
 

client/src/views/Home.vue

@@ -24,8 +24,8 @@
 </template>
 
 <script>
-import LazyBackground from '@/components/LazyBackgroundImage.vue'
+import LazyBackground from '@/components/Common/LazyBackgroundImage.vue'
-import SearchForm from '@/components/SearchForm.vue'
+import SearchForm from '@/components/Form/SearchForm.vue'
 
 export default {
   components: {

client/src/views/Summoner.vue

@@ -6,7 +6,7 @@
       <SummonerMates />
     </div>
     <div class="w-9/12">
-      <div v-if="current" class="mb-4">
+      <div v-if="current && current.participants" class="mb-4">
         <LiveMatch />
       </div>
       <div v-if="overview.matches.length">
@@ -36,7 +36,7 @@
 <script>
 import { mapState, mapActions, mapGetters } from 'vuex'
 import LiveMatch from '@/components/Match/LiveMatch.vue'
-import LoadingButton from '@/components/LoadingButton.vue'
+import LoadingButton from '@/components/Form/LoadingButton.vue'
 import Match from '@/components/Match/Match.vue'
 import OverviewLoader from '@/components/Summoner/Overview/OverviewLoader.vue'
 import SummonerChampions from '@/components/Summoner/Overview/SummonerChampions.vue'