Merge branch '412-deleting-view-sometimes-keeps-showing-the-view' into 'develop'

Resolve "Deleting view sometimes keeps showing the view"

Closes #412

See merge request bramw/baserow!267

changelog.md

@@ -21,6 +21,7 @@
 * Removed URL field max length and fixed the backend failing hard because of that.
 * Fixed bug where the focus of an Editable component was not always during and after
   editing if the parent component had overflow hidden.
+* Fixed bug where the selected view would still be visible after deleting it.
 * Templates:
   * Lightweight CRM
   * Wedding Planning

web-frontend/modules/database/components/table/Table.vue

@@ -179,7 +179,6 @@ export default {
       required: true,
     },
     view: {
-      type: Object,
       required: true,
       validator: (prop) => typeof prop === 'object' || prop === undefined,
     },

web-frontend/modules/database/pages/table.vue

@@ -87,7 +87,7 @@ export default {
     // If a view id is provided and the table is selected we can select the view. The
     // views that belong to the table have already been fetched so we just need to
     // select the correct one.
-    if (viewId !== null) {
+    if (viewId !== null && viewId !== 0) {
       try {
         const { view } = await store.dispatch('view/selectById', viewId)
         data.view = view
@@ -141,6 +141,10 @@ export default {
   },
   methods: {
     selectedView(view) {
+      if (this.view && this.view.id === view.id) {
+        return
+      }
+
       this.$nuxt.$router.push({
         name: 'database-table',
         params: {

web-frontend/modules/database/store/view.js

@@ -4,7 +4,6 @@ import ViewService from '@baserow/modules/database/services/view'
 import FilterService from '@baserow/modules/database/services/filter'
 import SortService from '@baserow/modules/database/services/sort'
 import { clone } from '@baserow/modules/core/utils/object'
-import { DatabaseApplicationType } from '@baserow/modules/database/applicationTypes'
 
 export function populateFilter(filter) {
   filter._ = {
@@ -287,31 +286,41 @@ export const actions = {
   /**
    * Removes the view from the this store without making a delete request to the server.
    */
-  forceDelete({ commit, dispatch, rootGetters }, view) {
-    if (view._.selected) {
+  forceDelete({ commit, dispatch, getters, rootGetters }, view) {
+    // If the currently selected view is selected.
+    if (view._.selected && view.id === getters.getSelectedId) {
       commit('UNSELECT')
 
+      const route = this.$router.history.current
       const tableId = view.table.id
-      const applications = rootGetters['application/getAll']
-      let redirect = { name: 'dashboard' }
 
-      // Try to find the table and database id so we can redirect back to the table
-      // page. We might want to move this to a separate function.
-      applications.forEach((application) => {
-        if (application.type === DatabaseApplicationType.getType()) {
-          application.tables.forEach((table) => {
-            if (table.id === tableId) {
-              redirect = {
-                name: 'database-table',
-                params: { databaseId: application.id, tableId: table.id },
-              }
-            }
-          })
+      // If the current route is the same table as the deleting view.
+      if (
+        route.name === 'database-table' &&
+        parseInt(route.params.tableId) === tableId
+      ) {
+        // Check if there are any other views and figure out what the next selected
+        // view should be. This is always the first one in the list.
+        const otherViews = getters.getAll
+          .filter((v) => view.id !== v.id)
+          .sort((a, b) => a.order - b.order)
+        const nextView = otherViews.length > 0 ? otherViews[0] : null
+
+        if (nextView !== null) {
+          // If there is a next view, we can redirect to that page.
+          this.$router.replace({ params: { viewId: nextView.id } })
+        } else if (route.params.viewId) {
+          // If there isn't a next view and the user was already viewing a view, we
+          // need to redirect to the empty table page.
+          this.$router.replace({ params: { viewId: null } })
+        } else {
+          // If there isn't a next view and the user wasn't looking at a view, we need
+          // to refresh to show an empty table page. Changing the view id to 0,
+          // which never exists forces the table page to show empty. We have
+          // to do it this way because we can't navigate to the page without view.
+          this.$router.replace({ params: { viewId: '0' } })
         }
-      })
-
-      // If the database id wasn't found we redirect to the dashboard.
-      this.$router.push(redirect)
+      }
     }
 
     commit('DELETE_ITEM', view.id)
@@ -616,7 +625,10 @@ export const getters = {
     return state.items.find((item) => item.id === id)
   },
   first(state) {
-    return state.items.length > 0 ? state.items[0] : null
+    const items = state.items
+      .map((item) => item)
+      .sort((a, b) => a.order - b.order)
+    return items.length > 0 ? items[0] : null
   },
   getAll(state) {
     return state.items