Make use of Nuxt's "components" feature

Former-commit-id: 2a7b5964

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

@@ -22,24 +22,26 @@
           @change="buildQuery" />
       </v-col>
     </v-row>
-    <QBFilter
+    <QueryFilters
       v-if="table"
       v-model="clauses"
       :columns="columnNames" />
-    <highlightjs
-      v-if="query.formatted"
-      autodetect
-      :code="query.formatted" />
+    <v-row v-if="query.formatted">
+      <v-col>
+        <highlightjs autodetect :code="query.formatted" />
+      </v-col>
+      <v-col cols="3" class="actions">
+        <v-btn class="execute" color="primary">
+          <v-icon>mdi-refresh</v-icon>
+          Execute
+        </v-btn>
+      </v-col>
+    </v-row>
   </div>
 </template>
 
 <script>
-import QBFilter from './QBFilters'
-
 export default {
-  components: {
-    QBFilter
-  },
   data () {
     return {
       table: null,
@@ -118,4 +120,10 @@ main.scss file from vuetify, because it paints it red */
   background: #fdf6e3;
   color: #657b83;
 }
+
+.actions {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
 </style>

fda-ui/components/query/QBFilters.vue → fda-ui/components/query/Filters.vue

@@ -32,7 +32,7 @@
             </v-col>
           </v-row>
         </v-col>
-        <v-col class="acitons mt-1" cols="3">
+        <v-col class="acitons" cols="3">
           <v-btn :disabled="!canAdd(idx)" class="mr-1" depressed tile @click="addAnd">AND</v-btn>
           <v-btn :disabled="!canAdd(idx)" class="mr-1" depressed tile @click="addOr">OR</v-btn>
           <v-btn depressed tile @click="remove(idx)"><v-icon>mdi-delete</v-icon></v-btn>

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

@@ -6,14 +6,7 @@
 </template>
 
 <script>
-import DBToolbar from '@/components/DBToolbar'
-import QueryBuilder from '@/components/query/QueryBuilder'
-
 export default {
-  components: {
-    DBToolbar,
-    QueryBuilder
-  },
   data () {
     return {
     }

fda-ui/test/specs/QBFilters.spec.js

 import test from 'ava'
 import { mount, shallowMount } from '@vue/test-utils'
-import QBFilters from '@/components/query/QBFilters'
+import QBFilters from '@/components/query/Filters'
 
 test('is a Vue instance', (t) => {
   const wrapper = mount(QBFilters)