Skip to content
Snippets Groups Projects
Verified Commit 58a8f420 authored by Kirill Stytsenko's avatar Kirill Stytsenko
Browse files

Clean-up QueryBuilder UI

parent a02edd4e
No related branches found
No related tags found
3 merge requests!81New stable release,!43Merge dev to master,!41UI March
<template> <template>
<div> <div>
<v-form <v-form ref="form">
ref="form"
v-model="valid"
lazy-validation>
<v-toolbar flat> <v-toolbar flat>
<v-toolbar-title>Create Query</v-toolbar-title> <v-toolbar-title>Create Query</v-toolbar-title>
<v-spacer /> <v-spacer />
...@@ -23,7 +20,6 @@ ...@@ -23,7 +20,6 @@
<v-col cols="6"> <v-col cols="6">
<v-select <v-select
v-model="table" v-model="table"
:rules="[rules.required]"
:items="tables" :items="tables"
item-text="name" item-text="name"
return-object return-object
...@@ -33,7 +29,6 @@ ...@@ -33,7 +29,6 @@
<v-col cols="6"> <v-col cols="6">
<v-select <v-select
v-model="select" v-model="select"
:rules="[rules.required]"
item-text="name" item-text="name"
:disabled="!table" :disabled="!table"
:items="selectItems" :items="selectItems"
...@@ -52,14 +47,15 @@ ...@@ -52,14 +47,15 @@
<highlightjs autodetect :code="query.formatted" /> <highlightjs autodetect :code="query.formatted" />
</v-col> </v-col>
</v-row> </v-row>
<v-row> <v-row v-if="queryId">
<v-col> <v-col>
<p>Results</p> <p>Results</p>
<v-data-table <v-data-table
:headers="result.headers" :headers="result.headers"
:items="result.rows" :items="result.rows"
:loading="loading" :loading="loading"
:items-per-page="30" :options.sync="options"
:server-items-length="total"
class="elevation-1" /> class="elevation-1" />
</v-col> </v-col>
</v-row> </v-row>
...@@ -82,7 +78,6 @@ import _ from 'lodash' ...@@ -82,7 +78,6 @@ import _ from 'lodash'
export default { export default {
data () { data () {
return { return {
valid: false,
table: null, table: null,
tables: [], tables: [],
tableDetails: null, tableDetails: null,
...@@ -90,15 +85,17 @@ export default { ...@@ -90,15 +85,17 @@ export default {
query: { query: {
sql: '' sql: ''
}, },
options: {
page: 1,
itemsPerPage: 10
},
select: [], select: [],
clauses: [], clauses: [],
result: { result: {
headers: [], headers: [],
rows: [] rows: []
}, },
rules: { total: 0,
required: value => !!value || 'Required'
},
loading: false loading: false
} }
}, },
...@@ -124,6 +121,10 @@ export default { ...@@ -124,6 +121,10 @@ export default {
return null return null
} }
return { Authorization: `Bearer ${this.token}` } return { Authorization: `Bearer ${this.token}` }
},
valid () {
// we need to have at least one column selected
return this.select.length
} }
}, },
watch: { watch: {
...@@ -131,7 +132,22 @@ export default { ...@@ -131,7 +132,22 @@ export default {
deep: true, deep: true,
handler () { handler () {
this.buildQuery() this.buildQuery()
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
},
select () {
this.queryId = null
} }
}, },
beforeMount () { beforeMount () {
...@@ -150,7 +166,6 @@ export default { ...@@ -150,7 +166,6 @@ export default {
} }
}, },
async execute () { async execute () {
this.$refs.form.validate()
this.loading = true this.loading = true
try { try {
const data = { const data = {
...@@ -161,7 +176,11 @@ export default { ...@@ -161,7 +176,11 @@ export default {
})] })]
} }
console.debug('send data', data) console.debug('send data', data)
const res = await this.$axios.put(`/api/container/${this.$route.params.container_id}/database/${this.databaseId}/query`, 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 headers: this.headers
}) })
console.debug('query result', res) console.debug('query result', res)
...@@ -172,6 +191,7 @@ export default { ...@@ -172,6 +191,7 @@ export default {
return { text: s.name, value: s.name, sortable: false } return { text: s.name, value: s.name, sortable: false }
}) })
this.result.rows = res.data.result this.result.rows = res.data.result
this.total = res.data.resultNumber
} catch (err) { } catch (err) {
console.error('query execute', err) console.error('query execute', err)
this.$toast.error('Could not execute query') this.$toast.error('Could not execute query')
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment