Global Search component

Added global Search component to Sensors page.

Signed-off-by: Suren Neware <sneware9@in.ibm.com>
Change-Id: I3121cc4e582c782fa7e9937738cefbeddc23610e

1 files changed, 15 insertions, 2 deletions

diff --git a/src/views/Health/Sensors/Sensors.vue b/src/views/Health/Sensors/Sensors.vue
index 5379eae8..3b368976 100644
--- a/src/views/Health/Sensors/Sensors.vue
+++ b/src/views/Health/Sensors/Sensors.vue
@@ -2,7 +2,13 @@
   <b-container fluid="xl">
     <page-title />
     <b-row>
-      <b-col xl="12" class="text-right">
+      <b-col md="5" xl="4">
+        <search
+          :placeholder="$t('pageSensors.searchForSensors')"
+          @changeSearch="onChangeSearchInput"
+        />
+      </b-col>
+      <b-col md="7" xl="8" class="text-right">
         <table-filter :filters="tableFilters" @filterChange="onFilterChange" />
       </b-col>
     </b-row>
@@ -32,6 +38,7 @@
           :fields="fields"
           :sort-desc="true"
           :sort-compare="sortCompare"
+          :filter="searchFilter"
           @row-selected="onRowSelected($event, filteredSensors.length)"
         >
           <!-- Checkbox column -->
@@ -76,6 +83,7 @@
 
 <script>
 import PageTitle from '../../../components/Global/PageTitle';
+import Search from '../../../components/Global/Search';
 import StatusIcon from '../../../components/Global/StatusIcon';
 import TableFilter from '../../../components/Global/TableFilter';
 import TableToolbar from '@/components/Global/TableToolbar';
@@ -98,6 +106,7 @@ export default {
   name: 'Sensors',
   components: {
     PageTitle,
+    Search,
     StatusIcon,
     TableFilter,
     TableToolbar,
@@ -155,7 +164,8 @@ export default {
           values: SENSOR_STATUS
         }
       ],
-      activeFilters: []
+      activeFilters: [],
+      searchFilter: null
     };
   },
   computed: {
@@ -198,6 +208,9 @@ export default {
     },
     onFilterChange({ activeFilters }) {
       this.activeFilters = activeFilters;
+    },
+    onChangeSearchInput(event) {
+      this.searchFilter = event;
     }
   }
 };