From 496f588f145651fc584f2233fa66beb36c178bfb Mon Sep 17 00:00:00 2001
From: Xevion <xevioni@yandex.com>
Date: Thu, 17 Sep 2020 14:35:27 -0500
Subject: [PATCH] copy link/blue carets from Season.vue to Character, fix
 unimported Skeleton componenet, fix Season breadcrumbs not showing name for
 characters with null name fields

---
 client/src/components/Character.vue  |  2 +-
 client/src/components/Characters.vue | 69 ++++++++++++++++++++--------
 2 files changed, 52 insertions(+), 19 deletions(-)

diff --git a/client/src/components/Character.vue b/client/src/components/Character.vue
index 7c758c0..aee8a9e 100644
--- a/client/src/components/Character.vue
+++ b/client/src/components/Character.vue
@@ -58,7 +58,7 @@ export default {
                 {
                     text:
                         this.character !== null && this.character !== undefined
-                            ? this.character.name
+                            ? this.character.name || this.$route.params.character
                             : this.$route.params.character,
                     active: true,
                 },
diff --git a/client/src/components/Characters.vue b/client/src/components/Characters.vue
index 9273c72..3317451 100644
--- a/client/src/components/Characters.vue
+++ b/client/src/components/Characters.vue
@@ -1,29 +1,56 @@
 <template>
-    <b-card v-if="ready">
-        <b-list-group>
-            <b-list-group-item v-for="(character, character_id) in characters" :key="character_id">
-                <b-row align-v="start" align-content="start">
-                    <b-col cols="5" md="4" lg="4" xl="3">
-                        <b-img-lazy fluid-grow class="px-2" src="https://via.placeholder.com/250"></b-img-lazy>
-                    </b-col>
-                    <b-col>
-                        <h4>
-                            {{ character.name || character_id }}
-                        </h4>
-                        <p class="pl-3">{{ character.summary }}</p>
-                    </b-col>
-                </b-row>
-            </b-list-group-item>
-        </b-list-group>
-    </b-card>
+    <div>
+        <b-breadcrumb v-if="ready" :items="breadcrumbs"></b-breadcrumb>
+        <b-card v-else class="breadcrumb-skeleton mb-3">
+            <Skeleton style="width: 40%;"></Skeleton>
+        </b-card>
+        <b-card v-if="ready">
+            <b-list-group>
+                <b-list-group-item v-for="(character, character_id) in characters" :key="character_id">
+                    <b-row align-v="start" align-content="start">
+                        <b-col cols="5" md="4" lg="4" xl="3">
+                            <b-img-lazy fluid-grow class="px-2" src="https://via.placeholder.com/250"></b-img-lazy>
+                        </b-col>
+                        <b-col>
+                            <h4>
+                                {{ character.name || character_id }}
+                                <router-link class="no-link"
+                                             :to="{ name: 'Character', params: {character: character_id} }">
+                                    <b-icon class="h6" icon="caret-right-fill"></b-icon>
+                                </router-link>
+                            </h4>
+                            <p class="pl-3">{{ character.summary }}</p>
+                        </b-col>
+                    </b-row>
+                </b-list-group-item>
+            </b-list-group>
+        </b-card>
+    </div>
 </template>
-<style scoped>
+
+<style lang="scss" scoped>
+h4 {
+    .b-icon {
+        font-size: 0.9rem;
+        vertical-align: middle !important;
+        position: relative;
+        top: 3px;
+        color: #007fe0;
+        &:hover {
+            color: darken(#007fe0, 10%);
+        }
+    }
+}
 </style>
 
 <script>
 import {types} from "@/mutation_types";
+import Skeleton from "@/components/Skeleton.vue";
 
 export default {
+    components: {
+        Skeleton
+    },
     created() {
         this.$store.dispatch(types.PRELOAD_CHARACTER)
             .then(() => {
@@ -37,6 +64,12 @@ export default {
         },
         characters() {
             return this.$store.state.characters;
+        },
+        breadcrumbs() {
+            return [
+                {text: 'Home', to: {name: 'Home'}},
+                {text: 'Characters', active: true}
+            ]
         }
     }
 }