Skip to content
Snippets Groups Projects
Commit 920eac3a authored by Kirill Stytsenko's avatar Kirill Stytsenko
Browse files

WiP on QBFilters

Former-commit-id: 6dcf8032
parent 43d3582b
Branches
Tags
1 merge request!23Sprint results
<template>
<div class="mb-5">
<div v-if="!value.length" class="text-center">
<v-btn @click="addFirst">Add filter</v-btn>
</div>
<div v-for="(clause, idx) in value" :key="idx">
<v-row dense>
<v-col cols="2">
<v-select v-model="clause.type" class="mt-2" :items="types" />
</v-col>
<v-col>
<v-row dense>
<v-col>
<v-select v-model="clause.params[0]" :items="columns" />
</v-col>
<v-col cols="2">
<v-select v-model="clause.params[1]" :items="operators" />
</v-col>
<v-col>
<v-text-field v-model="clause.params[2]" />
</v-col>
</v-row>
</v-col>
<v-col class="acitons" cols="3">
<v-btn depressed tile @click="addAnd">AND</v-btn>
<v-btn depressed tile @click="addOr">OR</v-btn>
<v-btn class="float-right" icon @click="remove"><v-icon>mdi-delete</v-icon></v-btn>
</v-col>
</v-row>
</div>
</div>
</template>
<script>
const types = ['where']
const { operators } = require('@/server-middleware/query/operators')
export default {
components: {
},
props: {
columns: { type: Array, default: () => [] },
value: { type: Array, default: () => [] }
},
data () {
return {
types,
operators
}
},
computed: {
db () {
return this.$store.state.db
}
},
methods: {
addFirst () {
const column = this.columns.length ? this.columns[0] : ''
this.value.push({ type: 'where', params: [column, '=', ''] })
},
addAnd () {
},
addOr () {
},
remove () {
}
}
}
</script>
<style scoped>
.text-center {
text-align: center;
}
.acitons {
display: flex;
flex-wrap: nowrap;
align-items: center;
}
.float-right {
margin-left: auto;
}
</style>
......@@ -22,12 +22,19 @@
@change="buildQuery" />
</v-col>
</v-row>
{{ query.sql }}
<QBFilter v-if="selectItems" v-model="clauses" :columns="selectItems.map(s => s.name)" />
<pre v-if="query.sql" v-text="query.sql" />
<!-- {{clauses}} -->
</div>
</template>
<script>
import QBFilter from './QBFilters'
export default {
components: {
QBFilter
},
data () {
return {
table: null,
......@@ -43,6 +50,14 @@ export default {
return this.tableDetails && this.tableDetails.columns
}
},
watch: {
clauses: {
deep: true,
handler () {
this.buildQuery()
}
}
},
async mounted () {
// XXX same as in TableList
try {
......@@ -91,4 +106,8 @@ export default {
/* .select {
width: 200px;
} */
pre {
background-color: #eee;
padding: 8px;
}
</style>
......@@ -7,7 +7,7 @@
<script>
import DBToolbar from '@/components/DBToolbar'
import QueryBuilder from '@/components/QueryBuilder'
import QueryBuilder from '@/components/query/QueryBuilder'
export default {
components: {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment