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, 64 insertions, 0 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>