Global Search component
Added global Search component to Sensors page.
Signed-off-by: Suren Neware <sneware9@in.ibm.com>
Change-Id: I3121cc4e582c782fa7e9937738cefbeddc23610e
diff --git a/src/components/Global/Search.vue b/src/components/Global/Search.vue
new file mode 100644
index 0000000..d305017
--- /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>