Feature/fix remove show (#9563)

* Send showRemove message to frontend.
* Don't redirect on show removal, as we want to handle that in the frontend, without page reloads.

* Remove show from store + localStorage on show removal.

* No need to use Vue.set for this.

* fix lint errors

* update changelog

CHANGELOG.md

@@ -6,6 +6,7 @@
 
 #### Fixes
 - Add support for new synology download station api. Credits to Benjv. ([9555](https://github.com/pymedusa/Medusa/pull/9555))
+- Fix shows not being removed from UI. ([9563](https://github.com/pymedusa/Medusa/pull/9563))
 
 -----
 

medusa/queues/show_queue.py

@@ -950,6 +950,9 @@ def run(self):
                 log.exception('Exception occurred while trying to delete show {show}, error: {error',
                               {'show': self.show.name, 'error': error})
 
+        # Send showRemoved to frontend, so we can remove it from localStorage.
+        ws.Message('QueueItemShowRemove', self.show.to_json(detailed=False)).push()  # Send ws update to client
+
         self.show.delete_show(full=self.full)
 
         self.finish()

medusa/server/web/home/handler.py

@@ -1042,9 +1042,6 @@ def deleteShow(self, showslug=None, full=0):
         # Remove show from 'RECENT SHOWS' in 'Shows' menu
         app.SHOWS_RECENT = [show for show in app.SHOWS_RECENT if show['showSlug'] != showslug]
 
-        # Don't redirect to the default page, so the user can confirm that the show was deleted
-        return self.redirect('/home/')
-
     def refreshShow(self, showslug=None):
         # @TODO: Replace with status=refresh from PATCH /api/v2/show/{id}
         identifier = SeriesIdentifier.from_slug(showslug)

themes-default/slim/src/components/sub-menu.vue

@@ -21,7 +21,8 @@
     </div>
 </template>
 <script>
-import { mapGetters } from 'vuex';
+import { apiRoute } from '../api';
+import { mapActions, mapGetters } from 'vuex';
 import { AppLink, ShowSelector } from './helpers';
 
 export default {
@@ -53,6 +54,9 @@ export default {
         }
     },
     methods: {
+        ...mapActions({
+            removeShow: 'removeShow'
+        }),
         clickEventCond(menuItem) {
             return menuItem.confirm ? 'click' : null;
         },
@@ -69,12 +73,24 @@ export default {
             };
 
             if (action === 'removeshow') {
-                const { getCurrentShow } = this;
+                const { getCurrentShow, removeShow, $router } = this;
                 options.title = 'Remove Show';
                 options.text = `Are you sure you want to remove <span class="footerhighlight">${getCurrentShow.title}</span> from the database?<br><br>
                                 <input type="checkbox" id="deleteFiles"> <span class="red-text">Check to delete files as well. IRREVERSIBLE</span>`;
-                options.confirm = $element => {
-                    window.location.href = $element[0].href + (document.querySelector('#deleteFiles').checked ? '&full=1' : '');
+                options.confirm = async () => {
+                    // Already remove show from frontend store + localStorage
+                    removeShow(getCurrentShow);
+
+                    const params = { showslug: getCurrentShow.id.slug };
+                    if (document.querySelector('#deleteFiles').checked) {
+                        params.full = 1;
+                    }
+
+                    // Start removal of show in backend
+                    await apiRoute.get('home/deleteShow', { params });
+
+                    // Navigate back to /home
+                    $router.push({ name: 'home', query: undefined });
                 };
             } else if (action === 'clearhistory') {
                 options.title = 'Clear History';

themes-default/slim/src/store/index.js

@@ -69,6 +69,8 @@ const passToStoreHandler = function(eventName, event, next) {
             this.store.dispatch('updateQueueItem', data);
         } else if (event === 'QueueItemShowAdd') {
             this.store.dispatch('updateShowQueueItem', data);
+        } else if (event === 'QueueItemShowRemove') {
+            this.store.dispatch('removeShow', data);
         } else if (event === 'historyUpdate') {
             this.store.dispatch('updateHistory', data);
         } else {

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

@@ -8,7 +8,8 @@ import {
     ADD_SHOWS,
     ADD_SHOW_EPISODE,
     ADD_SHOW_SCENE_EXCEPTION,
-    REMOVE_SHOW_SCENE_EXCEPTION
+    REMOVE_SHOW_SCENE_EXCEPTION,
+    REMOVE_SHOW
 } from '../mutation-types';
 
 /**
@@ -160,6 +161,11 @@ const mutations = {
             Vue.set(state.queueitems, state.queueitems.length, queueItem);
         }
     },
+    [REMOVE_SHOW](state, removedShow) {
+        state.shows = state.shows.filter(existingShow => removedShow.id.slug !== existingShow.id.slug);
+        // Update localStorage
+        localStorage.setItem('shows', JSON.stringify(state.shows));
+    },
     initShowsFromStore(state) {
         // Check if the ID exists
         if (localStorage.getItem('shows')) {
@@ -458,6 +464,10 @@ const actions = {
         // Update store's search queue item. (provided through websocket)
         const { commit } = context;
         return commit(ADD_SHOW_QUEUE_ITEM, queueItem);
+    },
+    removeShow({ commit }, show) {
+        // Remove the show from store and localStorage (provided through websocket)
+        return commit(REMOVE_SHOW, show);
     }
 };
 

themes-default/slim/src/store/mutation-types.js

@@ -33,6 +33,7 @@ const ADD_PROVIDER_CACHE = '⛽ Provider cache results added to store';
 const ADD_SEARCH_RESULTS = '⛽ New search results added for provider';
 const ADD_QUEUE_ITEM = '🔍 Search queue item updated';
 const ADD_SHOW_QUEUE_ITEM = '📺 Show queue item added to store';
+const REMOVE_SHOW = '📺 Show removed from store';
 const UPDATE_SHOWLIST_DEFAULT = '⚙️ Anime config showlist default updated';
 const ADD_SCHEDULE = '📅 Schedule information added';
 
@@ -72,6 +73,7 @@ export {
     ADD_SEARCH_RESULTS,
     ADD_QUEUE_ITEM,
     ADD_SHOW_QUEUE_ITEM,
+    REMOVE_SHOW,
     UPDATE_SHOWLIST_DEFAULT,
     ADD_SCHEDULE
 };