From 1d109a8ab1fab4fcb20d0d7c532b6872a20ed47c Mon Sep 17 00:00:00 2001
From: Xevion <xevioni@yandex.com>
Date: Fri, 11 Sep 2020 13:05:27 -0500
Subject: [PATCH] change episode title format, add skeleton loaders &
 breadcrumbs component

---
 client/src/components/Episode.vue | 67 ++++++++++++++++++++++++-------
 1 file changed, 52 insertions(+), 15 deletions(-)

diff --git a/client/src/components/Episode.vue b/client/src/components/Episode.vue
index cfd729b..e22f907 100644
--- a/client/src/components/Episode.vue
+++ b/client/src/components/Episode.vue
@@ -1,19 +1,23 @@
 <template>
     <div>
-        <b-card
-            :title="`Season ${this.$route.params.season} Episode ${
-        this.$route.params.episode
-      } \
-        - ${episode != null ? episode.title : ''}`"
-            class="mb-4"
-        >
-      <span v-if="episode">
-        {{ episode.description }}
-      </span>
-            <CharacterList
-                v-if="episode && episode.characters"
-                :characters="episode.characters"
-            ></CharacterList>
+        <b-breadcrumb :items="breadcrumbs"></b-breadcrumb>
+        <b-card class="mb-4">
+            <template v-if="episode !== null">
+                <h3>"{{ episode.title }}"</h3>
+                <span v-if="episode">
+                {{ episode.description }}
+            </span>
+                <CharacterList
+                    v-if="episode && episode.characters"
+                    :characters="episode.characters"
+                ></CharacterList>
+            </template>
+            <template v-else>
+                <Skeleton style="width: 30%;"></Skeleton>
+                <Skeleton style="width: 70%; height: 60%;"></Skeleton>
+                <Skeleton style="width: 45%; height: 60%;"></Skeleton>
+                <Skeleton style="width: 69%; height: 40%;"></Skeleton>
+            </template>
         </b-card>
         <div v-if="episode != null">
             <b-card
@@ -56,12 +60,14 @@
 import axios from "axios";
 import QuoteList from "./QuoteList.vue";
 import CharacterList from "./CharacterList.vue";
+import Skeleton from './Skeleton.vue';
 
 export default {
     name: "Episode",
     components: {
         QuoteList,
         CharacterList,
+        Skeleton,
     },
     data() {
         return {
@@ -95,8 +101,39 @@ ${this.$route.params.season}/${this.$route.params.episode}/`;
     },
     watch: {
         $route() {
-            this.getEpisode();
+            this.episode = null;
+            this.$nextTick(() => {
+                this.getEpisode();
+            })
         },
     },
+    computed: {
+        breadcrumbs() {
+            return [
+                {
+                    text: 'Home',
+                    to: {
+                        name: 'Home'
+                    }
+                },
+                {
+                    text: `Season ${this.$route.params.season}`,
+                    to: {
+                        name: 'Season',
+                        season: this.$route.params.season
+                    }
+                },
+                {
+                    text: `Episode ${this.$route.params.episode}`,
+                    to: {
+                        name: 'Episode',
+                        season: this.$route.params.season,
+                        episode: this.$route.params.episode
+                    },
+                    active: true
+                }
+            ]
+        }
+    }
 };
 </script>