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

QBFilters support for "and" and "or"

Former-commit-id: 7cc2255e
parent 920eac3a
Branches
Tags
1 merge request!23Sprint results
...@@ -4,27 +4,33 @@ ...@@ -4,27 +4,33 @@
<v-btn @click="addFirst">Add filter</v-btn> <v-btn @click="addFirst">Add filter</v-btn>
</div> </div>
<div v-for="(clause, idx) in value" :key="idx"> <div v-for="(clause, idx) in value" :key="idx">
<v-row dense> <v-row v-if="clause.type === 'and'" class="connector" dense>
and
</v-row>
<v-row v-else-if="clause.type === 'or'" class="connector" dense>
or
</v-row>
<v-row v-else dense>
<v-col cols="2"> <v-col cols="2">
<v-select v-model="clause.type" class="mt-2" :items="types" /> <v-select v-model="clause.type" hide-details disabled :items="types" />
</v-col> </v-col>
<v-col> <v-col>
<v-row dense> <v-row dense>
<v-col> <v-col>
<v-select v-model="clause.params[0]" :items="columns" /> <v-select v-model="clause.params[0]" hide-details :items="columns" />
</v-col> </v-col>
<v-col cols="2"> <v-col cols="2">
<v-select v-model="clause.params[1]" :items="operators" /> <v-autocomplete v-model="clause.params[1]" auto-select-first hide-details :items="operators" />
</v-col> </v-col>
<v-col> <v-col>
<v-text-field v-model="clause.params[2]" /> <v-text-field v-model="clause.params[2]" hide-details />
</v-col> </v-col>
</v-row> </v-row>
</v-col> </v-col>
<v-col class="acitons" cols="3"> <v-col class="acitons mt-1" cols="3">
<v-btn depressed tile @click="addAnd">AND</v-btn> <v-btn :disabled="!canAdd(idx)" class="mr-1" depressed tile @click="addAnd">AND</v-btn>
<v-btn depressed tile @click="addOr">OR</v-btn> <v-btn :disabled="!canAdd(idx)" class="mr-1" depressed tile @click="addOr">OR</v-btn>
<v-btn class="float-right" icon @click="remove"><v-icon>mdi-delete</v-icon></v-btn> <v-btn depressed @click="remove"><v-icon>mdi-delete</v-icon></v-btn>
</v-col> </v-col>
</v-row> </v-row>
</div> </div>
...@@ -32,8 +38,7 @@ ...@@ -32,8 +38,7 @@
</template> </template>
<script> <script>
const types = ['where'] const { operators, types } = require('@/server-middleware/query/operators')
const { operators } = require('@/server-middleware/query/operators')
export default { export default {
components: { components: {
...@@ -54,20 +59,34 @@ export default { ...@@ -54,20 +59,34 @@ export default {
} }
}, },
methods: { methods: {
canAdd (idx) {
return idx === this.value.length - 1
},
addFirst () { addFirst () {
const column = this.columns.length ? this.columns[0] : '' const column = (this.columns && this.columns.length) ? this.columns[0] : ''
this.value.push({ type: 'where', params: [column, '=', ''] }) this.value.push({ type: 'where', params: [column, '=', ''] })
}, },
addAnd () { addAnd () {
this.value.push({ type: 'and' })
this.addFirst()
}, },
addOr () { addOr () {
this.value.push({ type: 'or' })
this.addFirst()
}, },
remove () { remove () {
},
getPrefix (clause) {
return 'FOO'
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
.connector {
justify-content: center;
font-weight: 600;
}
.text-center { .text-center {
text-align: center; text-align: center;
} }
...@@ -79,4 +98,10 @@ export default { ...@@ -79,4 +98,10 @@ export default {
.float-right { .float-right {
margin-left: auto; margin-left: auto;
} }
.v-input {
padding-top: 0;
}
.col {
padding-top: 0;
}
</style> </style>
...@@ -22,9 +22,8 @@ ...@@ -22,9 +22,8 @@
@change="buildQuery" /> @change="buildQuery" />
</v-col> </v-col>
</v-row> </v-row>
<QBFilter v-if="selectItems" v-model="clauses" :columns="selectItems.map(s => s.name)" /> <QBFilter v-if="table" v-model="clauses" :columns="selectItems && selectItems.map(s => s.name)" />
<pre v-if="query.sql" v-text="query.sql" /> <pre v-if="query.sql" v-text="query.sql" />
<!-- {{clauses}} -->
</div> </div>
</template> </template>
......
...@@ -41,3 +41,5 @@ export const operators = [ ...@@ -41,3 +41,5 @@ export const operators = [
'@@', '@@',
'!!' '!!'
] ]
export const types = ['where']
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment