Improve "back" functionality #92

fda-ui/components/TableList.vue

@@ -85,8 +85,9 @@
           </v-row>
           <v-row dense>
             <v-col>
-              <v-btn color="blue-grey" class="white--text" :to="`/container/${$route.params.container_id}/database/${$route.params.database_id}/table/${item.id}`">
-                More
+              <v-btn outlined :to="`/container/${$route.params.container_id}/database/${$route.params.database_id}/table/${item.id}`">
+                <v-icon>mdi-table</v-icon>
+                View
               </v-btn>
             </v-col>
             <v-col class="align-right">
@@ -176,7 +177,8 @@ export default {
   },
   mounted () {
     this.$root.$on('table-create', this.refresh)
-    this.refresh()
+    const table = this.$store.state.table
+    this.refresh(table ? table.id : null)
   },
   methods: {
     async details (tableId, clicked = false) {
@@ -186,8 +188,8 @@ export default {
       }
       try {
         const res = await this.$axios.get(`/api/container/${this.$route.params.container_id}/database/${this.$route.params.database_id}/table/${tableId}`)
-        console.debug('table', res.data)
         this.tableDetails = res.data
+        this.$store.commit('SET_TABLE', this.tableDetails)
       } catch (err) {
         this.tableDetails = undefined
         this.$toast.error('Could not get table details.')
@@ -205,8 +207,9 @@ export default {
         this.loading = false
         if (tableId) { this.openPanelByTableId(tableId) }
       } catch (err) {
-        this.$toast.error('Could not list table.')
+        this.$toast.error('Could not load tables.')
       }
+      this.$store.commit('SET_TABLE', null)
     },
     async deleteTable () {
       try {

fda-ui/pages/container/_container_id/database/_database_id/table/_table_id/index.vue

@@ -7,6 +7,9 @@
       </v-toolbar-title>
       <v-spacer />
       <v-toolbar-title>
+        <v-btn class="mr-2" :to="`/container/${$route.params.container_id}/database/${$route.params.database_id}/table`">
+          <v-icon left>mdi-arrow-left</v-icon> Back
+        </v-btn>
         <v-btn class="mr-2" :disabled="!token" :to="`/container/${$route.params.container_id}/database/${$route.params.database_id}/table/${$route.params.table_id}/import`">
           <v-icon left>mdi-cloud-upload</v-icon> Import csv
         </v-btn>

fda-ui/pages/container/_container_id/database/_database_id/table/import.vue

@@ -246,7 +246,8 @@ export default {
           text: `${this.$route.params.database_id}`,
           to: `/container/${this.$route.params.container_id}/database/${this.$route.params.database_id}/info`,
           activeClass: ''
-        }
+        },
+        { text: 'Tables', to: `/container/${this.$route.params.container_id}/database/${this.$route.params.database_id}/table`, activeClass: '' }
       ],
       rules: {
         required: value => !!value || 'Required'

fda-ui/store/index.js

 export const state = () => ({
-  db: null,
   token: null,
-  user: null
+  user: null,
+  db: null,
+  table: null
 })
 
 export const mutations = {
@@ -13,5 +14,13 @@ export const mutations = {
   },
   SET_USER (state, user) {
     state.user = user
+  },
+
+  /**
+   Workaround. Helps to go 'back' from table data view and
+   have the accordion open on the same table
+   */
+  SET_TABLE (state, table) {
+    state.table = table
   }
 }