Global Search component

Added global Search component to Sensors page.

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

3 files changed, 81 insertions, 2 deletions

diff --git a/src/components/Global/Search.vue b/src/components/Global/Search.vue
new file mode 100644
index 00000000..d3050170
--- /dev/null
+++ b/src/components/Global/Search.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="search-global">
+    <b-form-group
+      :label="$t('global.form.search')"
+      label-for="searchInput"
+      label-sr-only
+      class="mb-2"
+    >
+      <b-input-group size="md" class="align-items-center">
+        <b-input-group-prepend>
+          <icon-search class="search-icon" />
+        </b-input-group-prepend>
+        <b-form-input
+          id="searchInput"
+          v-model="filter"
+          type="text"
+          :placeholder="placeholder"
+          @input="onChangeInput"
+        ></b-form-input>
+      </b-input-group>
+    </b-form-group>
+  </div>
+</template>
+
+<script>
+import IconSearch from '@carbon/icons-vue/es/search/16';
+export default {
+  name: 'Search',
+  components: { IconSearch },
+  props: {
+    placeholder: {
+      type: String,
+      default: () => {
+        return this.$t('global.form.search');
+      }
+    }
+  },
+  data() {
+    return {
+      filter: null
+    };
+  },
+  methods: {
+    onChangeInput() {
+      this.$emit('changeSearch', this.filter);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'src/assets/styles/helpers';
+
+#searchInput {
+  padding-left: ($spacer * 2);
+}
+.search-icon {
+  position: absolute;
+  left: 10px;
+  top: 12px;
+  z-index: 4;
+  stroke: $gray-400;
+}
+</style>
diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index 4636503b..9fc64d0b 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -29,6 +29,7 @@
       "lengthMustBeBetween": "Length must be between %{min} – %{max} characters",
       "mustBeAtLeast": "Must be at least %{value}",
       "required": "Required",
+      "search": "Search",
       "selectAnOption": "Select an option",
       "valueMustBeBetween": "Value must be between %{min} – %{max}"
     },
@@ -321,6 +322,7 @@
     }
   },
   "pageSensors": {
+    "searchForSensors": "Search for sensors",
     "table": {
       "currentValue": "Current value",
       "lowerWarning": "Lower warning",
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;
     }
   }
 };