recycle bin update display upon trash/restore

src/components/pages/RecycleBin.vue

@@ -524,13 +524,21 @@ export default {
     closeSheetAndPermanentDeleteSession(item) { this.showSessionMenuSheet = false; this.selectedSessionForMenu = null; this.selectedSessionForPermanentDelete = item; this.remove_permanently_session_dialog = true; },
     closeSheetAndRestoreTrial(item) { this.showTrialMenuSheet = false; this.selectedTrialForMenu = null; this.selectedTrialForRestore = item; this.restore_trial_dialog = true; },
     closeSheetAndPermanentDeleteTrial(item) { this.showTrialMenuSheet = false; this.selectedTrialForMenu = null; this.selectedTrialForPermanentDelete = item; this.remove_permanently_trial_dialog = true; },
+    removeSessionFromRecycleBin(id) {
+      const index = this.trashed_sessions.findIndex(session => session.id === id);
+      if (index >= 0) {
+        this.trashed_sessions.splice(index, 1);
+        this.session_total = Math.max(0, this.session_total - 1);
+      }
+
+      if (this.selected && this.selected.id === id) {
+        this.selected = null;
+      }
+    },
     async permanentRemoveSession(id) {
       try {
         await this.permanentRemoveExistingSession(id);
-        if (this.selected && this.selected.id === id) {
-          this.selected = null;
-        }
-        this.loadTrashedSessions();
+        this.removeSessionFromRecycleBin(id);
       } catch (error) {
         apiError(error)
       }
@@ -550,21 +558,46 @@ export default {
             Vue.set(this.selected.trials, index, data);
         }
     },
+    getRecycleBinTrials(session) {
+      if (!session || !session.trials) {
+        return []
+      }
+
+      return session.trashed
+        ? session.trials
+        : session.trials.filter(trial => trial.trashed)
+    },
+    syncSelectedSessionInRecycleBin() {
+      if (!this.selected) {
+        return
+      }
+
+      const recycleBinTrials = this.getRecycleBinTrials(this.selected)
+      const sessionIndex = this.trashed_sessions.findIndex(session => session.id === this.selected.id)
+
+      if (!this.selected.trashed && recycleBinTrials.length === 0) {
+        this.removeSessionFromRecycleBin(this.selected.id)
+        return
+      }
+
+      if (sessionIndex >= 0) {
+        Vue.set(this.trashed_sessions, sessionIndex, {
+          ...this.trashed_sessions[sessionIndex],
+          ...this.selected,
+          isMenuOpen: false,
+          trials_count: recycleBinTrials.length,
+        })
+      }
+    },
     async permanentRemoveTrial(trial) {
       try {
         if (this.selected && this.selected.trials) {
           const index = this.selected.trials.findIndex(x => x.id === trial.id);
           await axios.post(`/trials/${trial.id}/permanent_remove/`);
-          this.selected.trials.splice(index, 1);
-          // If session now has no trials, remove it from the left panel so it disappears without reload
-          if (this.selected.trials.length === 0) {
-            const sessionIndex = this.trashed_sessions.findIndex(s => s.id === this.selected.id);
-            if (sessionIndex >= 0) {
-              this.trashed_sessions.splice(sessionIndex, 1);
-              this.session_total = Math.max(0, this.session_total - 1);
-            }
-            this.selected = null;
+          if (index >= 0) {
+            this.selected.trials.splice(index, 1);
           }
+          this.syncSelectedSessionInRecycleBin()
         }
       } catch (error) {
         apiError(error)
@@ -574,6 +607,7 @@ export default {
       try {
         const { data } = await axios.post(`/trials/${trial.id}/restore/`);
         await this.updateTrialWithData(trial, data);
+        this.syncSelectedSessionInRecycleBin()
       } catch (error) {
         apiError(error)
       }