WiP on QBFilters

Former-commit-id: 5ea88294

fda-ui/components/query/QBFilters.vue

+<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>

fda-ui/components/QueryBuilder.vue → fda-ui/components/query/QueryBuilder.vue

@@ -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>

fda-ui/pages/db/_db_id/query.vue

@@ -7,7 +7,7 @@
 
 <script>
 import DBToolbar from '@/components/DBToolbar'
-import QueryBuilder from '@/components/QueryBuilder'
+import QueryBuilder from '@/components/query/QueryBuilder'
 
 export default {
   components: {