Convert submenu to Vue (#4739)

* Convert submenu to Vue * Update display conditions for submenu + Remove unused /home/testRename submenu code * Make `curShowSlug` reactive, make show-selector `showSlug` prop reactive * VueRouter: Disable `not-found` redirection for now * Restore the submenu visibility check on `main.mako` * Add TODO, remove unused Python conversions * Review * Update CHANGELOG.md * Fix padding bug
pymedusa · Jul 26, 2018 · 6e9cfd2 · 6e9cfd2
1 parent 7c4679e
commit 6e9cfd2
Show file tree

Hide file tree

Showing 28 changed files with 487 additions and 374 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -16,7 +16,9 @@
 - Added a simple "Loading..." message while the page is loading ([#4629](https://github.com/pymedusa/Medusa/pull/4629))
 - Expanded episode status management capabilities, added support for Downloaded, Archived ([#4647](https://github.com/pymedusa/Medusa/pull/4647))
 - Added ability to manually change episode quality ([#4658](https://github.com/pymedusa/Medusa/pull/4658))
-- Converted the header to Vue ([#4519](https://github.com/pymedusa/Medusa/pull/4519))
+- Converted to Vue components:
+  - header ([#4519](https://github.com/pymedusa/Medusa/pull/4519))
+  - sub-menu ([#4739](https://github.com/pymedusa/Medusa/pull/4739))
 - _Simple message describing the improvement, and a link to the pull request._
 
 **Fixes**

diff --git a/medusa/server/web/core/schedule.py b/medusa/server/web/core/schedule.py
@@ -22,38 +22,9 @@ def index(self):
         results = ComingEpisodes.get_coming_episodes(ComingEpisodes.categories, app.COMING_EPS_SORT, False)
         today = datetime.datetime.now().replace(tzinfo=network_timezones.app_timezone)
 
-        submenu = [
-            {
-                'title': 'Sort by:',
-                'path': {
-                    'Date': 'schedule/setScheduleSort/?sort=date',
-                    'Show': 'schedule/setScheduleSort/?sort=show',
-                    'Network': 'schedule/setScheduleSort/?sort=network',
-                }
-            },
-            {
-                'title': 'Layout:',
-                'path': {
-                    'Banner': 'schedule/setScheduleLayout/?layout=banner',
-                    'Poster': 'schedule/setScheduleLayout/?layout=poster',
-                    'List': 'schedule/setScheduleLayout/?layout=list',
-                    'Calendar': 'schedule/setScheduleLayout/?layout=calendar',
-                }
-            },
-            {
-                'title': 'View Paused:',
-                'path': {
-                    'Hide': 'schedule/toggleScheduleDisplayPaused'
-                } if app.COMING_EPS_DISPLAY_PAUSED else {
-                    'Show': 'schedule/toggleScheduleDisplayPaused'
-                }
-            },
-        ]
-
         t = PageTemplate(rh=self, filename='schedule.mako')
-        return t.render(submenu=submenu[::-1], next_week=next_week1, today=today, results=results,
-                        layout=app.COMING_EPS_LAYOUT,
-                        controller='schedule', action='index')
+        return t.render(next_week=next_week1, today=today, results=results,
+                        layout=app.COMING_EPS_LAYOUT, controller='schedule', action='index')
 
     def toggleScheduleDisplayPaused(self):
         app.COMING_EPS_DISPLAY_PAUSED = not app.COMING_EPS_DISPLAY_PAUSED

diff --git a/medusa/server/web/home/handler.py b/medusa/server/web/home/handler.py
@@ -2081,14 +2081,7 @@ def testRename(self, indexername=None, seriesid=None):
             ep_obj_rename_list.reverse()
 
         t = PageTemplate(rh=self, filename='testRename.mako')
-        submenu = [{
-            'title': 'Edit',
-            'path': 'home/editShow?indexername={series_obj.indexer_name}&seriesid={series_obj.series_id}'.format(series_obj=series_obj),
-            'icon': 'ui-icon ui-icon-pencil'
-        }]
-
-        return t.render(submenu=submenu[::-1], ep_obj_list=ep_obj_rename_list,
-                        show=series_obj,
+        return t.render(ep_obj_list=ep_obj_rename_list, show=series_obj,
                         controller='home', action='previewRename')
 
     def doRename(self, indexername=None, seriesid=None, eps=None):

diff --git a/themes-default/slim/static/css/style.css b/themes-default/slim/static/css/style.css
@@ -187,16 +187,6 @@ inc_top.mako
     clear: both;
 }
 
-#sub-menu {
-    font-size: 12px;
-    padding-top: 2px;
-}
-
-#sub-menu > a {
-    float: right;
-    margin-left: 4px;
-}
-
 .upgrade-notification {
     text-align: center;
     margin-top: 20px;
@@ -1176,21 +1166,6 @@ div#col-show-summary {
     float: left;
 }
 
-@media (min-width: 1281px) {
-    #sub-menu-container {
-        position: fixed;
-        width: 100%;
-        top: 51px;
-    }
-}
-
-@media (max-width: 1281px) {
-    #sub-menu-container {
-        position: relative;
-        margin-top: -24px;
-    }
-}
-
 @media (max-width: 767px) and (min-width: 341px) {
     .container-navShow {
         margin-left: 305px;
@@ -2997,11 +2972,6 @@ fieldset[disabled] .navbar-default .btn-link:focus {
     height: auto;
 }
 
-#sub-menu-container {
-    z-index: 550;
-    min-height: 41px;
-}
-
 .shadow {
     box-shadow: 3px 3px 3px rgba(17, 17, 17, 0.5);
 }

diff --git a/themes-default/slim/static/js/common/init.js b/themes-default/slim/static/js/common/init.js
@@ -77,39 +77,6 @@ MEDUSA.common.init = function() {
         $(this).parent().find('.triggerhighlight').css('background-color', revertBackgroundColor); // Reverting back to original background-color
     });
 
-    $.confirm.options = {
-        confirmButton: 'Yes',
-        cancelButton: 'Cancel',
-        dialogClass: 'modal-dialog',
-        post: false,
-        confirm(e) {
-            location.href = e[0].href;
-        }
-    };
-
-    $('a.removeshow').confirm({
-        title: 'Remove Show',
-        text: 'Are you sure you want to remove <span class="footerhighlight">' + $('#showtitle').data('showname') + '</span> from the database?<br><br><input type="checkbox" id="deleteFiles"> <span class="red-text">Check to delete files as well. IRREVERSIBLE</span></input>',
-        confirm(e) {
-            location.href = e[0].href + (document.getElementById('deleteFiles').checked ? '&full=1' : '');
-        }
-    });
-
-    $('a.clearhistory').confirm({
-        title: 'Clear History',
-        text: 'Are you sure you want to clear all download history?'
-    });
-
-    $('a.trimhistory').confirm({
-        title: 'Trim History',
-        text: 'Are you sure you want to trim all download history older than 30 days?'
-    });
-
-    $('a.submiterrors').confirm({
-        title: 'Submit Errors',
-        text: 'Are you sure you want to submit these errors ?<br><br><span class="red-text">Make sure Medusa is updated and trigger<br> this error with debug enabled before submitting</span>'
-    });
-
     $('#config-components').tabs({
         activate(event, ui) {
             let lastOpenedPanel = $(this).data('lastOpenedPanel');

diff --git a/themes-default/slim/static/js/router.js b/themes-default/slim/static/js/router.js
@@ -60,9 +60,10 @@ if (!window.router) {
                 header: '404 - page not found'
             },
             component: notFoundComponent
-        }, {
-            path: '*',
-            redirect: '/not-found'
+        // @NOTE: Redirect can only be added once all routes are vue
+        // }, {
+        //     path: '*',
+        //     redirect: '/not-found'
         }])
     });
 

diff --git a/themes-default/slim/static/js/templates/show-selector.vue b/themes-default/slim/static/js/templates/show-selector.vue
@@ -22,7 +22,8 @@ module.exports = {
     },
     data() {
         return {
-            selectedShowSlug: this.showSlug
+            selectedShowSlug: this.showSlug,
+            lock: false
         };
     },
     computed: Object.assign(Vuex.mapState(['config', 'shows']), {
@@ -69,7 +70,15 @@ module.exports = {
         }
     }),
     watch: {
+        showSlug(newSlug) {
+            this.lock = true;
+            this.selectedShowSlug = newSlug;
+        },
         selectedShowSlug(newSlug) {
+            if (this.lock) {
+                this.lock = false;
+                return;
+            }
             const { shows } = this;
             const selectedShow = shows.find(show => show.id.slug === newSlug);
             if (!selectedShow) {

diff --git a/themes-default/slim/views/layouts/main.mako b/themes-default/slim/views/layouts/main.mako
@@ -61,7 +61,7 @@
 
             <app-header></app-header>
             % if submenu:
-            <%include file="/partials/submenu.mako"/>
+            <sub-menu></sub-menu>
             % endif
             <%include file="/partials/alerts.mako"/>
                <div id="content-row" class="row">
@@ -137,6 +137,7 @@
             Vue.component('file-browser', httpVueLoader('js/templates/file-browser.vue'));
             Vue.component('plot-info', httpVueLoader('js/templates/plot-info.vue'));
         </script>
+        <%include file="/vue-components/sub-menu.mako"/>
         <%include file="/vue-components/quality-chooser.mako"/>
         <script>
             Vue.component('language-select', httpVueLoader('js/templates/language-select.vue'));

diff --git a/themes-default/slim/views/partials/submenu.mako b/themes-default/slim/views/partials/submenu.mako