Add new property to routes.js nocache to make sure that edit-show.v… (

#8556)

* Add new property to routes.js `nocache` to make sure that edit-show.vue and display-show.vue are not cached.
This will gaurentee that these components are cached per show, and mounted is always called.

* Update vendors.js

themes-default/slim/src/components/display-show.vue

@@ -644,6 +644,8 @@ export default {
             setInputValidInvalid
         } = this;
 
+        this.loadShow();
+
         ['load', 'resize'].map(event => {
             return window.addEventListener(event, () => {
                 this.reflowLayout();
@@ -725,7 +727,7 @@ export default {
             setRecentShow: 'setRecentShow'
         }),
         async loadShow() {
-            const { setCurrentShow, id, indexer, getShow } = this;
+            const { setCurrentShow, id, indexer, initializeEpisodes, getShow } = this;
             // We need detailed info for the xem / scene exceptions, so let's get it.
             await getShow({ id, indexer, detailed: true });
 
@@ -735,6 +737,9 @@ export default {
                 indexer,
                 id
             });
+
+            // Load all episodes
+            initializeEpisodes();
         },
         statusQualityUpdate(event) {
             const { selectedEpisodes, setStatus, setQuality } = this;
@@ -1256,22 +1261,12 @@ export default {
     },
     watch: {
         'show.id.slug': function(slug) { // eslint-disable-line object-shorthand
-            const { initializeEpisodes } = this;
             // Show's slug has changed, meaning the show's page has finished loading.
             if (slug) {
                 // This is still technically jQuery. Meaning whe're still letting jQuery do its thing on the entire dom.
                 updateSearchIcons(slug, this);
-                initializeEpisodes();
             }
         }
-    },
-    beforeRouteEnter(to, from, next) {
-        next(vm => {
-            // Access to component instance via `vm`.
-            // When moving from editShow to displayShow we might not have loaded the episodes yet.
-            // The watch on show.id.slug will also not be triggered.
-            vm.loadShow();
-        });
     }
 };
 </script>

themes-default/slim/src/components/edit-show.vue

@@ -372,14 +372,16 @@ export default {
         }),
         loadShow() {
             const { setCurrentShow, id, indexer, getShow } = this;
+
+            // We need detailed info for the xem / scene exceptions, so let's get it.
+            getShow({ id, indexer, detailed: true });
+
             // Let's tell the store which show we currently want as current.
+            // Run this after getShow(), as it will trigger the initializeEpisodes() method.
             setCurrentShow({
                 indexer,
                 id
             });
-
-            // We need detailed info for the xem / scene exceptions, so let's get it.
-            getShow({ id, indexer, detailed: true });
         },
         async saveShow(subject) {
             const { show, showLoaded } = this;

themes-default/slim/src/components/helpers/config-scene-exceptions.vue

@@ -95,6 +95,11 @@ export default {
     computed: {
         availableSeasons() {
             const { show } = this;
+            const { seasonCount } = show;
+
+            if (!seasonCount) {
+                return [];
+            }
 
             return [
                 ...[{ value: -1, description: 'Show Exception' }],

themes-default/slim/src/components/helpers/show-selector.vue

@@ -82,32 +82,22 @@ export default {
         showSlug(newSlug) {
             this.selectedShowSlug = newSlug;
         },
-        async selectedShowSlug(newSlug) {
+        selectedShowSlug(newSlug) {
             if (!this.followSelection) {
                 return;
             }
 
-            const { $store, shows } = this;
+            const { shows } = this;
             const selectedShow = shows.find(show => show.id.slug === newSlug);
             if (!selectedShow) {
                 return;
             }
-            const indexerName = selectedShow.indexer;
-            const seriesId = selectedShow.id[indexerName];
 
-            // Get detailed show information. We need to wait for this, in order for the watch('show.id.slug') in displayShow
-            // to have the detailed show information.
-            await $store.dispatch('getShow', { id: seriesId, indexer: indexerName, detailed: true });
-
-            // Make sure the correct show, has been set as current show.
-            console.debug(`Setting current show to ${selectedShow.title}`);
-            $store.commit('currentShow', {
-                indexer: indexerName,
-                id: seriesId
-            });
+            const indexername = selectedShow.indexer;
+            const seriesid = String(selectedShow.id[indexername]);
 
             // To make it complete, make sure to switch route.
-            this.$router.push({ query: { indexername: indexerName, seriesid: String(seriesId) } });
+            this.$router.push({ query: { indexername, seriesid } });
         }
     }
 };

themes-default/slim/src/router/routes.js

@@ -23,7 +23,8 @@ const homeRoutes = [
         meta: {
             topMenu: 'home',
             subMenu: showSubMenu,
-            converted: true
+            converted: true,
+            nocache: true // Use this flag, to have the router-view use :key="$route.fullPath"
         },
         component: () => import('../components/edit-show.vue')
     },
@@ -33,7 +34,8 @@ const homeRoutes = [
         meta: {
             topMenu: 'home',
             subMenu: showSubMenu,
-            converted: true
+            converted: true,
+            nocache: true // Use this flag, to have the router-view use :key="$route.fullPath"
         },
         component: () => import('../components/display-show.vue')
     },
@@ -43,7 +45,8 @@ const homeRoutes = [
         meta: {
             topMenu: 'home',
             subMenu: showSubMenu,
-            converted: true
+            converted: true,
+            nocache: true // Use this flag, to have the router-view use :key="$route.fullPath"
         },
         component: () => import('../components/snatch-selection.vue')
     },

themes-default/slim/views/index.mako

@@ -10,5 +10,5 @@
 <%block name="content">
 <vue-snotify></vue-snotify>
 <h1 v-if="$route.meta.header" class="header">{{ $route.meta.header }}</h1>
-<router-view></router-view>
+<router-view :key="$route.meta.nocache ? $route.fullPath : $route.name"></router-view>
 </%block>