From a037d0cc0148444e8e6c5b87c79f6ba9c2a6f0fe Mon Sep 17 00:00:00 2001
From: Giulio Ganci <giulioganci@gmail.com>
Date: Sun, 8 May 2022 13:15:39 +0200
Subject: [PATCH] feat(UI): BaseSelect in table filters

---
 src/renderer/components/BaseSelect.vue        |  5 ++-
 .../components/WorkspaceTabTableFilters.vue   | 34 +++++++++----------
 2 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/src/renderer/components/BaseSelect.vue b/src/renderer/components/BaseSelect.vue
index 92bedd9f..1c8290fc 100644
--- a/src/renderer/components/BaseSelect.vue
+++ b/src/renderer/components/BaseSelect.vue
@@ -128,12 +128,12 @@ export default defineComponent({
 
       const getOptionValue = (opt) => {
          const key = typeof props.optionTrackBy === 'function' ? props.optionTrackBy() : props.optionTrackBy;
-         return opt[key];
+         return key ? opt[key] : opt;
       };
 
       const getOptionLabel = (opt) => {
          const key = typeof props.optionLabel === 'function' ? props.optionLabel() : props.optionLabel;
-         return opt[key];
+         return key ? opt[key] : opt;
       };
 
       const currentOptionLabel = computed(() => {
@@ -221,7 +221,6 @@ export default defineComponent({
 <style lang="scss" scoped>
 .select {
   position: relative;
-  width: 100%;
   display: block;
 
   &__search-input {
diff --git a/src/renderer/components/WorkspaceTabTableFilters.vue b/src/renderer/components/WorkspaceTabTableFilters.vue
index aca30a03..1fdf9e8c 100644
--- a/src/renderer/components/WorkspaceTabTableFilters.vue
+++ b/src/renderer/components/WorkspaceTabTableFilters.vue
@@ -12,24 +12,18 @@
                @change="doFilter"
             ><i class="form-icon" />
          </label>
-         <select v-model="row.field" class="form-select col-auto select-sm">
-            <option
-               v-for="(item, j) of fields"
-               :key="j"
-               :value="item.name"
-            >
-               {{ item.name }}
-            </option>
-         </select>
-         <select v-model="row.op" class="form-select ml-2 col-auto select-sm">
-            <option
-               v-for="(operator, k) of operators"
-               :key="k"
-               :value="operator"
-            >
-               {{ operator }}
-            </option>
-         </select>
+         <BaseSelect
+            v-model="row.field"
+            class="form-select ml-2 col-auto select-sm"
+            :options="fields"
+            option-track-by="name"
+            option-label="name"
+         />
+         <BaseSelect
+            v-model="row.op"
+            class="form-select ml-2 col-auto select-sm"
+            :options="operators"
+         />
          <div class="workspace-table-filters-row-value ml-2">
             <input
                v-if="!row.op.includes('NULL')"
@@ -73,8 +67,12 @@
 <script>
 import customizations from 'common/customizations';
 import { NUMBER, FLOAT } from 'common/fieldTypes';
+import BaseSelect from '@/components/BaseSelect.vue';
 
 export default {
+   components: {
+      BaseSelect
+   },
    props: {
       fields: Array,
       connClient: String