WiP on QueryResults table on query details page

For now there is not information needed for displaying the header of the table.
i.e. user-friendly titles, etc.

fda-ui/components/query/Builder.vue

@@ -140,7 +140,7 @@ export default {
       }
     },
     execute () {
-      this.$refs.queryResults.execute(this)
+      this.$refs.queryResults.executeFirstTime(this)
     },
     async buildQuery () {
       if (!this.table) {

fda-ui/components/query/Results.vue

@@ -12,6 +12,9 @@
 import _ from 'lodash'
 
 export default {
+  props: {
+    value: { type: Number, default: () => 0 }
+  },
   data () {
     return {
       parent: null,
@@ -40,7 +43,9 @@ export default {
   },
   watch: {
     value () {
-      this.execute()
+      if (this.value) {
+        this.execute()
+      }
     },
     options (newVal, oldVal) {
       if (typeof oldVal.groupBy === 'undefined') {
@@ -48,17 +53,18 @@ export default {
         // don't run the execute method twice, when a new query is created
         return
       }
+      if (!this.value) {
+        this.$toast.error('Cannot paginate invalidated Query: press Execute')
+        return
+      }
       this.execute()
     }
   },
   mounted () {
   },
   methods: {
-    async execute (parent) {
-      if (parent) {
-        this.parent = parent
-      }
-
+    async executeFirstTime (parent) {
+      this.parent = parent
       this.loading = true
       try {
         const data = {
@@ -69,10 +75,7 @@ export default {
           })]
         }
         console.debug('send data', data)
-        let page = this.options.page - 1
-        if (!this.parent.queryId) {
-          page = 0
-        }
+        const page = 0
         const urlParams = `page=${page}&size=${this.options.itemsPerPage}`
         const res = await this.$axios.put(`/api/container/
 ${this.$route.params.container_id}/database/${this.$route.params.database_id}/query
@@ -94,6 +97,30 @@ ${this.parent.queryId ? `/${this.parent.queryId}` : ''}
         this.$toast.error('Could not execute query')
         this.loading = false
       }
+    },
+    async execute () {
+      this.loading = true
+      try {
+        const page = this.options.page - 1
+        const urlParams = `page=${page}&size=${this.options.itemsPerPage}`
+        const res = await this.$axios.put(`/api/container/
+${this.$route.params.container_id}/database/${this.$route.params.database_id}/query
+/${this.value}
+?${urlParams}`, {}, {
+          headers: this.headers
+        })
+        this.loading = false
+        // Can't display headers yet
+        // this.result.headers = this.parent.select.map((s) => {
+        //   return { text: s.name, value: s.name, sortable: false }
+        // })
+        this.result.rows = res.data.result
+        this.total = res.data.resultNumber
+      } catch (err) {
+        console.error('query execute', err)
+        this.$toast.error('Could not execute query')
+        this.loading = false
+      }
     }
   }
 }

fda-ui/pages/container/_container_id/database/_database_id/query/_query_id/index.vue

@@ -70,6 +70,7 @@
           Username: <code v-if="query.username">{{ query.username }}</code><span v-if="!query.username">(empty)</span>
         </p>
       </v-card-text>
+      <QueryResults v-if="false" ref="queryResults" v-model="query.id" />
     </v-card>
     <v-breadcrumbs :items="items" class="pa-0 mt-2" />
     <v-dialog
@@ -164,6 +165,11 @@ export default {
         this.loading = false
       }
       this.loading = false
+
+      // refresh QueryResults table
+      setTimeout(() => {
+        // this.$refs.queryResults.execute()
+      }, 200)
     },
     async reExecute () {
       try {