diff --git a/fda-ui/components/query/Builder.vue b/fda-ui/components/query/Builder.vue index c09a1c50d0b3a83aa8d23e97f6dfce6830e29584..5c0c6c040a5006ba39d87b9b435799fab81c7c75 100644 --- a/fda-ui/components/query/Builder.vue +++ b/fda-ui/components/query/Builder.vue @@ -47,16 +47,10 @@ <highlightjs autodetect :code="query.formatted" /> </v-col> </v-row> - <v-row v-if="queryId"> + <v-row> <v-col> <p>Results</p> - <v-data-table - :headers="result.headers" - :items="result.rows" - :loading="loading" - :options.sync="options" - :server-items-length="total" - class="elevation-1" /> + <QueryResults ref="queryResults" v-model="queryId" /> </v-col> </v-row> <v-row> @@ -73,8 +67,6 @@ </template> <script> -import _ from 'lodash' - export default { data () { return { @@ -85,18 +77,8 @@ export default { query: { sql: '' }, - options: { - page: 1, - itemsPerPage: 10 - }, select: [], - clauses: [], - result: { - headers: [], - rows: [] - }, - total: 0, - loading: false + clauses: [] } }, computed: { @@ -135,14 +117,6 @@ export default { this.queryId = null } }, - options (newVal, oldVal) { - if (typeof oldVal.groupBy === 'undefined') { - // initially, options do not have the groupBy field. - // don't run the execute method twice, when a new query is created - return - } - this.execute() - }, table () { this.queryId = null }, @@ -165,60 +139,9 @@ export default { this.$toast.error('Could not list table.') } }, - async execute () { - this.loading = true - try { - const data = { - statement: this.query.sql, - tables: [_.pick(this.table, ['id', 'name', 'internal_name'])], - columns: [this.select.map(function (column) { - return _.pick(column, ['id', 'name', 'internal_name']) - })] - } - console.debug('send data', data) - const urlParams = `page=${this.options.page - 1}&size=${this.options.itemsPerPage}` - const res = await this.$axios.put(`/api/container/ -${this.$route.params.container_id}/database/${this.databaseId}/query -${this.queryId ? `/${this.queryId}` : ''} -?${urlParams}`, data, { - headers: this.headers - }) - console.debug('query result', res) - this.$toast.success('Successfully executed query') - this.loading = false - this.queryId = res.data.id - this.result.headers = this.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 - } - }, - /* - async save () { - this.$refs.form.validate() - const query = this.query.sql.replaceAll('`', '') - this.loading = true - try { - const res = await this.$axios.post(`/api/container/${this.$route.params.container_id}/database/${this.databaseId}/query`, { statement: query }, { - headers: this.headers - }) - console.debug('query result', res) - this.$toast.success('Successfully saved query') - this.loading = false - this.queryId = res.data.id - this.$router.push(`/container/${this.$route.params.container_id}/database/${this.$route.params.database_id}/query/${this.queryId}`) - } catch (err) { - console.error('query save', err) - this.$toast.error('Could not save query') - this.loading = false - } + execute () { + this.$refs.queryResults.execute(this) }, - */ async buildQuery () { if (!this.table) { return @@ -226,7 +149,7 @@ ${this.queryId ? `/${this.queryId}` : ''} const url = '/server-middleware/query/build' const data = { table: this.table.internal_name, - select: this.select.map(s => s.name), + select: this.select.map(s => s.internal_name), clauses: this.clauses } try { diff --git a/fda-ui/components/query/Results.vue b/fda-ui/components/query/Results.vue new file mode 100644 index 0000000000000000000000000000000000000000..e86ad7d6ffdcaf3e16ba27501551e13ae177a4cf --- /dev/null +++ b/fda-ui/components/query/Results.vue @@ -0,0 +1,103 @@ +<template> + <v-data-table + :headers="result.headers" + :items="result.rows" + :loading="loading" + :options.sync="options" + :server-items-length="total" + class="elevation-1" /> +</template> + +<script> +import _ from 'lodash' + +export default { + data () { + return { + parent: null, + loading: false, + result: { + headers: [], + rows: [] + }, + options: { + page: 1, + itemsPerPage: 10 + }, + total: 0 + } + }, + computed: { + token () { + return this.$store.state.token + }, + headers () { + if (this.token === null) { + return null + } + return { Authorization: `Bearer ${this.token}` } + } + }, + watch: { + value () { + this.execute() + }, + options (newVal, oldVal) { + if (typeof oldVal.groupBy === 'undefined') { + // initially, options do not have the groupBy field. + // don't run the execute method twice, when a new query is created + return + } + this.execute() + } + }, + mounted () { + }, + methods: { + async execute (parent) { + if (parent) { + this.parent = parent + } + + this.loading = true + try { + const data = { + statement: this.parent.query.sql, + tables: [_.pick(this.parent.table, ['id', 'name', 'internal_name'])], + columns: [this.parent.select.map(function (column) { + return _.pick(column, ['id', 'name', 'internal_name']) + })] + } + console.debug('send data', data) + let page = this.options.page - 1 + if (!this.parent.queryId) { + 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 +${this.parent.queryId ? `/${this.parent.queryId}` : ''} +?${urlParams}`, data, { + headers: this.headers + }) + console.debug('query result', res) + this.$toast.success('Successfully executed query') + this.loading = false + this.parent.queryId = res.data.id + 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 + } + } + } +} +</script> + +<style scoped> +</style>