From da369edb5b5a24de8639a3228307a8344dfff37c Mon Sep 17 00:00:00 2001
From: Valentin Kaelin <kalanehd@gmail.com>
Date: Thu, 5 Dec 2019 21:24:13 +0100
Subject: [PATCH] fix: display error message if the summoner has no champions
 stats

---
 .../Summoner/Overview/SummonerChampions.vue   | 96 ++++++++++---------
 1 file changed, 51 insertions(+), 45 deletions(-)

diff --git a/client/src/components/Summoner/Overview/SummonerChampions.vue b/client/src/components/Summoner/Overview/SummonerChampions.vue
index d6bf734..ad5ca6a 100644
--- a/client/src/components/Summoner/Overview/SummonerChampions.vue
+++ b/client/src/components/Summoner/Overview/SummonerChampions.vue
@@ -30,52 +30,58 @@
         </Dropdown>
       </div>
     </div>
-    <div class="mt-3 px-4 flex items-baseline text-left text-sm text-blue-300 font-bold">
-      <div class="ml-2 w-champion text-base text-blue-400">Champion</div>
-      <div class="w-plays">plays</div>
-      <div class="w-winrate">winrate</div>
-      <div class="w-kda">kda</div>
+    <div v-if="stats.champion.length">
+      <div class="mt-3 px-4 flex items-baseline text-left text-sm text-blue-300 font-bold">
+        <div class="ml-2 w-champion text-base text-blue-400">Champion</div>
+        <div class="w-plays">plays</div>
+        <div class="w-winrate">winrate</div>
+        <div class="w-kda">kda</div>
+      </div>
+      <ul class="mt-1 text-sm text-gray-100 text-left">
+        <li
+          v-for="(champion, index) in stats.champion"
+          :key="index"
+          :class="[{'rounded-b-lg': index === stats.champion.length - 1}, {'bg-blue-760': index % 2 === 0}]"
+          class="relative flex items-center px-4 py-2 leading-tight"
+        >
+          <div class="absolute text-xs" style="left: 6px;">{{ index + 1 }}.</div>
+          <div class="ml-2 w-champion flex items-center">
+            <div
+              :style="{backgroundImage: `url('${champion.champion.icon}')`}"
+              class="w-8 h-8 bg-center bg-cover bg-blue-1000 rounded-full flex-shrink-0"
+            ></div>
+            <div class="mx-1 truncate">{{ champion.champion.name }}</div>
+          </div>
+          <div class="w-plays">
+            <div class="text-blue-400 text-xs">{{ champion.count }}</div>
+            <div
+              :style="{width: widthBar(champion.count, mostPlayed)}"
+              class="mt-2px bg-blue-400 rounded-full h-1"
+            ></div>
+          </div>
+          <div class="w-winrate">
+            <div class="text-green-400 text-xs">{{ champion.wins * 100 / champion.count|percent }}</div>
+            <div
+              :style="{width: widthBar(champion.wins, champion.count)}"
+              class="mt-2px bg-green-400 rounded-full h-1"
+            ></div>
+          </div>
+          <div class="w-kda">
+            <div
+              class="text-purple-400 text-xs"
+            >{{ kda(champion.kills, champion.deaths, champion.assists) }}</div>
+            <div
+              :style="{width: widthBar(kda(champion.kills, champion.deaths, champion.assists), bestKda)}"
+              class="mt-2px bg-purple-400 rounded-full h-1"
+            ></div>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <div v-else class="px-4 py-2">
+      <div>No champions have been found.</div>
+      <div>😕</div>
     </div>
-    <ul class="mt-1 text-sm text-gray-100 text-left">
-      <li
-        v-for="(champion, index) in stats.champion"
-        :key="index"
-        :class="[{'rounded-b-lg': index === stats.champion.length - 1}, {'bg-blue-760': index % 2 === 0}]"
-        class="relative flex items-center px-4 py-2 leading-tight"
-      >
-        <div class="absolute text-xs" style="left: 6px;">{{ index + 1 }}.</div>
-        <div class="ml-2 w-champion flex items-center">
-          <div
-            :style="{backgroundImage: `url('${champion.champion.icon}')`}"
-            class="w-8 h-8 bg-center bg-cover bg-blue-1000 rounded-full flex-shrink-0"
-          ></div>
-          <div class="mx-1 truncate">{{ champion.champion.name }}</div>
-        </div>
-        <div class="w-plays">
-          <div class="text-blue-400 text-xs">{{ champion.count }}</div>
-          <div
-            :style="{width: widthBar(champion.count, mostPlayed)}"
-            class="mt-2px bg-blue-400 rounded-full h-1"
-          ></div>
-        </div>
-        <div class="w-winrate">
-          <div class="text-green-400 text-xs">{{ champion.wins * 100 / champion.count|percent }}</div>
-          <div
-            :style="{width: widthBar(champion.wins, champion.count)}"
-            class="mt-2px bg-green-400 rounded-full h-1"
-          ></div>
-        </div>
-        <div class="w-kda">
-          <div
-            class="text-purple-400 text-xs"
-          >{{ kda(champion.kills, champion.deaths, champion.assists) }}</div>
-          <div
-            :style="{width: widthBar(kda(champion.kills, champion.deaths, champion.assists), bestKda)}"
-            class="mt-2px bg-purple-400 rounded-full h-1"
-          ></div>
-        </div>
-      </li>
-    </ul>
   </div>
 </template>