Add keep-alive to vue router router (#10408)

* Add keep-alive to vue router router

* Fix router-links with webroot

* Remove the render loop

* Prevent infinite loop in show-results.vue

* Fix creating urls

* Update layout when switching routes to 'home'

* Update changelog

* improve note.

* Fix changelog note.

CHANGELOG.md

@@ -3,6 +3,7 @@
 #### New Features
 
 #### Improvements
+- UI now behaves as a single page app ([10408](https://github.com/pymedusa/Medusa/pull/10408))
 
 #### Fixes
 

themes-default/slim/src/components/app.vue

@@ -2,7 +2,9 @@
     <div id="app">
         <vue-snotify />
         <h1 v-if="$route.meta.header" class="header">{{ $route.meta.header }}</h1>
-        <router-view :key="$route.meta.nocache ? $route.fullPath : $route.name" />
+        <keep-alive>
+            <router-view :key="$route.meta.nocache ? `${$route.fullPath}#${Date.now()}` : $route.name" />
+        </keep-alive>
     </div>
 </template>
 

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

@@ -554,7 +554,9 @@ export default {
                 return [];
             }
 
-            let sortedSeasons = show.seasons.sort((a, b) => a.season - b.season).filter(season => season.season !== 0);
+            const seasons = show.seasons.slice();
+
+            let sortedSeasons = seasons.sort((a, b) => a.season - b.season).filter(season => season.season !== 0);
 
             // Use the filterOverviewStatus to filter the data based on what's checked in the show-header.
             if (filterByOverviewStatus && filterByOverviewStatus.filter(status => status.checked).length < filterByOverviewStatus.length) {
@@ -574,7 +576,7 @@ export default {
             }
 
             if (invertTable) {
-                return sortedSeasons.reverse();
+                return sortedSeasons.slice().reverse();
             }
 
             return sortedSeasons;

themes-default/slim/src/components/helpers/app-link.vue

@@ -132,7 +132,7 @@ export default {
                         is: 'router-link',
                         to: matchingVueRoute.fullPath,
                         // Add a `href` attribute to enable native mouse navigation (middle click, ctrl+click, etc.)
-                        href: new URL(matchingVueRoute.fullPath, base).href
+                        href: new URL(matchingVueRoute.fullPath.replace(/^(\/)/, ''), base).href
                     };
                 }
             }

themes-default/slim/src/components/manage-searches.vue

@@ -87,8 +87,8 @@
                 <h3>Force refresh recommended list:</h3>
                 <span>
                     Note! Syncing shows with a recommended list may take a while.
-                    The action will be queued. For example staring a sync with Trakt and directly after Imdb.
-                    You will won't see results for Imdb after the sync of Trakt has fully completed.
+                    The action will be queued. For example, starting syncs for Trakt and Imdb.
+                    You will not see results for Imdb until after the sync of Trakt has finished.
                 </span>
                 <ul class="simpleList recommended-list">
                     <li><span @click="searchRecommendedShows('trakt')">Trakt</span></li>

themes-default/slim/src/components/show-list/poster.vue

@@ -287,6 +287,11 @@ export default {
                     container.classList.add('hide');
                 }
             }
+        },
+        $route(to) {
+            if (to.name === 'home') {
+                this.updateLayout();
+            }
         }
     }
 };

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

@@ -264,7 +264,7 @@ export default {
             let results = [];
 
             const getLastHistoryStatus = result => {
-                const sortedHistory = episodeHistory.sort(item => item.actionDate).reverse();
+                const sortedHistory = episodeHistory.splice().sort(item => item.actionDate).reverse();
                 for (const historyRow of sortedHistory) {
                     if (historyRow.resource === result.release && historyRow.size === result.size) {
                         return historyRow.statusName.toLocaleLowerCase();

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

@@ -249,7 +249,8 @@ const addShowRoutes = [
             title: 'Add Existing Shows',
             header: 'Add Existing Shows',
             topMenu: 'home',
-            converted: true
+            converted: true,
+            nocache: true
         },
         component: () => import('../components/new-shows-existing.vue')
     },
@@ -260,7 +261,8 @@ const addShowRoutes = [
             title: 'Add New Show',
             header: 'Add New Show',
             topMenu: 'home',
-            converted: true
+            converted: true,
+            nocache: true
         },
         props: route => ({ ...route.params }),
         component: () => import('../components/new-show.vue')

themes-default/slim/src/store/modules/shows.js

@@ -117,9 +117,12 @@ const mutations = {
         // Recreate an Array with season objects, with each season having an episodes array.
         // This format is used by vue-good-table (displayShow).
         episodes.forEach(episode => {
-            const existingSeason = newShow.seasons.find(season => season.season === episode.season);
+            let existingSeason = newShow.seasons.find(season => season.season === episode.season);
 
             if (existingSeason) {
+                // Shallow copy
+                existingSeason = { ...existingSeason };
+
                 const foundIndex = existingSeason.children.findIndex(element => element.slug === episode.slug);
                 if (foundIndex === -1) {
                     existingSeason.children.push(episode);