From 2445fe5fc12aead4484e361cbd62d74d5dfcdf79 Mon Sep 17 00:00:00 2001
From: Xevion <xevioni@yandex.com>
Date: Thu, 19 May 2022 10:33:49 -0500
Subject: [PATCH] Format all Vue components with ESLint rules

---
 src/components/CharacterBadges.vue | 12 ++--
 src/components/Episode.vue         | 92 ++++++++++++++++--------------
 src/components/Home.vue            | 16 +++---
 src/components/QuoteList.vue       | 28 ++++-----
 src/components/SearchResult.vue    | 30 ++++++----
 src/components/SearchResults.vue   |  2 +-
 src/components/Season.vue          | 26 +++++----
 src/components/SeasonList.vue      | 31 +++++-----
 src/components/Skeleton.vue        |  2 +-
 9 files changed, 133 insertions(+), 106 deletions(-)

diff --git a/src/components/CharacterBadges.vue b/src/components/CharacterBadges.vue
index 84a35a5..686e5fd 100644
--- a/src/components/CharacterBadges.vue
+++ b/src/components/CharacterBadges.vue
@@ -1,12 +1,16 @@
 <template>
-    <div class="pt-2" v-if="characters" :fluid="true">
-        <b-button squared class="mx-2 my-1 character-button" size="sm" v-for="(character, character_id) in characters"
-            :key="character.name" :id="`character-${character_id}`"
+    <div v-if="characters" class="pt-2" :fluid="true">
+        <b-button
+            v-for="(character, character_id) in characters" :id="`character-${character_id}`"
+            :key="character.name" squared
+            class="mx-2 my-1 character-button" size="sm"
             :title="`${character.appearances} Quote${character.appearances > 1 ? 's' : ''}`"
             :to="{ name: 'Character', params: { character: character_id } }"
         >
             {{ character.name }}
-            <b-badge class="ml-1">{{ character.appearances }}</b-badge>
+            <b-badge class="ml-1">
+                {{ character.appearances }}
+            </b-badge>
         </b-button>
     </div>
 </template>
diff --git a/src/components/Episode.vue b/src/components/Episode.vue
index 646436d..86e49c1 100644
--- a/src/components/Episode.vue
+++ b/src/components/Episode.vue
@@ -1,29 +1,35 @@
 <template>
     <div>
-        <b-breadcrumb v-if="ready" :items="breadcrumbs"></b-breadcrumb>
+        <b-breadcrumb v-if="ready" :items="breadcrumbs" />
         <b-card v-else class="breadcrumb-skeleton mb-3">
-            <Skeleton style="width: 40%;"></Skeleton>
+            <Skeleton style="width: 40%;" />
         </b-card>
         <b-card class="mb-4">
             <template v-if="ready">
-                <h3 class="card-title">"{{ episode.title }}"</h3>
+                <h3 class="card-title">
+                    "{{ episode.title }}"
+                </h3>
                 <span>{{ episode.description }}</span>
-                <CharacterBadges v-if="episode && episode.characters" :characters="episode.characters"></CharacterBadges>
+                <CharacterBadges v-if="episode && episode.characters" :characters="episode.characters" />
             </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>
+                <Skeleton style="width: 30%;" />
+                <Skeleton style="width: 70%; height: 60%;" />
+                <Skeleton style="width: 45%; height: 60%;" />
+                <Skeleton style="width: 69%; height: 40%;" />
             </template>
         </b-card>
         <div v-if="ready">
-            <b-card v-for="(scene, sceneIndex) in episode.scenes" :key="`scene-${sceneIndex}`"
-                    class="mb-1" body-class="p-0">
+            <b-card
+                v-for="(scene, sceneIndex) in episode.scenes" :key="`scene-${sceneIndex}`"
+                class="mb-1" body-class="p-0"
+            >
                 <b-card-text class="my-2">
-                    <QuoteList :quotes="scene.quotes" :sceneIndex="sceneIndex"></QuoteList>
-                    <span v-if="scene.deleted" class="mt-n2 mb-4 text-muted deleted-scene pl-2"
-                          :footer="`Deleted Scene ${scene.deleted}`">
+                    <QuoteList :quotes="scene.quotes" :scene-index="sceneIndex" />
+                    <span
+                        v-if="scene.deleted" class="mt-n2 mb-4 text-muted deleted-scene pl-2"
+                        :footer="`Deleted Scene ${scene.deleted}`"
+                    >
                         Deleted Scene {{ scene.deleted }}
                     </span>
                 </b-card-text>
@@ -70,36 +76,6 @@ export default {
         CharacterBadges,
         Skeleton,
     },
-    created() {
-        // When page loads directly on this Episode initially, fetch data
-        this.fetch();
-    },
-    watch: {
-        // When route changes, fetch data for current Episode route
-        $route() {
-            this.$nextTick(() => {
-                this.fetch();
-            })
-        },
-    },
-    methods: {
-        fetch() {
-            // Fetch the episode, then scroll - already fetched episode should scroll immediately
-            this.$store.dispatch(types.FETCH_EPISODE, {season: this.params.season, episode: this.params.episode})
-                .then(() => {
-                    // Force update, as for some reason it doesn't update naturally. I hate it too.
-                    this.$forceUpdate()
-
-                    // Scroll down to quote
-                    if (this.$route.hash) {
-                        this.$nextTick(() => {
-                            const section = document.getElementById(this.$route.hash.substring(1));
-                            this.$scrollTo(section, 500, {easing: "ease-in"});
-                        });
-                    }
-                });
-        }
-    },
     computed: {
         episode() {
             return this.$store.getters.getEpisode(this.params.season, this.params.episode)
@@ -137,6 +113,36 @@ export default {
                 }
             ]
         }
+    },
+    watch: {
+        // When route changes, fetch data for current Episode route
+        $route() {
+            this.$nextTick(() => {
+                this.fetch();
+            })
+        },
+    },
+    created() {
+        // When page loads directly on this Episode initially, fetch data
+        this.fetch();
+    },
+    methods: {
+        fetch() {
+            // Fetch the episode, then scroll - already fetched episode should scroll immediately
+            this.$store.dispatch(types.FETCH_EPISODE, {season: this.params.season, episode: this.params.episode})
+                .then(() => {
+                    // Force update, as for some reason it doesn't update naturally. I hate it too.
+                    this.$forceUpdate()
+
+                    // Scroll down to quote
+                    if (this.$route.hash) {
+                        this.$nextTick(() => {
+                            const section = document.getElementById(this.$route.hash.substring(1));
+                            this.$scrollTo(section, 500, {easing: "ease-in"});
+                        });
+                    }
+                });
+        }
     }
 };
 </script>
diff --git a/src/components/Home.vue b/src/components/Home.vue
index f1493ca..1741459 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -7,16 +7,16 @@
             <b-card-text>
                 A Vue.js application serving you {{ stats.totals.quote }} quotes from your
                 favorite show - The Office.
-                <br/>
+                <br>
                 Click on a Season and Episode on the left-hand sidebar to view quotes.
                 Search for quotes with the instant searchbox.
             </b-card-text>
         </template>
         <b-card-text v-else>
-            <Skeleton style="width: 45%"></Skeleton>
-            <Skeleton style="width: 75%"></Skeleton>
-            <Skeleton style="width: 60%"></Skeleton>
-            <Skeleton style="width: 60%"></Skeleton>
+            <Skeleton style="width: 45%" />
+            <Skeleton style="width: 75%" />
+            <Skeleton style="width: 60%" />
+            <Skeleton style="width: 60%" />
         </b-card-text>
     </b-card>
 </template>
@@ -35,6 +35,9 @@ export default {
             stats: null,
         };
     },
+    created() {
+        this.getStats();
+    },
     methods: {
         getStats() {
             const path = `${process.env.VUE_APP_API_URL}/api/stats/`;
@@ -49,8 +52,5 @@ export default {
                 });
         },
     },
-    created() {
-        this.getStats();
-    },
 };
 </script>
diff --git a/src/components/QuoteList.vue b/src/components/QuoteList.vue
index 8d81db2..a5e10c0 100644
--- a/src/components/QuoteList.vue
+++ b/src/components/QuoteList.vue
@@ -2,24 +2,26 @@
     <table class="quote-list px-3 w-100">
         <tr
             v-for="(quote, index) in quotes"
-            :key="`quote-${index}`"
             :id="`${sceneIndex}-${index}`"
+            :key="`quote-${index}`"
             :class="
-        $route.hash !== null &&
-        $route.hash.substring(1) === `${sceneIndex}-${index}`
-          ? 'highlight'
-          : ''
-      "
+                $route.hash !== null &&
+                    $route.hash.substring(1) === `${sceneIndex}-${index}`
+                    ? 'highlight'
+                    : ''
+            "
         >
-            <td class="quote-speaker pl-3" v-if="quote.speaker">
-        <span class="my-3">
-          {{ quote.speaker }}
-        </span>
+            <td v-if="quote.speaker" class="quote-speaker pl-3">
+                <span class="my-3">
+                    {{ quote.speaker }}
+                </span>
+            </td>
+            <td class="quote-text w-100 pr-3">
+                {{ quote.text }}
             </td>
-            <td class="quote-text w-100 pr-3">{{ quote.text }}</td>
             <td class="px-1 pl-2">
-                <a :href="quote_link(index)" @click="copy(index)" class="no-link">
-                    <b-icon icon="link45deg"></b-icon>
+                <a :href="quote_link(index)" class="no-link" @click="copy(index)">
+                    <b-icon icon="link45deg" />
                 </a>
             </td>
         </tr>
diff --git a/src/components/SearchResult.vue b/src/components/SearchResult.vue
index ce79db5..6fb9ea4 100644
--- a/src/components/SearchResult.vue
+++ b/src/components/SearchResult.vue
@@ -1,13 +1,17 @@
 <template>
-    <b-card class="mb-1" body-class="p-0 expandable-result" footer-class="my-1"
-            @mouseover="hoverOn" @mouseleave="hoverOff" v-on:click="toggleExpansion"
-            :class="[expanded ? 'expanded' : '']">
+    <b-card
+        class="mb-1" body-class="p-0 expandable-result"
+        footer-class="my-1"
+        :class="[expanded ? 'expanded' : '']" @mouseover="hoverOn"
+        @mouseleave="hoverOff"
+        @click="toggleExpansion"
+    >
         <b-card-text class="mu-2 py-1 mb-1">
             <table v-if="expanded" class="quote-list px-3 py-1 w-100">
                 <tr
                     v-for="(quote, index) in above"
-                    class="secondary"
                     :key="`quote-a-${index}`"
+                    class="secondary"
                 >
                     <td class="quote-speaker my-3 pl-3">
                         <div>{{ quote.speaker }}</div>
@@ -20,16 +24,16 @@
                     <td
                         class="quote-speaker my-3 pl-3"
                         v-html="item._highlightResult.speaker.value"
-                    ></td>
+                    />
                     <td
                         class="quote-text w-100 pr-3"
                         v-html="item._highlightResult.text.value"
-                    ></td>
+                    />
                 </tr>
                 <tr
                     v-for="(quote, index) in below"
-                    class="secondary"
                     :key="`quote-b-${index}`"
+                    class="secondary"
                 >
                     <td class="quote-speaker my-3 pl-3">
                         <div>{{ quote.speaker }}</div>
@@ -44,16 +48,18 @@
                     <td
                         class="quote-speaker my-3 pl-3"
                         v-html="item._highlightResult.speaker.value"
-                    ></td>
+                    />
                     <td
                         class="quote-text w-100 pr-3"
                         v-html="item._highlightResult.text.value"
-                    ></td>
+                    />
                 </tr>
             </table>
-            <router-link v-if="expanded" class="no-link search-result-link w-100 text-muted mb-2 ml-2"
-                         :to="{name: 'Episode', params: { season: item.season, episode: item.episode_rel },
-                            hash: `#${item.section_rel - 1}-${item.quote_rel - 1}`, }">
+            <router-link
+                v-if="expanded" class="no-link search-result-link w-100 text-muted mb-2 ml-2"
+                :to="{name: 'Episode', params: { season: item.season, episode: item.episode_rel },
+                      hash: `#${item.section_rel - 1}-${item.quote_rel - 1}`, }"
+            >
                 Season {{ item.season }} Episode {{ item.episode_rel }} Scene
                 {{ item.section_rel }}
             </router-link>
diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
index e273340..ad5ba1a 100644
--- a/src/components/SearchResults.vue
+++ b/src/components/SearchResults.vue
@@ -2,7 +2,7 @@
     <div>
         <ais-hits>
             <div slot-scope="{ items }">
-                <SearchResult v-for="item in items" :item="item" :key="item.objectID"></SearchResult>
+                <SearchResult v-for="item in items" :key="item.objectID" :item="item" />
             </div>
         </ais-hits>
     </div>
diff --git a/src/components/Season.vue b/src/components/Season.vue
index bb0636b..661c0f0 100644
--- a/src/components/Season.vue
+++ b/src/components/Season.vue
@@ -1,22 +1,26 @@
 <template>
     <div>
-        <b-breadcrumb :items="breadcrumbs"></b-breadcrumb>
+        <b-breadcrumb :items="breadcrumbs" />
         <b-card v-if="ready">
             <b-list-group>
                 <b-list-group-item v-for="episode in season.episodes" :key="episode.episode_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-img-lazy fluid-grow class="px-2" src="https://via.placeholder.com/250" />
                         </b-col>
                         <b-col>
                             <h4>
                                 {{ episode.title }}
-                                <router-link class="no-link"
-                                             :to="getEpisodeRoute(season.season_id, episode.episode_id)">
-                                    <b-icon class="h6" icon="caret-right-fill"></b-icon>
+                                <router-link
+                                    class="no-link"
+                                    :to="getEpisodeRoute(season.season_id, episode.episode_id)"
+                                >
+                                    <b-icon class="h6" icon="caret-right-fill" />
                                 </router-link>
                             </h4>
-                            <p class="pl-3">{{ episode.description }}</p>
+                            <p class="pl-3">
+                                {{ episode.description }}
+                            </p>
                         </b-col>
                     </b-row>
                 </b-list-group-item>
@@ -42,11 +46,6 @@ h4 {
 
 <script>
 export default {
-    methods: {
-        getEpisodeRoute(s, e) {
-            return {name: 'Episode', params: {season: s, episode: e}}
-        }
-    },
     computed: {
         ready() {
             return this.$store.state.preloaded;
@@ -66,6 +65,11 @@ export default {
         season() {
             return this.$store.state.quoteData[this.$route.params.season - 1];
         }
+    },
+    methods: {
+        getEpisodeRoute(s, e) {
+            return {name: 'Episode', params: {season: s, episode: e}}
+        }
     }
 }
 </script>
diff --git a/src/components/SeasonList.vue b/src/components/SeasonList.vue
index 1cc2a27..1ecef7a 100644
--- a/src/components/SeasonList.vue
+++ b/src/components/SeasonList.vue
@@ -1,35 +1,40 @@
 <template>
     <div class="accordion" role="tablist">
-        <b-card class="season-item" v-for="season in seasons" :key="season.season_id">
-            <b-card-header header-tag="header" role="tab" v-b-toggle="'accordion-' + season.season_id">
-                <a class="no-link align-items-center justify-content-between d-flex" v-if="isPreloaded">
+        <b-card v-for="season in seasons" :key="season.season_id" class="season-item">
+            <b-card-header v-b-toggle="'accordion-' + season.season_id" header-tag="header" role="tab">
+                <a v-if="isPreloaded" class="no-link align-items-center justify-content-between d-flex">
                     <h5 class="mb-0 pu-0 mu-0 season-title">
                         Season {{ season.season_id }}
                     </h5>
-                    <b-icon class="" icon="chevron-down"></b-icon>
+                    <b-icon class="" icon="chevron-down" />
                 </a>
-                <Skeleton v-else></Skeleton>
+                <Skeleton v-else />
             </b-card-header>
             <b-collapse :id="'accordion-' + season.season_id" accordion="accordion-season-list">
                 <b-card-body class="h-100 px-0">
                     <b-list-group>
                         <template v-for="(episode, index) in seasons[season.season_id - 1].episodes">
                             <template v-if="isPreloaded">
-                                <b-list-group-item class="no-link episode-item" :key="`rl-${episode.episode_id}`"
-                                                   :to="{name: 'Episode', params: { season: season.season_id, episode: episode.episode_id }, }"
-                                                   :id="`s-${season.season_id}-ep-${episode.episode_id}`">
+                                <b-list-group-item
+                                    :id="`s-${season.season_id}-ep-${episode.episode_id}`" :key="`rl-${episode.episode_id}`"
+                                    class="no-link episode-item"
+                                    :to="{name: 'Episode', params: { season: season.season_id, episode: episode.episode_id }, }"
+                                >
                                     Episode {{ episode.episode_id }} - "{{ episode.title }}"
                                 </b-list-group-item>
-                                <b-popover :key="`bpop-${episode.episode_id}`" triggers="hover"
-                                            placement="right" delay="25" :target="`s-${season.season_id}-ep-${episode.episode_id}`">
+                                <b-popover
+                                    :key="`bpop-${episode.episode_id}`" triggers="hover"
+                                    placement="right" delay="25"
+                                    :target="`s-${season.season_id}-ep-${episode.episode_id}`"
+                                >
                                     <template v-slot:title>
                                         {{ episode.title }}
                                     </template>
                                     {{ episode.description }}
                                 </b-popover>
                             </template>
-                            <b-list-group-item v-else class="no-link episode-item" :key="index">
-                                <Skeleton></Skeleton>
+                            <b-list-group-item v-else :key="index" class="no-link episode-item">
+                                <Skeleton />
                             </b-list-group-item>
                         </template>
                     </b-list-group>
@@ -57,9 +62,9 @@ export default {
             return this.$store.state.preloaded;
         }
     },
-    methods: {},
     created() {
         this.$store.dispatch(types.PRELOAD)
     },
+    methods: {},
 };
 </script>
diff --git a/src/components/Skeleton.vue b/src/components/Skeleton.vue
index 244a047..7882c4a 100644
--- a/src/components/Skeleton.vue
+++ b/src/components/Skeleton.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="outer-skeleton">
-        <div class="skeleton" :class="[animated ? undefined : 'no-animate']" :style="[style, inner_style]"></div>
+        <div class="skeleton" :class="[animated ? undefined : 'no-animate']" :style="[style, inner_style]" />
     </div>
 </template>
 <style lang="scss" scoped>