feat(UI): multi column table filters

src/renderer/components/WorkspaceTabTable.vue

@@ -71,6 +71,13 @@
 
                <div class="divider-vert py-3" />
 
+               <button
+                  class="btn btn-sm"
+                  :class="{'btn-primary': isSearch, 'btn-dark': !isSearch}"
+                  @click="isSearch = !isSearch"
+               >
+                  <i class="mdi mdi-24px mdi-magnify" />
+               </button>
                <button
                   v-if="isTable"
                   class="btn btn-dark btn-sm"
@@ -121,6 +128,11 @@
             </div>
          </div>
       </div>
+      <WorkspaceTabTableFilters
+         v-if="isSearch"
+         :fields="fields"
+         @filter="updateFilters"
+      />
       <div class="workspace-query-results p-relative column col-12">
          <BaseLoader v-if="isQuering" />
          <WorkspaceTabQueryTable
@@ -160,6 +172,7 @@
 import Tables from '@/ipc-api/Tables';
 import BaseLoader from '@/components/BaseLoader';
 import WorkspaceTabQueryTable from '@/components/WorkspaceTabQueryTable';
+import WorkspaceTabTableFilters from '@/components/WorkspaceTabTableFilters';
 import ModalNewTableRow from '@/components/ModalNewTableRow';
 import ModalFakerRows from '@/components/ModalFakerRows';
 import { mapGetters, mapActions } from 'vuex';
@@ -170,6 +183,7 @@ export default {
    components: {
       BaseLoader,
       WorkspaceTabQueryTable,
+      WorkspaceTabTableFilters,
       ModalNewTableRow,
       ModalFakerRows
    },
@@ -192,6 +206,7 @@ export default {
          tabUid: 'data', // ???
          isQuering: false,
          isPageMenu: false,
+         isSearch: false,
          results: [],
          lastTable: null,
          isAddModal: false,
@@ -199,6 +214,7 @@ export default {
          autorefreshTimer: 0,
          refreshInterval: null,
          sortParams: {},
+         filters: [],
          page: 1,
          pageProxy: 1,
          approximateCount: 0
@@ -271,6 +287,12 @@ export default {
             if (this.lastTable !== this.table)
                this.getTableData();
          }
+      },
+      isSearch (val) {
+         if (this.filters.length > 0 && !val) {
+            this.filters = [];
+            this.getTableData();
+         }
       }
    },
    created () {
@@ -302,7 +324,8 @@ export default {
             table: this.table,
             limit: this.limit,
             page: this.page,
-            sortParams: this.sortParams
+            sortParams: this.sortParams,
+            where: this.filters || []
          };
 
          try { // Table data
@@ -389,11 +412,13 @@ export default {
             if (e.key === 'F5')
                this.reloadTable();
 
-            if (e.ctrlKey) {
+            if (e.ctrlKey || e.metaKey) {
                if (e.key === 'ArrowRight')
                   this.pageChange('next');
                if (e.key === 'ArrowLeft')
                   this.pageChange('prev');
+               if (e.keyCode === 70) // f
+                  this.isSearch = !this.isSearch;
             }
          }
       },
@@ -410,6 +435,10 @@ export default {
       },
       downloadTable (format) {
          this.$refs.queryTable.downloadTable(format, this.table);
+      },
+      updateFilters (clausoles) {
+         this.filters = clausoles;
+         this.getTableData();
       }
    }
 };