Add table search filter clear button

- Adds ability to quickly clear a table input search field
- Uses similar styling to password toggle icon and datepicker
- Button style to be addressed in separate commit to match
  style guide

Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: I18f2e01c28c00c7e7b2ad1af924070241caf36a5

4 files changed, 24 insertions, 24 deletions

diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue b/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
index 97116ca2..ec7c1637 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
@@ -2,7 +2,10 @@
   <page-section :section-title="$t('pageHardwareStatus.dimmSlot')">
     <b-row>
       <b-col sm="6" md="5" xl="4">
-        <search @changeSearch="onChangeSearchInput" />
+        <search
+          @changeSearch="onChangeSearchInput"
+          @clearSearch="onClearSearchInput"
+        />
       </b-col>
       <b-col sm="6" md="3" xl="2">
         <table-cell-count
@@ -70,10 +73,11 @@ import TableCellCount from '@/components/Global/TableCellCount';
 import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin';
 import TableSortMixin from '@/components/Mixins/TableSortMixin';
 import Search from '@/components/Global/Search';
+import SearchFilterMixin from '@/components/Mixins/SearchFilterMixin';
 
 export default {
   components: { IconChevron, PageSection, StatusIcon, Search, TableCellCount },
-  mixins: [TableDataFormatterMixin, TableSortMixin],
+  mixins: [TableDataFormatterMixin, TableSortMixin, SearchFilterMixin],
   data() {
     return {
       fields: [
@@ -108,7 +112,6 @@ export default {
           sortable: true
         }
       ],
-      searchFilter: null,
       searchTotalFilteredRows: 0
     };
   },
@@ -134,9 +137,6 @@ export default {
         return this.sortStatus(a, b, key);
       }
     },
-    onChangeSearchInput(searchValue) {
-      this.searchFilter = searchValue;
-    },
     onFiltered(filteredItems) {
       this.searchTotalFilteredRows = filteredItems.length;
     }
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue b/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
index 0b6e1a35..98e2fb5e 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
@@ -2,7 +2,10 @@
   <page-section :section-title="$t('pageHardwareStatus.fans')">
     <b-row>
       <b-col sm="6" md="5" xl="4">
-        <search @changeSearch="onChangeSearchInput" />
+        <search
+          @changeSearch="onChangeSearchInput"
+          @clearSearch="onClearSearchInput"
+        />
       </b-col>
       <b-col sm="6" md="3" xl="2">
         <table-cell-count
@@ -69,10 +72,11 @@ import StatusIcon from '@/components/Global/StatusIcon';
 import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin';
 import TableSortMixin from '@/components/Mixins/TableSortMixin';
 import Search from '@/components/Global/Search';
+import SearchFilterMixin from '@/components/Mixins/SearchFilterMixin';
 
 export default {
   components: { IconChevron, PageSection, StatusIcon, Search, TableCellCount },
-  mixins: [TableDataFormatterMixin, TableSortMixin],
+  mixins: [TableDataFormatterMixin, TableSortMixin, SearchFilterMixin],
   data() {
     return {
       fields: [
@@ -107,7 +111,6 @@ export default {
           sortable: true
         }
       ],
-      searchFilter: null,
       searchTotalFilteredRows: 0
     };
   },
@@ -133,9 +136,6 @@ export default {
         return this.sortStatus(a, b, key);
       }
     },
-    onChangeSearchInput(searchValue) {
-      this.searchFilter = searchValue;
-    },
     onFiltered(filteredItems) {
       this.searchTotalFilteredRows = filteredItems.length;
     }
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue b/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
index 77a1e3c8..0eb2f608 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
@@ -2,7 +2,10 @@
   <page-section :section-title="$t('pageHardwareStatus.powerSupplies')">
     <b-row>
       <b-col sm="6" md="5" xl="4">
-        <search @changeSearch="onChangeSearchInput" />
+        <search
+          @changeSearch="onChangeSearchInput"
+          @clearSearch="onClearSearchInput"
+        />
       </b-col>
       <b-col sm="6" md="3" xl="2">
         <table-cell-count
@@ -92,10 +95,11 @@ import TableCellCount from '@/components/Global/TableCellCount';
 import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin';
 import TableSortMixin from '@/components/Mixins/TableSortMixin';
 import Search from '@/components/Global/Search';
+import SearchFilterMixin from '@/components/Mixins/SearchFilterMixin';
 
 export default {
   components: { IconChevron, PageSection, StatusIcon, Search, TableCellCount },
-  mixins: [TableDataFormatterMixin, TableSortMixin],
+  mixins: [TableDataFormatterMixin, TableSortMixin, SearchFilterMixin],
   data() {
     return {
       fields: [
@@ -130,7 +134,6 @@ export default {
           sortable: true
         }
       ],
-      searchFilter: null,
       searchTotalFilteredRows: 0
     };
   },
@@ -156,9 +159,6 @@ export default {
         return this.sortStatus(a, b, key);
       }
     },
-    onChangeSearchInput(searchValue) {
-      this.searchFilter = searchValue;
-    },
     onFiltered(filteredItems) {
       this.searchTotalFilteredRows = filteredItems.length;
     }
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue b/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue
index 6ab1343a..5a27cca7 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue
@@ -3,7 +3,10 @@
     <!-- Search -->
     <b-row>
       <b-col sm="6" md="5" xl="4">
-        <search @changeSearch="onChangeSearchInput" />
+        <search
+          @changeSearch="onChangeSearchInput"
+          @clearSearch="onClearSearchInput"
+        />
       </b-col>
       <b-col sm="6" md="3" xl="2">
         <table-cell-count
@@ -99,10 +102,11 @@ import TableCellCount from '@/components/Global/TableCellCount';
 import TableSortMixin from '@/components/Mixins/TableSortMixin';
 import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin';
 import Search from '@/components/Global/Search';
+import SearchFilterMixin from '@/components/Mixins/SearchFilterMixin';
 
 export default {
   components: { PageSection, IconChevron, TableCellCount, StatusIcon, Search },
-  mixins: [TableDataFormatterMixin, TableSortMixin],
+  mixins: [TableDataFormatterMixin, TableSortMixin, SearchFilterMixin],
   data() {
     return {
       fields: [
@@ -137,7 +141,6 @@ export default {
           sortable: true
         }
       ],
-      searchFilter: null,
       searchTotalFilteredRows: 0
     };
   },
@@ -158,9 +161,6 @@ export default {
     });
   },
   methods: {
-    onChangeSearchInput(searchValue) {
-      this.searchFilter = searchValue;
-    },
     onFiltered(filteredItems) {
       this.searchTotalFilteredRows = filteredItems.length;
     }