Hide search button when no rows are available

Author: pascalbaljet

__tests__/TableAddSearchRow.spec.js

@@ -37,6 +37,24 @@ describe('TableAddSearchRow.vue', () => {
         expect(newRows[0]).toEqual("name");
     });
 
+    it('hides the button when the only row is the global search', () => {
+        const component = mount(TableAddSearchRow, {
+            propsData: {
+                rows: {
+                    global: {
+                        key: "global",
+                        label: "global",
+                        value: null,
+                    },
+                },
+
+                onAdd() { }
+            }
+        });
+
+        const dropdownButton = component.find("button[aria-haspopup='true']");
+        expect(dropdownButton.exists()).toBeFalsy();
+    });
 
     it('hides the rows where a value is set', () => {
         const component = mount(TableAddSearchRow, {

js/Components/TableAddSearchRow.vue

@@ -21,6 +21,10 @@ export default {
   },
 
   computed: {
+    hasRows() {
+      return filter(this.rows, (row) => row.key !== "global").length > 0;
+    },
+
     rowsLeft() {
       return filter(this.rows, (row) => this.showRow(row)).length > 0;
     },

js/Tailwind2/TableAddSearchRow.vue

@@ -1,5 +1,5 @@
 <template>
-  <ButtonWithDropdown ref="dropdown" :disabled="!rowsLeft" class="w-auto">
+  <ButtonWithDropdown ref="dropdown" v-if="hasRows" :disabled="!rowsLeft" class="w-auto">
     <template #button>
       <svg
         xmlns="http://www.w3.org/2000/svg"